/* ═══════════════════════════════════════════════════════
   IKIGAI · Sections · Narrative Architecture (S01–S14)
   ═══════════════════════════════════════════════════════ */

const { useEffect: useE, useRef: useR, useState: useS } = React;

// ───────────── Hook: scroll-driven orb state ─────────────
function useOrbStateOnScroll() {
  const { setState } = React.useContext(OrbContext);
  useE(() => {
    const sections = document.querySelectorAll('[data-orb-state]');
    if (!sections.length) return;
    const io = new IntersectionObserver(
      (entries) => {
        // pick the entry whose center is closest to viewport center
        let best = null;
        let bestDist = Infinity;
        for (const e of entries) {
          if (!e.isIntersecting) continue;
          const r = e.boundingClientRect;
          const center = r.top + r.height / 2;
          const d = Math.abs(center - window.innerHeight / 2);
          if (d < bestDist) { bestDist = d; best = e; }
        }
        if (best) {
          const s = best.target.getAttribute('data-orb-state');
          if (s) setState(s);
        }
      },
      { threshold: [0.25, 0.5, 0.75], rootMargin: '-20% 0px -20% 0px' }
    );
    sections.forEach((s) => io.observe(s));
    return () => io.disconnect();
  }, []);
}

// ───────────── Hook: reveal on intersect ─────────────
function useReveal() {
  useE(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('is-visible');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.15, rootMargin: '0px 0px -10% 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ───────────── Animated text (letter-stagger blur reveal) ─────────────
function SplitText({ text, delay = 0, className = '' }) {
  return (
    <span className={`split-text ${className}`}>
      {text.split(' ').map((word, wi) => (
        <span key={wi} className="split-word">
          {word.split('').map((ch, ci) => (
            <span
              key={ci}
              className="split-char"
              style={{ animationDelay: `${delay + (wi * 60) + (ci * 22)}ms` }}
            >
              {ch}
            </span>
          ))}
          {wi < text.split(' ').length - 1 && <span className="split-space"> </span>}
        </span>
      ))}
    </span>
  );
}

// ═══════════════ S01 · HERO ═══════════════
function HeroSection() {
  return (
    <section className="hero" data-orb-state="awake" data-screen-label="01 Hero">
      <div className="hero__bg-glow" aria-hidden="true" />
      <div className="hero__inner container">
        <div className="hero__copy">
          <div className="eyebrow">PLATAFORMA MADRE · v3</div>
          <h1 className="display hero__title">
            <SplitText text="La inteligencia" />
            <br />
            <SplitText text="que ordena tu vida," delay={400} />
            <br />
            <SplitText text="revela tu propósito" delay={900} />
            <br />
            <SplitText text="y proyecta tu alma" delay={1500} />
            <br />
            <SplitText text="al mundo." delay={2100} />
          </h1>
          <p className="hero__sub reveal">
            Una entidad cósmica que conecta humanos con propósito.
            <br />
            <span className="hero__sub-units">Pages · Vaults · Agents · Cloud · Governance</span>
          </p>
          <div className="hero__cta reveal" style={{ transitionDelay: '700ms' }}>
            <CTA primary onClick={() => document.getElementById('search')?.scrollIntoView({ behavior: 'smooth' })}>
              <span>Explorar IKIGAI</span>
            </CTA>
            <CTA href="https://vault.qruzh.com.mx" target="_blank">
              <span>Entrar al Vault</span>
              <Arrow />
            </CTA>
          </div>
        </div>
        <div className="hero__orb">
          <LivingOrb size={460} />
        </div>
      </div>
      <ScrollHint />
    </section>
  );
}

function ScrollHint() {
  return (
    <div className="scroll-hint" aria-hidden="true">
      <div className="scroll-hint__line" />
      <span className="scroll-hint__label">DESPLAZA · DESCUBRE</span>
    </div>
  );
}

function CTA({ children, primary, href, target, ...props }) {
  const cls = `cta ${primary ? 'cta--primary' : 'cta--ghost'}`;
  const inner = (
    <React.Fragment>
      <span className="cta__glow" />
      <span className="cta__content">{children}</span>
    </React.Fragment>
  );
  if (href) {
    return <a className={cls} href={href} target={target} rel={target === '_blank' ? 'noopener noreferrer' : undefined} {...props}>{inner}</a>;
  }
  return <button className={cls} {...props}>{inner}</button>;
}

function Arrow() {
  return (
    <svg className="cta__arrow" width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
      <path d="M3 7h7M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// ═══════════════ S02 · SEARCH PORTAL ═══════════════
function SearchSection() {
  return (
    <section id="search" className="search-section" data-orb-state="listening" data-screen-label="02 Portal">
      <div className="container reveal">
        <div className="eyebrow center">PORTAL DE DESCUBRIMIENTO</div>
        <h2 className="display section-title">
          Cuéntale a IKIGAI<br/>lo que buscas.
        </h2>
        <SearchPortal />
      </div>
    </section>
  );
}

// ═══════════════ S03 · PROBLEM ═══════════════
function ProblemSection() {
  const FRAGS = [
    { t: "Acta", s: "documento" },     { t: "Contrato", s: "legal" },
    { t: "Foto", s: "memoria" },        { t: "Cumpleaños", s: "familia" },
    { t: "Factura", s: "finanzas" },    { t: "Cliente", s: "negocio" },
    { t: "Idea", s: "pendiente" },      { t: "Predial", s: "trámite" },
    { t: "Página", s: "marca" },        { t: "Producto", s: "catálogo" },
    { t: "Recuerdo", s: "personal" },   { t: "Propósito", s: "esencia" },
  ];
  return (
    <section className="problem" data-orb-state="scattered" data-screen-label="03 Problema">
      <div className="container">
        <div className="reveal section-head">
          <div className="eyebrow">EL PROBLEMA HUMANO</div>
          <h2 className="display section-title">
            La vida humana<br/>está dispersa.
          </h2>
          <p className="section-lead">
            Documentos. Contratos. Recuerdos. Fotos. Clientes. Ideas. Propósito.
            <br/>
            <strong className="ink-deep">IKIGAI los conecta.</strong>
          </p>
        </div>
        <div className="frag-field reveal">
          {FRAGS.map((f, i) => (
            <div
              key={i}
              className="frag"
              style={{
                '--i': i,
                '--rx': (Math.sin(i * 1.7) * 40).toFixed(1) + 'px',
                '--ry': (Math.cos(i * 1.3) * 30).toFixed(1) + 'px',
                '--rot': (Math.sin(i * 2.3) * 8).toFixed(1) + 'deg',
              }}
            >
              <div className="frag__inner">
                <span className="frag__t">{f.t}</span>
                <span className="frag__s">{f.s}</span>
              </div>
            </div>
          ))}
          <div className="frag-orbit" aria-hidden="true">
            <div className="frag-orbit__ring" />
            <div className="frag-orbit__ring frag-orbit__ring--2" />
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══════════════ S04 · VISION ═══════════════
function VisionSection() {
  return (
    <section className="vision" data-orb-state="aligning" data-screen-label="04 Visión">
      <div className="container reveal">
        <div className="eyebrow center">LA VISIÓN</div>
        <h2 className="display section-title">
          No es una página.<br />
          No es un chatbot.<br />
          No es un drive.
        </h2>
        <p className="section-lead center">
          Es una arquitectura viva<br/>de propósito, memoria e inteligencia.
        </p>
        <div className="vision-venn" aria-hidden="true">
          <div className="venn-circle venn-circle--a"><span>Vida</span></div>
          <div className="venn-circle venn-circle--b"><span>Empresa</span></div>
          <div className="venn-circle venn-circle--c"><span>Inteligencia</span></div>
          <div className="venn-core">
            <div className="venn-core__glow" />
            <span className="venn-core__label wordmark">ikigai</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══════════════ S05 · FIVE UNITS ═══════════════
function UnitsSection() {
  const UNITS = [
    {
      name: "IKIGAI Pages",
      desc: "Páginas con alma, historia y conversión.",
      color: "#6EA8FF",
      visual: <UnitPages />,
      ord: "01",
    },
    {
      name: "IKIGAI Vaults",
      desc: "La memoria organizada de una vida o empresa.",
      color: "#7EF6E2",
      visual: <UnitVaults />,
      ord: "02",
    },
    {
      name: "IKIGAI Agents",
      desc: "Inteligencias especializadas con permisos y propósito.",
      color: "#9B8CFF",
      visual: <UnitAgents />,
      ord: "03",
    },
    {
      name: "IKIGAI Cloud",
      desc: "Arquitectura segura, multi-tenant, global.",
      color: "#C8D4F0",
      visual: <UnitCloud />,
      ord: "04",
    },
    {
      name: "IKIGAI Governance",
      desc: "Estructura de control, acceso y evolución.",
      color: "#F5DFA7",
      visual: <UnitGovernance />,
      ord: "05",
    },
  ];
  return (
    <section className="units" data-orb-state="aligning" data-screen-label="05 Unidades">
      <div className="container">
        <div className="reveal section-head">
          <div className="eyebrow">LAS CINCO UNIDADES</div>
          <h2 className="display section-title">Una sola entidad.<br/>Cinco órganos vivos.</h2>
        </div>
        <div className="units-grid reveal">
          {UNITS.map((u, i) => (
            <article key={i} className="unit-card" style={{ '--accent': u.color, '--d': i * 0.1 + 's' }}>
              <div className="unit-card__halo" />
              <div className="unit-card__visual">{u.visual}</div>
              <div className="unit-card__meta">
                <span className="unit-card__ord">{u.ord}</span>
                <span className="unit-card__line" />
                <span className="label">UNIDAD</span>
              </div>
              <h3 className="unit-card__name">{u.name}</h3>
              <p className="unit-card__desc">{u.desc}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function UnitPages() {
  return (
    <div className="uv-pages">
      <div className="uv-page uv-page--1" />
      <div className="uv-page uv-page--2" />
      <div className="uv-page uv-page--3" />
    </div>
  );
}
function UnitVaults() {
  return (
    <div className="uv-vaults">
      {[0,1,2,3].map(i => <div key={i} className="uv-vault-layer" style={{'--i':i}} />)}
    </div>
  );
}
function UnitAgents() {
  return (
    <svg className="uv-agents" viewBox="-50 -50 100 100" aria-hidden="true">
      <circle cx="0" cy="0" r="6" fill="#9B8CFF" />
      {[...Array(6)].map((_, i) => {
        const a = (i / 6) * Math.PI * 2;
        const x = Math.cos(a) * 32, y = Math.sin(a) * 32;
        return (
          <g key={i}>
            <line x1="0" y1="0" x2={x} y2={y} stroke="rgba(155,140,255,0.4)" strokeWidth="0.6" />
            <circle cx={x} cy={y} r="3" fill="rgba(126,246,226,0.85)" />
          </g>
        );
      })}
    </svg>
  );
}
function UnitCloud() {
  return (
    <div className="uv-cloud">
      {[0,1,2,3,4].map(i => <div key={i} className="uv-cloud-layer" style={{'--i':i}} />)}
    </div>
  );
}
function UnitGovernance() {
  return (
    <div className="uv-gov">
      {[0,1,2,3].map(i => <div key={i} className="uv-gov-ring" style={{'--i':i}} />)}
      <div className="uv-gov-core" />
    </div>
  );
}

// ═══════════════ S06 · PAGES ═══════════════
function PagesSection() {
  return (
    <section className="pages-show" data-orb-state="pages" data-screen-label="06 Pages">
      <div className="container">
        <div className="reveal section-head two-col">
          <div>
            <div className="eyebrow">IKIGAI PAGES</div>
            <h2 className="display section-title left">Páginas con alma.</h2>
          </div>
          <p className="section-lead">
            No solo diseño. Historia. Conversión. Propósito.
            Cada página es la proyección visible de tu identidad al mundo.
          </p>
        </div>
        <div className="pages-stack reveal">
          {[
            { name: "Qruzh", cat: "ECOMMERCE PREMIUM", color: "#6EA8FF" },
            { name: "Torre Land", cat: "SERVICIOS · CANCÚN", color: "#7EF6E2" },
            { name: "Maison Solune", cat: "ATELIER · PERFUMERÍA", color: "#F5DFA7" },
          ].map((p, i) => (
            <div key={i} className="page-mock" style={{ '--accent': p.color, '--i': i }}>
              <div className="page-mock__chrome">
                <span className="page-mock__dot" />
                <span className="page-mock__dot" />
                <span className="page-mock__dot" />
                <span className="page-mock__url">{p.name.toLowerCase().replace(' ','')}.com.mx</span>
              </div>
              <div className="page-mock__body">
                <div className="page-mock__halo" />
                <div className="page-mock__hero">
                  <span className="page-mock__cat">{p.cat}</span>
                  <span className="page-mock__title">{p.name}</span>
                  <span className="page-mock__line" />
                  <span className="page-mock__line page-mock__line--short" />
                </div>
                <div className="page-mock__grid">
                  {[0,1,2].map(k => <div key={k} className="page-mock__tile" />)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══════════════ S07 · VAULTS ═══════════════
function VaultsSection() {
  const LAYERS = [
    { name: "Documentos personales", n: "01" },
    { name: "Contratos y legal",     n: "02" },
    { name: "Historia familiar",     n: "03" },
    { name: "Memoria empresarial",   n: "04" },
    { name: "Vault Core",            n: "05", locked: true },
  ];
  const QUERIES = [
    "Dame el acta de nacimiento.",
    "¿Ya pagué el predial?",
    "Muéstrame los cumpleaños de Axel.",
    "Busca el contrato de renta.",
  ];
  return (
    <section className="vaults" data-orb-state="memory" data-screen-label="07 Vaults">
      <div className="container">
        <div className="reveal section-head">
          <div className="eyebrow">IKIGAI VAULTS</div>
          <h2 className="display section-title">La memoria<br/>que responde.</h2>
        </div>
        <div className="vaults-grid">
          <div className="vault-arch reveal">
            {LAYERS.map((l, i) => (
              <div key={i} className={`vault-layer ${l.locked ? 'vault-layer--lock' : ''}`} style={{'--i': i}}>
                <span className="vault-layer__n">{l.n}</span>
                <span className="vault-layer__name">{l.name}</span>
                {l.locked && <span className="vault-layer__lock">🔒</span>}
              </div>
            ))}
          </div>
          <div className="vault-queries reveal">
            <div className="label" style={{ marginBottom: '20px' }}>PREGÚNTALE A TU VIDA</div>
            {QUERIES.map((q, i) => (
              <div key={i} className="vault-query" style={{ '--d': i * 0.15 + 's' }}>
                <span className="vault-query__bullet">›</span>
                <span className="vault-query__text">{q}</span>
              </div>
            ))}
            <p className="vault-footer">Todo en su lugar. Para siempre. Seguro.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══════════════ S08 · AGENTS ═══════════════
function AgentsSection() {
  const AGENTS = [
    { name: "Orchestrator", role: "coordina" },
    { name: "Pages",        role: "diseña" },
    { name: "Vault",        role: "recuerda" },
    { name: "Legal",        role: "protege" },
    { name: "Finance",      role: "ordena" },
    { name: "Design",       role: "expresa" },
    { name: "Memory",       role: "preserva" },
    { name: "Security",     role: "custodia" },
  ];
  return (
    <section className="agents" data-orb-state="neural" data-screen-label="08 Agents">
      <div className="container">
        <div className="reveal section-head">
          <div className="eyebrow">IKIGAI AGENTS</div>
          <h2 className="display section-title">Inteligencia<br/>con propósito.</h2>
          <p className="section-lead">
            No son bots. Son colaboradores digitales especializados.
            Cada agente: su rol, su límite, su misión.
          </p>
        </div>
        <div className="agents-network reveal" aria-hidden="true">
          <div className="agents-network__center">
            <div className="agents-network__core" />
            <span className="agents-network__core-label">ORCHESTRATOR</span>
          </div>
          {AGENTS.slice(1).map((a, i) => {
            const angle = (i / 7) * Math.PI * 2 - Math.PI / 2;
            const r = 240;
            const x = Math.cos(angle) * r;
            const y = Math.sin(angle) * r;
            return (
              <div
                key={i}
                className="agent-node"
                style={{ '--x': x + 'px', '--y': y + 'px', '--d': i * 0.12 + 's' }}
              >
                <div className="agent-node__dot" />
                <div className="agent-node__label">
                  <span className="agent-node__name">{a.name}</span>
                  <span className="agent-node__role">{a.role}</span>
                </div>
                <svg className="agent-node__line" aria-hidden="true">
                  <line
                    x1="50%" y1="50%"
                    x2={`calc(50% - ${x}px)`} y2={`calc(50% - ${y}px)`}
                    stroke="url(#agentGrad)" strokeWidth="0.8"
                  />
                </svg>
              </div>
            );
          })}
          <svg width="0" height="0" style={{ position: 'absolute' }}>
            <defs>
              <linearGradient id="agentGrad" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0" stopColor="#9B8CFF" stopOpacity="0.5" />
                <stop offset="1" stopColor="#7EF6E2" stopOpacity="0.05" />
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
    </section>
  );
}

// ═══════════════ S09 · CLOUD ═══════════════
function CloudSection() {
  const STACK = [
    { name: "CDN Global",          tech: "Cloudflare",        op: "edge" },
    { name: "Workers Layer",       tech: "Edge Runtime",      op: "gateway" },
    { name: "Core Database",       tech: "Supabase · Postgres", op: "memoria" },
    { name: "Object Storage",      tech: "R2 · D1",           op: "archivos" },
    { name: "Source of Truth",     tech: "GitHub",            op: "ADN" },
  ];
  return (
    <section className="cloud" data-orb-state="architecture" data-screen-label="09 Cloud">
      <div className="container">
        <div className="reveal section-head">
          <div className="eyebrow">IKIGAI CLOUD</div>
          <h2 className="display section-title">Arquitectura<br/>diseñada para vivir.</h2>
        </div>
        <div className="cloud-stack reveal">
          {STACK.map((s, i) => (
            <div key={i} className="cloud-layer" style={{ '--i': i }}>
              <div className="cloud-layer__rail" />
              <div className="cloud-layer__pulse" />
              <div className="cloud-layer__content">
                <span className="cloud-layer__op">{s.op}</span>
                <span className="cloud-layer__name">{s.name}</span>
                <span className="cloud-layer__tech">{s.tech}</span>
              </div>
            </div>
          ))}
          <div className="cloud-flow" aria-hidden="true">
            <span /><span /><span /><span />
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══════════════ S10 · SECURITY ═══════════════
function SecuritySection() {
  const TENANTS = [
    { name: "Arturo",     desc: "vida · propósito",     glyph: "A", color: "#9B8CFF" },
    { name: "Qruzh",      desc: "ecommerce premium",    glyph: "Q", color: "#6EA8FF" },
    { name: "Torre Land", desc: "construcción · CUN",   glyph: "T", color: "#7EF6E2" },
    { name: "Solune",     desc: "atelier · perfumería", glyph: "S", color: "#F5DFA7" },
  ];
  return (
    <section className="security" data-orb-state="shield" data-screen-label="10 Security">
      <div className="container">
        <div className="reveal section-head">
          <div className="eyebrow">SEGURIDAD · MULTI-TENANT</div>
          <h2 className="display section-title">Cada cliente,<br/>su universo.</h2>
          <p className="section-lead">
            Cada universo, su frontera. Ningún dato cruza donde no debe.
          </p>
        </div>
        <div className="universes reveal">
          {TENANTS.map((t, i) => (
            <div key={i} className="universe" style={{ '--accent': t.color, '--d': i * 0.1 + 's' }}>
              <div className="universe__shield" />
              <div className="universe__core">
                <span>{t.glyph}</span>
              </div>
              <div className="universe__meta">
                <span className="universe__name">{t.name}</span>
                <span className="universe__desc">{t.desc}</span>
              </div>
            </div>
          ))}
          <div className="universes__center" aria-hidden="true">
            <div className="universes__center-glow" />
            <span className="wordmark">ikigai</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══════════════ S11 · GOVERNANCE ═══════════════
function GovernanceSection() {
  const RINGS = [
    { name: "Público",        d: "todos" },
    { name: "Clientes",       d: "tenants verificados" },
    { name: "Colaboradores",  d: "scopes limitados" },
    { name: "Core Team",      d: "arquitectos" },
    { name: "Admin",          d: "Arturo · Owner" },
  ];
  return (
    <section className="governance" data-orb-state="rings" data-screen-label="11 Governance">
      <div className="container">
        <div className="reveal section-head">
          <div className="eyebrow">ENGINEERING GOVERNANCE</div>
          <h2 className="display section-title">Evolución<br/>con estructura.</h2>
          <p className="section-lead">
            El ecosistema crece ordenado, no por accidente.
          </p>
        </div>
        <div className="gov-rings reveal">
          <div className="gov-rings__viz" aria-hidden="true">
            {RINGS.map((_, i) => (
              <div key={i} className="gov-ring" style={{ '--i': i }} />
            ))}
            <div className="gov-rings__center">A</div>
          </div>
          <ul className="gov-list">
            {RINGS.map((r, i) => (
              <li key={i} className="gov-item" style={{ '--d': i * 0.12 + 's' }}>
                <span className="gov-item__bar" />
                <span className="gov-item__name">{r.name}</span>
                <span className="gov-item__desc">{r.d}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

// ═══════════════ S12 · LABS ═══════════════
function LabsSection() {
  const LABS = [
    { name: "Vault Voice",         status: "En Lab",        d: "Habla con tu memoria" },
    { name: "Page Composer AI",    status: "Beta",          d: "Páginas que se redactan solas" },
    { name: "Agent Mesh",          status: "Explorando",    d: "Agentes que colaboran entre sí" },
    { name: "Semantic Search 2.0", status: "Próximamente",  d: "Encontrar por significado" },
    { name: "Vault for Family",    status: "En Lab",        d: "Memoria que cruza generaciones" },
    { name: "IKIGAI Studio",       status: "Beta",          d: "Crea unidades nuevas" },
  ];
  return (
    <section className="labs" data-orb-state="pulse" data-screen-label="12 Labs">
      <div className="container">
        <div className="reveal section-head">
          <div className="eyebrow">IKIGAI LABS</div>
          <h2 className="display section-title">El futuro<br/>en gestación.</h2>
        </div>
        <div className="labs-grid reveal">
          {LABS.map((l, i) => (
            <div key={i} className="lab-card" style={{ '--d': i * 0.08 + 's' }}>
              <div className="lab-card__badge" data-st={l.status}>{l.status}</div>
              <div className="lab-card__name">{l.name}</div>
              <div className="lab-card__d">{l.d}</div>
              <div className="lab-card__shimmer" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══════════════ S13 · ROADMAP ═══════════════
function RoadmapSection() {
  const PHASES = [
    { n: "0", name: "New Born",            done: true },
    { n: "1", name: "Supabase Core",       done: true },
    { n: "2", name: "Storage Strategy",    done: true },
    { n: "3", name: "Cloudflare Fast Layer", done: true },
    { n: "4", name: "GitHub Governance",   done: true },
    { n: "5", name: "Vault Arturo",        done: true },
    { n: "6", name: "Business Vaults",     done: false, active: true },
    { n: "7", name: "Pages Engine",        done: false },
    { n: "8", name: "Agents Mesh",         done: false },
    { n: "9", name: "Human Workspace",     done: false },
    { n: "10", name: "Multi-Dev Gov",      done: false },
  ];
  return (
    <section className="roadmap" data-orb-state="pulse" data-screen-label="13 Roadmap">
      <div className="container">
        <div className="reveal section-head">
          <div className="eyebrow">ROADMAP</div>
          <h2 className="display section-title">Un universo<br/>que se construye.</h2>
        </div>
        <div className="roadmap-rail reveal">
          <div className="roadmap-line" />
          <div className="roadmap-line roadmap-line--progress" style={{ '--p': '52%' }} />
          {PHASES.map((p, i) => (
            <div
              key={i}
              className={`roadmap-phase ${p.done ? 'is-done' : ''} ${p.active ? 'is-active' : ''}`}
              style={{ '--d': i * 0.06 + 's' }}
            >
              <div className="roadmap-phase__dot" />
              <div className="roadmap-phase__meta">
                <span className="roadmap-phase__n">FASE {p.n}</span>
                <span className="roadmap-phase__name">{p.name}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══════════════ S14 · FINAL ═══════════════
function FinalSection() {
  return (
    <section className="final" data-orb-state="stable" data-screen-label="14 Final">
      <div className="container reveal">
        <div className="final__orb">
          <LivingOrb size={280} />
        </div>
        <h2 className="display section-title center final__title">
          IKIGAI no organiza archivos.<br />
          <span className="ink-soft">Organiza significado.</span>
        </h2>
        <p className="final__lines">
          <span>No crea páginas. Revela propósito.</span>
          <span>No sustituye humanos. Los potencia.</span>
        </p>
        <div className="hero__cta center" style={{ marginTop: '40px' }}>
          <CTA primary href="https://vault.qruzh.com.mx" target="_blank">
            <span>Construir con IKIGAI</span>
            <Arrow />
          </CTA>
        </div>
        <footer className="footer">
          <div className="footer__row">
            <span className="wordmark" style={{ fontSize: '20px' }}>ikigai</span>
            <span className="footer__motto">Una entidad cósmica que ordena el propósito humano.</span>
          </div>
          <div className="footer__row footer__row--meta">
            <span>Pages · Vaults · Agents · Cloud · Governance</span>
            <span>© {new Date().getFullYear()} · Arturo Alejandro Monroy Blanco</span>
          </div>
        </footer>
      </div>
    </section>
  );
}

window.useOrbStateOnScroll = useOrbStateOnScroll;
window.useReveal = useReveal;
window.HeroSection = HeroSection;
window.SearchSection = SearchSection;
window.ProblemSection = ProblemSection;
window.VisionSection = VisionSection;
window.UnitsSection = UnitsSection;
window.PagesSection = PagesSection;
window.VaultsSection = VaultsSection;
window.AgentsSection = AgentsSection;
window.CloudSection = CloudSection;
window.SecuritySection = SecuritySection;
window.GovernanceSection = GovernanceSection;
window.LabsSection = LabsSection;
window.RoadmapSection = RoadmapSection;
window.FinalSection = FinalSection;