const { useState: useStateExp, useEffect: useEffectExp, useRef: useRefExp } = React;

// ============================================================
// "What Eloreum Is" — benefit-led, plain language
// ============================================================
function Explainer() {
  return (
    <section className="explainer">
      <div className="section-head">
        <div className="section-eyebrow">
          <span className="eyebrow-dash" />
          <span>§ 01 — what eloreum does</span>
        </div>
        <h2 className="section-title">
          Your organization has answers<br />
          <span className="section-title-accent">scattered across the people who built it.</span>
        </h2>
        <p className="section-deck">
          Eloreum quietly maps what your people <em>actually know</em> — their craft, context, and judgment — and turns it into something the whole organization can ask, in seconds, with the receipts.
        </p>
      </div>

      <ThreeColumn />

      <FlowDiagram />

      <SecuritySection />

      <TrustSection />
    </section>
  );
}

// Three pillars, marketing-grade
function ThreeColumn() {
  const cols = [
    {
      n: '01',
      t: 'Agents that learn your business',
      d: 'Specialized digital colleagues that absorb your context — your terminology, your standards, your people — and sharpen with every interaction.',
      mono: 'one mission · one personality · real judgment',
    },
    {
      n: '02',
      t: 'Teams that coordinate like an org',
      d: 'Agents collaborate the way your best teams do. They hand off, escalate, and back each other up — so a single question can travel across departments without you doing the legwork.',
      mono: 'right expert · right moment · automatically',
    },
    {
      n: '03',
      t: 'A living map of what you know',
      d: 'Documents, projects, capabilities, and tacit know-how — woven into a graph your whole company can query. Every answer cites its sources.',
      mono: 'queryable · grounded · always current',
    },
  ];
  return (
    <div className="three-col">
      {cols.map((c, i) => (
        <div key={c.n} className="col-card" style={{ animationDelay: `${i * 120}ms` }}>
          <div className="col-n">{c.n}</div>
          <div className="col-t">{c.t}</div>
          <p className="col-d">{c.d}</p>
          <div className="col-mono">{c.mono}</div>
        </div>
      ))}
    </div>
  );
}

// Flow diagram — Ask → Understand → Verify → Deliver
function FlowDiagram() {
  const [phase, setPhase] = useStateExp(0);
  useEffectExp(() => {
    const id = setInterval(() => setPhase(p => (p + 1) % 4), 1800);
    return () => clearInterval(id);
  }, []);

  const phases = [
    { id: 'ASK',       title: 'You ask',       sub: 'in plain language · any channel' },
    { id: 'GATHER',    title: 'It gathers',    sub: 'from the corner of your business that knows' },
    { id: 'VERIFY',    title: 'It verifies',   sub: 'independent review · before you ever see it' },
    { id: 'DELIVER',   title: 'It delivers',   sub: 'with sources · in the format you need' },
  ];

  return (
    <div className="flow-section">
      <div className="diagram-head">
        <span className="section-eyebrow">
          <span className="eyebrow-dash" />
          <span>§ 02 — how an answer happens</span>
        </span>
        <h3>Every response is checked before it reaches you.</h3>
        <p className="diagram-deck">
          A second, independent agent reviews every answer for accuracy, tone, and boundaries — so nothing untrue or unsafe slips through. You see what's right. Not what's first.
        </p>
      </div>

      <div className="flow-stage">
        {phases.map((p, i) => (
          <React.Fragment key={p.id}>
            <div className={`flow-step ${i === phase ? 'active' : ''} ${i < phase ? 'done' : ''}`}>
              <div className="flow-step-id">{p.id}</div>
              <div className="flow-step-title">{p.title}</div>
              <div className="flow-step-sub">{p.sub}</div>
              <div className="flow-step-dot" />
            </div>
            {i < phases.length - 1 && (
              <div className={`flow-arrow ${i < phase ? 'lit' : ''}`}>
                <span className="flow-arrow-line" />
                <span className="flow-arrow-head">→</span>
              </div>
            )}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

// Security / sovereignty section — replaces memory tiers
function SecuritySection() {
  const pillars = [
    {
      n: '01',
      t: 'Private to your tenant',
      d: 'Your data, your people, your context — sealed inside an enclave only you can reach. Never trained into shared models. Never visible to other customers. Never visible to us.',
    },
    {
      n: '02',
      t: 'Encrypted end-to-end',
      d: 'Encryption at rest, in transit, and in memory. Secrets stay in a hardened vault. Every action is logged, signed, and auditable.',
    },
    {
      n: '03',
      t: 'Yours to take with you',
      d: 'Export the graph, the conversations, the audit trail — anytime. Nothing about Eloreum is designed to lock you in.',
    },
  ];
  return (
    <div className="security-section">
      <div className="diagram-head">
        <span className="section-eyebrow">
          <span className="eyebrow-dash" />
          <span>§ 03 — built for what you can't afford to lose</span>
        </span>
        <h3>Your knowledge stays yours.</h3>
        <p className="diagram-deck">
          Eloreum is designed for organizations that take security seriously — defense contractors, health systems, professional services, research labs. The default posture is private, the audit trail is complete, and the data never leaves your boundary.
        </p>
      </div>

      <div className="security-grid">
        {pillars.map(p => (
          <div className="security-card" key={p.n}>
            <div className="security-n">{p.n}</div>
            <div className="security-t">{p.t}</div>
            <div className="security-d">{p.d}</div>
          </div>
        ))}

        <div className="security-badge-row">
          <SecBadge title="Encryption at rest" sub="AES-256" />
          <SecBadge title="Encryption in transit" sub="TLS 1.3" />
          <SecBadge title="SSO + SAML" sub="seeking" />
          <SecBadge title="SOC 2" sub="seeking" />
          <SecBadge title="Audit log" sub="every action signed" />
          <SecBadge title="Private deploy" sub="your cloud · on request" />
        </div>
      </div>
    </div>
  );
}

function SecBadge({ title, sub }) {
  return (
    <div className="sec-badge">
      <div className="sec-badge-title">{title}</div>
      <div className="sec-badge-sub">{sub}</div>
    </div>
  );
}

// Earned autonomy (formerly Trust Ladder) — reworded
function TrustSection() {
  const rungs = [
    { name: 'Watch',     desc: 'New agents start here. Everything they do is logged and reviewed — they earn the right to act.' },
    { name: 'Suggest',   desc: 'They begin proposing — you approve each move. Nothing happens without your nod.' },
    { name: 'Draft',     desc: 'They take action inside your guardrails. You\'re notified. You can always intervene.' },
    { name: 'Trusted',   desc: 'They handle their lane on their own. The independent reviewer still watches every step.' },
  ];
  const [active, setActive] = useStateExp(3);
  useEffectExp(() => {
    const id = setInterval(() => setActive(a => (a + 1) % rungs.length), 2400);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="trust-section">
      <div className="diagram-head">
        <span className="section-eyebrow">
          <span className="eyebrow-dash" />
          <span>§ 04 — earned autonomy</span>
        </span>
        <h3>Trust is earned. Never assumed.</h3>
        <p className="diagram-deck">
          Every agent climbs a ladder of responsibility based on how it actually performs. Promotion is slow and visible. Demotion is immediate. You always know what each one is allowed to do — and why.
        </p>
      </div>

      <div className="ladder">
        {rungs.map((r, i) => (
          <div key={r.name} className={`rung ${active === i ? 'active' : ''}`}>
            <div className="rung-num">0{i + 1}</div>
            <div className="rung-body">
              <div className="rung-head">
                <span className="rung-name">{r.name}</span>
                <span className="rung-range">{['new', 'proving', 'proven', 'trusted'][i]}</span>
              </div>
              <div className="rung-desc">{r.desc}</div>
            </div>
            <div className="rung-bar" style={{ '--fill': `${25 + i * 25}%` }} />
          </div>
        ))}
      </div>
    </div>
  );
}

// CTA — unchanged copy, slightly softer technical bits
function CTA({ onRequestAccess }) {
  const [email, setEmail] = useStateExp('');
  const [org, setOrg] = useStateExp('');
  const [submitted, setSubmitted] = useStateExp(false);
  function submit(e) {
    e.preventDefault();
    if (!email) return;
    setSubmitted(true);
  }
  return (
    <section className="cta" id="access">
      <div className="cta-inner">
        <div className="cta-left">
          <div className="eyebrow">
            <span className="eyebrow-dash" />
            <span>§ 05 — request access</span>
          </div>
          <h2 className="cta-title">
            Fourteen organizations.<br />
            <span className="cta-title-accent">One quiet advantage.</span>
          </h2>
          <p className="cta-deck">
            We're taking on a handful of design partners through 2026. Engineering firms, health systems, professional services, research labs — anywhere value depends on what your people know.
          </p>
          <div className="cta-list">
            <div>— white-glove deployment</div>
            <div>— a direct line to the team</div>
            <div>— private tenancy by default</div>
            <div>— pricing locked for v1.x</div>
          </div>
        </div>

        <div className="cta-right">
          {!submitted ? (
            <form className="access-form" onSubmit={submit}>
              <div className="form-chrome">
                <span className="form-title">_request_early_access</span>
                <span className="form-close">[esc]</span>
              </div>
              <label>
                <span>work email</span>
                <input type="email" required value={email} onChange={e => setEmail(e.target.value)} placeholder="you@yourorg.com" />
              </label>
              <label>
                <span>organization</span>
                <input type="text" value={org} onChange={e => setOrg(e.target.value)} placeholder="Acme Engineering Group" />
              </label>
              <label>
                <span>what are you hoping to make visible?</span>
                <textarea rows="3" placeholder="e.g. bench capacity for an upcoming engagement, flight-risk in our senior team, who's actually shipped this kind of work before…" />
              </label>
              <button className="btn-primary btn-block" type="submit">
                <span>Submit</span>
                <span className="btn-arrow">→</span>
              </button>
              <div className="form-foot">
                <span className="pulse-dot" />
                <span>responses within 48h · handled by a human, not an agent</span>
              </div>
            </form>
          ) : (
            <div className="access-form submitted">
              <div className="form-chrome">
                <span className="form-title">_confirmed</span>
                <span className="form-close">✓</span>
              </div>
              <div className="submitted-body">
                <div className="submitted-title">Received.</div>
                <div className="submitted-text">
                  We'll be in touch within 48 hours.
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// Footer
function Footer() {
  return (
    <footer className="site-foot">
      <div className="foot-top">
        <div className="foot-brand">
          <img src="assets/eloreum-full.png" alt="Eloreum" className="foot-logo" />
          <div className="foot-tagline">
            Quiet intelligence for organizations that<br />
            value what their people know.
          </div>
        </div>
        <div className="foot-cols">
          <div>
            <div className="foot-col-title">platform</div>
            <a>How it works</a>
            <a>Security</a>
            <a>Earned autonomy</a>
          </div>
          <div>
            <div className="foot-col-title">company</div>
            <a>About</a>
            <a>Careers</a>
            <a>Contact</a>
          </div>
          <div>
            <div className="foot-col-title">trust</div>
            <a>Status</a>
            <a>Privacy</a>
            <a>Terms</a>
          </div>
        </div>
      </div>
      <div className="foot-bottom">
        <span>© 2026 Eloreum, Inc.</span>
        <span className="ribbon-sep" />
        <span>
          <span className="pulse-dot" /> all systems operational
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, { Explainer, CTA, Footer });