// sections.jsx — all portfolio sections (exported to window)
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

const ArrowUR = () => (
  <svg className="arr" width="13" height="13" viewBox="0 0 13 13" fill="none" aria-hidden="true">
    <path d="M3.5 9.5L9.5 3.5M9.5 3.5H4.5M9.5 3.5V8.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);
const ArrowR = () => (
  <svg className="arr" width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
    <path d="M3 7.5h8M7.5 4l3.5 3.5L7.5 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

function SecHead({ idx, kicker, title, desc, mono }) {
  return (
    <div className="sec-head">
      <Reveal className="kicker"><span className="kicker__idx">{idx}</span><span>{kicker}</span></Reveal>
      <Reveal as="h2" className="sec-title" delay={1}>{title}</Reveal>
      {desc && <Reveal as="p" className="sec-desc" delay={2}>{desc}</Reveal>}
    </div>
  );
}

/* ---------------- HERO ---------------- */
function Hero({ c }) {
  const h = c.hero;
  return (
    <header className="section hero" id="top">
      <div className="wrap">
        <div className="hero__grid">
          <div className="hero__col">
            <Reveal className="hero__eyebrow"><span className="dot"></span>{h.eyebrow}</Reveal>
            <Reveal as="h1" className="hero__title" delay={1}>
              {h.titleLine1}<br /><span className="l2">{h.titleLine2}</span>
            </Reveal>
            <Reveal as="p" className="hero__lead" delay={2}>{h.lead}</Reveal>
            <Reveal as="p" className="hero__lead2" delay={3}>{h.lead2}</Reveal>
            <Reveal className="hero__cta" delay={4}>
              <a className="btn btn--primary" href="#projetos">{h.ctaPrimary}<ArrowR /></a>
              <a className="btn btn--ghost" href="#contato">{h.ctaSecondary}</a>
            </Reveal>
          </div>
          <HeroVisual />
        </div>
        <div className="stats">
          {h.stats.map((s, i) => <StatItem key={i} stat={s} />)}
        </div>
      </div>
    </header>
  );
}

/* ---------------- SKILLS ---------------- */
function Skills({ c }) {
  const s = c.skills;
  const onMove = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    e.currentTarget.style.setProperty("--mx", `${((e.clientX - r.left) / r.width) * 100}%`);
  };
  return (
    <section className="section" id="skills">
      <div className="wrap">
        <SecHead idx={s.index} kicker={s.kicker} title={s.title} desc={s.desc} />
        <div className="skills-grid">
          {s.items.map((it, i) => (
            <Reveal key={i} className="skill" delay={(i % 3) + 1} onMouseMove={onMove}>
              <div className="skill__n">{String(i + 1).padStart(2, "0")}</div>
              <h3 className="skill__title">{it.title}</h3>
              <p className="skill__desc">{it.desc}</p>
              <div className="chips">{it.tags.map((t) => <span className="chip" key={t}>{t}</span>)}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- EXPERIENCE ---------------- */
function LangBar({ row }) {
  const ref = useRefS(null);
  const inView = useInViewport(ref, { margin: 0.0 });
  return (
    <div className="lang-row">
      <div className="lang-top">
        <span className="lang-name">{row.name}</span>
        <span className="lang-level">{row.level}</span>
      </div>
      <div className="lang-bar"><div className="lang-fill" ref={ref} style={{ width: inView ? row.pct + "%" : "0%" }}></div></div>
    </div>
  );
}

function Experience({ c }) {
  const e = c.experience;
  return (
    <section className="section" id="experiencia">
      <div className="wrap">
        <SecHead idx={e.index} kicker={e.kicker} title={e.title} desc={e.desc} />
        <div className="exp-layout">
          <div className="timeline">
            {e.items.map((it, i) => (
              <Reveal key={i} className={"tl-item" + (it.current ? " tl-item--current" : "")} delay={Math.min(i, 3)}>
                <span className="tl-dot"></span>
                <div className="tl-meta">
                  <span className="tl-period">{it.period}</span>
                  {it.current && <span className="badge-now">{c.code === "PT" ? "Atual" : "Now"}</span>}
                  <span className="tl-loc">{it.location}</span>
                </div>
                <div className="tl-role">{it.role} <span className="org">· {it.org}</span></div>
                <p className="tl-desc">{it.desc}</p>
              </Reveal>
            ))}
          </div>
          <Reveal className="exp-aside" delay={1}>
            <div className="aside-card">
              <h4>{e.languagesTitle}</h4>
              {e.languages.map((l) => <LangBar key={l.name} row={l} />)}
            </div>
            <div className="aside-card">
              <h4>{e.certsTitle}</h4>
              <div className="cert-list">
                {e.certs.map((ct) => (
                  <div className="cert" key={ct}>
                    <svg className="tick" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M3 8l3 3 6-7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    <span>{ct}</span>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------------- INTERLUDE (mid-page 3D band) ---------------- */
function Interlude({ c }) {
  const it = c.interlude;
  return (
    <section className="interlude" aria-label={it.kicker}>
      <InterludeVisual />
      <div className="interlude__overlay"></div>
      <div className="wrap interlude__inner">
        <Reveal className="interlude__kicker"><span className="interlude__dot"></span>{it.kicker}</Reveal>
        <Reveal as="p" className="interlude__motto" delay={1}>
          <span className="interlude__quote">“</span>{it.motto}
        </Reveal>
        <Reveal as="p" className="interlude__sub" delay={2}>
          {it.sub}<span className="interlude__quote">”</span>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- PROJECTS ---------------- */
function Projects({ c }) {
  const p = c.projects;
  return (
    <section className="section" id="projetos">
      <div className="wrap">
        <SecHead idx={p.index} kicker={p.kicker} title={p.title} />
        <div className="proj-grid">
          {p.items.map((it, i) => (
            <Reveal key={i} className="proj" delay={(i % 2) + 1}>
              <div className="proj__top">
                <div>
                  <h3 className="proj__name">{it.name}</h3>
                  <div className="proj__meta">{it.meta}</div>
                </div>
                <a className="proj__repo" href="https://github.com/lucassilvasoftware" target="_blank" rel="noopener">{p.repo}<ArrowUR /></a>
              </div>
              <p className="proj__tagline">{it.tagline}</p>
              <div className="proj__oi">
                <div className="proj__oi-block">
                  <span className="proj__oi-label">{p.objLabel}</span>
                  <p className="proj__oi-text">{it.objective}</p>
                </div>
                <div className="proj__oi-block proj__oi-block--impact">
                  <span className="proj__oi-label">{p.impactLabel}</span>
                  <p className="proj__oi-text">{it.impact}</p>
                </div>
              </div>
              <details className="proj__tech">
                <summary>{p.techLabel}<span className="proj__tech-chev">+</span></summary>
                <div className="proj__points">
                  {it.points.map((pt, j) => (
                    <div className="proj__pt" key={j}><span className="b">◆</span><span>{pt}</span></div>
                  ))}
                </div>
              </details>
              <div className="chips">{it.tags.map((t) => <span className="chip" key={t}>{t}</span>)}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- CLIENTS ---------------- */
function Clients({ c }) {
  const cl = c.clients;
  return (
    <section className="section" id="empresas">
      <div className="wrap">
        <SecHead idx={cl.index} kicker={cl.kicker} title={cl.title} desc={cl.desc} />
        <Reveal className="clients-grid" delay={1}>
          {cl.list.map((name) => (
            <div className="client" key={name}><span className="client__d"></span>{name}</div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- PRINCIPLES + APPROACH ---------------- */
function Principles({ c }) {
  const pr = c.principles;
  return (
    <section className="section" id="principios">
      <div className="wrap">
        <SecHead idx={pr.index} kicker={pr.kicker} title={pr.title} desc={pr.desc} />
        <div className="prin-grid">
          {pr.items.map((it, i) => (
            <Reveal key={i} className="prin" delay={i + 1}>
              <div className="prin__n">{String(i + 1).padStart(2, "0")}</div>
              <h3 className="prin__title">{it.title}</h3>
              <p className="prin__desc">{it.desc}</p>
            </Reveal>
          ))}
        </div>
        <div className="approach">
          <Reveal as="h3" className="approach__head">{pr.approachTitle}</Reveal>
          <Reveal className="approach-grid" delay={1}>
            {pr.approach.map((a) => (
              <div className="appr" key={a.title}>
                <div className="appr__title"><span className="d"></span>{a.title}</div>
                <p className="appr__desc">{a.desc}</p>
              </div>
            ))}
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------------- CONTACT ---------------- */
function Contact({ c }) {
  const ct = c.contact;
  return (
    <section className="section contact" id="contato">
      <div className="wrap">
        <div className="contact-layout">
          <div>
            <Reveal className="kicker"><span className="kicker__idx">{ct.index}</span><span>{ct.kicker}</span></Reveal>
            <Reveal as="h2" className="contact__title" delay={1}>{ct.title}</Reveal>
            <Reveal as="p" className="contact__desc" delay={2}>{ct.desc}</Reveal>
            <Reveal className="contact__links" delay={3}>
              {ct.links.filter((l) => l.label !== ct.links[1].label).map((l, i) => (
                <a key={i} className={"btn " + (l.primary ? "btn--primary" : "btn--ghost")} href={l.href} target="_blank" rel="noopener">
                  {l.label}{l.primary ? <ArrowR /> : <ArrowUR />}
                </a>
              ))}
            </Reveal>
          </div>
          <Reveal className="profile-card" delay={2}>
            <div className="profile-card__photo">
              <img src="assets/lucas.jpg" alt={ct.name} loading="lazy" />
            </div>
            <div className="profile-card__name">{ct.name}</div>
            <div className="profile-card__role">{ct.role}</div>
            <div className="profile-card__meta">{ct.meta}</div>
            <div className="profile-card__divider"></div>
            <div className="profile-card__mini">
              <a href="https://www.linkedin.com/in/lucassilvasoftware" target="_blank" rel="noopener">LinkedIn</a>
              <a href="https://github.com/lucassilvasoftware" target="_blank" rel="noopener">GitHub</a>
              <a href="mailto:lucasreboucas100@gmail.com">Email</a>
            </div>
          </Reveal>
        </div>
        <footer className="footer">
          <div className="footer__left">
            <span>{ct.copyright}</span>
          </div>
          <div className="footer__note">{ct.footerNote}</div>
        </footer>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Skills, Experience, Interlude, Projects, Clients, Principles, Contact });