/* ===== Sotero landing — pricing, FAQ, CTA, footer ===== */
const S = window.SoteroSite;
const DS2 = window.SoteroDesignSystem_d49ec1;
const { Button: Btn, Badge: Bdg } = DS2;

/* ---------- PRICING ---------- */
function Pricing({ onCta }) {
  const { Icon, wrap, eyebrow, h2Style, leadStyle } = window.SoteroSite;
  const tiers = [
    { tier: 'T0', name: 'Self-serve', price: 'Free', unit: 'knowledge base + chatbot', extra: 'Paid interactive resolutions $29.99–49.99', best: 'Common fixes, education, and honest answers for impossible cases.', feats: ['Instant guides & walkthroughs', 'Chatbot triage, 24/7', 'Wrong network, missing tokens, lost-seed reality checks'] },
    { tier: 'T1', name: 'Written review', price: '$99–149', unit: 'flat', extra: 'Human-confirmed, within 24 hours', best: 'A simple CEX, transaction, wallet, or scam case reviewed by a person.', feats: ['Templated, human-reviewed reply', 'Stuck tx, wrong-chain-to-CEX, approval revoke', 'Prep checklist included'] },
    { tier: 'T2', name: 'Case support', price: '$500–1,500', unit: 'engagement', extra: '+ 10–15% on returned funds where applicable', best: 'CEX disputes, wallet access, estate access, support packets.', feats: ['A single specialist owns your case', 'CEX appeal packets (you submit)', 'Partial-seed & hardware recovery', 'Weekly status updates'], featured: true },
    { tier: 'T3', name: 'Priority case', price: '$2,500–10,000', unit: 'retainer', extra: '+ 15–20% on returned funds where applicable', best: '$50k+ theft, urgent freeze paths, forensic + attorney coordination.', feats: ['Same-day call with a principal', 'Recovery roadmap & active work', 'Court & LE documentation support', 'Full estate recovery'] },
  ];
  return (
    <section id="pricing" style={{ ...wrap, padding: '40px 32px' }}>
      <div style={eyebrow}>Pricing</div>
      <h2 style={h2Style}>Public pricing. No surprises.</h2>
      <p style={leadStyle}>Hidden pricing is a scam signal. Ours is on the page. The initial assessment is always free, and success fees apply only when recovery is technically possible — on defined billable events agreed before any work begins.</p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, marginTop: 30, alignItems: 'stretch' }}>
        {tiers.map((t) => (
          <div key={t.tier} style={{
            display: 'flex', flexDirection: 'column',
            background: t.featured ? 'color-mix(in srgb, var(--accent) 10%, var(--surface-card))' : 'var(--surface-card)',
            border: t.featured ? '1.5px solid var(--accent)' : '1px solid var(--border-subtle)',
            borderRadius: 'var(--radius-lg)', padding: 24, position: 'relative',
          }}>
            {t.featured && <span style={{ position: 'absolute', top: -11, left: 24, fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--accent-contrast)', background: 'var(--accent)', borderRadius: 'var(--radius-pill)', padding: '3px 10px' }}>Most common</span>}
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: 'var(--accent)' }}>{t.tier}</span>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: 'var(--text-primary)' }}>{t.name}</span>
            </div>
            <div style={{ marginTop: 14 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--text-primary)' }}>{t.price}</span>
              <span style={{ fontSize: 13, color: 'var(--text-muted)', marginLeft: 6 }}>{t.unit}</span>
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--accent)', marginTop: 6, minHeight: 34, lineHeight: 1.4 }}>{t.extra}</div>
            <div style={{ fontSize: 13.5, color: 'var(--text-secondary)', marginTop: 8, lineHeight: 1.5, minHeight: 60 }}>{t.best}</div>
            <div style={{ borderTop: '1px solid var(--border-subtle)', margin: '16px 0', paddingTop: 16, display: 'flex', flexDirection: 'column', gap: 9, flex: 1 }}>
              {t.feats.map((f) => (
                <div key={f} style={{ display: 'flex', gap: 9, fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.4 }}>
                  <Icon n="Check" s={15} color="var(--accent)" />{f}
                </div>
              ))}
            </div>
            <Btn variant={t.featured ? 'primary' : 'secondary'} fullWidth onClick={onCta}>Start assessment</Btn>
          </div>
        ))}
      </div>
      {/* forensic + principles */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 18, marginTop: 18 }}>
        <div style={{ background: 'var(--bg-alt)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 24, display: 'flex', alignItems: 'center', gap: 18 }}>
          <div style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'color-mix(in srgb, var(--accent) 14%, transparent)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}><Icon n="FileSearch" s={24} color="var(--accent)" /></div>
          <div>
            <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>Forensic report — $1,200–5,000</div>
            <div style={{ fontSize: 13.5, color: 'var(--text-muted)', marginTop: 4, lineHeight: 1.5 }}>Standalone trace reports, evidence packages, and attorney-ready documentation.</div>
          </div>
        </div>
        <div style={{ background: 'var(--bg-alt)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '20px 24px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 24px' }}>
          {[
            'Never charge for hopeless cases',
            'Free initial assessment, always',
            'Success fees only on real recovery',
            '"Tracing to Binance" is not recovery',
          ].map((p) => (
            <div key={p} style={{ display: 'flex', gap: 9, fontSize: 13.5, color: 'var(--text-secondary)', lineHeight: 1.4 }}>
              <Icon n="ShieldCheck" s={16} color="var(--accent)" />{p}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FaqItem({ q, a, open, onToggle }) {
  const { Icon } = window.SoteroSite;
  return (
    <div style={{ borderBottom: '1px solid var(--border-subtle)' }}>
      <button onClick={onToggle} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 16, padding: '22px 0', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left' }}>
        <span style={{ flex: 1, fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600, color: 'var(--text-primary)' }}>{q}</span>
        <span style={{ transform: open ? 'rotate(45deg)' : 'none', transition: 'transform var(--dur-base) var(--ease-standard)', color: 'var(--accent)' }}><Icon n="Plus" s={20} color="var(--accent)" /></span>
      </button>
      <div style={{ maxHeight: open ? 240 : 0, overflow: 'hidden', transition: 'max-height var(--dur-slow) var(--ease-standard)' }}>
        <p style={{ fontSize: 15, color: 'var(--text-muted)', lineHeight: 1.65, margin: '0 0 22px', maxWidth: 760 }}>{a}</p>
      </div>
    </div>
  );
}

function Faq() {
  const { wrap, eyebrow, h2Style } = window.SoteroSite;
  const [open, setOpen] = React.useState(0);
  const faqs = [
    ['How do I know Sotero isn\'t a recovery scam?', 'Scams share a fingerprint: they ask for your seed phrase, promise guaranteed recovery, want crypto up front, and hide their pricing. We do the opposite — public pricing, a free honest review, no custody of your funds, and we never ask for your secrets or promise a result.'],
    ['Will you ever ask for my seed phrase, private key, or password?', 'No — never, for any reason. Anyone who asks (even someone claiming to be us) is trying to steal from you. We work through documentation, escalation, and specialist work, not by touching your secrets.'],
    ['Can you guarantee you\'ll get my money back?', 'No, and anyone who does is lying. Some losses genuinely can\'t be recovered. What we do promise is an honest read up front, for free, so you never pay to be told the truth.'],
    ['What can actually be recovered?', 'Often solvable: frozen or locked exchange accounts, wrong-chain or missing exchange deposits, self-custody access issues (lost password, dead device, partial seed), and estate access. Usually not: funds sent to a wrong self-custody address, or a fully lost seed with no device — and we\'ll tell you so.'],
    ['How much does this cost?', 'The initial review is always free. If we can help, you choose a path: a written review ($99–149), hands-on case support ($500–1,500), or a priority case ($2,500–10,000) — plus a success fee only where funds are actually returned. Full pricing is on this page.'],
    ['How long does it take?', 'The free review comes back within 24 hours. After that it depends on the case — a simple fix can resolve in days, while an exchange dispute or estate case can take weeks. We give you a realistic timeline before you commit.'],
    ['Do you take a percentage of what\'s recovered?', 'Only on outcomes agreed in writing before work begins — funds returned, access restored, or estate assets transferred. Tracing a case "to an exchange" is not recovery and never triggers a fee.'],
    ['Do you provide legal advice or represent me to law enforcement?', 'No. We prepare attorney- and LE-ready documentation you can give to counsel, exchanges, insurers, or police. Legal advice comes only through licensed counsel, and we never act as your representative or contact anyone as you.'],
    ['My family member passed away with crypto. Can you help?', 'Yes — this is a core service. We help executors and beneficiaries with discovery (do they hold any), exchange inheritance access with probate documents, wallet recovery, and probate-ready paperwork. Exchanges lack the beneficiary systems banks have, which is exactly why this is hard.'],
  ];
  return (
    <section id="faq" style={{ ...wrap, padding: '40px 32px' }}>
      <div style={eyebrow}>Questions</div>
      <h2 style={h2Style}>The questions everyone asks first.</h2>
      <div style={{ marginTop: 36, borderTop: '1px solid var(--border-subtle)' }}>
        {faqs.map(([q, a], i) => (
          <FaqItem key={i} q={q} a={a} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
        ))}
      </div>
    </section>
  );
}

/* ---------- CTA + FOOTER ---------- */
function CtaFooter({ logoSrc, onCta }) {
  const { Icon, wrap } = window.SoteroSite;
  return (
    <React.Fragment>
      <section style={{ ...wrap, padding: '8px 32px 60px' }}>
        <div style={{ background: 'var(--accent)', borderRadius: 'var(--radius-xl)', padding: '44px 44px', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--accent-contrast)', margin: 0, lineHeight: 1.05 }}>Crisis. <span style={{ opacity: 0.55 }}>Resolved.</span></h2>
          <p style={{ fontSize: 17, color: 'color-mix(in srgb, var(--accent-contrast) 72%, transparent)', maxWidth: 520, margin: '16px auto 0', lineHeight: 1.55 }}>Two minutes, no card, no account. Get an honest read on whether your case can be recovered.</p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 30 }}>
            <button onClick={onCta} style={{ height: 52, padding: '0 28px', borderRadius: 'var(--radius-lg)', border: 'none', background: 'var(--ink-900)', color: '#fff', fontFamily: 'var(--font-body)', fontSize: 16, fontWeight: 600, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10 }}>
              Start free assessment <Icon n="ArrowRight" s={18} color="#fff" />
            </button>
          </div>
          <div style={{ fontSize: 13, color: 'color-mix(in srgb, var(--accent-contrast) 60%, transparent)', marginTop: 18 }}>We'll never ask for your seed phrase, keys, or password.</div>
        </div>
      </section>
      <footer style={{ borderTop: '1px solid var(--border-subtle)', background: 'var(--bg-alt)' }}>
        <div style={{ ...wrap, padding: '34px 32px', display: 'flex', alignItems: 'flex-start', gap: 32, flexWrap: 'wrap' }}>
          <div style={{ flex: 1, minWidth: 260 }}>
            <img src={logoSrc} alt="Sotero" style={{ height: 24 }} />
            <p style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 14, lineHeight: 1.6, maxWidth: 380 }}>
              Sotero is not a custodian, law firm, or financial advisor. We do not guarantee recovery, take custody of funds, or provide legal advice except through licensed counsel. We will never ask for your seed phrase, private keys, or passwords.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)' }}>
            <Icon n="ShieldCheck" s={15} color="var(--accent)" /> Free assessment · Public pricing · No custody
          </div>
        </div>
        <div style={{ ...wrap, padding: '0 32px 32px', fontSize: 12, color: 'var(--text-muted)' }}>© {new Date().getFullYear()} Sotero. All rights reserved.</div>
      </footer>
    </React.Fragment>
  );
}

window.SoteroSite = Object.assign(window.SoteroSite || {}, { Pricing, Faq, CtaFooter });