// ─── Polished variant: about, services, skills, awards, contact ────────

function PolishedAbout() {
  const D = window.ARCLINE_DATA.about;
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!window.gsap || !ref.current) return;
    const ctx = gsap.context(() => {
      const lines = ref.current.querySelectorAll('h2 .line');
      gsap.from(lines, {
        yPercent: 100, opacity: 0,
        duration: 1, ease: 'expo.out', stagger: 0.08,
        scrollTrigger: { trigger: ref.current, start: 'top 70%' },
      });
      gsap.from(ref.current.querySelectorAll('.copy p, .stat'), {
        opacity: 0, y: 24, duration: 0.8, ease: 'power3.out', stagger: 0.08,
        scrollTrigger: { trigger: ref.current, start: 'top 65%' },
      });
      // Stats counters
      ref.current.querySelectorAll('.stat .num').forEach((el) => {
        const target = parseInt(el.dataset.num || '0', 10);
        const suffix = el.dataset.suffix || '';
        const prefix = el.dataset.prefix || '';
        const obj = { v: 0 };
        gsap.to(obj, {
          v: target, duration: 1.6, ease: 'power3.out',
          onUpdate: () => { el.textContent = `${prefix}${Math.round(obj.v)}${suffix}`; },
          scrollTrigger: { trigger: el, start: 'top 85%' },
        });
      });
    }, ref);
    return () => ctx.revert();
  }, []);
  return (
    <section id="about" className="p-about" ref={ref}>
      <div className="container">
        <div className="grid">
          <div>
            <div className="mono-label"><span className="slash">//</span>{D.eyebrow}</div>
          </div>
          <div>
            <h2 style={{ overflow: 'hidden' }}>
              {D.head.map((line, i) => (
                <span className="line" key={i} style={{ display: 'block' }}>
                  {i === D.headAccentLineIdx ? <em>{line}</em> : line}
                </span>
              ))}
            </h2>
            <div className="copy" style={{ marginTop: 40 }}>
              {D.copy.map((p, i) => <p key={i}>{p}</p>)}
            </div>
          </div>
        </div>
        <div className="stats">
          {D.stats.map((s, i) => {
            // parse num — handle $ and trailing chars
            const m = String(s.num).match(/^([+\-$]?)(\d+(?:\.\d+)?)(.*)$/);
            return (
              <div className="stat" key={i}>
                <div
                  className="num"
                  data-num={m ? m[2] : '0'}
                  data-prefix={m ? m[1] : ''}
                  data-suffix={m ? m[3] : ''}
                >
                  {m ? m[1] + '0' + m[3] : s.num}
                </div>
                <div className="lbl">{s.lbl}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function PolishedServices() {
  const D = window.ARCLINE_DATA.services;
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!window.gsap || !ref.current) return;
    const ctx = gsap.context(() => {
      gsap.from(ref.current.querySelectorAll('.row'), {
        opacity: 0, y: 32, duration: 0.7, ease: 'power3.out', stagger: 0.06,
        scrollTrigger: { trigger: ref.current.querySelector('.list'), start: 'top 75%' },
      });
    }, ref);
    return () => ctx.revert();
  }, []);
  return (
    <section id="services" className="p-services" ref={ref}>
      <div className="container">
        <div className="head">
          <div>
            <div className="mono-label"><span className="slash">//</span>{D.eyebrow}</div>
            <h2>{D.head[0]} <em>{D.head[1]}</em></h2>
          </div>
          <div className="copy">
            Six ways to work with us. We tend to start with one engagement and grow from there — most partnerships run 12 to 18 months.
          </div>
        </div>
        <div className="list">
          {D.items.map((it) => (
            <div className="row interactive" key={it.num}>
              <div className="num">{it.num}</div>
              <h3>{it.title}</h3>
              <p className="desc">{it.desc}</p>
              <div className="tags">
                {it.tags.map((t) => <span className="tag" key={t}>{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PolishedSkills() {
  const D = window.ARCLINE_DATA.skills;
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!window.gsap || !ref.current) return;
    const ctx = gsap.context(() => {
      gsap.from(ref.current.querySelectorAll('.col'), {
        opacity: 0, y: 24, duration: 0.7, ease: 'power3.out', stagger: 0.08,
        scrollTrigger: { trigger: ref.current.querySelector('.grid'), start: 'top 80%' },
      });
    }, ref);
    return () => ctx.revert();
  }, []);
  return (
    <section className="p-skills" ref={ref}>
      <div className="container">
        <div className="head">
          <div className="mono-label"><span className="slash">//</span>{D.eyebrow}</div>
          <h2>{D.head[0]} <em>{D.head[1]}</em></h2>
        </div>
        <div className="grid">
          {D.cols.map((c) => (
            <div className="col" key={c.num}>
              <div className="num">{c.num}</div>
              <h3>{c.title}</h3>
              <ul>{c.items.map((it) => <li key={it}>{it}</li>)}</ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PolishedAwards() {
  const D = window.ARCLINE_DATA.awards;
  return (
    <section className="p-awards">
      <div className="container">
        <div style={{ marginBottom: 40 }}>
          <div className="mono-label"><span className="slash">//</span>Recognition</div>
        </div>
        <div className="row">
          {D.map((a, i) => (
            <div className="award" key={i}>
              <div className="year">{a.year}</div>
              <h3>{a.title}</h3>
              <div className="lbl">{a.lbl}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PolishedContact() {
  const D = window.ARCLINE_DATA.contact;
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!window.gsap || !ref.current) return;
    const ctx = gsap.context(() => {
      gsap.from(ref.current.querySelectorAll('h2 .line'), {
        yPercent: 100, opacity: 0, duration: 1, ease: 'expo.out', stagger: 0.1,
        scrollTrigger: { trigger: ref.current, start: 'top 65%' },
      });
    }, ref);
    return () => ctx.revert();
  }, []);
  return (
    <section id="contact" className="p-contact" ref={ref}>
      <div className="hero-bg" style={{ opacity: 0.6 }}>
        <div className="hero-blob" style={{ top: '20%', right: '-10%' }} />
      </div>
      <div className="container">
        <div className="mono-label" style={{ justifyContent: 'center', display: 'flex' }}>
          <span><span className="slash">//</span>Get in touch</span>
        </div>
        <h2 style={{ overflow: 'hidden' }}>
          <span className="line" style={{ display: 'block' }}>{D.head[0]}</span>
          <span className="line" style={{ display: 'block' }}><em>{D.head[1]}</em></span>
        </h2>
        <p className="sub">{D.sub}</p>
        <div className="cta-row">
          <a href={D.primary.href} className="btn btn-primary">{D.primary.lbl} <span className="arr">→</span></a>
          <a href={D.secondary.href} className="btn btn-ghost">{D.secondary.lbl}</a>
        </div>
      </div>
      <footer className="p-foot">
        <div className="container">
          <div>Arcline Studio</div>
          <div>© 2025 — All rights reserved</div>
        </div>
      </footer>
    </section>
  );
}

window.PolishedAbout = PolishedAbout;
window.PolishedServices = PolishedServices;
window.PolishedSkills = PolishedSkills;
window.PolishedAwards = PolishedAwards;
window.PolishedContact = PolishedContact;