function CounterCard({ item }) {
  const ref = React.useRef(null);
  const [active, setActive] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setActive(true); io.disconnect(); } });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const value = window.useCountUp(item.value, active);
  return (
    <div className="counter-card" ref={ref}>
      <div className="counter-num">{value}<span>{item.suffix}</span></div>
      <div className="counter-label">{item.label}</div>
    </div>
  );
}

function About() {
  const { Tag, Button, IconButton } = window.ArnelBiscarraDesignSystem_2766cb;
  const data = window.SITE_DATA;
  const tagStyle = { cursor: 'default', borderColor: 'var(--color-gray-700)', color: 'var(--color-gray-300)' };
  return (
    <section id="about" className="section container" data-screen-label="About">
      <Reveal><div className="eyebrow"><b>/</b> ABOUT</div></Reveal>
      <Reveal><h2 className="h2"><window.AnimatedText parts={[{t:'About '},{t:'Me',accent:true},{t:'.'}]} repel /></h2></Reveal>

      <div className="about-cards-grid">
        <Reveal className="about-card about-card-intro">
          <div className="about-card-label">Introduction</div>
          <p className="lede">
            I'm a graphic designer, web designer, and web developer passionate about creating
            creative digital experiences — from brand identities to full websites to
            print-ready apparel layouts.
          </p>
          <p className="lede" style={{ fontSize: 15 }}>
            I work across graphic design, branding, web design, and web development, with a
            growing focus on apparel design. I enjoy solving problems as much as I enjoy the
            craft itself, and I'm always learning new technologies to keep my work current.
          </p>
          <div className="about-hobbies-label">Focus Areas</div>
          <div className="about-tags">
            {data.aboutFocus.map((t) => <Tag key={t} style={tagStyle}>{t}</Tag>)}
          </div>
          <div className="about-hobbies-label">Outside of Work</div>
          <div className="about-tags">
            {data.hobbies.map((t) => <Tag key={t} style={tagStyle}>{t}</Tag>)}
          </div>
        </Reveal>

        <Reveal delay={60} className="about-card">
          <div className="about-card-label">Mission</div>
          <p className="about-card-text">{data.aboutMission}</p>
        </Reveal>

        <Reveal delay={100} className="about-card">
          <div className="about-card-label">What Makes Me Different</div>
          <p className="about-card-text">{data.aboutDifferentiator}</p>
        </Reveal>

        <Reveal delay={140} className="about-card">
          <div className="about-card-label">Experience</div>
          <div className="counters-grid">
            {data.counters.map((c) => <CounterCard key={c.label} item={c} />)}
          </div>
        </Reveal>

        <Reveal delay={180} className="about-card">
          <div className="about-card-label">Industries Worked With</div>
          <div className="about-tags">
            {data.aboutIndustries.map((t) => <Tag key={t} style={tagStyle}>{t}</Tag>)}
          </div>
        </Reveal>
      </div>

      <div className="about-cta-row">
        <Button variant="outline-white" onClick={() => { window.open('cv.html', '_blank'); }}>View My CV &#8599;</Button>
        <div className="about-socials">
          <IconButton ariaLabel="Facebook" onClick={() => window.open('https://web.facebook.com/arnelbiscarra94', '_blank')}><SocialGlyph name="facebook" /></IconButton>
          <IconButton ariaLabel="Messenger" onClick={() => window.open('https://m.me/arnelbiscarr94', '_blank')}><SocialGlyph name="messenger" /></IconButton>
          <IconButton ariaLabel="WhatsApp" onClick={() => window.open('https://wa.me/qr/4ID4HFVXR3UKB1', '_blank')}><SocialGlyph name="whatsapp" /></IconButton>
        </div>
      </div>
    </section>
  );
}

window.About = About;