// ARC Proofing — site chrome + content sections.
const { useState: useStateS, useEffect: useEffectS } = React;

function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-in">
        <a className="wordmark" href="/">
          <span className="dim">arc</span><span className="lit">proof</span><span className="dim">.ing</span>
        </a>
        <div className="nav-links">
          <a href="#">Verify</a>
          <a href="#">Docs</a>
          <a href="#">API</a>
          <button className="btn-line">Sign In</button>
        </div>
      </div>
    </nav>
  );
}

function Selector({ items, active, onPick }) {
  return (
    <div className="selector">
      <div className="wrap selector-in">
        {items.map((it) => (
          <button
            key={it.slug}
            className={'sel-item' + (active === it.slug ? ' active' : '')}
            onClick={() => onPick(it.slug)}
          >
            {it.slug}
          </button>
        ))}
      </div>
    </div>
  );
}

// Home hero: the stacking backronym with a cycling highlight (the chameleon device).
function HomeHero({ home }) {
  const [hi, setHi] = useStateS(0);
  useEffectS(() => {
    const id = setInterval(() => setHi((h) => (h + 1) % home.stack.length), 1100);
    return () => clearInterval(id);
  }, []);
  return (
    <section className="hero wrap">
      <p className="hero-url">{home.subdomain}</p>
      <h1 className="hero-h1">
        <span className="dim">A Record of</span>
        <span className="hero-stack">
          {home.stack.map((w, i) => (
            <span key={i} className={'line' + (i === hi ? ' on' : '')}>{w}</span>
          ))}
        </span>
      </h1>
      <p className="hero-lead">{home.description}</p>
      <div className="hero-cta">
        <button className="btn-fill">{home.cta} <span aria-hidden="true">→</span></button>
        <button className="btn-ghost">Read the Docs</button>
      </div>
      <p className="hero-market">{home.marketSize}</p>
    </section>
  );
}

function VerticalHero({ v, onCompare }) {
  return (
    <section className="hero wrap">
      <p className="hero-url">{v.subdomain}</p>
      <h1 className="hero-h1">
        <span className="dim">A Record of</span>
        <span className="lit">{v.word}.</span>
      </h1>
      <p className="hero-lead">{v.description}</p>
      <div className="hero-cta">
        <button className="btn-fill">{v.cta} <span aria-hidden="true">→</span></button>
        <button className="btn-ghost">Read the Docs</button>
        {onCompare && <button className="btn-ghost" onClick={onCompare}>Comparison</button>}
      </div>
      <p className="hero-market">{v.marketSize}</p>
    </section>
  );
}

function DemoSection() {
  return (
    <section className="sec wrap">
      <p className="eyebrow">Proof, demonstrated // 01</p>
      <ProofDemo />
    </section>
  );
}

function Frameworks({ v }) {
  return (
    <section className="sec wrap">
      <p className="eyebrow">Compliance Frameworks</p>
      <div className="pills">
        {v.frameworks.map((f, i) => <span className="pill" key={i}>{f}</span>)}
      </div>
    </section>
  );
}

function Outcomes({ v }) {
  return (
    <section className="sec wrap">
      <p className="eyebrow">Outcomes</p>
      <div className="outcomes">
        {v.outcomes.map((o, i) => (
          <div className="outcome" key={i}>
            <span className="idx mono">{String(i + 1).padStart(2, '0')}</span>
            <div>
              <h3>{o.title}</h3>
              <p>{o.result}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Capabilities({ v }) {
  return (
    <section className="sec wrap">
      <p className="eyebrow">Capabilities</p>
      <ul className="caps">
        {v.capabilities.map((c, i) => (
          <li key={i}><span className="tick">→</span><span className="txt">{c}</span></li>
        ))}
      </ul>
    </section>
  );
}

function Pricing({ v }) {
  return (
    <section className="sec wrap">
      <p className="eyebrow">Pricing</p>
      <div className="prices">
        <div className="price">
          <p className="ptier">Entry</p>
          <span className="pamt">{v.pricing.entry}</span>
          {v.pricing.entry !== 'Custom' && v.pricing.entry !== 'Free' && <span className="pper">/ month</span>}
          <p className="pdesc">{v.pricing.entryLabel}</p>
        </div>
        <div className="price feat">
          <p className="ptier">Professional</p>
          <span className="pamt">{v.pricing.mid}</span>
          <span className="pper">/ month</span>
          <p className="pdesc">{v.pricing.midLabel}</p>
        </div>
        <div className="price">
          <p className="ptier">Enterprise</p>
          <span className="pamt">{v.pricing.enterprise}</span>
          <span className="pper">contact sales</span>
          <p className="pdesc">SSO, on-prem option, dedicated anchoring, SLA.</p>
        </div>
      </div>
    </section>
  );
}

function Implementation() {
  const cells = [
    ['Hash algorithm', 'SHA-256'],
    ['Primary anchor', 'Bitcoin OP_RETURN'],
    ['Redundancy', '6 networks'],
    ['Verification', 'Public, independent'],
  ];
  return (
    <section className="sec wrap">
      <p className="eyebrow">Implementation</p>
      <div className="impl">
        {cells.map(([k, val], i) => (
          <div className="cell" key={i}>
            <p className="k">{k}</p>
            <p className="vv">{val}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function CTA({ word, cta }) {
  return (
    <section className="sec wrap cta-sec">
      <h2 className="cta-h2"><span className="dim">Create your record of</span> <span className="lit">{word.toLowerCase()}.</span></h2>
      <p className="cta-sub">Cryptographic proof · Legal admissibility · Permanent record</p>
      <button className="btn-fill" style={{ margin: '0 auto' }}>{cta} <span aria-hidden="true">→</span></button>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="wrap foot-in">
        <p>arcproof.ing — ARC Knowware</p>
        <div className="links">
          <a href="#">Terms</a>
          <a href="#">Privacy</a>
          <a href="#">Status</a>
        </div>
      </div>
    </footer>
  );
}

// ── Comparison (ported from the original PricingPage, monotone) ──────────────
const CMP_TIERS = [
  { key: 'entry', label: 'Entry',        sub: 'Individuals & startups' },
  { key: 'mid',   label: 'Professional', sub: 'Firms & teams'          },
  { key: 'ent',   label: 'Enterprise',   sub: 'Custom deployments'      },
];

const CMP_FEATURES = [
  { label: 'SHA-256 client-side hashing',  entry: true,      mid: true,        ent: true },
  { label: 'Bitcoin blockchain anchoring', entry: true,      mid: true,        ent: true },
  { label: 'Public verification portal',   entry: true,      mid: true,        ent: true },
  { label: 'Timestamp volume',             entry: '25 / mo', mid: 'Unlimited', ent: 'Unlimited', divider: true },
  { label: 'Compliance certificate (PDF)', entry: false,     mid: true,        ent: true, divider: true },
  { label: 'Audit log export',             entry: false,     mid: true,        ent: true },
  { label: 'API access',                   entry: false,     mid: true,        ent: true },
  { label: 'Multi-chain redundancy',       entry: false,     mid: true,        ent: true },
  { label: 'Support',                      entry: 'Email',   mid: 'Priority',  ent: 'Dedicated', divider: true },
  { label: 'Custom SLA',                   entry: false,     mid: false,       ent: true },
  { label: 'Dedicated infrastructure',     entry: false,     mid: false,       ent: true },
  { label: 'Legal team onboarding',        entry: false,     mid: false,       ent: true },
];

function CmpCell({ value, mid }) {
  if (typeof value === 'string')
    return <span className={'cmp-cell mono' + (mid ? ' hl' : '')}>{value}</span>;
  if (value)
    return <span className={'cmp-cell mono' + (mid ? ' hl' : '')}>✓</span>;
  return <span className="cmp-cell mono off">—</span>;
}

function ComparisonTable() {
  const verticals = window.ARC_VERTICALS;
  return (
    <div className="cmp-body">
      <header className="cmp-head">
        <p className="cmp-eyebrow">Pricing</p>
        <h2 className="cmp-h1">Six verticals. Three tiers.</h2>
        <p className="cmp-lead">
          Every plan includes SHA-256 hashing, Bitcoin anchoring, and public
          verification. Tier pricing reflects compliance tooling, audit exports,
          and support SLA.
        </p>
      </header>

      <section className="cmp-feat">
        <p className="cmp-sub">What's included</p>
        <div className="cmp-grid">
          <div className="cmp-colhead" />
          {CMP_TIERS.map((t, i) => (
            <div className={'cmp-colhead' + (i === 1 ? ' hl' : '')} key={t.key}>{t.label}</div>
          ))}
          {CMP_FEATURES.map((f, fi) => {
            const d = f.divider ? ' div' : '';
            return (
              <React.Fragment key={fi}>
                <div className={'cmp-rk' + d}>{f.label}</div>
                <div className={'cmp-rc' + d}><CmpCell value={f.entry} /></div>
                <div className={'cmp-rc mid' + d}><CmpCell value={f.mid} mid /></div>
                <div className={'cmp-rc' + d}><CmpCell value={f.ent} /></div>
              </React.Fragment>
            );
          })}
        </div>
      </section>

      <section className="cmp-matrix">
        <div className="cmp-grid cmp-mx-head">
          <div className="cmp-sub">Price by vertical</div>
          {CMP_TIERS.map((t, i) => (
            <div className={'cmp-mxh' + (i === 1 ? ' hl' : '')} key={t.key}>
              <span className="l">{t.label}</span>
              <span className="s">{t.sub}</span>
            </div>
          ))}
        </div>
        {verticals.map((v) => (
          <div className="cmp-grid cmp-mx-row" key={v.slug}>
            <div className="cmp-vid">
              <p className="vn">{v.word}</p>
              <p className="vt">{v.tagline}</p>
              <p className="vm mono">{v.marketSize}</p>
            </div>
            <div className="cmp-price">
              <p className="pa">{v.pricing.entry}</p>
              <p className="pl">{v.pricing.entryLabel}</p>
            </div>
            <div className="cmp-price mid">
              <p className="pa">{v.pricing.mid}</p>
              <p className="pl">{v.pricing.midLabel}</p>
            </div>
            <div className="cmp-price">
              <p className="pa">{v.pricing.enterprise}</p>
              <p className="pl">Volume pricing, SLA, dedicated support</p>
            </div>
          </div>
        ))}
      </section>

      <div className="cmp-notes">
        <div>
          <p className="nk">Protocol</p>
          <p className="nv">
            All tiers run the same stack: SHA-256 client-side hashing,
            OpenTimestamps batching, and Bitcoin confirmation. No content leaves
            your device.
          </p>
        </div>
        <div>
          <p className="nk">Enterprise</p>
          <p className="nv">
            Custom volume pricing, dedicated infrastructure, and legal-team
            onboarding. Reach us at{' '}
            <a href="mailto:enterprise@arcproof.ing">enterprise@arcproof.ing</a>.
          </p>
        </div>
      </div>
    </div>
  );
}

function ComparisonModal({ open, onClose }) {
  useEffectS(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [open]);
  if (!open) return null;
  return (
    <div className="cmp-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="cmp-sheet">
        <div className="cmp-bar">
          <button className="cmp-close" onClick={onClose} aria-label="Close comparison">✕</button>
        </div>
        <ComparisonTable />
      </div>
    </div>
  );
}

Object.assign(window, {
  Nav, Selector, HomeHero, VerticalHero, DemoSection,
  Frameworks, Outcomes, Capabilities, Pricing, Implementation, CTA, Footer,
  ComparisonTable, ComparisonModal,
});