/* ===== Sotero landing page — sections =====
   Reads DS semantic CSS variables (overridden per theme on the app root).
   Exports section components to window. */

const DS = window.SoteroDesignSystem_d49ec1;
const { Button, Badge } = DS;

/* Lucide icon helper */
function Icon({ n, s = 20, color, stroke = 2 }) {
  const r = React.useRef();
  React.useEffect(() => {
    if (r.current && window.lucide && lucide[n]) {
      r.current.innerHTML = '';
      const e = lucide.createElement(lucide[n]);
      e.setAttribute('width', s); e.setAttribute('height', s);
      e.setAttribute('stroke-width', stroke);
      if (color) e.setAttribute('stroke', color);
      r.current.appendChild(e);
    }
  });
  return <span ref={r} style={{ display: 'inline-flex', flex: 'none' }} />;
}

const wrap = { maxWidth: 1120, margin: '0 auto', padding: '0 32px' };
const eyebrow = {
  fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em',
  textTransform: 'uppercase', color: 'var(--accent)',
};
const h2Style = {
  fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 700, letterSpacing: '-0.02em',
  color: 'var(--text-primary)', margin: '10px 0 0', lineHeight: 1.12,
};
const leadStyle = { fontSize: 17, color: 'var(--text-secondary)', lineHeight: 1.6, maxWidth: 620, margin: '14px 0 0' };

/* ---------- NAV ---------- */
function Nav({ logoSrc, onCta }) {
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, background: 'color-mix(in srgb, var(--bg-app) 82%, transparent)', backdropFilter: 'blur(12px)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ ...wrap, height: 92, display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center' }}>
        <img className="nav-logo" src={logoSrc} alt="Sotero" style={{ height: 56, justifySelf: 'start' }} />
        <nav className="site-nav" style={{ display: 'flex', gap: 30, justifySelf: 'center' }}>
          {[['Who we are', '#who'], ['How it works', '#how'], ['What we do', '#scope'], ['Pricing', '#pricing'], ['FAQ', '#faq']].map(([l, h]) => (
            <a key={h} href={h} style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-secondary)', textDecoration: 'none', whiteSpace: 'nowrap' }}>{l}</a>
          ))}
        </nav>
        <div style={{ justifySelf: 'end' }}>
          <Button variant="primary" size="md" onClick={onCta} style={{ whiteSpace: 'nowrap' }}>Start free assessment</Button>
        </div>
      </div>
    </header>
  );
}

/* ---------- HERO ---------- */
function Hero({ onCta }) {
  const promises = [
    ['KeyRound', 'Never ask for your secrets', 'No seed phrases, keys, passwords, or remote access.'],
    ['Wallet', 'Never take custody', 'We never hold your funds or move crypto for you.'],
    ['BadgeCheck', 'Never guarantee recovery', 'Honest assessment first. If it can\'t be done, we say so — free.'],
    ['CircleSlash', 'Never "send crypto to recover crypto"', 'That\'s the scam playbook. It is not ours.'],
  ];
  return (
    <section className="hero-sec" style={{ position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', minHeight: 'calc(100dvh - 92px)' }}>
      <div className="hero-grid" style={{ ...wrap, paddingTop: 40, paddingBottom: 56, position: 'relative', zIndex: 2, width: '100%', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 56, alignItems: 'center' }}>
        <div>
          <h1 className="hero-h1" style={{ fontFamily: 'var(--font-display)', fontSize: 72, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.0, color: 'var(--text-primary)', margin: 0 }}>
            Crisis. <span style={{ color: 'var(--accent)' }}>Resolved.</span>
          </h1>
          <p style={{ fontSize: 19, color: 'var(--text-secondary)', lineHeight: 1.55, maxWidth: 560, marginTop: 18 }}>
            Something's gone wrong with your crypto, and most of the "recovery experts" online are scams. Breathe. We'll review your case for free and tell you if we can help. If we can't, you won't be charged.
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 26, flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" onClick={onCta} iconRight={<Icon n="ArrowRight" s={18} color="var(--accent-contrast)" />}>Start free assessment</Button>
            <Button variant="secondary" size="lg" onClick={() => document.getElementById('pricing').scrollIntoView({ behavior: 'smooth' })}>See public pricing</Button>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 22, fontSize: 14, color: 'var(--text-muted)' }}>
            <Icon n="ShieldCheck" s={18} color="var(--accent)" />
            <span>Free honest assessment. Public pricing. No custody of your funds.</span>
          </div>
        </div>
        {/* right promise panel */}
        <div className="hero-panel" style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: 28, boxShadow: 'var(--shadow-md)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 6 }}>
            <img src={typeof window !== 'undefined' && window.SOTERO_ASSETS ? window.SOTERO_ASSETS.icon : '../assets/sotero_icon.svg'} style={{ width: 22 }} alt="" />
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600, color: 'var(--text-primary)' }}>The Sotero promise</span>
          </div>
          <div style={{ fontSize: 13, color: 'var(--text-muted)', marginBottom: 18 }}>The trust boundary — the whole point of how we work.</div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {promises.map(([ic, t, d], i) => (
              <div key={t} style={{ display: 'flex', gap: 13, padding: '13px 0', borderTop: i ? '1px solid var(--border-subtle)' : 'none' }}>
                <span style={{ width: 34, height: 34, flex: 'none', borderRadius: 'var(--radius-md)', background: 'color-mix(in srgb, var(--accent) 14%, transparent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon n={ic} s={18} color="var(--accent)" /></span>
                <div>
                  <div style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.25 }}>{t}</div>
                  <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 3, lineHeight: 1.45 }}>{d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- GUARDRAILS STRIP ---------- */
function Guardrails() {
  const items = [
    ['KeyRound', 'Never ask for secrets', 'No seed phrases, keys, passwords, 2FA, or remote wallet access. Ever.'],
    ['Wallet', 'Never take custody', 'We never hold your funds or move crypto on your behalf.'],
    ['BadgeCheck', 'Never guarantee recovery', 'Honest assessment up front. If it can\'t be recovered, we tell you — for free.'],
    ['CircleSlash', 'Never "send crypto to recover crypto"', 'That\'s the recovery-scam playbook. It is not ours.'],
  ];
  return (
    <section style={{ background: 'var(--bg-alt)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ ...wrap, padding: '34px 32px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 28 }}>
        {items.map(([ic, t, d]) => (
          <div key={t}>
            <Icon n={ic} s={22} color="var(--accent)" />
            <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)', marginTop: 12 }}>{t}</div>
            <div style={{ fontSize: 13.5, color: 'var(--text-muted)', marginTop: 6, lineHeight: 1.5 }}>{d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- HOW IT WORKS ---------- */
function HowItWorks() {
  const steps = [
    ['MessageSquareText', 'Tell us what happened', 'Start with the chatbot or a 5-question triage form. Takes two minutes. No account, no card.'],
    ['Gauge', 'We score recoverability', 'Every case gets an honest recoverability score — not a sales pitch. Impossible cases are told the truth, free.'],
    ['Route', 'We route you to the right path', 'Self-serve guide, written review, an assigned specialist, or a same-day call with a principal.'],
    ['ShieldCheck', 'We only charge for real work', 'Assessment is always free. Success fees apply only when recovery is actually possible.'],
  ];
  return (
    <section id="how" style={{ ...wrap, padding: '40px 32px' }}>
      <div style={eyebrow}>How it works</div>
      <h2 style={h2Style}>From panic to a plan in minutes.</h2>
      <p style={leadStyle}>We review every case carefully, so real attention goes to the ones that can actually be solved — and you never pay to be told the truth.</p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, marginTop: 30 }}>
        {steps.map(([ic, t, d], i) => (
          <div key={t} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 24 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'color-mix(in srgb, var(--accent) 14%, transparent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon n={ic} s={22} color="var(--accent)" />
              </div>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-muted)' }}>0{i + 1}</span>
            </div>
            <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-primary)', marginTop: 18 }}>{t}</div>
            <div style={{ fontSize: 13.5, color: 'var(--text-muted)', marginTop: 8, lineHeight: 1.55 }}>{d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- WHAT WE DO / DON'T ---------- */
function Scope() {
  const does = [
    'Intake and honest case assessment',
    'Transaction review and tracing summaries',
    'Evidence organization and case-file preparation',
    'Exchange escalation packets (you submit)',
    'Wallet troubleshooting and access support',
    'Attorney-ready and LE-ready documentation',
    'Coaching through support and recovery processes',
    'Estate coordination with executors and counsel',
  ];
  const donts = [
    'Never ask for your seed phrase, keys, passwords, or 2FA',
    'Never take custody of your funds',
    'Never need remote access to your wallet or device',
    'Never move or execute transactions for you',
    'Never impersonate you to exchanges or authorities',
    'Never give legal advice outside licensed counsel',
    'Never guarantee recovery',
    'Never ask you to send crypto to "recover" crypto',
  ];
  return (
    <section id="scope" style={{ background: 'var(--bg-alt)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ ...wrap, padding: '40px 32px' }}>
        <div style={eyebrow}>The trust boundary</div>
        <h2 style={h2Style}>What we do — and what we never do.</h2>
        <p style={leadStyle}>This boundary is visible before any pricing or service detail, because it's the whole point. It's the same text you'll see on the intake form, the engagement letter, and the chatbot's opening line.</p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginTop: 30 }}>
          <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 28 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
              <span style={{ width: 30, height: 30, borderRadius: '50%', background: 'color-mix(in srgb, var(--accent) 18%, transparent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon n="Check" s={17} color="var(--accent)" /></span>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: 'var(--text-primary)' }}>What we do</span>
            </div>
            {does.map((d) => (
              <div key={d} style={{ display: 'flex', gap: 11, padding: '9px 0', borderTop: '1px solid var(--border-subtle)', fontSize: 14.5, color: 'var(--text-secondary)', lineHeight: 1.45 }}>
                <Icon n="Check" s={17} color="var(--accent)" />{d}
              </div>
            ))}
          </div>
          <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 28 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
              <span style={{ width: 30, height: 30, borderRadius: '50%', background: 'rgba(240,84,79,0.16)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon n="X" s={17} color="var(--status-critical)" /></span>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: 'var(--text-primary)' }}>What we never do</span>
            </div>
            {donts.map((d) => (
              <div key={d} style={{ display: 'flex', gap: 11, padding: '9px 0', borderTop: '1px solid var(--border-subtle)', fontSize: 14.5, color: 'var(--text-secondary)', lineHeight: 1.45 }}>
                <Icon n="X" s={17} color="var(--status-critical)" />{d}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- WHO WE ARE ---------- */
function WhoWeAre() {
  const pillars = [
    ['BadgeCheck', 'Veterans, in the open', 'We\'ve been building and operating in crypto for years — publicly. You can see who we are. We\'re not another anonymous page promising the world.'],
    ['Building2', 'Real exchange contacts', 'We\'ve done deals and built relationships with the major exchanges. When we escalate a case, it reaches actual people — not a ticket queue.'],
    ['Users', 'We\'ve been in your shoes', 'We use crypto ourselves and have hit frozen accounts, stuck transfers, and scams firsthand. We know the panic, and we know how to move.'],
    ['ShieldCheck', 'Honest, not just billing', 'If we can help, we will. If we can\'t, we\'ll tell you straight — no padded invoices, no chasing hopeless cases to run up a bill.'],
  ];
  return (
    <section id="who" style={{ background: 'var(--bg-alt)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div className="who-grid" style={{ ...wrap, padding: '40px 32px', display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 56, alignItems: 'start' }}>
        <div>
          <div style={eyebrow}>Who we are</div>
          <h2 style={h2Style}>You're in experienced hands.</h2>
          <p style={leadStyle}>We're not a faceless recovery mill. We're longtime crypto users and operators who've built real relationships across the industry — and we only take a case when we genuinely believe we can help.</p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {pillars.map(([ic, t, d], i) => (
            <div key={t} style={{ display: 'flex', gap: 16, padding: '18px 0', borderTop: i ? '1px solid var(--border-subtle)' : 'none' }}>
              <span style={{ width: 42, height: 42, flex: 'none', borderRadius: 'var(--radius-md)', background: 'color-mix(in srgb, var(--accent) 14%, transparent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon n={ic} s={20} color="var(--accent)" /></span>
              <div>
                <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>{t}</div>
                <div style={{ fontSize: 14, color: 'var(--text-muted)', marginTop: 4, lineHeight: 1.55 }}>{d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.SoteroSite = Object.assign(window.SoteroSite || {}, { Icon, Nav, Hero, Guardrails, HowItWorks, WhoWeAre, Scope, wrap, eyebrow, h2Style, leadStyle });
