/* global React, PORTFOLIO_DATA, Vinyl3D, BgShapes, SectionHd, TiltCard, fmtDate, DetailModal */
const { useState, useMemo } = React;

const t = (obj, lang) => (typeof obj === "string" ? obj : obj?.[lang] ?? obj?.fr ?? "");

// ─────────────────────────────────────────────────────────────────────
// NAV
// ─────────────────────────────────────────────────────────────────────
function Nav({ lang, setLang, theme, setTheme, data }) {
  const links = lang === "fr"
    ? [["#about","À propos"],["#projects","Projets"],["#stack","Stack"],["#xp","Expérience"],["#passions","Passions"],["#contact","Contact"]]
    : [["#about","About"],["#projects","Projects"],["#stack","Stack"],["#xp","Experience"],["#passions","Off-hours"],["#contact","Contact"]];
  return (
    <nav className="nav">
      <a href="#top" className="brand">
        <span className="pulse"></span>
        {data.identity.name}
      </a>
      <div className="links">
        {links.map(([h, l]) => <a key={h} href={h}>{l}</a>)}
      </div>
      <div className="right">
        <span className="chip lang">
          <button className={lang === "fr" ? "active" : ""} onClick={() => setLang("fr")}>FR</button>
          <span style={{opacity:0.4}}>/</span>
          <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
        </span>
        <span className="chip" onClick={() => setTheme(theme === "dark" ? "light" : "dark")} style={{cursor:"default"}}>
          {theme === "dark" ? "◐ DARK" : "◑ LIGHT"}
        </span>
        <a href="#contact" className="chip" style={{background:"var(--accent)", color:"var(--accent-ink)", borderColor:"var(--accent)"}}>
          {lang === "fr" ? "Disponible →" : "Available →"}
        </a>
      </div>
    </nav>
  );
}

// ─────────────────────────────────────────────────────────────────────
// HERO
// ─────────────────────────────────────────────────────────────────────
function Hero({ lang, data }) {
  const meta = lang === "fr"
    ? [data.identity.location, "Disponible pour échanger", "CDI / freelance"]
    : [data.identity.location, "Open to opportunities", "Full-time / freelance"];
  return (
    <section className="hero" id="top">
      <div>
        <div className="meta">
          {meta.map((m, i) => <span key={i}>{m}</span>)}
        </div>
        <h1>
          front<span className="slash">‒</span>end<br/>react<span className="slash"> </span>dev<span className="slash">.</span>
        </h1>
        <p className="tag">{t(data.identity.tagline, lang)}</p>
        <div className="ctas">
          <a href="#projects" className="btn primary">
            {lang === "fr" ? "Voir les projets" : "See projects"}
            <span className="arr">→</span>
          </a>
          <a href="#contact" className="btn">
            {lang === "fr" ? "Me contacter" : "Get in touch"}
          </a>
          <a href={data.identity.resume || "#"} download className="btn">
            {lang === "fr" ? "Télécharger le CV" : "Download résumé"}
            <span className="arr">↓</span>
          </a>
        </div>
        <div className="eq" aria-hidden="true">
          {Array(7).fill(0).map((_, i) => <i key={i}></i>)}
        </div>
      </div>
      <Vinyl3D name={data.identity.name} />
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────
// ABOUT
// ─────────────────────────────────────────────────────────────────────
function About({ lang, data }) {
  const facts = lang === "fr"
    ? [
        { k: "Rôle", v: "Dev Front-End React" },
        { k: "Localisation", v: data.identity.location },
        { k: "Expérience", v: "2+ ans" },
        { k: "Statut", v: "Disponible pour échanger" },
      ]
    : [
        { k: "Role", v: "Front-End React Dev" },
        { k: "Based in", v: data.identity.location },
        { k: "Experience", v: "2+ years" },
        { k: "Status", v: "Open to opportunities" },
      ];

  // Split the first about paragraph to extract the headline phrase
  const lead = data.about[lang][0];
  const rest = data.about[lang].slice(1);

  return (
    <section className="section" id="about">
      <SectionHd
        num={lang === "fr" ? "01 / À PROPOS" : "01 / ABOUT"}
        title={lang === "fr" ? "Bonjour, je suis Gabbie." : "Hi, I'm Gabbie."}
        accentWord="Gabbie"
        sub={lang === "fr" ? "Dev Front-End React. Front-leaning, design-aware." : "Front-End React developer. Front-leaning, design-aware."}
      />
      <div className="about-editorial">
        <p className="about-lead">
          <span className="drop">{lead.charAt(0)}</span>
          {lead.slice(1)}
        </p>
        <div className="about-aside">
          <dl className="facts">
            {facts.map((f, i) => (
              <div key={i} className="fact">
                <dt>{f.k}</dt>
                <dd>{f.v}</dd>
              </div>
            ))}
          </dl>
          {rest.map((p, i) => <p key={i} className="about-secondary">{p}</p>)}
          <div className="aka">
            {data.identity.aka.map((a) => <span key={a}>{a}</span>)}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────
// PROJECTS
// ─────────────────────────────────────────────────────────────────────
function Projects({ lang, data, layout, threeDIntensity }) {
  const [filter, setFilter] = useState("all");
  const [openSlug, setOpenSlug] = useState(null);
  const filters = lang === "fr"
    ? [["all","Tout"],["music","Musique"],["tool","Outils"],["web","Web"]]
    : [["all","All"],["music","Music"],["tool","Tools"],["web","Web"]];

  const list = useMemo(() => {
    if (filter === "all") return data.projects;
    return data.projects.filter((p) => p.tags.includes(filter));
  }, [filter, data.projects]);

  const openProject = list.find((p) => p.slug === openSlug)
    || data.projects.find((p) => p.slug === openSlug);

  return (
    <section className="section" id="projects">
      <SectionHd
        num={lang === "fr" ? "02 / PROJETS" : "02 / PROJECTS"}
        title={lang === "fr" ? "Travaux récents." : "Recent work."}
        accentWord={lang === "fr" ? "Travaux" : "Recent"}
        sub={lang === "fr" ? "Sélection de projets — produits, outils internes et expérimentations." : "Selected projects — products, internal tools and experiments."}
      />
      <div className="proj-controls">
        {filters.map(([k, l]) => (
          <button key={k} className={filter === k ? "active" : ""} onClick={() => setFilter(k)}>
            {l} <span style={{opacity:0.5, marginLeft:4}}>
              {k === "all" ? data.projects.length : data.projects.filter(p => p.tags.includes(k)).length}
            </span>
          </button>
        ))}
      </div>
      <div className={`projects layout-${layout}`}>
        {list.map((p) => (
          <TiltCard
            key={p.slug}
            className="card"
            intensity={threeDIntensity * 0.7}
            role="button"
            tabIndex={0}
            onClick={() => setOpenSlug(p.slug)}
            onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setOpenSlug(p.slug); } }}
          >
            <div className={`visual ${p.tags.includes("music") ? "waveform" : ""}`}></div>
            <h3>{p.title} <span className="yr">— {p.year}</span></h3>
            <div className="blurb">{t(p.blurb, lang)}</div>
            <div className="meta">
              <span>{t(p.type, lang)}</span>
              <div className="stack">
                {p.stack.slice(0, 3).map((s) => <span key={s}>{s}</span>)}
              </div>
            </div>
            <div className="arrow">↗</div>
          </TiltCard>
        ))}
      </div>

      <DetailModal
        open={!!openProject}
        onClose={() => setOpenSlug(null)}
        lang={lang}
        kicker={openProject ? `${t(openProject.type, lang)} · ${openProject.year}` : ""}
        title={openProject ? openProject.title : ""}
        subtitle={openProject ? t(openProject.blurb, lang) : ""}
        stack={openProject ? openProject.stack : []}
        tags={openProject ? openProject.tags : []}
        details={openProject ? openProject.details : null}
      />
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────
// STACK
// ─────────────────────────────────────────────────────────────────────
function Stack({ lang, data }) {
  return (
    <section className="section" id="stack">
      <SectionHd
        num={lang === "fr" ? "03 / STACK" : "03 / STACK"}
        title={lang === "fr" ? "Stack technique." : "Technical stack."}
        accentWord={lang === "fr" ? "technique" : "Technical"}
        sub={lang === "fr" ? "Ce avec quoi je travaille au quotidien — et ce sur quoi je sais monter vite." : "What I work with daily — and what I can ramp up on quickly."}
      />
      <div className="stack-grid">
        {data.stack.map((col, i) => (
          <div className="stack-col" key={i}>
            <h4>{t(col.group, lang)}</h4>
            <ul>
              {col.items.map((it) => <li key={it}>{it}</li>)}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────
// EXPERIENCE
// ─────────────────────────────────────────────────────────────────────
function Experience({ lang, data }) {
  const [openIdx, setOpenIdx] = useState(null);
  const openXp = openIdx != null ? data.experience[openIdx] : null;

  return (
    <section className="section" id="xp">
      <SectionHd
        num={lang === "fr" ? "04 / EXPÉRIENCE" : "04 / EXPERIENCE"}
        title={lang === "fr" ? "Parcours professionnel." : "Professional path."}
        accentWord={lang === "fr" ? "professionnel" : "Professional"}
        sub={lang === "fr" ? "Du plus récent au début. Sur demande, je peux détailler chaque ligne." : "Most recent first. Ask me to drill down on any line."}
      />
      <div className="timeline">
        {data.experience.map((e, i) => (
          <div
            className="row clickable"
            key={i}
            role="button"
            tabIndex={0}
            onClick={() => setOpenIdx(i)}
            onKeyDown={(ev) => { if (ev.key === "Enter" || ev.key === " ") { ev.preventDefault(); setOpenIdx(i); } }}
          >
            <div className="yr">{e.year}</div>
            <div className="role">
              {t(e.role, lang)}
              <span className="where">{t(e.where, lang)}</span>
            </div>
            <div className="desc">{t(e.desc, lang)}</div>
            <div className="row-arrow" aria-hidden="true">→</div>
          </div>
        ))}
      </div>

      <DetailModal
        open={!!openXp}
        onClose={() => setOpenIdx(null)}
        lang={lang}
        kicker={openXp ? `${t(openXp.where, lang)} · ${openXp.year}` : ""}
        title={openXp ? t(openXp.role, lang) : ""}
        subtitle={openXp ? t(openXp.desc, lang) : ""}
        details={openXp ? openXp.details : null}
      />
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────
// DJ SETS
// ─────────────────────────────────────────────────────────────────────
function DJSets({ lang, data }) {
  return (
    <section className="section" id="sets">
      <SectionHd
        num={lang === "fr" ? "05 / DJ SETS" : "05 / DJ SETS"}
        title={lang === "fr" ? "À venir derrière les platines." : "Up next behind the decks."}
        accentWord={lang === "fr" ? "platines" : "decks"}
        sub={lang === "fr" ? "Cinq dates confirmées. Demande la guestlist par mail." : "Five upcoming dates. Ping me for guestlist."}
      />
      <div className="sets">
        {data.djSets.map((s, i) => {
          const d = fmtDate(s.date, lang);
          return (
            <div className="set" key={i}>
              <div className="day">{d.day}<span className="mo">{d.mo} {d.year}</span></div>
              <div>
                <div className="venue">{s.venue}</div>
                <div className="city">{s.city}</div>
              </div>
              <div className="kind">{t(s.kind, lang)}</div>
              <span className={`status ${s.status}`}>
                {s.status === "confirmed"
                  ? (lang === "fr" ? "Confirmé" : "Confirmed")
                  : (lang === "fr" ? "À confirmer" : "Tentative")}
              </span>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────
// CONTACT
// ─────────────────────────────────────────────────────────────────────
function Contact({ lang, data }) {
  return (
    <section className="section" id="contact">
      <SectionHd
        num={lang === "fr" ? "06 / CONTACT" : "06 / CONTACT"}
        title={lang === "fr" ? "Discutons." : "Let's talk."}
        accentWord="."
        sub={lang === "fr" ? "Pour une mission, un CDI, un projet perso — réponse sous 48h." : "For a contract, a full-time role, a side project — reply within 48h."}
      />
      <div className="contact">
        <div className="lead">
          {lang === "fr" ? (
            <>Un produit à <em>construire</em> ?<br/>
            Écris-moi à <a href={`mailto:${data.identity.email}`}>{data.identity.email}</a>.</>
          ) : (
            <>Got something to <em>build</em>?<br/>
            Reach me at <a href={`mailto:${data.identity.email}`}>{data.identity.email}</a>.</>
          )}
        </div>
        <div className="socials">
          {data.identity.socials.map((s) => (
            <a key={s.label} href={s.url} target="_blank" rel="noreferrer">
              <span>{s.label}</span>
              <span className="h">{s.handle}</span>
              <span>↗</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────
// FOOTER
// ─────────────────────────────────────────────────────────────────────
function Footer({ lang, data }) {
  const yr = new Date().getFullYear();
  return (
    <footer className="foot">
      <span>© {yr} {data.identity.name}</span>
      <span className="now"><span className="dot"></span>
        {lang === "fr" ? "En ligne · disponible pour échanger" : "Online · open to opportunities"}
      </span>
      <span className="grow"></span>
      <span>{lang === "fr" ? "Construit avec du café et de la musique" : "Built with coffee and music"}</span>
      <span>v0.1 — May 2026</span>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, About, Projects, Stack, Experience, DJSets, Contact, Footer });