/* ============================================================
   SECTIONS - bilingual. Hero, Work, CV, About, Contact + switch
   ============================================================ */
const { useState: uS, useEffect: uE, useRef: uR } = React;
function FlagSwatch({ code }) {
  if (code === "fr") return (
    <svg className="flag" viewBox="0 0 3 2" aria-hidden="true">
      <rect width="1" height="2" x="0" fill="#0055A4" /><rect width="1" height="2" x="1" fill="#fff" /><rect width="1" height="2" x="2" fill="#EF4135" />
    </svg>
  );
  if (code === "en") return (
    <svg className="flag" viewBox="0 0 3 2" aria-hidden="true">
      <rect width="3" height="2" fill="#00247d" />
      <path d="M0,0 L3,2 M3,0 L0,2" stroke="#fff" strokeWidth="0.4" />
      <path d="M0,0 L3,2 M3,0 L0,2" stroke="#cf142b" strokeWidth="0.16" />
      <path d="M1.5,0 V2 M0,1 H3" stroke="#fff" strokeWidth="0.6" />
      <path d="M1.5,0 V2 M0,1 H3" stroke="#cf142b" strokeWidth="0.32" />
    </svg>
  );
  return (
    <svg className="flag" viewBox="0 0 3 2" aria-hidden="true">
      <rect width="3" height="0.667" y="0" fill="#ED2939" /><rect width="3" height="0.667" y="0.667" fill="#fff" /><rect width="3" height="0.666" y="1.334" fill="#00A1DE" />
    </svg>
  );
}

/* ---------- language switch ---------- */
function LangSwitch({ lang, onChange }) {
  const langs = [["fr", "FR"], ["en", "EN"], ["lu", "LU"]];
  return (
    <div className="lang-switch" role="group" aria-label="Language">
      {langs.map(([code, label], i) => (
        <React.Fragment key={code}>
          {i > 0 && <span className="sep">/</span>}
          <button className={lang === code ? "on" : ""} data-cursor={label} onClick={() => onChange(code)}>
            <FlagSwatch code={code} /><Emblem kind={code} /><span>{label}</span>
          </button>
        </React.Fragment>
      ))}
    </div>);

}

/* ---------- HERO ---------- */
function Hero({ name, lang }) {
  const L = window.I18N[lang];
  const parts = name.split(" ");
  return (
    <header className="hero wrap" id="top">
      <HeroMap />
      <div className="hero-top">
        <div className="hero-meta">
          <span className="hero-status"><span className="dot"></span>{L.statusOpen}</span>
          <p>{L.heroIntro}</p>
        </div>
        <div className="eyebrow">{L.portfolioTag}</div>
      </div>

      <h1 className="hero-title">
        {parts.map((p, i) => <span className="line" key={i}><span>{p}</span></span>)}
      </h1>

      <div className="hero-foot">
        <p className="hero-tagline">{L.tagline}</p>
        <div className="scroll-cue">{L.scroll} <span className="bar"></span></div>
      </div>
    </header>);

}

/* ---------- WORK ---------- */
function Work({ lang, onOpen }) {
  const L = window.I18N[lang];
  const projects = window.PROJECTS;
  const [active, setActive] = uS(null);
  const floatRef = uR(null);
  const pos = uR({ x: 0, y: 0, tx: 0, ty: 0 });

  uE(() => {
    const el = floatRef.current;
    const move = (e) => {pos.current.tx = e.clientX;pos.current.ty = e.clientY;};
    let raf;
    const loop = () => {
      const p = pos.current;
      p.x += (p.tx - p.x) * 0.12;p.y += (p.ty - p.y) * 0.12;
      if (el) el.style.transform = `translate(${p.x}px, ${p.y}px) translate(-50%, -50%) scale(${active !== null ? 1 : 0.92})`;
      raf = requestAnimationFrame(loop);
    };
    loop();
    window.addEventListener("mousemove", move);
    return () => {cancelAnimationFrame(raf);window.removeEventListener("mousemove", move);};
  }, [active]);

  return (
    <section className="section wrap" id="work">
      <div className="sec-head">
        <h2>{L.workTitle[0]}<br />{L.workTitle[1]}</h2>
        <span className="count">{L.workCount(projects.length)}</span>
      </div>

      <div className={"index-list" + (active !== null ? " muted" : "")}>
        {projects.map((p, i) => {
          const t = p[lang];
          return (
            <div className="row" key={p.id}
            data-cursor={L.view} data-cursor-solid
            onMouseEnter={() => setActive(i)}
            onMouseLeave={() => setActive(null)}
            onClick={() => onOpen(p)}>
              <span className="num">{String(i + 1).padStart(2, "0")}</span>
              <span className="title">{t.title}</span>
              <span className="right">
                <span className="tags">
                  {p.status && <span className="tag tag-live">{p.status[lang]}</span>}
                  {t.tags.map((tag) => <span className="tag" key={tag}>{tag}</span>)}
                </span>
                <span className="yr">{p.year}</span>
              </span>
              <span className="arrow">↗</span>
            </div>);

        })}
      </div>

      <div className={"floater" + (active !== null ? " show" : "")} ref={floatRef}>
        {active !== null && <PreviewTile project={projects[active]} lang={lang} />}
      </div>
    </section>);

}

/* ---------- LIGHTBOX ---------- */
function Lightbox({ project, lang, onClose }) {
  const L = window.I18N[lang];
  const [shown, setShown] = uS(false);
  uE(() => {
    const id = requestAnimationFrame(() => setShown(true));
    const onKey = (e) => {if (e.key === "Escape") onClose();};
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {cancelAnimationFrame(id);window.removeEventListener("keydown", onKey);document.body.style.overflow = "";};
  }, []);
  if (!project) return null;
  const t = project[lang];
  return (
    <div className={"lb" + (shown ? " in" : "")}>
      <div className="lb-bg" onClick={onClose}></div>
      <div className="lb-card">
        <div className="lb-head">
          <h3>{t.title}</h3>
          <a className="x" data-cursor={L.close} onClick={onClose}>✕</a>
        </div>
        <div className="lb-preview">
          <PreviewTile project={project} lang={lang} label={project.live ? L.live : L.pageNote} />
        </div>
        <div className="lb-foot">
          <p className="desc">{t.desc}</p>
          <div className="tags">
            {project.status && <span className="tag tag-live">{project.status[lang]}</span>}
            {t.tags.map((tag) => <span className="tag" key={tag}>{tag}</span>)}
            <span className="tag">{project.year}</span>
          </div>
        </div>
      </div>
    </div>);

}

/* ---------- CV / TIMELINE ---------- */
function CV({ lang }) {
  const L = window.I18N[lang];
  return (
    <section className="section wrap" id="cv">
      <div className="sec-head">
        <h2>{L.cvTitle}</h2>
        <span className="count">{L.cvKicker}</span>
      </div>
      <ol className="timeline">
        {window.RESUME.map((e, i) => {
          const c = e[lang];
          return (
            <li className="tl-item reveal" key={i}>
              <span className="tl-period">{e.period[lang]}</span>
              <span className="tl-dot" aria-hidden="true"></span>
              <div className="tl-body">
                <h3>{c.role}</h3>
                <span className="tl-org">{c.org}</span>
                {e.logo && <img className="tl-logo" src={e.logo} alt={c.org} loading="lazy" />}
                <p style={{ whiteSpace: "pre-line" }}>{c.note}</p>
              </div>
            </li>);

        })}
      </ol>
    </section>);

}

/* ---------- ABOUT ---------- */
function About({ lang }) {
  const L = window.I18N[lang];
  return (
    <section className="section wrap" id="about">
      <div className="sec-head">
        <h2>{L.aboutTitle}</h2>
        <span className="count">{L.aboutKicker}</span>
      </div>
      <div className="about-grid">
        <p className="big reveal">{L.aboutBig}</p>
        <div className="body reveal">
          <p>{L.aboutP1}<span className="m">{L.aboutP1m}</span></p>
          <div className="facts">
            {L.facts.map((f, i) =>
            <div className="fact" key={i}><span className="k">{f[0]}</span><span className="v" style={{ whiteSpace: "pre-line" }}>{f[1]}</span></div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- CONTACT / FOOTER ---------- */
function Contact({ lang, email, linkedin }) {
  const L = window.I18N[lang];
  return (
    <section className="contact wrap" id="contact">
      <div className="eyebrow reveal">{L.contactKicker}</div>
      <h2 className="big reveal" style={{ marginTop: "18px" }}>{L.contactBig[0]}<br />{L.contactBig[1]}</h2>
      <p className="reveal" style={{ marginTop: "26px", fontSize: "clamp(18px,2.4vw,28px)", maxWidth: "26ch", lineHeight: 1.25 }}>
        {L.contactLine}<a className="mail" href={"mailto:" + email} data-cursor={L.linkEmail}>{email}</a>
      </p>
      <div className="foot">
        <span className="copy">© {new Date().getFullYear()} Alexandre Halter - {L.copy}</span>
        <div className="links">
          <a href={"mailto:" + email} data-cursor={L.linkEmail}>{L.linkEmail}</a>
          <a href={linkedin} target="_blank" rel="noopener" data-cursor="LinkedIn">{L.linkVisit}</a>
          <a href="#top" data-cursor="↑">{L.linkTop}</a>
        </div>
      </div>
    </section>);

}

Object.assign(window, { LangSwitch, Hero, Work, Lightbox, CV, About, Contact });