// Tiploy Landing — top nav + hero

function TpTopbar({ onCta }) {
  const t = useTp();
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 40,
      background: scrolled ? 'rgba(244,245,247,0.85)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px) saturate(180%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(180%)' : 'none',
      borderBottom: scrolled ? `1px solid ${tpTokens.line}` : '1px solid transparent',
      transition: 'all 200ms ease',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '14px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
          <img src="/logo.svg" style={{ height: 28 }} alt="Tiploy"/>
        </a>
        <nav style={{ display: 'flex', gap: 26, alignItems: 'center' }}>
          {[
            ['Platform', '#platform'],
            ['For ISO partners', '#partners'],
            ['For venues', '#venues'],
            ['Compliance', '#compliance'],
            ['Pricing', '#pricing'],
          ].map(([l, h]) => (
            <a key={l} href={h} style={{ fontSize: 14, fontWeight: 600, color: tpTokens.ink, textDecoration: 'none' }}>{l}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', gap: 8 }}>
          <TpButton variant="ghost" size="sm" as="a" href="/app">Sign in</TpButton>
          <TpButton variant="primary" size="sm" as="a" href="#contact" onClick={onCta}>Get in touch</TpButton>
        </div>
      </div>
    </header>
  );
}

// ─── HERO ─────────────────────────────────────────────────────────────
const HERO_HEADLINES = {
  'channel': {
    eyebrow: 'For ISO partners & venue operators',
    title: <>The tipping stack<br/>that makes your terminals sticky.</>,
    lede: 'Tiploy bolts onto the PAX A920 you already sell. Merchants get Tip Act compliance, staff wallets, and loyalty — out of the box. You get a premium tier, lower merchant churn, and more transactions per estate.',
  },
  'compliance': {
    eyebrow: 'Tip Act 2023 · done',
    title: <>100% of card tips to staff.<br/>Automatically. In seconds.</>,
    lede: 'The Employment (Allocation of Tips) Act is now statutory. Tiploy solves it at the point of payment — capture, tronc-aware tax, split, payout, audit trail — no spreadsheets, no reconciliation.',
  },
  'product':   {
    eyebrow: 'Tiploy platform',
    title: <>Tips, wallets, and loyalty —<br/>on the terminal you already have.</>,
    lede: 'A full tipping and retention stack built on PAX. Automatic distribution via Faster Payments, staff virtual cards, card-token loyalty with no app download. Bundled, branded, billable.',
  },
};

function HeroStageA({ headlineKey, device }) {
  const t = useTp();
  const h = HERO_HEADLINES[headlineKey] || HERO_HEADLINES.channel;
  return (
    <section style={{
      paddingTop: 80, paddingBottom: 72, position: 'relative', overflow: 'hidden',
      background: `radial-gradient(80% 60% at 10% 0%, ${t.accentSoft}88 0%, transparent 60%), linear-gradient(180deg, ${tpTokens.bg} 0%, ${tpTokens.bgDeep} 100%)`,
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 24px', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 48, alignItems: 'center' }}>
        <div>
          <div style={{ marginBottom: 18 }}>
            <TpChip variant="accent"><span style={{ width: 6, height: 6, borderRadius: '50%', background: t.accent, display: 'inline-block' }}/> {h.eyebrow}</TpChip>
          </div>
          <h1 style={{
            margin: 0, fontFamily: 'var(--font-display)',
            fontSize: 'clamp(40px, 5.2vw, 68px)', lineHeight: 1.02,
            letterSpacing: '-0.028em', fontWeight: 800, color: tpTokens.ink,
            textWrap: 'balance',
          }}>{h.title}</h1>
          <p style={{
            margin: '22px 0 0', maxWidth: 540, fontSize: 18, lineHeight: 1.55,
            color: tpTokens.muted, textWrap: 'pretty',
          }}>{h.lede}</p>
          <div style={{ display: 'flex', gap: 10, marginTop: 30, flexWrap: 'wrap' }}>
            <TpButton size="lg" as="a" href="#contact">Get in touch <TpArrow size={15} /></TpButton>
            <TpButton size="lg" variant="ghost" as="a" href="#platform">See the platform</TpButton>
          </div>

          {/* Quiet trust row */}
          <div style={{ marginTop: 40, paddingTop: 22, borderTop: `1px solid ${tpTokens.line}`, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {[
              ['On', 'PAX A920 terminals'],
              ['Paid via', 'UK Faster Payments'],
              ['Built for', 'The Tip Act 2023'],
            ].map(([a, b]) => (
              <div key={b}>
                <p style={{ margin: 0, fontSize: 11, color: tpTokens.muted, fontWeight: 600, letterSpacing: '.04em', textTransform: 'uppercase' }}>{a}</p>
                <p style={{ margin: '3px 0 0', fontSize: 14, color: tpTokens.ink, fontWeight: 700 }}>{b}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Right visual */}
        <div style={{ position: 'relative', height: 560, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          {/* Floating cards */}
          {device === 'pax' ? (
            <>
              <div style={{ position: 'absolute', top: 20, right: '8%', zIndex: 3 }}>
                <PaxTerminal />
              </div>
              <FloatingStaffCard style={{ position: 'absolute', top: 90, left: -10, zIndex: 4 }}/>
              <FloatingTipToast  style={{ position: 'absolute', bottom: 40, right: '4%', zIndex: 5 }}/>
              <FloatingPayoutCard style={{ position: 'absolute', bottom: 20, left: 0, zIndex: 4 }}/>
            </>
          ) : (
            <>
              <div style={{ position: 'absolute', top: 60, left: -40, right: 0, zIndex: 3, transform: 'scale(0.85)', transformOrigin: 'top left' }}>
                <DashboardPreview />
              </div>
              <FloatingTipToast  style={{ position: 'absolute', bottom: 60, right: '2%', zIndex: 5 }}/>
              <FloatingPayoutCard style={{ position: 'absolute', bottom: -5, left: 20, zIndex: 4 }}/>
            </>
          )}
        </div>
      </div>
    </section>
  );
}

// Small floating content cards for the hero
function FloatingStaffCard({ style = {} }) {
  const t = useTp();
  return (
    <div style={{
      background: '#fff', border: `1px solid ${tpTokens.line}`, borderRadius: 12,
      boxShadow: '0 20px 50px rgba(20,35,50,0.15)', padding: 12, width: 220,
      ...style,
    }}>
      <p style={{ margin: 0, fontSize: 10, color: tpTokens.muted, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em' }}>Tonight's distribution</p>
      <div style={{ marginTop: 10, display: 'grid', gap: 8 }}>
        {[
          ['Sarah M.', '£24.80', '✓'],
          ['James O.', '£18.20', '✓'],
          ['Priya S.', '£16.40', '↗'],
        ].map(([n, v, s]) => (
          <div key={n} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
              <div style={{ width: 22, height: 22, borderRadius: '50%', background: t.accentSoft, color: t.accent, fontSize: 10, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{n[0]}</div>
              <span style={{ fontSize: 12, color: tpTokens.ink, fontWeight: 600 }}>{n}</span>
            </div>
            <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
              <span style={{ fontSize: 12, fontWeight: 800, color: tpTokens.ink }}>{v}</span>
              <span style={{ width: 16, height: 16, borderRadius: 4, background: t.accentSoft, color: t.accent, fontSize: 10, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{s}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function FloatingTipToast({ style = {} }) {
  const t = useTp();
  return (
    <div style={{
      background: '#fff', border: `1px solid ${tpTokens.line}`, borderRadius: 12,
      boxShadow: '0 20px 50px rgba(20,35,50,0.18)', padding: '10px 14px',
      display: 'flex', alignItems: 'center', gap: 12, width: 260,
      ...style,
    }}>
      <div style={{ width: 34, height: 34, borderRadius: 8, background: tpTokens.navy, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <img src="/logo-mark.svg" width={22} height={22}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <p style={{ margin: 0, fontSize: 12, fontWeight: 700, color: tpTokens.ink }}>You received £6.40</p>
        <p style={{ margin: '1px 0 0', fontSize: 10, color: tpTokens.muted, lineHeight: 1.35, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>Paid to your Tiploy wallet · 9:14 pm</p>
      </div>
      <div style={{ width: 8, height: 8, borderRadius: '50%', background: t.accent }}/>
    </div>
  );
}

function FloatingPayoutCard({ style = {} }) {
  const t = useTp();
  return (
    <div style={{
      background: '#fff', border: `1px solid ${tpTokens.line}`, borderRadius: 12,
      boxShadow: '0 20px 50px rgba(20,35,50,0.15)', padding: 12, width: 230,
      ...style,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <p style={{ margin: 0, fontSize: 10, color: tpTokens.muted, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em' }}>Tonight · The Crown</p>
        <span style={{ padding: '2px 6px', borderRadius: 5, background: t.accentSoft, color: t.accent, border: `1px solid ${t.accentBorder}`, fontSize: 9, fontWeight: 700 }}>LIVE</span>
      </div>
      <p style={{ margin: '8px 0 2px', fontSize: 22, fontWeight: 800, color: tpTokens.ink, letterSpacing: '-0.02em' }}>£482.00</p>
      <p style={{ margin: 0, fontSize: 11, color: tpTokens.muted }}>47 tips · paid to 6 staff · 3.2s avg settle</p>
      <div style={{ marginTop: 10, height: 6, borderRadius: 3, background: '#f1f3f5', overflow: 'hidden' }}>
        <div style={{ width: '82%', height: '100%', background: t.accent }}/>
      </div>
    </div>
  );
}

Object.assign(window, { TpTopbar, HeroStageA, FloatingStaffCard, FloatingTipToast, FloatingPayoutCard, HERO_HEADLINES });