// Page section components for the SciPHR homepage — brand-aligned revision.
// Uses both web (soft dark) and in-app (asymmetric brutalist) brand surfaces
// for richer visual rhythm. Copy stays anchored to web/src/app/page.tsx.

const heroPillars = [
  {
    index: 1,
    title: 'Mint a xCIPHR.',
    body: 'Create your encrypted, on-chain identity credential — tokenized as an NFT, signed in the Secure Enclave.',
  },
  {
    index: 2,
    title: 'Authenticate.',
    body: 'Sign in with your xCIPHR. No passwords, no seed phrases, no custodians holding your keys hostage.',
  },
  {
    index: 3,
    title: 'Manage access.',
    body: 'Grant, rotate, and revoke role-based permissions enforced directly on the XRP Ledger.',
  },
];

const enterpriseFacts = [
  { title: 'High Throughput (TPS)', body: 'XRP Ledger supports ~1,500 transactions per second in production with lab-tested peaks over 3,400 TPS.' },
  { title: 'Fast Finality', body: 'Ledgers close roughly every 3.5 seconds, keeping authentication and settlement near real-time.' },
  { title: 'Mature, Institutional-Grade Network', body: '150+ trusted validators, 3.3B+ transactions, and more than 6M funded accounts with 10+ years of uninterrupted mainnet performance.' },
  { title: 'Energy Efficient & Clean', body: 'Validator nodes run without mining — comparable to an email server — using >99% less energy than proof-of-work systems.' },
];

const affirmations = [
  'Auditable', 'Compliant', 'Interoperable', 'Enterprise-Ready', 'Tokenized',
  'Zero-Knowledge', 'Permissioned', 'Encrypted', 'Scalable',
  'Role-Based Access', 'Private', 'Recoverable', 'Portable',
  'Hardware-Backed', 'Self-Sovereign', 'Non-Custodial',
];

const deliveryTraits = [
  'Seamless', 'Passwordless', 'Portable', 'Recoverable', 'Streamlined', 'Accessible', 'Intuitive',
];

const quotes = [
  { text: 'The future doesn\u2019t belong to those who build the loudest. It belongs to those who build systems that speak for themselves.', author: 'Jarod Vyent', role: 'Founder, SciPHR' },
  { text: 'Not your keys, not your coins.', author: 'Andreas M. Antonopoulos', role: 'Author, Mastering Bitcoin' },
  { text: 'Users must control their identities and personal data.', author: 'Christopher Allen', role: 'Author, The Path to Self-Sovereign Identity' },
  { text: 'We put a man on the moon. We found water on Mars, yet you can\u2019t send a wire on Sunday.', author: 'Brad Garlinghouse', role: 'CEO, Ripple' },
];

const socials = [
  { label: 'Instagram',   href: SP_LINKS.instagram },
  { label: 'X / Twitter', href: SP_LINKS.twitter },
  { label: 'LinkedIn',    href: SP_LINKS.linkedin },
];

// ── 01 — Hero ─────────────────────────────────────────────────────────────────
function Hero() {
  return (
    <header style={{ display: 'flex', flexDirection: 'column', gap: 56 }}
            data-screen-label="01 Hero">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 14 }}>
          <span style={{
            fontFamily: SP_MONO_W, fontSize: 11, letterSpacing: '0.4em',
            textTransform: 'uppercase', color: SP_COL.grayLight,
          }}>XRP Ledger · Identity · Audit</span>
          <a href={SP_LINKS.testflight} target="_blank" rel="noopener noreferrer" style={{
            fontFamily: SP_MONO_W, fontSize: 10, letterSpacing: '0.35em',
            textTransform: 'uppercase', color: SP_COL.accent, fontWeight: 600,
            border: `1px solid ${SP_COL.accent}`, padding: '4px 10px',
            textDecoration: 'none',
          }}>v1.0 · TestFlight Open ↗</a>
        </div>

        <h1 style={{
          fontFamily: SP_MONO_W, fontSize: 'clamp(34px, 5vw, 56px)',
          lineHeight: 1.1, fontWeight: 600, margin: 0, color: SP_COL.white,
          letterSpacing: '-0.01em', textWrap: 'balance',
        }}>
          The first decentralized Key Management System.{' '}
          <span style={{ color: SP_COL.grayDark }}>dKMS, for the enterprise.</span>
        </h1>

        <div style={{
          display: 'flex', flexDirection: 'column', gap: 14,
          fontFamily: SP_MONO_W, fontSize: 15, lineHeight: 1.65, color: SP_COL.grayLight,
          maxWidth: 760,
        }}>
          <p style={{ margin: 0 }}>
            SciPHR upgrades your wallet into a <span style={{ color: SP_COL.white }}>Personal Identity Cipher</span> —
            a secure, on-chain credential that keeps ownership in your hands.
          </p>
          <p style={{ margin: 0, color: SP_COL.white, fontWeight: 600 }}>
            Your key. Your control.
          </p>
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 4 }}>
          <CommandButton label="Join TestFlight" href={SP_LINKS.testflight} variant="solid" />
          <CommandButton label="About SciPHR" href={SP_LINKS.pageAbout} />
          <CommandButton label="Follow SciPHR" href="#follow" />
        </div>
      </div>

      <TerminalCard
        footer={
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
            <span>Identity Shell — READY</span>
            <div style={{ display: 'flex', gap: 8 }}>
              <CommandButton label="Mint" variant="ghost" />
              <CommandButton label="Deploy" />
            </div>
          </div>
        }>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8,
                      fontFamily: SP_MONO_W, fontSize: 13, lineHeight: 1.6,
                      color: SP_COL.grayLight }}>
          <p style={{ margin: 0 }}>&gt; connect xcphr://wallet</p>
          <p style={{ margin: 0 }}>&gt; network: <span style={{ color: SP_COL.accent }}>TESTNET</span></p>
          <p style={{ margin: 0 }}>&gt; status: <span style={{ color: SP_COL.white }}>decentralized key management online.</span></p>
          <p style={{ margin: 0 }}>&gt; mint identity · authenticate · audit.</p>
          <p style={{ margin: 0 }}>&gt; secure enclave: <span style={{ color: SP_COL.white }}>ENABLED</span></p>
          <p style={{ margin: 0 }}>&gt; <Caret /></p>
        </div>
      </TerminalCard>
    </header>
  );
}

// ── 02 — Pillars (numbered brutalist cards) ───────────────────────────────────
function Pillars() {
  return (
    <section id="mint" data-screen-label="02 Pillars"
             style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionEyebrow index={1} label="How it works" />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
        {heroPillars.map(p => (
          <NumberedCard key={p.title} index={p.index} title={p.title}>
            {p.body}
          </NumberedCard>
        ))}
      </div>
    </section>
  );
}

// ── 03 — Auth + Telemetry ─────────────────────────────────────────────────────
function AuthAndTelemetry() {
  return (
    <section data-screen-label="03 Authentication + Telemetry"
             style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionEyebrow index={2} label="Authentication" />

      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 22 }}>
        <OutlineCard title="Simple authentication.">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12,
                        fontFamily: SP_MONO_W, fontSize: 13, lineHeight: 1.6,
                        color: SP_COL.grayLight }}>
            <p style={{ margin: 0 }}>
              SciPHR upgrades your wallet into a Personal Identity Cipher —
              a secure, on-chain credential safeguarded by hardware proofs.
            </p>
            <p style={{ margin: 0 }}>
              Your key stays inside Secure Enclave, your permissions live
              on-chain, and recovery stays anchored to devices you control —
              never a centralized vault.
            </p>
          </div>
          <div style={{ marginTop: 20, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <CommandButton label="Learn more" href="#scale" />
            <CommandButton label="Mint a xCIPHR" href="#mint" variant="ghost" />
          </div>
        </OutlineCard>

        <OutlineCard title="XRPL telemetry" id="enterprise">
          {[
            ['Wallets', '6M+'],
            ['Validators', '150+'],
            ['Ledger cadence', '~3.5s'],
            ['Uptime', '10y+'],
          ].map(([k, v], i, arr) => (
            <div key={k} style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
              paddingBottom: 8, marginBottom: i < arr.length - 1 ? 10 : 0,
              borderBottom: i < arr.length - 1 ? `1px dashed rgba(128,128,128,0.4)` : 'none',
              fontFamily: SP_MONO_W, fontSize: 11, letterSpacing: '0.25em',
              textTransform: 'uppercase', color: SP_COL.grayLight,
            }}>
              <span>{k}</span>
              <span style={{ fontSize: 16, fontWeight: 600, color: SP_COL.white }}>{v}</span>
            </div>
          ))}
        </OutlineCard>
      </div>
    </section>
  );
}

// ── 04 — Market outlook ───────────────────────────────────────────────────────
function Market() {
  // Grand View Research projection — XRPL / blockchain infrastructure spend.
  // 2027 marks the inflection point where infra spend goes vertical.
  const data = [
    { x: 2024, y: 31,    label: '2024' },
    { x: 2025, y: 50,    label: '2025' },
    { x: 2026, y: 80,    label: '2026' },
    { x: 2027, y: 150,   label: '2027' },
    { x: 2030, y: 1400,  label: '2030' },
  ];

  return (
    <section id="market" data-screen-label="05 Market outlook"
             style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionEyebrow index={3} label="Market outlook" />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 22 }}>
        <div style={{ display: 'flex', flexDirection: 'column',
                      justifyContent: 'space-between', gap: 16 }}>
          <h2 style={{
            fontFamily: SP_MONO_W, fontSize: 'clamp(24px, 2.6vw, 34px)',
            lineHeight: 1.15, fontWeight: 600, color: SP_COL.white,
            margin: 0, letterSpacing: '-0.005em',
          }}>
            Blockchain isn't going anywhere.{' '}
            <span style={{ color: SP_COL.accent }}>It's evolving.</span>
          </h2>

          <p style={{
            fontFamily: SP_MONO_W, fontSize: 14, lineHeight: 1.6,
            color: SP_COL.grayLight, margin: 0,
          }}>
            Blockchain infrastructure is expected to scale from{' '}
            <span style={{ color: SP_COL.white }}>$31B</span> to over{' '}
            <span style={{ color: SP_COL.white }}>$1.4T</span> by 2030 — a
            signal of accelerating global adoption. The custody layer is the
            bottleneck. SciPHR builds it.
          </p>

          <p style={{
            fontFamily: SP_MONO_W, fontSize: 10, letterSpacing: '0.3em',
            textTransform: 'uppercase', color: SP_COL.grayDark, margin: 0,
          }}>› Source: Grand View Research</p>
        </div>

        <OutlineCard title="Projected blockchain infra revenue · USD">
          <LineChart
            data={data}
            highlightIndex={4}
            ariaLabel="Projected blockchain industry revenue, $31B in 2024 scaling to $1.4T by 2030"
          />
        </OutlineCard>
      </div>
    </section>
  );
}

// ── 06 — Enterprise ───────────────────────────────────────────────────────────
function Enterprise() {
  return (
    <section data-screen-label="05 Enterprise"
             style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionEyebrow index={4} label="Enterprise grade" />

      <StatStrip items={[
        { label: 'Throughput', value: '1,500 TPS',  foot: 'Lab peak 3,400+' },
        { label: 'Finality',   value: '~3.5s',      foot: 'Per ledger close' },
        { label: 'Validators', value: '150+',       foot: 'Trusted, global' },
        { label: 'Energy',     value: '>99%',       foot: 'Less than PoW' },
      ]} />

      <OutlineCard title="Built on a blockchain designed for enterprise.">
        <div className="sp-enterprise-facts" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
          {enterpriseFacts.map(p => (
            <div key={p.title}>
              <div style={{
                fontFamily: SP_MONO_W, fontSize: 11, fontWeight: 600,
                letterSpacing: '0.3em', textTransform: 'uppercase',
                color: SP_COL.grayLight, marginBottom: 8,
              }}>{p.title}</div>
              <p style={{
                fontFamily: SP_MONO_W, fontSize: 13, lineHeight: 1.55,
                color: 'rgba(255,255,255,0.9)', margin: 0,
              }}>{p.body}</p>
            </div>
          ))}
        </div>
        <p style={{
          marginTop: 18, fontFamily: SP_MONO_W, fontSize: 10,
          letterSpacing: '0.3em', textTransform: 'uppercase', color: SP_COL.grayDark,
        }}>› Source: XRP Ledger performance data, Ripple validator metrics,
           and publicly available telemetry.</p>
      </OutlineCard>

      <MarqueeStrip items={affirmations} />

      <OutlineCard title="Designed for enterprises, built for developers.">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
          {deliveryTraits.map(t => (
            <span key={t} style={{
              fontFamily: SP_MONO_W, fontSize: 11, letterSpacing: '0.35em',
              textTransform: 'uppercase', color: SP_COL.white,
              border: `1px solid ${SP_COL.grayDark}`, borderRadius: 4,
              padding: '8px 14px',
            }}>{t} ✓</span>
          ))}
        </div>
      </OutlineCard>

      <OutlineCard id="scale" title="Scale without surrendering sovereignty.">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12,
                      fontFamily: SP_MONO_W, fontSize: 13, lineHeight: 1.6,
                      color: SP_COL.grayLight }}>
          <p style={{ margin: 0 }}>
            Wallet adoption across XRP Ledger keeps accelerating, yet fewer
            users retain direct custody of their private keys. Exchanges,
            custodial wallets, and managed key vaults recreate the same
            intermediaries blockchains set out to eliminate.
          </p>
          <p style={{ margin: 0 }}>
            If 1 in 8 wallets (~12%) are on XRPL, that's millions of
            addresses ready for native identity. SciPHR turns every wallet
            into a Personal Identity Cipher so teams can grant, rotate, and
            revoke access without rehypothecating keys.
          </p>
        </div>
      </OutlineCard>
    </section>
  );
}

// ── 06 — Quotes (swipe carousel) ─────────────────────────────────────────────
function Quotes() {
  const trackRef = React.useRef(null);
  const [active, setActive] = React.useState(0);

  // Update active dot on scroll (snap point change).
  React.useEffect(() => {
    const el = trackRef.current;
    if (!el) return;
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const i = Math.round(el.scrollLeft / el.clientWidth);
        setActive(Math.min(Math.max(i, 0), quotes.length - 1));
      });
    };
    el.addEventListener('scroll', onScroll, { passive: true });
    return () => { el.removeEventListener('scroll', onScroll); cancelAnimationFrame(raf); };
  }, []);

  function goTo(i) {
    const el = trackRef.current;
    if (!el) return;
    el.scrollTo({ left: i * el.clientWidth, behavior: 'smooth' });
  }

  return (
    <section id="quotes" data-screen-label="07 Quotes"
             style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionEyebrow index={5} label="On the record" />

      <div
        ref={trackRef}
        role="region"
        aria-label="Quotes carousel"
        style={{
          display: 'grid',
          gridAutoFlow: 'column',
          gridAutoColumns: '100%',
          gap: 0,
          overflowX: 'auto',
          scrollSnapType: 'x mandatory',
          scrollbarWidth: 'none',
          WebkitOverflowScrolling: 'touch',
        }}
      >
        {quotes.map(q => (
          <div key={q.author} style={{
            scrollSnapAlign: 'center',
            padding: '0 2px',
            boxSizing: 'border-box',
          }}>
            <OutlineCard>
              <p style={{ fontFamily: SP_MONO_W, fontSize: 'clamp(17px, 1.9vw, 22px)',
                          lineHeight: 1.5, color: SP_COL.white, margin: '0 0 22px 0',
                          minHeight: 120 }}>“{q.text}”</p>
              <p style={{ fontFamily: SP_MONO_W, fontSize: 11, fontWeight: 600,
                          letterSpacing: '0.3em', textTransform: 'uppercase',
                          color: SP_COL.grayLight, margin: 0 }}>{q.author}</p>
              <p style={{ fontFamily: SP_MONO_W, fontSize: 12,
                          color: 'rgba(224,224,224,0.8)', margin: '4px 0 0 0' }}>{q.role}</p>
            </OutlineCard>
          </div>
        ))}
      </div>

      {/* Controls — prev/next + dot indicators (mono, no rounded). */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 16, fontFamily: SP_MONO_W,
      }}>
        <button
          onClick={() => goTo(Math.max(active - 1, 0))}
          disabled={active === 0}
          aria-label="Previous quote"
          style={carouselBtn(active === 0)}>&lt; PREV</button>

        <div role="tablist" aria-label="Quote indicators"
             style={{ display: 'flex', gap: 10 }}>
          {quotes.map((_, i) => (
            <button
              key={i}
              role="tab"
              aria-selected={i === active}
              aria-label={`Quote ${i + 1} of ${quotes.length}`}
              onClick={() => goTo(i)}
              style={{
                width: 22, height: 4, padding: 0, cursor: 'pointer',
                border: 'none',
                background: i === active ? SP_COL.white : SP_COL.grayDarker,
                transition: 'background 150ms ease',
              }} />
          ))}
        </div>

        <button
          onClick={() => goTo(Math.min(active + 1, quotes.length - 1))}
          disabled={active === quotes.length - 1}
          aria-label="Next quote"
          style={carouselBtn(active === quotes.length - 1)}>NEXT &gt;</button>
      </div>

      {/* Hide WebKit scrollbar on the carousel track. */}
      <style>{`#quotes div[role="region"]::-webkit-scrollbar { display: none; }`}</style>
    </section>
  );
}

function carouselBtn(disabled) {
  return {
    fontFamily: SP_MONO_W, fontSize: 10, letterSpacing: '0.35em',
    textTransform: 'uppercase', fontWeight: 600,
    background: 'transparent',
    color: disabled ? SP_COL.grayDarker : SP_COL.grayLight,
    border: `1px solid ${disabled ? SP_COL.grayDarker : SP_COL.grayDark}`,
    borderRadius: 4,
    padding: '8px 14px',
    cursor: disabled ? 'not-allowed' : 'pointer',
    transition: 'all 150ms ease',
  };
}

// ── 07 — Forms ────────────────────────────────────────────────────────────────
function Forms() {
  return (
    <section id="follow" data-screen-label="08 Forms"
             style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionEyebrow index={6} label="Stay in the loop" />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr',
                    gap: 22, alignItems: 'stretch' }}>
        {/* Left column: subscribe + social grid filling the height. */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          <OutlineCard title="Follow our journey.">
            <p style={{ fontFamily: SP_MONO_W, fontSize: 13, color: SP_COL.grayLight,
                        margin: '0 0 18px 0' }}>
              Subscribe for release notes, TestFlight invites, and XRP Ledger telemetry drops.
            </p>
            <LeadForm intent="subscribe" />
          </OutlineCard>

          <div className="sp-social-grid"
               style={{ flex: 1,
                        display: 'grid', gridTemplateColumns: '1fr 1fr',
                        gap: 14 }}>
            <SocialCard label="X / Twitter" handle="@sciphr_"      href={SP_LINKS.twitter} />
            <SocialCard label="LinkedIn"    handle="sciphr"        href={SP_LINKS.linkedin} />
            <SocialCard label="Instagram"   handle="@sciphr"       href={SP_LINKS.instagram} />
            <SocialCard label="Threads"     handle="@sciphr"       href={SP_LINKS.threads} />
          </div>
        </div>

        <OutlineCard title="Contact SciPHR.">
          <p style={{ fontFamily: SP_MONO_W, fontSize: 13, color: SP_COL.grayLight,
                      margin: '0 0 18px 0' }}>
            Need a demo, enterprise pricing, or integration details? Send us a
            note and we will respond within 1–2 business days.
          </p>
          <LeadForm intent="contact" />
        </OutlineCard>
      </div>
    </section>
  );
}

// ── 08 — Founder ──────────────────────────────────────────────────────────────
function Founder() {
  return (
    <section data-screen-label="09 Founder"
             style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionEyebrow index={7} label="Who's building this" />
      <OutlineCard title="Meet the founder.">
        <p style={{ fontFamily: SP_MONO_W, fontSize: 13, color: SP_COL.grayLight,
                    margin: '0 0 18px 0' }}>
          Jarod Vyent is building SciPHR to give people and enterprises full
          control over their keys — without compromising usability.
        </p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginBottom: 18 }}>
          <CommandButton label="Read founder bio" href={SP_LINKS.pageAboutFounder} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {socials.map(s => <SocialRow key={s.label} {...s} />)}
        </div>
      </OutlineCard>
    </section>
  );
}

function SocialCard({ label, handle, href }) {
  const [hover, setHover] = React.useState(false);
  const external = window.SP_isExternal && window.SP_isExternal(href);
  return (
    <a
      href={href}
      target={external ? '_blank' : undefined}
      rel={external ? 'noopener noreferrer' : undefined}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        gap: 14, padding: '18px 18px',
        border: `1px solid ${SP_COL.white}`, borderRadius: 4,
        background: hover ? 'rgba(255,255,255,0.04)' : SP_COL.black,
        textDecoration: 'none',
        transition: 'background 150ms ease, transform 150ms ease',
        transform: hover ? 'translateY(-1px)' : 'none',
        minHeight: 92,
      }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span style={{
          fontFamily: SP_MONO_W, fontSize: 11, letterSpacing: '0.35em',
          textTransform: 'uppercase', color: SP_COL.grayLight, fontWeight: 600,
        }}>{label}</span>
        <span style={{
          fontFamily: SP_MONO_W, fontSize: 14,
          color: hover ? SP_COL.white : SP_COL.grayDark,
          transition: 'color 150ms ease',
        }}>↗</span>
      </div>
      <span style={{
        fontFamily: SP_MONO_W, fontSize: 13, color: SP_COL.white,
        letterSpacing: '0.04em',
      }}>{handle}</span>
    </a>
  );
}

function SocialRow({ label, href }) {
  const [hover, setHover] = React.useState(false);
  const external = window.SP_isExternal && window.SP_isExternal(href);
  return (
    <a
      href={href}
      target={external ? '_blank' : undefined}
      rel={external ? 'noopener noreferrer' : undefined}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '12px 14px',
        border: `1px solid ${hover ? SP_COL.white : SP_COL.grayDark}`,
        textDecoration: 'none', color: hover ? SP_COL.white : SP_COL.grayLight,
        fontFamily: SP_MONO_W, fontSize: 11, letterSpacing: '0.25em',
        textTransform: 'uppercase', transition: 'all 150ms ease', borderRadius: 4,
      }}>
      <span>&gt; {label}</span>
      <span style={{ color: hover ? SP_COL.white : SP_COL.grayDark }}>↗</span>
    </a>
  );
}

// ── 09 — Footer ───────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer id="contact" data-screen-label="10 Footer"
            style={{ display: 'flex', flexDirection: 'column', gap: 18,
                     paddingTop: 28, borderTop: `1px solid ${SP_COL.grayDark}` }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
        fontFamily: SP_MONO_W, fontSize: 11, letterSpacing: '0.3em',
        textTransform: 'uppercase', color: SP_COL.grayLight,
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: '50%',
          background: SP_COL.accent,
        }} />
        <span>Network: <span style={{ color: SP_COL.accent }}>TESTNET</span></span>
        <span style={{ color: SP_COL.grayDark }}>·</span>
        <span>All services nominal</span>
        <span style={{ color: SP_COL.grayDark }}>·</span>
        <span><Caret /></span>
      </div>

      <div style={{
        display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between',
        gap: 16, fontFamily: SP_MONO_W, fontSize: 10,
        letterSpacing: '0.35em', textTransform: 'uppercase', color: SP_COL.grayDark,
      }}>
        <span>© 2026 SciPHR LLC. All rights reserved.</span>
        <div style={{ display: 'flex', gap: 28 }}>
          <a style={{ color: 'inherit', textDecoration: 'none' }} href={SP_LINKS.emailContact}>Contact</a>
          <a style={{ color: 'inherit', textDecoration: 'none' }} href={SP_LINKS.pagePrivacy}>Privacy</a>
          <a style={{ color: 'inherit', textDecoration: 'none' }} href={SP_LINKS.emailSecurity}>Security</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Hero, Pillars, AuthAndTelemetry, Market, Enterprise, Quotes, Forms, Founder, Footer,
});