/* JRC Portfolio — cockpit aesthetic */
const { useState, useEffect, useRef, useMemo } = React;

/* ----------------------------- icon helper ----------------------------- */
function Icon({ name, className = "w-4 h-4", strokeWidth = 1.25 }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current || !window.lucide) return;
    // reset and render via createIcons on this element
    ref.current.setAttribute("data-lucide", name);
    ref.current.innerHTML = "";
    try {
      window.lucide.createIcons({
        attrs: { "stroke-width": strokeWidth, class: "lucide " + className },
        nameAttr: "data-lucide",
        icons: window.lucide.icons || window.lucide,
      });
    } catch (e) { /* ignore */ }
  }, [name, className, strokeWidth]);
  return <i ref={ref} data-lucide={name} className={"inline-flex " + className} aria-hidden="true" />;
}

/* ----------------------------- primitives ------------------------------ */
const Tag = ({ children, dot, className = "" }) => (
  <span className={"mono inline-flex items-center gap-1.5 text-[10px] uppercase tracking-[0.18em] text-zinc-400 " + className}>
    {dot && <span className="w-1 h-1 bg-current rounded-full" />}
    {children}
  </span>
);

const Hair = ({ className = "" }) => (
  <div className={"h-px bg-white/10 " + className} />
);

const Bracket = ({ children, className = "", padding = "p-4" }) => (
  <div className={"brk border border-white/10 " + padding + " " + className}>
    <span className="brk-tr" /><span className="brk-bl" />
    {children}
  </div>
);

const TickHeader = ({ id, label, code, right }) => (
  <div data-reveal className="flex items-end justify-between gap-4 pb-5 mb-12 border-b border-white/10">
    <div className="flex flex-col gap-2">
      <span className="mono accent text-[10px] tracking-[0.28em]">{id} · {code}</span>
      <h2 className="font-sans text-3xl md:text-5xl text-zinc-50 tracking-tight leading-[1.05]">{label}</h2>
    </div>
    {right && <div className="mono text-[10px] text-zinc-500 tracking-[0.22em] pb-1 hidden md:block">{right}</div>}
  </div>
);

/* ----------------------------- status bar ------------------------------ */
function StatusBar() {
  const [t, setT] = useState(() => new Date());
  useEffect(() => {
    const i = setInterval(() => setT(new Date()), 1000);
    return () => clearInterval(i);
  }, []);
  const utc = t.toISOString().slice(11, 19);
  const date = t.toISOString().slice(0, 10).replace(/-/g, ".");
  const Cell = ({ k, v, accent }) => (
    <div className="flex items-center gap-2 px-3 py-1.5 border-r border-white/10 h-full">
      <span className="mono text-[9px] uppercase tracking-[0.22em] text-zinc-500">{k}</span>
      <span className={"mono text-[10px] tracking-[0.16em] " + (accent ? "accent" : "text-zinc-200")}>{v}</span>
    </div>
  );
  return (
    <div className="fixed top-0 inset-x-0 z-50 border-b border-white/10 bg-zinc-950/85 backdrop-blur supports-[backdrop-filter]:bg-zinc-950/70">
      <div className="flex items-stretch h-9 text-zinc-300">
        <div className="flex items-center gap-2 px-3 border-r border-white/10 h-full">
          <span className="w-1.5 h-1.5 bg-accent rounded-full blink" />
          <span className="mono text-[10px] tracking-[0.22em] text-zinc-200">JRC-01 /// PORTFOLIO.SYS</span>
        </div>
        <Cell k="STATE" v="OPERATIONAL" accent />
        <Cell k="SECTOR" v="SVQ · ES" />
        <Cell k="LINK" v="STABLE" />
        <div className="hidden md:block flex-1" />
        <Cell k="UTC" v={utc} />
        <Cell k="DATE" v={date} />
        <div className="hidden lg:flex items-center gap-2 px-3 h-full">
          <span className="mono text-[9px] uppercase tracking-[0.22em] text-zinc-500">CH</span>
          <div className="flex gap-0.5">
            {[3,5,4,6,7,5,8,6,9,7].map((h,i)=>(
              <span key={i} className="w-[2px] bg-zinc-500" style={{height: h+'px'}} />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* --------------------------- side rulers ------------------------------ */
function SideRail({ side = "left" }) {
  return (
    <div className={"hidden xl:flex fixed top-9 bottom-0 w-8 z-30 flex-col items-center justify-between py-12 pointer-events-none " + (side === "left" ? "left-0" : "right-0")}>
      <div className="mono text-[9px] tracking-[0.4em] text-zinc-700" style={{ writingMode: 'vertical-rl', transform: side === 'left' ? 'rotate(180deg)' : 'none' }}>
        {side === "left" ? "JRC · PORTFOLIO · V1.0" : "SVQ · 37.38°N · -5.99°W"}
      </div>
      <div className="flex flex-col gap-3 items-center opacity-60">
        {Array.from({length: 6}).map((_, i) => (
          <span key={i} className="w-1.5 h-px bg-zinc-700" />
        ))}
      </div>
      <div className="mono text-[9px] tracking-[0.4em] text-zinc-700" style={{ writingMode: 'vertical-rl', transform: side === 'left' ? 'rotate(180deg)' : 'none' }}>
        {side === "left" ? "REV · 2026.07" : "SCROLL · ENGAGE"}
      </div>
    </div>
  );
}

/* ------------------------------- hero --------------------------------- */
const EXPERIENCE_CARDS = [
  { id: "EXP-04", role: "Project Leader", org: "ALTEN · Airbus Defence & Space", period: "03/2026 — PRESENT", loc: "SVQ", note: "Requirements discovery with the client · 9-eng AI/data team · KPI reporting." },
  { id: "EXP-03", role: "AI Innovation Lead & Focal Point", org: "ALTEN · Airbus Defence & Space", period: "05/2025 — 03/2026", loc: "SVQ", note: "RAG · Agentic AI · LLM evals · on-prem open-weight LLMs (Mistral / Gemma)." },
  { id: "EXP-02", role: "Software Engineer", org: "ALTEN · Airbus Defence & Space", period: "03/2023 — 05/2025", loc: "SVQ", note: "Delta-loading ETL · ML forecasting on the C295 · Django/React · RCPSP solver on A400M / F10X." },
  { id: "EXP-01", role: "Research Intern", org: "AICIA · OCONTSOLAR (EU)", period: "06/2022 — 03/2023", loc: "SVQ", note: "UAV-fleet routing simulator · battery optimisation · Python · Unity / C#." },
];

function Hero() {
  return (
    <section className="relative pt-28 md:pt-32 pb-28 md:pb-36 px-6 lg:px-20">
      {/* meta strip */}
      <div data-reveal="fade" className="flex flex-wrap items-center justify-between gap-y-3 mb-12">
        <div className="flex flex-wrap items-center gap-4">
          <Tag dot className="accent">SYS · ONLINE</Tag>
          <Tag>DOSSIER · 0001</Tag>
          <Tag>CLEARANCE · PUBLIC</Tag>
          <Tag>REV · 2026.07</Tag>
        </div>
        <div className="mono text-[10px] tracking-[0.22em] text-zinc-500">
          PUSH-TO-TALK · <span className="text-zinc-300">joaquinromerocabeza@gmail.com</span>
        </div>
      </div>

      <div className="grid grid-cols-12 gap-x-6 gap-y-10">
        {/* LEFT: monumental ID */}
        <div className="col-span-12 lg:col-span-8">
          {/* call sign block */}
          <div data-reveal className="flex items-center gap-3 mb-6">
            <span className="mono text-[10px] tracking-[0.3em] text-zinc-500">CALLSIGN</span>
            <span className="mono accent text-[10px] tracking-[0.3em]">[ JRC-01 ]</span>
            <span className="mono text-[10px] tracking-[0.3em] text-zinc-500">// SECURE CH 04</span>
          </div>

          <h1 data-reveal="scale" data-parallax style={{transitionDelay:'80ms'}} className="font-sans font-medium tracking-tight leading-[0.92] text-zinc-50 text-[14vw] lg:text-[8.2vw] xl:text-[7.4vw]">
            Joaquín<br/>
            Romero<br/>
            <span className="text-zinc-400">Cabeza<span className="accent">.</span></span>
          </h1>

          <div className="mt-8 grid grid-cols-12 gap-6">
            <div data-reveal style={{transitionDelay:'180ms'}} className="col-span-12 md:col-span-7">
              <div className="flex items-center gap-3 mb-3">
                <span className="w-8 h-px bg-accent" />
                <span className="mono text-[10px] tracking-[0.24em] text-zinc-300">AI/ML ENGINEER · APPLIED GENAI &amp; RAG · ON-PREM AND REGULATED</span>
              </div>
              <p className="text-zinc-300 text-[15px] md:text-[16px] leading-[1.55] max-w-[54ch]">
                Aeronautical engineer by training, <span className="text-zinc-100">applied-AI engineer</span> by trade. At
                <span className="text-zinc-100"> Airbus Defence &amp; Space</span>, through ALTEN, I lead a
                9-person AI &amp; data team. PMI-CAPM certified. I turn on-premise GenAI
                (LLMs, RAG, agentic AI, and the evaluation that keeps it honest) into governed
                production tooling for long-cycle aerospace programs — where the data cannot
                leave the building.
              </p>
            </div>

            <div data-reveal="right" style={{transitionDelay:'240ms'}} className="col-span-12 md:col-span-5">
              <Bracket className="bg-white/[0.015]" padding="p-5">
                <div className="mono text-[10px] tracking-[0.22em] text-zinc-500 mb-3">MISSION · OBJECTIVES</div>
                <ul className="space-y-2.5 text-[13px] text-zinc-300 mono">
                  <li className="flex gap-3"><span className="accent">▸</span><span>Turn a vague operational need into scope, with the client</span></li>
                  <li className="flex gap-3"><span className="accent">▸</span><span>Design on-premise GenAI under strict data governance</span></li>
                  <li className="flex gap-3"><span className="accent">▸</span><span>Ship it into the customer environment, not a demo</span></li>
                  <li className="flex gap-3"><span className="accent">▸</span><span>Open to international relocation</span></li>
                </ul>
              </Bracket>
            </div>
          </div>

          {/* horizontal data readout */}
          <div data-reveal style={{transitionDelay:'320ms'}} className="mt-10 grid grid-cols-2 md:grid-cols-4 border-y border-white/10 divide-x divide-white/10">
            {[
              ["LEADING", "9 ENG", "AI & DATA TEAM"],
              ["EXPERIENCE", "4+ YRS", "3 AT AIRBUS DS"],
              ["STACK", "ON-PREM", "ZERO DATA EGRESS"],
              ["DOMAIN", "AEROSPACE", "DEFENCE & SPACE"],
            ].map(([k,v,sub], i) => (
              <div key={i} className="px-4 py-4 first:pl-0">
                <div className="mono text-[9px] tracking-[0.22em] text-zinc-500">{k}</div>
                <div className="font-sans text-2xl md:text-3xl text-zinc-100 mt-1 tracking-tight">{v}</div>
                <div className="mono text-[9px] tracking-[0.22em] text-zinc-500 mt-1">{sub}</div>
              </div>
            ))}
          </div>
        </div>

        {/* RIGHT: vertical marquee of experience */}
        <div data-reveal="right" style={{transitionDelay:'160ms'}} className="col-span-12 lg:col-span-4">
          <div className="flex items-center justify-between mb-3">
            <Tag dot>FEED · EXPERIENCE</Tag>
            <Tag>AUTOSCROLL · ON</Tag>
          </div>
          <div className="brk border border-white/10 relative overflow-hidden marquee" style={{ height: '560px' }}>
            <span className="brk-tr" /><span className="brk-bl" />
            {/* gradient fades */}
            <div className="pointer-events-none absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-zinc-950 to-transparent z-10" />
            <div className="pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-zinc-950 to-transparent z-10" />
            <div className="marquee-track flex flex-col">
              {[...EXPERIENCE_CARDS, ...EXPERIENCE_CARDS].map((c, i) => (
                <ExperienceCard key={i} {...c} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ExperienceCard({ id, role, org, period, loc, note }) {
  return (
    <div className="p-5 border-b border-white/10 hover:bg-white/[0.025] transition-colors">
      <div className="flex items-center justify-between mb-3">
        <span className="mono text-[10px] tracking-[0.22em] accent">{id}</span>
        <span className="mono text-[10px] tracking-[0.22em] text-zinc-500">{loc}</span>
      </div>
      <div className="font-sans text-[15px] text-zinc-100 leading-snug">{role}</div>
      <div className="mono text-[10px] tracking-[0.18em] text-zinc-400 mt-1">{org}</div>
      <div className="mono text-[10px] tracking-[0.22em] text-zinc-500 mt-3">{period}</div>
      <div className="text-[12.5px] text-zinc-400 mt-3 leading-[1.5]">{note}</div>
    </div>
  );
}

/* --------------------- telemetry strip (between sections) --------------------- */
function Telemetry() {
  const cells = [
    "ALT 037.000 FT", "HDG 270°", "IAS 240 KT", "OAT −41°C",
    "PYR.01 OK", "PYR.02 OK", "BUS A NORMAL", "BUS B NORMAL",
    "GEN 1 ENG", "GEN 2 ENG", "AP ENG", "AT ENG",
    "TX RX OK", "SQ 4711", "VS +0", "WPT NEXT: BENTO",
  ];
  return (
    <div className="border-y border-white/10 bg-zinc-950/80 overflow-hidden relative">
      <div className="pointer-events-none absolute inset-y-0 left-0 w-16 bg-gradient-to-r from-zinc-950 to-transparent z-10" />
      <div className="pointer-events-none absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-zinc-950 to-transparent z-10" />
      <div className="flex items-stretch h-8 overflow-hidden">
        <div className="flex items-stretch animate-telemetry whitespace-nowrap">
          {[...cells, ...cells].map((c, i) => (
            <div key={i} className="px-5 flex items-center border-r border-white/10 mono text-[10px] tracking-[0.22em] text-zinc-500 whitespace-nowrap shrink-0">
              <span className="text-zinc-700 mr-2">{String((i % cells.length)+1).padStart(2,'0')}</span>{c}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ----------------------- experience (timeline) -------------------------- */
function ExperienceSection() {
  return (
    <section id="experience" className="px-6 lg:px-20 py-28 md:py-36">
      <TickHeader id="§ 02" label="Flight Log" code="EMPLOYMENT.HISTORY" right="04 ENTRIES · 2022 → PRESENT" />

      <div className="grid grid-cols-12 gap-8">
        <div data-reveal="left" className="col-span-12 lg:col-span-3">
          <Bracket padding="p-5" className="bg-white/[0.015]">
            <div className="mono text-[10px] tracking-[0.22em] text-zinc-500">CURRENT</div>
            <div className="font-sans text-[20px] text-zinc-100 mt-2 leading-tight">Project Leader</div>
            <div className="mono text-[10px] text-zinc-400 mt-1">ALTEN · AIRBUS DS</div>
            <Hair className="my-4" />
            <div className="mono text-[10px] tracking-[0.22em] text-zinc-500 mb-2">IN ROLE</div>
            <div className="mono text-[12px] text-zinc-200">SINCE 03.2026</div>
            <div className="mono text-[10px] tracking-[0.22em] text-zinc-500 mt-4 mb-2">ENGINEERING</div>
            <div className="mono text-[12px] text-zinc-200">4+ yrs · since 06.2022</div>
          </Bracket>
        </div>

        <div className="col-span-12 lg:col-span-9">
          <div className="relative">
            <div className="absolute left-2 top-2 bottom-2 w-px bg-white/10" />
            <div className="space-y-2">
              {EXPERIENCE_CARDS.map((c, i) => <TimelineRow key={c.id} {...c} idx={i} />)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TimelineRow({ id, role, org, period, loc, note, idx }) {
  const [open, setOpen] = useState(idx < 2);
  const bullets = {
    "EXP-04": [
      "Lead a 9-person AI & data team on an Airbus manufacturing-engineering account — the interface between the client, focal points and developers.",
      "Hold delivery accountability for ~20 production applications across two Airbus sites, tracking their status daily and escalating blockers to the client.",
      "Run requirements discovery directly with the client — eliciting needs from focal points and end users, and turning them into development scope.",
      "Own client KPI reporting, and run the technical assessments that set the hiring bar for new engineers.",
    ],
    "EXP-03": [
      "Architected GenAI on Airbus's on-prem LLM stack (self-hosted Mistral / Gemma); introduced n8n into Airbus's automation roadmap for on-prem agent workflows.",
      "Designed a service-oriented RAG / agentic assistant over aerospace documentation — hybrid semantic + BM25 retrieval over a vector database, with methods to reduce hallucination for safety-critical use.",
      "Instrumented LLM observability and evaluation with Arize Phoenix — tracing plus LLM-as-a-Judge scoring for relevance, hallucination and correctness against a curated golden dataset.",
      "Defined digital roadmaps with the client's engineering leadership as ALTEN focal point.",
    ],
    "EXP-02": [
      "Built a delta-loading ETL pipeline and ML models forecasting rework hours and recurring non-conformities two weeks ahead on the C295 programme.",
      "Consolidated multi-source manufacturing data into a single queryable database with full history, replacing the shared folder of spreadsheets Manufacturing Engineering and Quality opened one by one.",
      "Grew that platform from Python scripts into a Django + React web application, keeping the processing pipelines underneath — used from the shop floor up to the engineering lead.",
      "Ran the production deployments myself — Linux server, nginx, SFTP and SSH, plus environment and dependency debugging — until an external delivery provider took the account over.",
      "Integrated and tuned a resource-constrained (RCPSP) scheduling solver and built the full XML interface to MS Project for A400M / F10X.",
    ],
    "EXP-01": [
      "Built the UAV-fleet simulator for the EU OCONTSOLAR project, from my final-year thesis: a Python routing algorithm deciding where to send each drone across a solar field.",
      "Optimised the whole fleet's route against battery constraints, with the 3D simulation in Unity / C#.",
    ],
  }[id] || [];

  return (
    <div data-reveal style={{transitionDelay: (idx * 80) + 'ms'}} className="pl-8 relative">
      <button
        onClick={() => setOpen(o => !o)}
        className="absolute left-0 top-3 w-4 h-4 grid place-items-center bg-zinc-950 border border-white/20 hover:border-accent transition-colors"
        aria-label="toggle"
      >
        <span className={"block w-2 h-2 " + (open ? "bg-accent" : "bg-zinc-600")} />
      </button>

      <button onClick={() => setOpen(o => !o)} className="w-full text-left py-3 border-b border-white/10 group">
        <div className="flex flex-wrap items-baseline gap-x-5 gap-y-1">
          <span className="mono text-[10px] tracking-[0.22em] accent shrink-0">{id}</span>
          <span className="mono text-[10px] tracking-[0.22em] text-zinc-500 shrink-0 w-44">{period}</span>
          <span className="font-sans text-[17px] text-zinc-100 group-hover:text-white">{role}</span>
          <span className="mono text-[11px] text-zinc-500">/ {org}</span>
          <span className="mono text-[10px] tracking-[0.22em] text-zinc-600 ml-auto hidden md:inline">{loc}</span>
        </div>
      </button>

      {open && (
        <div className="py-4 grid grid-cols-12 gap-6">
          <ul className="col-span-12 md:col-span-8 space-y-1.5">
            {bullets.map((b, i) => (
              <li key={i} className="mono text-[12.5px] text-zinc-300 leading-[1.55] flex gap-3">
                <span className="accent shrink-0 w-6">{String(i+1).padStart(2,'0')}</span>
                <span>{b}</span>
              </li>
            ))}
          </ul>
          <div className="col-span-12 md:col-span-4 mono text-[10px] tracking-[0.2em] text-zinc-500 space-y-1.5 md:border-l md:border-white/10 md:pl-6">
            <div>NODE · {id}</div>
            <div>SECTOR · {loc}</div>
            <div>STATUS · {idx === 0 ? "ACTIVE" : "ARCHIVED"}</div>
            <div>TAGS · {id === 'EXP-03' ? 'GENAI · RAG · EVALS' : id === 'EXP-02' ? 'ML · ETL · FULL-STACK' : id === 'EXP-04' ? 'CLIENT-FACING · DELIVERY' : 'PYTHON · UNITY · ROUTING'}</div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ------------------------------ workshop -------------------------------- */
function Workshop() {
  return (
    <section id="workshop" className="px-6 lg:px-20 py-28 md:py-36 relative">
      <TickHeader id="§ 03" label="The Workshop" code="STACK.INVENTORY" right="05 COMPARTMENTS" />

      {/* Top block: A-01 big + right column with A-02/A-03 stacked (nested grid avoids row-span overlap bugs) */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
        <BentoCell index={0} className="md:col-span-3 min-h-[440px]" id="A-01" title="AI / GenAI" subtitle="LLMs · RAG · Agentic AI · Evals">
          <div className="grid grid-cols-12 gap-6">
            <div className="col-span-12 md:col-span-6">
              <p className="text-zinc-300 text-[14px] leading-[1.6]">
                End-to-end design of retrieval, planning and tool-using systems
                against Airbus&apos;s on-prem LLM stack &mdash; self-hosted Mistral / Gemma open-weight models.
                Strict on-premise data governance, hybrid semantic + BM25 retrieval over ATA
                documentation, hallucination-hardened for safety-critical use, with LLM
                observability and evaluation (Arize Phoenix &middot; LLM-as-a-Judge &middot; golden datasets)
                to keep quality measurable.
              </p>
            </div>
            <div className="col-span-12 md:col-span-6">
              <div className="mono text-[10px] tracking-[0.22em] text-zinc-500 mb-3">// CHIPS</div>
              <div className="flex flex-wrap gap-1.5">
                {["On-prem LLMs (Mistral · Gemma)","LangChain","LangGraph","Agentic AI","MCP","RAG","Hybrid Search (BM25)","Prompt Eng.","Arize Phoenix","LLM-as-a-Judge","Golden datasets","LlamaIndex","django-ninja","Scikit-Learn","Qdrant"].map(s => (
                  <span key={s} className="mono text-[10.5px] px-2 py-1 border border-white/10 text-zinc-300 hover:border-accent hover:accent transition-colors">{s}</span>
                ))}
              </div>
            </div>
          </div>
        </BentoCell>

        <div className="md:col-span-1 grid grid-cols-1 gap-3 content-start">
          <BentoCell index={1} className="min-h-[210px]" id="A-02" title="Data & ML" subtitle="Pipelines · models" icon="git-branch">
            <ul className="mono text-[11.5px] text-zinc-300 space-y-1.5">
              <li>· Pandas · NumPy</li>
              <li>· PySpark</li>
              <li>· ETL · delta loading</li>
              <li>· n8n workflows</li>
              <li>· PostgreSQL</li>
              <li>· Scikit-Learn</li>
            </ul>
          </BentoCell>

          <BentoCell index={2} className="min-h-[210px]" id="A-03" title="Delivery & Client" subtitle="Requirements · Stakeholders" icon="users">
            <ul className="mono text-[11.5px] text-zinc-300 space-y-1.5">
              <li>· PMI-CAPM</li>
              <li>· Requirements elicitation</li>
              <li>· Stakeholder mgmt.</li>
              <li>· Technical assessments</li>
              <li>· Confluence · Bitbucket</li>
            </ul>
          </BentoCell>
        </div>
      </div>

      {/* Bottom block: Software/Infra + Aerospace */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-3 mt-3">
        <BentoCell index={3} className="md:col-span-2 min-h-[200px]" id="A-04" title="Software & Infrastructure" subtitle="Backend · Frontend · DevOps" icon="code">
          <div className="space-y-3">
            <div>
              <div className="mono text-[9px] tracking-[0.24em] text-zinc-500 mb-1.5">// BACKEND</div>
              <div className="flex flex-wrap gap-1.5">
                {["Python","FastAPI","Django","Django REST","REST APIs","PostgreSQL"].map(s => (
                  <span key={s} className="mono text-[10.5px] px-2 py-1 border border-white/10 text-zinc-300">{s}</span>
                ))}
              </div>
            </div>
            <div>
              <div className="mono text-[9px] tracking-[0.24em] text-zinc-500 mb-1.5">// FRONTEND</div>
              <div className="flex flex-wrap gap-1.5">
                {["React","Vite","JavaScript","HTML / CSS","Tailwind CSS"].map(s => (
                  <span key={s} className="mono text-[10.5px] px-2 py-1 border border-white/10 text-zinc-300">{s}</span>
                ))}
              </div>
            </div>
            <div>
              <div className="mono text-[9px] tracking-[0.24em] text-zinc-500 mb-1.5">// DEVOPS</div>
              <div className="flex flex-wrap gap-1.5">
                {["Docker","Docker Swarm","Traefik","GitHub Actions","CI/CD","Prometheus / Grafana","Linux / VPS"].map(s => (
                  <span key={s} className="mono text-[10.5px] px-2 py-1 border border-white/10 text-zinc-300">{s}</span>
                ))}
              </div>
            </div>
          </div>
        </BentoCell>

        <BentoCell index={4} className="md:col-span-2 min-h-[200px]" id="A-05" title="Aerospace & Industry 4.0" subtitle="Programs · Digital Manufacturing" icon="factory">
          <div className="flex flex-wrap gap-1.5">
            {["A400M","C295","MRTT","EuroDrone","Shopfloor Digitalization","ATA · Work orders · HNCs","Lean","3DEXPERIENCE (XML)"].map(s => (
              <span key={s} className="mono text-[10.5px] px-2 py-1 border border-white/10 text-zinc-300">{s}</span>
            ))}
          </div>
        </BentoCell>
      </div>
    </section>
  );
}

function BentoCell({ id, title, subtitle, icon, children, className = "", index = 0 }) {
  return (
    <div data-reveal style={{transitionDelay: (index * 70) + 'ms'}} className={"relative border border-white/10 bg-zinc-900/40 p-5 hover:bg-zinc-900/70 transition-colors group " + className}>
      {/* corner ID */}
      <div className="absolute -top-2 left-3 px-1.5 bg-zinc-950 mono text-[9px] tracking-[0.24em] text-zinc-500">{id}</div>
      <div className="absolute top-3 right-3 mono text-[9px] tracking-[0.24em] text-zinc-600 group-hover:accent transition-colors">{icon ? '' : ''}</div>

      <div className="flex items-start justify-between gap-3 mb-4">
        <div>
          <div className="font-sans text-[18px] md:text-[20px] text-zinc-100 tracking-tight">{title}</div>
          <div className="mono text-[10px] tracking-[0.22em] text-zinc-500 mt-1">{subtitle}</div>
        </div>
        {icon && <div className="text-zinc-500 group-hover:accent transition-colors"><Icon name={icon} className="w-5 h-5" strokeWidth={1.1} /></div>}
      </div>
      <Hair className="mb-4" />
      {children}
    </div>
  );
}

/* -------------------------------- lab ----------------------------------- */
const PROJECTS = [
  {
    id: "PRJ-LAB.01",
    name: "GenAI Assistant over Aerospace Documentation",
    code: "RAG / AGENTIC / ON-PREM LLM",
    period: "AIRBUS DS · 2025",
    summary: "A service-oriented RAG and agentic assistant over ATA chapters and manufacturing manuals, running on Airbus's on-prem stack (self-hosted Mistral / Gemma) with hybrid semantic + BM25 retrieval. The design call that matters: it hands back the raw source passage rather than letting the model paraphrase a safety manual — in aerospace a wrong answer is a defect, not an inconvenience.",
    arch: [
      ["GOVERN", "Strict on-premise · nothing leaves the client's network"],
      ["INGEST", "Document loaders · chunking · metadata enrichment"],
      ["INDEX", "Qdrant vector store · hybrid semantic + BM25 retrieval"],
      ["SERVE", "Separate django-ninja API services behind an orchestrator"],
      ["AGENT", "Router · specialised sub-agents · tool calling"],
      ["EVAL", "Arize Phoenix · tracing · LLM-as-a-Judge · golden dataset"],
    ],
    impact: ["ON-PREM · NO DATA EGRESS", "GROUNDED · RAW SOURCE CHUNKS", "TRACED EVALS · PHOENIX"],
    tools: ["Mistral · Gemma", "Qdrant", "BM25", "django-ninja", "Arize Phoenix"],
  },
  {
    id: "PRJ-LAB.02",
    name: "C295 — Rework Forecasting & Anomaly Detection",
    code: "ML FORECAST + ANOMALY",
    period: "AIRBUS DS · 2023-2025",
    summary: "Delta-loading ETL and Python ML models forecasting rework hours and recurring non-conformities two weeks ahead, by operation family, on the C295 programme — and the web application that put them in front of the people doing the work.",
    arch: [
      ["DATA", "Delta-loading ETL · Pandas / NumPy · feature engineering by operation family"],
      ["MODEL", "Scikit-Learn Random Forest · custom recency-weighted anomaly heuristic"],
      ["SEARCH", "Tokenised multi-column search over Technical Log Book records"],
      ["SURFACE", "Django + React application over the processing pipelines"],
      ["DEPLOY", "Linux server · nginx · SFTP / SSH — deployments run by me"],
      ["ADOPT", "Manufacturing Engineering and Quality onboarded onto one app"],
    ],
    impact: ["TWO WEEKS AHEAD", "ONE APP, NOT A SHARED FOLDER", "FULL QUERYABLE HISTORY"],
    tools: ["Python", "Scikit-Learn", "Pandas", "PostgreSQL", "Django · React"],
  },
  {
    id: "PRJ-LAB.03",
    name: "A400M / F10X — Line Scheduling Optimisation",
    code: "RCPSP / OPTIMISATION",
    period: "AIRBUS DS · 2023-2025",
    summary: "Integrated and tuned a resource-constrained project scheduling (RCPSP) solver for final assembly line planning, and built the full XML interface that turns its output into a working MS Project schedule.",
    arch: [
      ["INPUT", "Operations · resources · line constraints"],
      ["SOLVER", "Resource-constrained scheduling (RCPSP) · integration and tuning"],
      ["INTERFACE", "Full XML output · resources, assignments and gaps"],
      ["SURFACE", "MS Project schedule across 10 consecutive aircraft"],
    ],
    impact: ["SOLVER · INTEGRATED & TUNED", "XML INTERFACE · BUILT END TO END", "10 CONSECUTIVE AIRCRAFT"],
    tools: ["Python", "RCPSP", "XML", "MS Project"],
  },
  {
    id: "PRJ-LAB.04",
    name: "n8n — Tech Scouting to Enterprise Adoption",
    code: "AUTOMATION / ADOPTION",
    period: "AIRBUS DS · 2025",
    summary: "Found n8n on a side project of my own, proved it out, and pushed it onto Airbus's automation roadmap — so that on-prem agent workflows became something non-developers could build themselves.",
    arch: [
      ["SCOUT", "Found on a personal project · evaluated against the on-prem constraint"],
      ["PROVE", "Built the case with working workflows, not slides"],
      ["ADOPT", "Onto the client's automation roadmap"],
      ["ENABLE", "On-prem agent automation for people who don't write code"],
    ],
    impact: ["SIDE PROJECT → ROADMAP", "ON-PREM AGENT AUTOMATION", "NON-DEVELOPERS ENABLED"],
    tools: ["n8n", "On-prem agents", "Python"],
  },
  {
    id: "PRJ-LAB.05",
    name: "ADS-B Aircraft Tracking — Telemetry Pipeline",
    code: "SIGNAL CLEANING / TIME SERIES",
    period: "PERSONAL · 2023",
    summary: "Built the telemetry cleaning and sequencing pipeline for an ADS-B aircraft-tracking ground station. A live feed of position reports arrives noisy and out of order; the plots on the other end need a clean, ordered series. Same instinct I later got paid for — messy signal in, usable series out — three years earlier and on hobby hardware.",
    arch: [
      ["FEED", "Live ADS-B position reports · noisy, gapped, out of order"],
      ["CLEAN", "Outlier and duplicate rejection · field-level sanity checks"],
      ["SEQUENCE", "Ordering and gap handling into a per-aircraft series"],
      ["SURFACE", "A series the tracking plots could actually render"],
    ],
    impact: ["NOISY FEED → CLEAN SERIES", "PER-AIRCRAFT SEQUENCING", "THE DATA INSTINCT, DATED 2023"],
    tools: ["Python", "Pandas", "Time series", "Data cleaning"],
  },
  {
    id: "PRJ-LAB.06",
    name: "Full-stack Web Application (side project)",
    code: "DJANGO · REACT · DOCKER SWARM",
    period: "PERSONAL · 2026",
    summary: "Designed, built and deployed a full-stack web application end to end on a complete modern production stack, including Model Context Protocol (MCP) integrations that pull data from external provider APIs — hands-on proof of shipping and operating a whole system solo.",
    arch: [
      ["BACKEND", "Django 5 · Django REST Framework · PostgreSQL (pooled) · Redis"],
      ["FRONTEND", "React 19 · Vite · Tailwind CSS"],
      ["DEPLOY", "Docker · Docker Swarm on Linux VPS · Traefik · automatic TLS"],
      ["CI/CD", "GitHub Actions · SemVer-tagged, idempotent, gated releases"],
      ["TEST", "pytest · Vitest · Playwright E2E + visual regression"],
      ["OBSERVE", "Prometheus · Grafana · role-based authentication"],
    ],
    impact: ["SHIPPED · END-TO-END", "AUTOMATED · GATED DEPLOYS", "MULTI-LEVEL TEST GATES"],
    tools: ["Django 5", "React 19", "MCP", "Docker Swarm", "GitHub Actions", "Playwright"],
  },
];

function Lab() {
  const [active, setActive] = useState(0);
  const p = PROJECTS[active];
  return (
    <section id="lab" className="px-6 lg:px-20 py-28 md:py-36">
      <TickHeader id="§ 04" label="The Lab" code="CASE.STUDIES" right={`${String(active+1).padStart(2,'0')} / ${String(PROJECTS.length).padStart(2,'0')} SELECTED`} />

      <div className="grid grid-cols-12 gap-6">
        {/* selector */}
        <div className="col-span-12 lg:col-span-4 space-y-1">
          {PROJECTS.map((proj, i) => {
            const sel = i === active;
            return (
              <button
                key={proj.id}
                onClick={() => setActive(i)}
                data-reveal
                style={{transitionDelay: (i * 70) + 'ms'}}
                className={"w-full text-left px-4 py-3 border transition-all " + (sel
                  ? "border-accent bg-[var(--accent-dim)]"
                  : "border-white/10 hover:border-white/30 bg-white/[0.015]"
                )}
              >
                <div className="flex items-center justify-between mb-1">
                  <span className={"mono text-[10px] tracking-[0.22em] " + (sel ? "accent" : "text-zinc-500")}>{proj.id}</span>
                  <span className="mono text-[10px] tracking-[0.22em] text-zinc-600">{proj.period}</span>
                </div>
                <div className={"font-sans text-[15px] leading-snug " + (sel ? "text-zinc-50" : "text-zinc-200")}>{proj.name}</div>
                <div className="mono text-[10px] tracking-[0.18em] text-zinc-500 mt-1">{proj.code}</div>
              </button>
            );
          })}
        </div>

        {/* detail */}
        <div data-reveal="right" style={{transitionDelay:'120ms'}} className="col-span-12 lg:col-span-8">
          <Bracket padding="p-6 md:p-8" className="bg-zinc-900/30">
            <div className="flex flex-wrap items-baseline justify-between gap-3 mb-2">
              <span className="mono text-[10px] tracking-[0.22em] accent">{p.id} · {p.code}</span>
              <span className="mono text-[10px] tracking-[0.22em] text-zinc-500">{p.period}</span>
            </div>
            <h3 className="font-sans text-2xl md:text-3xl text-zinc-50 tracking-tight leading-tight">{p.name}</h3>
            <p className="text-zinc-300 text-[14.5px] leading-[1.6] mt-3 max-w-[64ch]">{p.summary}</p>

            <div className="mt-6">
              <div className="mono text-[10px] tracking-[0.22em] text-zinc-500 mb-3">// ARCHITECTURE</div>
              <div className="border-t border-white/10">
                {p.arch.map(([k, v], i) => (
                  <div key={i} className="grid grid-cols-12 gap-3 py-2.5 border-b border-white/10 items-baseline">
                    <div className="col-span-12 md:col-span-3 mono text-[10px] tracking-[0.22em] accent">› {k}</div>
                    <div className="col-span-12 md:col-span-9 mono text-[12.5px] text-zinc-200 leading-[1.55]">{v}</div>
                  </div>
                ))}
              </div>
            </div>

            <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-3">
              {p.impact.map((m, i) => (
                <div key={i} className="border border-white/10 px-3 py-3">
                  <div className="mono text-[9px] tracking-[0.24em] text-zinc-500">IMPACT.{String(i+1).padStart(2,'0')}</div>
                  <div className="mono text-[13px] text-zinc-50 mt-1">{m}</div>
                </div>
              ))}
            </div>

            <div className="mt-6 flex flex-wrap gap-1.5">
              {p.tools.map(t => (
                <span key={t} className="mono text-[10.5px] px-2 py-1 border border-white/10 text-zinc-300">{t}</span>
              ))}
            </div>
          </Bracket>
        </div>
      </div>
    </section>
  );
}

/* ------------------------- education + certs --------------------------- */
function CredentialsSection() {
  return (
    <section className="px-6 lg:px-20 py-28 md:py-36">
      <TickHeader id="§ 05" label="Credentials" code="EDU · CERT · LANG" right="VERIFIED" />
      <div className="grid grid-cols-12 gap-6">
        <div data-reveal className="col-span-12 md:col-span-6">
          <Tag dot>EDUCATION</Tag>
          <div className="mt-4 space-y-3">
            {[
              ["MSc · Aeronautical Engineering", "Universidad de Sevilla · ETSI", "2022 — 2024", "SVQ · ES"],
              ["BSc · Aerospace Engineering", "Universidad de Sevilla · ETSI", "2018 — 2022", "3 HONORS DISTINCTIONS"],
            ].map(([t, o, p, n], i) => (
              <div key={i} className="border border-white/10 p-4 hover:border-white/30 transition-colors">
                <div className="flex items-baseline justify-between gap-3 mb-1">
                  <div className="font-sans text-[17px] text-zinc-100 tracking-tight">{t}</div>
                  <div className="mono text-[10px] tracking-[0.22em] text-zinc-500">{p}</div>
                </div>
                <div className="mono text-[11px] text-zinc-400">{o}</div>
                <div className="mono text-[10px] tracking-[0.22em] accent mt-2">{n}</div>
              </div>
            ))}
          </div>
        </div>

        <div data-reveal style={{transitionDelay:'120ms'}} className="col-span-12 md:col-span-3">
          <Tag dot>CERTIFICATES</Tag>
          <ul className="mt-4 space-y-2 mono text-[12px] text-zinc-300">
            <li className="flex gap-2 border-b border-white/10 pb-2">
              <span className="accent shrink-0">CRT-01</span>
              <span>Certified Associate in Project Management <span className="text-zinc-500">· PMI</span></span>
            </li>
            <li className="flex gap-2 border-b border-white/10 pb-2">
              <span className="accent shrink-0">CRT-02</span>
              <span>Python for Data Science & ML Bootcamp <span className="text-zinc-500">· Udemy</span></span>
            </li>
            <li className="flex gap-2 border-b border-white/10 pb-2">
              <span className="accent shrink-0">CRT-03</span>
              <span>Electric Aircraft Systems and Avionics <span className="text-zinc-500">· COIAE</span></span>
            </li>
            <li className="flex gap-2 border-b border-white/10 pb-2">
              <span className="accent shrink-0">CRT-04</span>
              <span>Power BI <span className="text-zinc-500">· Santander Open Academy</span></span>
            </li>
            <li className="flex gap-2 border-b border-white/10 pb-2">
              <span className="accent shrink-0">CRT-05</span>
              <span>Microsoft Azure AI Fundamentals (AI-901) <span className="text-zinc-500">· in progress</span></span>
            </li>
          </ul>
        </div>

        <div data-reveal style={{transitionDelay:'200ms'}} className="col-span-12 md:col-span-3">
          <Tag dot>LANGUAGES</Tag>
          <div className="mt-4 space-y-3">
            {[
              ["ES", "Spanish", 100, "NATIVE"],
              ["EN", "English", 80, "FULL PROFESSIONAL"],
              ["FR", "French", 60, "PROFESSIONAL WORKING"],
            ].map(([code, lang, lvl, label], i) => (
              <div key={i} className="border-b border-white/10 pb-3">
                <div className="flex items-baseline justify-between mb-1.5">
                  <div className="flex items-baseline gap-3">
                    <span className="mono text-[11px] accent tracking-[0.22em]">{code}</span>
                    <span className="text-zinc-200 text-[14px]">{lang}</span>
                  </div>
                  <span className="mono text-[10px] tracking-[0.22em] text-zinc-500">{label}</span>
                </div>
                <div className="h-1 bg-white/10 relative">
                  <div className="absolute inset-y-0 left-0 bg-accent" style={{ width: lvl + '%' }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------------------- contact / footer -------------------------- */
function Contact() {
  return (
    <section id="contact" className="px-6 lg:px-20 py-28 md:py-36">
      <TickHeader id="§ 06" label="Establish Link" code="CONTACT.CHANNELS" right="OPEN TO RELOCATION" />
      <div className="grid grid-cols-12 gap-6">
        <div data-reveal="left" className="col-span-12 lg:col-span-7">
          <div className="font-sans text-[40px] md:text-[64px] leading-[0.95] text-zinc-50 tracking-tight">
            Hand me the<br/>
            <span className="text-zinc-400">next problem worth</span><br/>
            <span className="accent">solving.</span>
          </div>
          <p className="mt-6 text-zinc-300 text-[15px] leading-[1.6] max-w-[58ch]">
            I&apos;m always interested in conversations about on-premise GenAI,
            shopfloor digitalization, AI that has to work inside closed and regulated
            environments, and any mission where engineering rigor meets a four-decade product cycle.
          </p>
          <div className="mt-8 flex flex-wrap gap-3">
            <a href="mailto:joaquinromerocabeza@gmail.com" className="inline-flex items-center gap-2 px-4 py-3 bg-accent text-black mono text-[11px] tracking-[0.22em] hover:opacity-90 transition">
              <Icon name="arrow-up-right" className="w-3.5 h-3.5" strokeWidth={1.6} />
              OPEN COMMS · EMAIL
            </a>
            <a href="https://www.linkedin.com/in/joaquin-romero-cabeza" target="_blank" rel="noreferrer" className="inline-flex items-center gap-2 px-4 py-3 border border-white/20 text-zinc-200 mono text-[11px] tracking-[0.22em] hover:border-accent hover:accent transition">
              <Icon name="linkedin" className="w-3.5 h-3.5" strokeWidth={1.4} />
              LINKEDIN · /joaquin-romero-cabeza
            </a>
          </div>
        </div>

        <div data-reveal="right" style={{transitionDelay:'120ms'}} className="col-span-12 lg:col-span-5">
          <Bracket padding="p-6" className="bg-zinc-900/40">
            <div className="mono text-[10px] tracking-[0.22em] text-zinc-500 mb-4">// COMMS PANEL</div>
            <Row k="EMAIL"    v="joaquinromerocabeza@gmail.com" />
            <Row k="BASE"     v="Seville · Spain" />
            <Row k="RELOCATE" v="OPEN · INTERNATIONAL" accent />
            <Row k="HOURS"    v="UTC+01:00 / +02:00" />
            <Row k="STATUS"   v="OPEN TO OFFERS" />
            <div className="mt-4 grid grid-cols-3 gap-2">
              <Mini k="MAIL" v="OK" />
              <Mini k="LINK" v="OK" />
              <Mini k="GPS"  v="LOCK" />
            </div>
          </Bracket>
        </div>
      </div>
    </section>
  );
}
const Row = ({ k, v, accent }) => (
  <div className="grid grid-cols-12 gap-3 py-2.5 border-b border-white/10 items-baseline">
    <div className="col-span-4 mono text-[10px] tracking-[0.22em] text-zinc-500">{k}</div>
    <div className={"col-span-8 mono text-[12.5px] " + (accent ? "accent" : "text-zinc-200")}>{v}</div>
  </div>
);
const Mini = ({ k, v }) => (
  <div className="border border-white/10 p-2 text-center">
    <div className="mono text-[9px] tracking-[0.24em] text-zinc-500">{k}</div>
    <div className="mono text-[10px] accent mt-1">{v}</div>
  </div>
);

function Footer() {
  return (
    <footer className="px-6 lg:px-20 py-12 border-t border-white/10">
      <div className="flex flex-wrap items-center justify-between gap-3 mono text-[10px] tracking-[0.22em] text-zinc-500">
        <div>© 2026 · J. ROMERO CABEZA · ALL READOUTS NOMINAL</div>
        <div className="flex gap-5">
          <span>DOC.REV 2026.07</span>
          <span>BUILD · STABLE</span>
          <span className="accent">END OF FEED</span>
        </div>
      </div>
    </footer>
  );
}

/* --------------------------- nav (side dock) ---------------------------- */
function NavDock() {
  const items = [
    ["§01", "PILOT", "top"],
    ["§02", "LOG",   "experience"],
    ["§03", "STACK", "workshop"],
    ["§04", "LAB",   "lab"],
    ["§05", "CRED",  "credentials"],
    ["§06", "LINK",  "contact"],
  ];
  return (
    <nav className="hidden xl:flex fixed left-12 top-1/2 -translate-y-1/2 z-40 flex-col gap-1">
      {items.map(([k, l, id]) => (
        <a key={id} href={id === 'top' ? '#' : '#' + id} className="group flex items-center gap-3">
          <span className="w-6 h-px bg-white/20 group-hover:bg-accent transition-colors" />
          <span className="mono text-[10px] tracking-[0.22em] text-zinc-500 group-hover:accent transition-colors">{k} · {l}</span>
        </a>
      ))}
    </nav>
  );
}

/* ---------------------------- tweaks panel ----------------------------- */
const DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#00ed3f",
  "scanlines": false,
  "grid": true,
  "density": "comfortable"
}/*EDITMODE-END*/;

function Tweaks() {
  const [t, setTweak] = window.useTweaks(DEFAULTS);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    // derive helpers
    const hex = t.accent.replace('#','');
    const r = parseInt(hex.slice(0,2),16), g = parseInt(hex.slice(2,4),16), b = parseInt(hex.slice(4,6),16);
    root.style.setProperty('--accent-dim', `rgba(${r}, ${g}, ${b}, 0.12)`);
    root.style.setProperty('--accent-ring', `rgba(${r}, ${g}, ${b}, 0.4)`);
    document.body.classList.toggle('scanlines', !!t.scanlines);
    document.body.style.backgroundImage = t.grid
      ? `linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px)`
      : 'none';
  }, [t]);

  return (
    <window.TweaksPanel title="TWEAKS · MFD">
      <window.TweakSection title="ACCENT (PHOSPHOR)">
        <window.TweakColor
          label="Color"
          value={t.accent}
          options={["#00ed3f", "#1a6dff", "#ff5a1f", "#ffd60a"]}
          onChange={v => setTweak('accent', v)}
        />
      </window.TweakSection>

      <window.TweakSection title="SURFACE">
        <window.TweakToggle label="Grid background"  value={t.grid}      onChange={v => setTweak('grid', v)} />
        <window.TweakToggle label="CRT scanlines"    value={t.scanlines} onChange={v => setTweak('scanlines', v)} />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

/* -------------------------------- app ---------------------------------- */
function App() {
  useEffect(() => { if (window.lucide && window.lucide.createIcons) window.lucide.createIcons(); }, []);

  // scroll-triggered fade-in for any [data-reveal] element
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.08, rootMargin: '0px 0px -8% 0px' });

    const scan = () => {
      document.querySelectorAll('[data-reveal]:not(.in)').forEach((el) => io.observe(el));
    };
    scan();
    const mo = new MutationObserver(() => scan());
    mo.observe(document.body, { childList: true, subtree: true });

    return () => { io.disconnect(); mo.disconnect(); };
  }, []);

  // scroll progress + parallax (rAF-throttled)
  useEffect(() => {
    const bar = document.getElementById('scroll-progress');
    const parallaxEls = document.querySelectorAll('[data-parallax]');
    let ticking = false;
    const update = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      const p = max > 0 ? (h.scrollTop / max) : 0;
      if (bar) bar.style.width = (p * 100).toFixed(2) + '%';
      const y = h.scrollTop;
      parallaxEls.forEach(el => {
        el.style.transform = `translate3d(0, ${y * -0.08}px, 0)`;
      });
      ticking = false;
    };
    const onScroll = () => {
      if (!ticking) { requestAnimationFrame(update); ticking = true; }
    };
    update();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);

  return (
    <div className="relative min-h-screen">
      <StatusBar />
      <SideRail side="left" />
      <SideRail side="right" />
      <NavDock />

      <main id="top" className="lg:px-10 xl:pl-44 xl:pr-16">
        <Hero />
        <Telemetry />
        <ExperienceSection />
        <Workshop />
        <Lab />
        <div id="credentials"><CredentialsSection /></div>
        <Contact />
        <Footer />
      </main>

      <Tweaks />
    </div>
  );
}

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