// app.jsx — Kengsleys Louissaint portfolio main app

const { useState, useEffect, useRef, useMemo } = React;
const { KATAKANA_GRID, SERVICES, PROJECTS, STACK, PROCESS, BOOT_LINES } =
  window.PORTFOLIO_DATA;

/* ─── Boot overlay ─────────────────────────────────────────────────────── */
function BootOverlay({ onDone }) {
  const [lines, setLines] = useState([]);
  const [pct, setPct] = useState(0);
  const [done, setDone] = useState(false);

  useEffect(() => {
    let cancelled = false;
    let i = 0;
    let total = BOOT_LINES.length;

    function next() {
      if (cancelled) return;
      if (i >= total) {
        setPct(100);
        setTimeout(() => {
          setDone(true);
          setTimeout(onDone, 400);
        }, 200);
        return;
      }
      setLines((prev) => [...prev, BOOT_LINES[i].c]);
      setPct(Math.round(((i + 1) / total) * 100));
      i++;
      setTimeout(next, BOOT_LINES[i - 1]?.t ?? 80);
    }
    next();
    return () => {
      cancelled = true;
    };
  }, []);

  function skip() {
    setDone(true);
    setTimeout(onDone, 200);
  }

  return (
    <div className={"boot" + (done ? " done" : "")}>
      <div className="boot-inner">
        <div className="boot-hd">
          <span>KENGS-OS // BOOT SEQUENCE</span>
          <span className="acc">●  SYSTEM ONLINE</span>
        </div>
        <div className="boot-logo">
          <div className="logo-badge"><span className="tl"></span><span className="tr"></span><span className="bl"></span><span className="br"></span></div>
        </div>
        <div className="boot-lines">
          {lines.map((l, i) => (
            <div className="ln" key={i}>{l}</div>
          ))}
        </div>
        <div className="boot-bar"><i style={{ width: pct + "%" }}></i></div>
        <div className="boot-skip">
          <span>{pct}%  //  loading assets</span>
          <button onClick={skip}>[ ESC ] skip</button>
        </div>
      </div>
    </div>
  );
}

/* ─── Typewriter ───────────────────────────────────────────────────────── */
function Typewriter({ phrases, speed = 38, hold = 1800, prompt = "$" }) {
  const [pi, setPi] = useState(0);
  const [text, setText] = useState("");
  const [del, setDel] = useState(false);

  useEffect(() => {
    const full = phrases[pi];
    let timer;
    if (!del && text === full) {
      timer = setTimeout(() => setDel(true), hold);
    } else if (del && text === "") {
      setDel(false);
      setPi((pi + 1) % phrases.length);
    } else {
      timer = setTimeout(
        () => setText(del ? full.slice(0, text.length - 1) : full.slice(0, text.length + 1)),
        del ? speed / 2 : speed
      );
    }
    return () => clearTimeout(timer);
  }, [text, del, pi, phrases, speed, hold]);

  return (
    <div className="hero-typer">
      <span className="prompt">{prompt}</span>
      <span>{text}</span>
      <span className="caret"></span>
    </div>
  );
}

/* ─── Top bar ──────────────────────────────────────────────────────────── */
function TopBar() {
  const [time, setTime] = useState("");
  useEffect(() => {
    const fmt = () => {
      const d = new Date();
      const pad = (n) => String(n).padStart(2, "0");
      return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
    };
    setTime(fmt());
    const i = setInterval(() => setTime(fmt()), 1000);
    return () => clearInterval(i);
  }, []);

  return (
    <div className="topbar">
      <div className="container topbar-inner">
        <div className="topbar-l">
          <span><span className="dot"></span>&nbsp;&nbsp;ONLINE · ACCEPTING CLIENTS</span>
          <span className="sep">·</span>
          <span className="kana">モントリオール · GMT-5</span>
        </div>
        <div className="topbar-r">
          <span>SYS.UPTIME / 99.98%</span>
          <span className="sep">·</span>
          <span>LOCAL.TIME / <span style={{ color: "var(--accent)" }}>{time}</span></span>
        </div>
      </div>
    </div>
  );
}

/* ─── Primary Nav ──────────────────────────────────────────────────────── */
function Nav() {
  return (
    <header className="container">
      <nav className="nav">
        <a href="#" className="brand">
          <span className="brand-mark" aria-label="Kengsleys Louissaint logo"></span>
          <span className="brand-text">
            <div className="n1">Kengsleys Louissaint</div>
            <div className="n2">Designer · Full-Stack Dev</div>
          </span>
        </a>
        <div className="nav-links">
          <a href="#services"><span className="num">01</span>Services</a>
          <a href="#portfolio"><span className="num">02</span>Portfolio</a>
          <a href="#stack"><span className="num">03</span>Stack</a>
          <a href="#process"><span className="num">04</span>Process</a>
          <a href="#contact"><span className="num">05</span>Contact</a>
        </div>
        <a href="#contact" className="nav-cta">
          <span style={{ color: "var(--neon-gn)" }}>●</span> Démarrer un projet
        </a>
      </nav>
    </header>
  );
}

/* ─── Hero ─────────────────────────────────────────────────────────────── */
function Hero() {
  return (
    <section className="hero container" data-screen-label="01 Hero">
      <div className="hero-tag">
        <span className="bracket">[</span>
        <span>PORTFOLIO v4.0.0</span>
        <span className="bracket">/</span>
        <span className="kana">ケングスレイ・ルイサン</span>
        <span className="bracket">]</span>
      </div>

      <h1 className="hero-title">
        <span className="line">Designer &amp;</span>
        <span className="line stroke">Full-Stack</span>
        <span className="line">
          <span className="glitch" data-text="Developer.">Developer<span className="accent">_</span></span>
        </span>
      </h1>

      <Typewriter
        phrases={[
          "spécialiste Django · Python · JS · sites & apps full-stack",
          "je code des produits web qui marchent vite et fort.",
          "design d'identité, sites vitrines, plateformes SaaS.",
          "basé à Montréal, QC · disponible worldwide · remote-first",
        ]}
      />

      <div className="hero-ctas">
        <a href="#contact" className="btn btn-primary">
          <span className="glyph">▶</span>
          Lancer une mission
        </a>
        <a href="#portfolio" className="btn">
          <span className="glyph">◆</span>
          Voir les projets
        </a>
        <a href="#services" className="btn">
          <span className="glyph">◇</span>
          Services &amp; tarifs
        </a>
      </div>

      <div className="hero-meta">
        <div className="hero-meta-cell">
          <div className="k">Projets livrés</div>
          <div className="v">12<span className="accent">+</span></div>
        </div>
        <div className="hero-meta-cell">
          <div className="k">Sites en production</div>
          <div className="v">2<span className="accent">/2</span></div>
        </div>
        <div className="hero-meta-cell">
          <div className="k">Temps de réponse</div>
          <div className="v">&lt;24<span className="accent">h</span></div>
        </div>
        <div className="hero-meta-cell">
          <div className="k">Stack maîtrisée</div>
          <div className="v">10<span className="accent">/10</span></div>
        </div>
      </div>

      <aside className="hero-side" aria-hidden="true">
        <div className="hero-side-hd">
          <span>~/identity.py</span>
          <span className="dots"><span></span><span></span><span></span></span>
        </div>
        <div className="hero-side-body">
          <div className="ln"><span className="lnum">01</span><span><span className="kw">class</span> <span className="fn">Kengsleys</span>:</span></div>
          <div className="ln"><span className="lnum">02</span><span>&nbsp;&nbsp;role = <span className="str">"full_stack"</span></span></div>
          <div className="ln"><span className="lnum">03</span><span>&nbsp;&nbsp;stack = [</span></div>
          <div className="ln"><span className="lnum">04</span><span>&nbsp;&nbsp;&nbsp;&nbsp;<span className="str">"python"</span>, <span className="str">"django"</span>,</span></div>
          <div className="ln"><span className="lnum">05</span><span>&nbsp;&nbsp;&nbsp;&nbsp;<span className="str">"js"</span>, <span className="str">"react"</span>, <span className="str">"sql"</span></span></div>
          <div className="ln"><span className="lnum">06</span><span>&nbsp;&nbsp;]</span></div>
          <div className="ln"><span className="lnum">07</span><span>&nbsp;&nbsp;available = <span className="pn">True</span></span></div>
          <div className="ln"><span className="lnum">08</span><span></span></div>
          <div className="ln"><span className="lnum">09</span><span><span className="com"># neo-tokyo build crew</span></span></div>
          <div className="ln"><span className="lnum">10</span><span><span className="fn">deploy</span>(target=<span className="str">"prod"</span>)</span></div>
        </div>
      </aside>
    </section>
  );
}

/* ─── Marquee ──────────────────────────────────────────────────────────── */
function Marquee() {
  const items = [
    "Available for hire",
    "Full-stack dev",
    "ウェブデザイン",
    "Django certified",
    "Cyberpunk by night",
    "Remote worldwide",
    "Pixel-perfect",
    "コードと美学",
  ];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {[...items, ...items, ...items].map((t, i) => (
          <span key={i}>
            <span className={i % 2 ? "" : "stroke"}>{t}</span>
            <span className="star"> ✦ </span>
          </span>
        ))}
      </div>
    </div>
  );
}

/* ─── Services ─────────────────────────────────────────────────────────── */
function Services() {
  return (
    <section id="services" className="section container" data-screen-label="02 Services">
      <div className="section-head">
        <div>
          <div className="sec-idx">
            <span className="accent">[02]</span> &nbsp;/&nbsp; services.modules &nbsp;//&nbsp; <span style={{ color: "var(--accent-2)" }}>サービス</span>
          </div>
          <h2 className="sec-title">
            What I <span className="stroke">build</span>.
          </h2>
        </div>
        <div className="sec-sub">
          Quatre modules, un seul opérateur. <span className="accent">$</span> chaque service est documenté, scopé, livré avec démo de recette et support 30j.
        </div>
      </div>

      <div className="svc-grid">
        {SERVICES.map((s, i) => (
          <article className="svc" key={s.id}>
            <div className="svc-glow"></div>
            <div className="svc-hd">
              <div className="l">
                <span style={{ color: "var(--neon-gn)" }}>●</span>
                <span>~/{s.code}.sh</span>
              </div>
              <span className="dots"><span></span><span></span><span></span></span>
            </div>
            <div className="svc-body">
              <div className="svc-num">// MODULE {s.id} / 04</div>
              <h3 className="svc-name">{s.name}</h3>
              <div className="svc-jp">{s.jp}</div>
              <p className="svc-desc">{s.desc}</p>
              <ul className="svc-list">
                {s.items.map((it) => (
                  <li key={it.k}>
                    <span className="ok">▸</span>
                    <span>{it.k}</span>
                    <span className="val">{it.v}</span>
                  </li>
                ))}
              </ul>
              <div className="svc-foot">
                <div>
                  <div style={{ fontSize: 10, color: "var(--fg-3)", marginBottom: 4 }}>BUDGET</div>
                  <div className="price">{s.price.replace(/(CA\$[\d\s]+)/, '')}<span className="accent">{(s.price.match(/(CA\$[\d\s]+)/) || [''])[0]}</span></div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div style={{ fontSize: 10, color: "var(--fg-3)", marginBottom: 4 }}>ETA</div>
                  <div style={{ color: "var(--fg-0)" }}>{s.eta}</div>
                </div>
                <a href="#contact">[ EXEC ] →</a>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ─── Portfolio (manga grid) ───────────────────────────────────────────── */
function Portfolio() {
  return (
    <section id="portfolio" className="section container" data-screen-label="03 Portfolio">
      <div className="section-head">
        <div>
          <div className="sec-idx">
            <span className="accent">[03]</span> &nbsp;/&nbsp; portfolio.gallery &nbsp;//&nbsp; <span style={{ color: "var(--accent-2)" }}>作品集</span>
          </div>
          <h2 className="sec-title">
            <span className="stroke">Selected</span> work.
          </h2>
        </div>
        <div className="sec-sub">
          4 projets en production. <span className="accent">hover</span> pour scanner les détails techniques. Cliquer pour visiter le site live.
        </div>
      </div>

      <div className="mg">
        {PROJECTS.map((p) => (
          <a
            href={p.url || "#"}
            target="_blank"
            rel="noopener noreferrer"
            className={"cell " + p.variant + " " + p.span}
            key={p.id}
          >
            <div className="img"></div>
            <div className="halftone"></div>
            <div className="scan"></div>
            <div className="ticks"><span></span><span></span><span></span><span></span></div>

            <div className="meta">
              <span>{p.id} <span className="acc">●</span> {p.status}</span>
              <span>{p.year}</span>
            </div>

            <div className="info">
              <h3 className="name">{p.name}</h3>
              <div className="tag"><span className="accent">▸</span> {p.tag}</div>
            </div>

            <div className="stack">
              {p.stack.slice(0, 3).map((t) => <span key={t}>{t}</span>)}
            </div>

            <div className="reveal">
              <div>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12 }}>
                  <span style={{ color: "var(--accent)", fontSize: 11, letterSpacing: "0.2em" }}>
                    ▸ SCAN.{p.id}
                  </span>
                  <span style={{ color: "var(--fg-2)", fontSize: 10, letterSpacing: "0.15em" }}>
                    ANALYZING...
                  </span>
                </div>
                <h3 style={{
                  fontFamily: "var(--font-display)", fontSize: 28, margin: "0 0 14px",
                  textTransform: "uppercase", letterSpacing: "-0.02em", color: "var(--fg-0)"
                }}>{p.name}</h3>
                <div className="row"><span className="k">Client</span><span className="v">{p.client}</span></div>
                <div className="row"><span className="k">Rôle</span><span className="v">{p.role}</span></div>
                <div className="row"><span className="k">Stack</span><span className="v">{p.stack.join(" · ")}</span></div>
                <div className="row"><span className="k">Status</span><span className="v"><span className="ok">●</span> {p.status}</span></div>
                {p.highlights && (
                  <div className="hl">
                    <div className="hl-label">▸ réalisations clés</div>
                    <ul>
                      {p.highlights.map((h, i) => <li key={i}>{h}</li>)}
                    </ul>
                  </div>
                )}
              </div>
              <div className="open">
                <span>[ visiter le site → ]</span>
                <span>↗</span>
              </div>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

/* ─── Stack ────────────────────────────────────────────────────────────── */
function Stack() {
  return (
    <section id="stack" className="section container" data-screen-label="04 Stack">
      <div className="section-head">
        <div>
          <div className="sec-idx">
            <span className="accent">[04]</span> &nbsp;/&nbsp; stack.modules &nbsp;//&nbsp; <span style={{ color: "var(--accent-2)" }}>技術スタック</span>
          </div>
          <h2 className="sec-title">
            Tech <span className="stroke">stack</span>.
          </h2>
        </div>
        <div className="sec-sub">
          Outils que j'utilise quotidiennement. <span className="accent">$</span> chaque niveau est validé par projets en production.
        </div>
      </div>

      <div className="stack-grid">
        {STACK.map((s) => (
          <div className="stk" key={s.num}>
            <div className="num">// {s.num}</div>
            <h4 className="name">{s.name}</h4>
            <div className="lvl">{s.lvl} · {s.v}%</div>
            <div className="bar"><i style={{ width: s.v + "%" }}></i></div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ─── Process ──────────────────────────────────────────────────────────── */
function Process() {
  return (
    <section id="process" className="section container" data-screen-label="05 Process">
      <div className="section-head">
        <div>
          <div className="sec-idx">
            <span className="accent">[05]</span> &nbsp;/&nbsp; process.pipeline &nbsp;//&nbsp; <span style={{ color: "var(--accent-2)" }}>プロセス</span>
          </div>
          <h2 className="sec-title">
            How I <span className="stroke">ship</span>.
          </h2>
        </div>
        <div className="sec-sub">
          Pipeline en 4 étapes. <span className="accent">discovery → design → build → ship</span>. Pas de friction, pas de surprise.
        </div>
      </div>

      <div className="proc">
        {PROCESS.map((p) => (
          <div className="proc-step" key={p.id}>
            <div className="id">// STEP_{p.id}</div>
            <div className="ja">{p.ja}</div>
            <h4 className="nm">{p.nm}</h4>
            <div className="dc">{p.dc}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ─── Contact ──────────────────────────────────────────────────────────── */
// 🔒 API URL — Vercel Serverless Function
const CONTACT_API_URL = "/api/contact";

function Contact() {
  const [form, setForm] = useState({
    name: "",
    email: "",
    company: "",
    budget: "CA$3k – CA$6k",
    timeline: "1–2 mois",
    msg: "",
  });
  const [honey, setHoney] = useState(""); // 🍯 Honeypot anti-bot
  const [services, setServices] = useState(new Set(["Web App"]));
  const [status, setStatus] = useState("idle"); // idle | sending | success | error
  const [errorMsg, setErrorMsg] = useState("");

  function toggleSvc(s) {
    const n = new Set(services);
    n.has(s) ? n.delete(s) : n.add(s);
    setServices(n);
  }

  const termLines = useMemo(() => {
    const base = [
      <><span className="prompt">kengs@neo-tokyo:~$</span> whoami</>,
      <span className="out">kengsleys.louissaint &mdash; designer / full-stack developer</span>,
      <><span className="prompt">kengs@neo-tokyo:~$</span> cat ./contact.cfg</>,
      <span className="out">email &nbsp;&nbsp;&nbsp;&nbsp; <span className="kw">louissaintkengsleys@gmail.com</span></span>,
      <span className="out">phone &nbsp;&nbsp;&nbsp;&nbsp; <span className="kw">+1 (438) 493-1746</span></span>,
      <span className="out">based &nbsp;&nbsp;&nbsp;&nbsp; <span className="kw">Montréal, QC · GMT-5</span></span>,
      <><span className="prompt">kengs@neo-tokyo:~$</span> cat ./status.json</>,
      <span className="out">{"{"}</span>,
      <span className="out">&nbsp;&nbsp;status: <span className="ok">"available"</span>,</span>,
      <span className="out">&nbsp;&nbsp;response_time: <span className="kw">"&lt; 24h"</span>,</span>,
      <span className="out">&nbsp;&nbsp;next_slot: <span className="kw">"juin 2026"</span></span>,
      <span className="out">{"}"}</span>,
      <><span className="prompt">kengs@neo-tokyo:~$</span> ./connect.sh</>,
      <span className="out warn">[!] secure channel established</span>,
      <span className="out ok">[✓] awaiting your transmission...</span>,
    ];

    if (status === "sending") {
      base.push(<><span className="prompt">kengs@neo-tokyo:~$</span> send_brief --secure --encrypted</>);
      base.push(<span className="out warn">[...] encrypting payload &amp; transmitting...</span>);
    }

    if (status === "success") {
      base.push(<><span className="prompt">kengs@neo-tokyo:~$</span> send_brief --secure --encrypted</>);
      base.push(<span className="out ok">[✓] payload encrypted — AES-256</span>);
      base.push(<span className="out ok">[✓] transmission received from {form.name || "anonymous"}</span>);
      base.push(<span className="out">[i] confirmation sent to {form.email || "n/a"}</span>);
      base.push(<span className="out">[i] reply within ~12h.</span>);
      base.push(<span className="out ok">[✓] channel secured. end of transmission.</span>);
    }

    if (status === "error") {
      base.push(<><span className="prompt">kengs@neo-tokyo:~$</span> send_brief --secure</>);
      base.push(<span className="out" style={{ color: "#ff4757" }}>[✗] ERROR: {errorMsg}</span>);
      base.push(<span className="out warn">[!] retry transmission or contact directly.</span>);
    }

    return base;
  }, [status, form, errorMsg]);

  async function submit(e) {
    e.preventDefault();
    if (status === "sending") return; // Prevent double-click

    setStatus("sending");
    setErrorMsg("");

    try {
      const response = await fetch(CONTACT_API_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: form.name,
          email: form.email,
          company: form.company,
          services: Array.from(services).join(", "),
          budget: form.budget,
          timeline: form.timeline,
          message: form.msg,
          _honey: honey, // 🍯 Honeypot — bots fill this, humans don't
        }),
      });

      const data = await response.json();

      if (response.ok && data.success) {
        setStatus("success");
      } else {
        setStatus("error");
        setErrorMsg(data.error || "Échec de la transmission.");
      }
    } catch (err) {
      setStatus("error");
      setErrorMsg("Connexion au serveur impossible. Réessayez.");
    }
  }

  return (
    <section id="contact" className="section container" data-screen-label="06 Contact">
      <div className="section-head">
        <div>
          <div className="sec-idx">
            <span className="accent">[06]</span> &nbsp;/&nbsp; contact.terminal &nbsp;//&nbsp; <span style={{ color: "var(--accent-2)" }}>連絡</span>
          </div>
          <h2 className="sec-title">
            Open a <span className="stroke">channel</span>.
          </h2>
        </div>
        <div className="sec-sub">
          Brief, devis, simple question. <span className="accent">$</span> réponse sous 24h, sans bot, sans bullshit.
        </div>
      </div>

      <div className="contact">
        <div className="term">
          <div className="term-hd">
            <span>~/contact.sh &nbsp;//&nbsp; 🔒 secure</span>
            <span className="dots"><span></span><span></span><span></span></span>
          </div>
          <div className="term-body">
            {termLines.map((l, i) => <div className="ln" key={i}>{l}</div>)}
            <div className="ln"><span className="prompt">kengs@neo-tokyo:~$</span> <span className="caret"></span></div>
          </div>
        </div>

        <form className="form" onSubmit={submit}>
          {/* 🍯 HONEYPOT — champ invisible anti-bot. Les humains ne le voient/remplissent jamais. */}
          <div style={{ position: "absolute", left: "-9999px", opacity: 0, height: 0, overflow: "hidden" }} aria-hidden="true">
            <label htmlFor="contact_website">Website</label>
            <input
              type="text"
              id="contact_website"
              name="website"
              tabIndex={-1}
              autoComplete="off"
              value={honey}
              onChange={(e) => setHoney(e.target.value)}
            />
          </div>

          <div className="grp">
            <label>nom &amp; prénom<span className="req">*</span></label>
            <input
              type="text" placeholder="// ex: Akira Tanaka"
              value={form.name}
              onChange={(e) => setForm({ ...form, name: e.target.value })}
              required
              maxLength={200}
              disabled={status === "sending" || status === "success"}
            />
          </div>
          <div className="row2">
            <div className="grp">
              <label>email<span className="req">*</span></label>
              <input
                type="email" placeholder="// you@domain.io"
                value={form.email}
                onChange={(e) => setForm({ ...form, email: e.target.value })}
                required
                maxLength={320}
                disabled={status === "sending" || status === "success"}
              />
            </div>
            <div className="grp">
              <label>entreprise</label>
              <input
                type="text" placeholder="// optional"
                value={form.company}
                onChange={(e) => setForm({ ...form, company: e.target.value })}
                maxLength={200}
                disabled={status === "sending" || status === "success"}
              />
            </div>
          </div>

          <div className="grp">
            <label>services souhaités</label>
            <div className="chips">
              {["Web App", "Site Vitrine", "Identité", "Audit", "Refacto", "Conseil"].map((s) => (
                <button
                  type="button"
                  key={s}
                  className={"chip " + (services.has(s) ? "on" : "")}
                  onClick={() => toggleSvc(s)}
                  disabled={status === "sending" || status === "success"}
                >
                  {services.has(s) && <span className="x">✓</span>} {s}
                </button>
              ))}
            </div>
          </div>

          <div className="row2">
            <div className="grp">
              <label>budget estimé</label>
              <select value={form.budget} onChange={(e) => setForm({ ...form, budget: e.target.value })} disabled={status === "sending" || status === "success"}>
                <option>&lt; CA$1k</option>
                <option>CA$1k – CA$3k</option>
                <option>CA$3k – CA$6k</option>
                <option>CA$6k – CA$15k</option>
                <option>&gt; CA$15k</option>
              </select>
            </div>
            <div className="grp">
              <label>timeline</label>
              <select value={form.timeline} onChange={(e) => setForm({ ...form, timeline: e.target.value })} disabled={status === "sending" || status === "success"}>
                <option>ASAP</option>
                <option>&lt; 1 mois</option>
                <option>1–2 mois</option>
                <option>2–4 mois</option>
                <option>flexible</option>
              </select>
            </div>
          </div>

          <div className="grp">
            <label>brief<span className="req">*</span></label>
            <textarea
              placeholder="// décris le projet en quelques lignes : but, audience, contraintes, deadline..."
              value={form.msg}
              onChange={(e) => setForm({ ...form, msg: e.target.value })}
              required
              maxLength={5000}
              disabled={status === "sending" || status === "success"}
            ></textarea>
          </div>

          <div style={{ display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
            <button
              type="submit"
              className="btn btn-primary"
              style={{ alignSelf: "flex-start" }}
              disabled={status === "sending" || status === "success"}
            >
              <span className="glyph">{status === "sending" ? "◌" : status === "success" ? "✓" : "▶"}</span>
              {status === "sending" && "Transmission en cours..."}
              {status === "success" && "Transmission envoyée ✓"}
              {status === "error" && "Réessayer la transmission"}
              {status === "idle" && "Envoyer la transmission"}
            </button>
            {status === "success" && (
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--neon-gn)" }}>
                🔒 données chiffrées · serveur sécurisé
              </span>
            )}
          </div>
        </form>
      </div>
    </section>
  );
}

/* ─── Footer ───────────────────────────────────────────────────────────── */
function Footer() {
  return (
    <footer className="container foot">
      <div className="foot-feature">
        <div className="logo-badge">
          <span className="tl"></span><span className="tr"></span>
          <span className="bl"></span><span className="br"></span>
        </div>
        <div className="foot-feature-side">
          <div className="sec-idx" style={{ marginBottom: 12 }}>
            <span className="accent">[ ID-CARD ]</span> &nbsp;//&nbsp; v4.0.0
          </div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, lineHeight: 1.85, color: "var(--fg-1)" }}>
            <div><span style={{ color: "var(--fg-3)" }}>operator</span> &nbsp;&nbsp; <span style={{ color: "var(--fg-0)" }}>kengsleys.louissaint</span></div>
            <div><span style={{ color: "var(--fg-3)" }}>role</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style={{ color: "var(--accent)" }}>designer / full-stack</span></div>
            <div><span style={{ color: "var(--fg-3)" }}>base</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Montréal, QC · remote ww</div>
            <div><span style={{ color: "var(--fg-3)" }}>signal</span> &nbsp;&nbsp;&nbsp; <span style={{ color: "var(--neon-gn)" }}>●</span> open for missions</div>
            <div><span style={{ color: "var(--fg-3)" }}>stack</span> &nbsp;&nbsp;&nbsp;&nbsp; python · django · js · react</div>
            <div><span style={{ color: "var(--fg-3)" }}>email</span> &nbsp;&nbsp;&nbsp;&nbsp; <a href="mailto:louissaintkengsleys@gmail.com" style={{ color: "var(--accent)" }}>louissaintkengsleys@gmail.com</a></div>
            <div><span style={{ color: "var(--fg-3)" }}>phone</span> &nbsp;&nbsp;&nbsp;&nbsp; <a href="tel:+14384931746" style={{ color: "var(--accent)" }}>+1 (438) 493-1746</a></div>
          </div>
        </div>
      </div>

      <div className="row">
        <div>
          <div className="sec-idx" style={{ marginBottom: 18 }}>
            <span className="accent">[ EOF ]</span> &nbsp;/&nbsp; end of transmission
          </div>
          <div style={{ fontSize: 13, color: "var(--fg-1)", maxWidth: 360, lineHeight: 1.7 }}>
            Disponible pour missions full-stack, design d'identité et conseil technique.
            Montréal, QC / Remote worldwide.
          </div>
          <div style={{ display: "flex", gap: 14, marginTop: 22, flexWrap: "wrap" }}>
            <a href="mailto:louissaintkengsleys@gmail.com" className="btn" style={{ padding: "8px 12px", fontSize: 10 }}>
              <span style={{ color: "var(--accent)" }}>▸</span> louissaintkengsleys@gmail.com
            </a>
            <a href="tel:+14384931746" className="btn" style={{ padding: "8px 12px", fontSize: 10 }}>
              <span style={{ color: "var(--accent)" }}>▸</span> 438-493-1746
            </a>
          </div>
        </div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, textAlign: "right" }}>
          <div style={{ color: "var(--fg-2)", letterSpacing: "0.2em", textTransform: "uppercase", marginBottom: 8 }}>NAVIGATION</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6, color: "var(--fg-1)" }}>
            <a href="#services">/services</a>
            <a href="#portfolio">/portfolio</a>
            <a href="#stack">/stack</a>
            <a href="#process">/process</a>
            <a href="#contact">/contact</a>
          </div>
        </div>
      </div>

      <h2 className="mark-big">
        KENGSLEYS<span className="accent">.</span>
      </h2>

      <div className="legal">
        <div>© 2026 Kengsleys Louissaint &nbsp;//&nbsp; built with Django, JS &amp; love</div>
        <div>v4.0.0 &nbsp;//&nbsp; <span style={{ color: "var(--accent)" }}>SYSTEM STABLE</span></div>
      </div>
    </footer>
  );
}

/* ─── Tweaks ───────────────────────────────────────────────────────────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#00f0ff",
  "accent2": "#ff2bd6",
  "showKana": true,
  "showScanlines": true,
  "showGlitch": true,
  "bootSequence": true,
  "fontMono": "JetBrains Mono",
  "fontDisplay": "Space Grotesk"
}/*EDITMODE-END*/;

function PortfolioApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [booted, setBooted] = useState(!t.bootSequence);

  // Apply tweaks to CSS vars
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", t.accent);
    r.style.setProperty("--accent-2", t.accent2);
    r.style.setProperty("--font-mono", `"${t.fontMono}", ui-monospace, Menlo, monospace`);
    r.style.setProperty("--font-display", `"${t.fontDisplay}", "Inter", system-ui, sans-serif`);
  }, [t.accent, t.accent2, t.fontMono, t.fontDisplay]);

  return (
    <>
      {t.bootSequence && !booted && <BootOverlay onDone={() => setBooted(true)} />}

      <div className="bg-grid"></div>
      {t.showKana && <div className="bg-kana">{KATAKANA_GRID}</div>}
      <div className="bg-vignette"></div>
      {t.showScanlines && <div className="bg-scanlines"></div>}

      <div className="shell">
        <TopBar />
        <Nav />
        <Hero />
        <Marquee />
        <Services />
        <Portfolio />
        <Stack />
        <Process />
        <Contact />
        <Footer />
      </div>

      <TweaksPanel>
        <TweakSection label="Couleurs Néon" />
        <TweakColor label="Accent primaire" value={t.accent}
          options={["#00f0ff", "#39ff8b", "#ff2bd6", "#ffd84d", "#ff4757"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakColor label="Accent secondaire" value={t.accent2}
          options={["#ff2bd6", "#00f0ff", "#39ff8b", "#ffd84d", "#a855f7"]}
          onChange={(v) => setTweak("accent2", v)} />

        <TweakSection label="Effets HUD" />
        <TweakToggle label="Scanlines CRT" value={t.showScanlines}
          onChange={(v) => setTweak("showScanlines", v)} />
        <TweakToggle label="Katakana en filigrane" value={t.showKana}
          onChange={(v) => setTweak("showKana", v)} />
        <TweakToggle label="Glitch text" value={t.showGlitch}
          onChange={(v) => setTweak("showGlitch", v)} />
        <TweakToggle label="Séquence de boot" value={t.bootSequence}
          onChange={(v) => setTweak("bootSequence", v)} />

        <TweakSection label="Typographie" />
        <TweakSelect label="Mono"
          value={t.fontMono}
          options={["JetBrains Mono", "IBM Plex Mono", "Fira Code", "Space Mono"]}
          onChange={(v) => setTweak("fontMono", v)} />
        <TweakSelect label="Display"
          value={t.fontDisplay}
          options={["Space Grotesk", "Archivo Black", "Bebas Neue", "Anton"]}
          onChange={(v) => setTweak("fontDisplay", v)} />

        <TweakSection label="Actions" />
        <TweakButton label="Relancer le boot" onClick={() => setBooted(false)} />
      </TweaksPanel>

      {/* Toggle glitch effect */}
      <style>{!t.showGlitch ? ".glitch::before,.glitch::after{display:none}" : ""}</style>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<PortfolioApp />);