// Tiploy Landing — device showcases, integrations, pricing, FAQ, CTA, footer

// ─── DEVICE SHOWCASE (PAX + WALLET + NOTIF) ───────────────────────────
function DeviceShowcase() {
  const t = useTp();
  return (
    <TpSection id="venues" tone="subtle">
      <TpSectionHeader
        eyebrow="For venues"
        title="Guests tip the way they always have. Staff get paid by Friday bus fare."
        lede="The hardware stays familiar. Behind it: a splitting engine, a tax engine, and a wallet that settles in seconds."
      />

      {/* Three-device row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, alignItems: 'start', marginBottom: 24 }}>
        {/* Terminal */}
        <div style={{
          background: '#fff', border: `1px solid ${tpTokens.line}`, borderRadius: 18,
          padding: '28px 20px 0', boxShadow: '0 8px 20px rgba(34,45,60,.04)',
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          height: 580, overflow: 'hidden', position: 'relative',
        }}>
          <div style={{ width: '100%', marginBottom: 16, textAlign: 'left' }}>
            <TpChip variant="accent">Capture</TpChip>
            <h3 style={{ margin: '12px 0 4px', fontSize: 20, fontWeight: 800, color: tpTokens.ink, letterSpacing: '-0.01em' }}>PAX A920 tip prompt</h3>
            <p style={{ margin: 0, fontSize: 13.5, color: tpTokens.muted, lineHeight: 1.5 }}>Runs as a native Android app. Prompts the guest, captures consent, routes to staff — all at the point of authorisation.</p>
          </div>
          <div style={{ transform: 'scale(0.88)', transformOrigin: 'top center', marginTop: 10 }}>
            <PaxTerminal />
          </div>
        </div>

        {/* Notification */}
        <div style={{
          background: '#fff', border: `1px solid ${tpTokens.line}`, borderRadius: 18,
          padding: '28px 20px 0', boxShadow: '0 8px 20px rgba(34,45,60,.04)',
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          height: 580, overflow: 'hidden',
        }}>
          <div style={{ width: '100%', marginBottom: 16, textAlign: 'left' }}>
            <TpChip variant="accent">Notify</TpChip>
            <h3 style={{ margin: '12px 0 4px', fontSize: 20, fontWeight: 800, color: tpTokens.ink, letterSpacing: '-0.01em' }}>Instant tip alert</h3>
            <p style={{ margin: 0, fontSize: 13.5, color: tpTokens.muted, lineHeight: 1.5 }}>Staff see each tip land — with the table, time, gross, tax, and net — the moment the card settles.</p>
          </div>
          <div style={{ transform: 'scale(0.82)', transformOrigin: 'top center', marginTop: 0 }}>
            <TipNotifPhone />
          </div>
        </div>

        {/* Wallet */}
        <div style={{
          background: '#fff', border: `1px solid ${tpTokens.line}`, borderRadius: 18,
          padding: '28px 20px 0', boxShadow: '0 8px 20px rgba(34,45,60,.04)',
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          height: 580, overflow: 'hidden',
        }}>
          <div style={{ width: '100%', marginBottom: 16, textAlign: 'left' }}>
            <TpChip variant="accent">Pay out</TpChip>
            <h3 style={{ margin: '12px 0 4px', fontSize: 20, fontWeight: 800, color: tpTokens.ink, letterSpacing: '-0.01em' }}>Staff wallet &amp; virtual card</h3>
            <p style={{ margin: 0, fontSize: 13.5, color: tpTokens.muted, lineHeight: 1.5 }}>Spend on Apple Pay, withdraw via Faster Payments, or leave it to build up. It's theirs — no payroll lag.</p>
          </div>
          <div style={{ transform: 'scale(0.82)', transformOrigin: 'top center', marginTop: 0 }}>
            <WalletPhone />
          </div>
        </div>
      </div>

      {/* Dashboard preview below */}
      <div style={{
        background: '#fff', border: `1px solid ${tpTokens.line}`, borderRadius: 18,
        padding: 28, boxShadow: '0 8px 20px rgba(34,45,60,.04)',
        display: 'grid', gridTemplateColumns: '1fr 1.35fr', gap: 32, alignItems: 'center',
      }}>
        <div>
          <TpChip variant="accent">Control</TpChip>
          <h3 style={{ margin: '14px 0 4px', fontSize: 24, fontWeight: 800, color: tpTokens.ink, letterSpacing: '-0.015em', lineHeight: 1.15 }}>Owner dashboard, audit-ready by default</h3>
          <p style={{ margin: '10px 0 0', fontSize: 15, color: tpTokens.muted, lineHeight: 1.55 }}>
            Tip volume, tax, staff YTD, manual-review queue, loyalty metrics, payout proofs — all in one place. Export a 12-month compliance pack whenever HMRC or ACAS asks.
          </p>
          <ul style={{ margin: '20px 0 0', padding: 0, listStyle: 'none', display: 'grid', gap: 10 }}>
            {['Real-time tip log', 'Staff YTD earnings & tax codes', 'Manual-review queue', 'Ruleset versioning', 'HMRC-ready exports'].map(l => (
              <li key={l} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: tpTokens.ink }}>
                <span style={{ width: 18, height: 18, borderRadius: 5, background: t.accentSoft, color: t.accent, border: `1px solid ${t.accentBorder}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 800 }}>✓</span>
                {l}
              </li>
            ))}
          </ul>
        </div>
        <div style={{ transform: 'scale(0.92)', transformOrigin: 'top right', justifySelf: 'end' }}>
          <DashboardPreview />
        </div>
      </div>
    </TpSection>
  );
}

// ─── INTEGRATIONS ─────────────────────────────────────────────────────
function IntegrationsBand() {
  const t = useTp();
  const wordmarks = [
    { n: 'PAX', sub: 'A920 terminal' },
    { n: 'Visa', sub: 'card tokenisation' },
    { n: 'Mastercard', sub: 'card tokenisation' },
    { n: 'Rapyd', sub: 'licensed provider' },
    { n: 'Modulr', sub: 'licensed provider' },
    { n: 'ClearBank', sub: 'licensed provider' },
    { n: 'Verofy', sub: 'acquirer partner' },
    { n: 'HMRC', sub: 'tronc PAYE' },
    { n: 'Faster Payments', sub: 'disbursement rail' },
    { n: 'Apple Pay', sub: 'wallet push' },
  ];
  return (
    <TpSection id="integrations" tone="default">
      <TpSectionHeader
        eyebrow="Integrations"
        title="Sits on what you've already got."
        lede="Tiploy is an ISV. We don't replace your acquirer or your terminal estate — we plug into them via a standard provider interface."
        align="center"
        maxWidth={720}
      />
      <div style={{
        background: '#fff', border: `1px solid ${tpTokens.line}`, borderRadius: 16,
        boxShadow: '0 8px 20px rgba(34,45,60,.04)', padding: 10,
        display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
      }}>
        {wordmarks.map((w, i) => (
          <div key={w.n} style={{
            padding: '26px 16px', textAlign: 'center',
            borderRight: (i + 1) % 5 === 0 ? 'none' : `1px solid ${tpTokens.line}`,
            borderBottom: i < 5 ? `1px solid ${tpTokens.line}` : 'none',
          }}>
            <p style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 800, color: tpTokens.ink, letterSpacing: '-0.015em' }}>{w.n}</p>
            <p style={{ margin: '4px 0 0', fontSize: 11, color: tpTokens.muted, fontWeight: 600 }}>{w.sub}</p>
          </div>
        ))}
      </div>
      <p style={{ margin: '20px auto 0', textAlign: 'center', fontSize: 13, color: tpTokens.muted, maxWidth: 520 }}>
        Any licensed payment provider can integrate via the standard <code style={{ fontFamily: 'var(--font-mono)', color: tpTokens.ink, background: tpTokens.bgDeep, padding: '2px 6px', borderRadius: 4 }}>TiployProvider</code> interface.
      </p>
    </TpSection>
  );
}

// ─── PRICING ──────────────────────────────────────────────────────────
function PricingSection() {
  const t = useTp();
  const tiers = [
    {
      name: 'Starter',
      tag: 'Single site',
      price: '—',
      features: ['1 PAX terminal', 'Up to 15 staff wallets', 'Tip Act compliance pack', 'Tronc registered', 'Email support'],
      cta: 'Talk to us',
      highlight: false,
    },
    {
      name: 'Growth',
      tag: 'Multi-site',
      price: '—',
      features: ['Up to 10 terminals', 'Unlimited staff wallets', 'Loyalty & SMS campaigns', 'Owner dashboard + exports', 'Priority support'],
      cta: 'Talk to us',
      highlight: true,
    },
    {
      name: 'Enterprise',
      tag: 'ISO partners & groups',
      price: '—',
      features: ['Unlimited terminals & sites', 'White-label merchant UI', 'Open provider API', 'Dedicated partnerships lead', 'Revenue-share agreements'],
      cta: 'Partner with us',
      highlight: false,
    },
  ];
  return (
    <TpSection id="pricing" tone="default">
      <TpSectionHeader
        eyebrow="Pricing"
        title="Three tiers. One conversation."
        lede="Commercials depend on estate size and provider choice — so the numbers are a conversation, not a price list."
        align="center"
        maxWidth={700}
      />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {tiers.map(tier => {
          const isHi = tier.highlight;
          return (
            <div key={tier.name} style={{
              background: isHi ? tpTokens.navy : '#fff',
              color: isHi ? '#fff' : tpTokens.ink,
              border: `1px solid ${isHi ? tpTokens.navy : tpTokens.line}`,
              borderRadius: 16, padding: 26,
              boxShadow: isHi ? '0 24px 50px rgba(20,35,50,.18)' : '0 8px 20px rgba(34,45,60,.04)',
              position: 'relative', overflow: 'hidden',
            }}>
              {isHi && <span style={{ position: 'absolute', top: 18, right: 18, padding: '3px 9px', background: tpTokens.gold, color: '#2a1a00', borderRadius: 6, fontSize: 10, fontWeight: 800, letterSpacing: '.05em', textTransform: 'uppercase' }}>Most common</span>}
              <p style={{ margin: 0, fontSize: 12, fontWeight: 700, color: isHi ? 'rgba(255,255,255,0.6)' : tpTokens.muted, textTransform: 'uppercase', letterSpacing: '.08em' }}>{tier.tag}</p>
              <p style={{ margin: '4px 0 0', fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 800, letterSpacing: '-0.015em' }}>{tier.name}</p>
              <div style={{ margin: '18px 0 16px', padding: '14px 0', borderTop: `1px solid ${isHi ? 'rgba(255,255,255,0.14)' : tpTokens.line}`, borderBottom: `1px solid ${isHi ? 'rgba(255,255,255,0.14)' : tpTokens.line}` }}>
                <p style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1 }}>{tier.price}</p>
                <p style={{ margin: '6px 0 0', fontSize: 12, color: isHi ? 'rgba(255,255,255,0.6)' : tpTokens.muted }}>per month · price TBD</p>
              </div>
              <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 10 }}>
                {tier.features.map(f => (
                  <li key={f} style={{ display: 'flex', gap: 10, fontSize: 13.5, lineHeight: 1.5, color: isHi ? 'rgba(255,255,255,0.85)' : tpTokens.ink }}>
                    <span style={{ flexShrink: 0, width: 16, height: 16, borderRadius: 4, background: isHi ? 'rgba(232,160,32,0.22)' : t.accentSoft, color: isHi ? tpTokens.gold : t.accent, border: `1px solid ${isHi ? 'rgba(232,160,32,0.35)' : t.accentBorder}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 800, marginTop: 2 }}>✓</span>
                    {f}
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: 22 }}>
                <TpButton
                  as="a" href="#contact"
                  variant={isHi ? 'primary' : 'ghost'}
                  size="md"
                  style={isHi ? { background: '#fff', color: tpTokens.navy, borderColor: '#fff', width: '100%' } : { width: '100%' }}
                >
                  {tier.cta} <TpArrow size={14}/>
                </TpButton>
              </div>
            </div>
          );
        })}
      </div>
    </TpSection>
  );
}

// ─── FAQ ──────────────────────────────────────────────────────────────
function FaqSection() {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: 'Is Tiploy an acquirer or a payment provider?', a: 'No. Tiploy is an ISV (Independent Software Vendor) — we build the tipping, wallet, and loyalty software. The acquirer and licensed payment provider behind each deployment stays with our ISO partner.' },
    { q: 'What does "tronc" mean, and why does it matter?', a: 'A tronc is an HMRC-registered scheme for distributing tips outside payroll. Under a properly run tronc, neither employer NI (13.8%) nor employee NI (8%) is due — only income tax via PAYE. It\'s a significant saving for the venue and the staff.' },
    { q: 'Do guests need to download an app?', a: "No. Tipping happens on the PAX terminal the guest is already paying on. Loyalty uses a card-token + phone hash as identity — no app, no QR code, no sign-up to earn." },
    { q: 'Do staff need to download an app?', a: 'Not to receive tips — net tips land via Faster Payments on the same rails payroll already uses. The staff wallet app adds virtual card, Apple/Google Pay, and live balance — but it\'s optional.' },
    { q: 'Which card schemes and providers do you support?', a: 'Any licensed provider that implements the TiployProvider interface. We have integrations built or in flight for Rapyd, Modulr, ClearBank and Verofy, and the architecture is deliberately open so ISO partners can route to their preferred provider.' },
    { q: 'How does Tiploy handle the Employment (Allocation of Tips) Act 2023?', a: 'The Act requires 100% of card tips to be passed to workers, with a written policy and fair allocation. Tiploy enforces this at the point of payment: no owner deductions, records retained for three years, exportable compliance pack for HMRC or ACAS.' },
    { q: 'Can it work outside hospitality?', a: 'Yes. Same backend, same payments stack — an "industry" field changes the UI, earning model, and staff structure. Beauty salons are the next vertical: booth-rental stylists, stylist-direct loyalty, no tronc.' },
  ];
  return (
    <TpSection id="faq" tone="default">
      <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.4fr', gap: 48, alignItems: 'start' }}>
        <div style={{ position: 'sticky', top: 90 }}>
          <TpEyebrow tone="accent" style={{ marginBottom: 12 }}>FAQ</TpEyebrow>
          <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3.2vw, 40px)', lineHeight: 1.08, letterSpacing: '-0.02em', fontWeight: 800, color: tpTokens.ink, textWrap: 'balance' }}>
            Questions we get, before the call.
          </h2>
          <p style={{ margin: '16px 0 0', color: tpTokens.muted, fontSize: 15, lineHeight: 1.55 }}>Still something missing? <a href="#contact" style={{ color: tpTokens.ink, fontWeight: 700 }}>Send us a line →</a></p>
        </div>
        <div style={{ display: 'grid', gap: 8 }}>
          {faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <button key={i} onClick={() => setOpen(isOpen ? -1 : i)} style={{
                textAlign: 'left', background: '#fff', border: `1px solid ${isOpen ? tpTokens.lineStrong : tpTokens.line}`, borderRadius: 12, padding: '18px 20px',
                fontFamily: 'inherit', cursor: 'pointer', boxShadow: isOpen ? '0 12px 30px rgba(34,45,60,.06)' : 'none', transition: 'all 120ms ease',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16 }}>
                  <p style={{ margin: 0, fontSize: 15.5, fontWeight: 700, color: tpTokens.ink }}>{f.q}</p>
                  <span style={{ flexShrink: 0, width: 26, height: 26, borderRadius: '50%', border: `1px solid ${tpTokens.line}`, color: tpTokens.muted, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 700, transform: isOpen ? 'rotate(45deg)' : 'none', transition: 'transform 160ms ease' }}>+</span>
                </div>
                {isOpen && <p style={{ margin: '12px 0 0', fontSize: 14.5, color: tpTokens.muted, lineHeight: 1.6, textWrap: 'pretty' }}>{f.a}</p>}
              </button>
            );
          })}
        </div>
      </div>
    </TpSection>
  );
}

// ─── FINAL CTA + FOOTER ───────────────────────────────────────────────
function FinalCtaSection() {
  const t = useTp();
  return (
    <TpSection id="contact" tone="default" style={{ paddingBottom: 40 }}>
      <div style={{
        borderRadius: 24, padding: 'clamp(32px, 5vw, 64px)',
        background: `radial-gradient(80% 100% at 100% 0%, ${tpTokens.coral}22 0%, transparent 60%), linear-gradient(135deg, ${tpTokens.navy} 0%, #0f2238 100%)`,
        color: '#fff', position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 40, alignItems: 'center' }}>
          <div>
            <TpEyebrow style={{ color: tpTokens.gold, marginBottom: 14 }}>Let's talk</TpEyebrow>
            <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 'clamp(30px, 4vw, 52px)', lineHeight: 1.04, letterSpacing: '-0.025em', fontWeight: 800, textWrap: 'balance' }}>
              Turn your PAX estate into the stickiest offer in UK hospitality.
            </h2>
            <p style={{ margin: '18px 0 0', fontSize: 16.5, color: 'rgba(255,255,255,0.78)', maxWidth: 520, lineHeight: 1.55 }}>
              One partnership call. We'll walk through commercials, integration scope, and a staged rollout plan for your book.
            </p>
          </div>
          <div style={{
            background: 'rgba(255,255,255,0.07)', border: '1px solid rgba(255,255,255,0.14)',
            borderRadius: 16, padding: 24, backdropFilter: 'blur(8px)',
          }}>
            <p style={{ margin: 0, fontSize: 13, fontWeight: 700, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: '.08em' }}>Contact</p>
            <div style={{ marginTop: 16, display: 'grid', gap: 14 }}>
              {[
                ['Partnerships', 'partners@tiploy.com'],
                ['Venues', 'hello@tiploy.com'],
                ['Press', 'press@tiploy.com'],
              ].map(([l, v]) => (
                <div key={l} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 14, borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.05em' }}>{l}</span>
                  <a href={`mailto:${v}`} style={{ fontSize: 14, color: '#fff', fontWeight: 600, textDecoration: 'none', fontFamily: 'var(--font-mono)' }}>{v}</a>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 18 }}>
              <TpButton as="a" href="mailto:partners@tiploy.com" style={{ background: '#fff', color: tpTokens.navy, borderColor: '#fff', width: '100%' }}>Start the conversation <TpArrow size={15}/></TpButton>
            </div>
          </div>
        </div>
      </div>
    </TpSection>
  );
}

function TpFooter() {
  const groups = [
    { title: 'Platform', items: ['Tip capture', 'Staff wallets', 'Loyalty', 'Merchant dashboard', 'Open provider API'] },
    { title: 'Partners', items: ['For ISOs', 'For acquirers', 'Become a provider', 'Case studies'] },
    { title: 'Venues',   items: ['Hospitality', 'Beauty & salons', 'Pricing', 'FAQ'] },
    { title: 'Company',  items: ['About', 'Tip Act compliance', 'Security', 'Privacy', 'Terms'] },
  ];
  return (
    <footer style={{ background: '#0c141c', color: '#fff', padding: '56px 0 28px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 24px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr repeat(4, 1fr)', gap: 40, marginBottom: 40 }}>
          <div>
            <img src="/logo-white.svg" style={{ height: 30, marginBottom: 16 }}/>
            <p style={{ margin: 0, fontSize: 13, color: 'rgba(255,255,255,0.55)', lineHeight: 1.6, maxWidth: 280 }}>
              Tipping, staff wallets, and loyalty for UK hospitality and beauty — on the terminals you already sell.
            </p>
          </div>
          {groups.map(g => (
            <div key={g.title}>
              <p style={{ margin: '0 0 14px', fontSize: 12, color: 'rgba(255,255,255,0.55)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.09em' }}>{g.title}</p>
              <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 10 }}>
                {g.items.map(i => (
                  <li key={i}><a href="#" style={{ color: 'rgba(255,255,255,0.82)', fontSize: 13.5, textDecoration: 'none', fontWeight: 500 }}>{i}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.1)', flexWrap: 'wrap', gap: 12 }}>
          <p style={{ margin: 0, fontSize: 12, color: 'rgba(255,255,255,0.45)' }}>© Tiploy Ltd. Registered in England &amp; Wales. All product names are trademarks of their respective holders.</p>
          <p style={{ margin: 0, fontSize: 12, color: 'rgba(255,255,255,0.45)' }}>Tiploy is an ISV. Payment services are provided by our licensed provider partners.</p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { DeviceShowcase, IntegrationsBand, PricingSection, FaqSection, FinalCtaSection, TpFooter });
