// Tiploy Landing — How it works, Tip Act compliance, Features, Partners

// ─── HOW IT WORKS ─────────────────────────────────────────────────────
function HowItWorks() {
  const t = useTp();
  const steps = [
    { n: '01', eyebrow: 'At the terminal', title: 'Guest adds a tip on the PAX A920', body: 'Our app presents the tip prompt at payment. Guest picks staff or pool. Card is authorised once — tip and bill together.' },
    { n: '02', eyebrow: 'On settlement', title: 'Tax withheld via the Tronc', body: 'HMRC-registered tronc scheme: no employer NI, no employee NI — just income tax via PAYE. Calculated per-tip against YTD earnings.' },
    { n: '03', eyebrow: 'Within seconds', title: 'Paid to staff by Faster Payments', body: 'Net tip lands in the staff wallet. Virtual Visa, Apple Pay, or bank transfer out. No waiting until payday.' },
    { n: '04', eyebrow: 'For the owner', title: 'Everything logged for audit', body: 'Tronc records, allocation rules, consent, payout proofs. One click to export a compliance pack for HMRC or ACAS.' },
  ];
  return (
    <TpSection id="platform" tone="default">
      <TpSectionHeader
        eyebrow="How it works"
        title="Four steps. One card swipe. Zero spreadsheets."
        lede="The entire tipping lifecycle, captured and resolved at the point of payment — not reconciled weeks later."
      />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {steps.map((s, i) => (
          <div key={s.n} style={{
            background: '#fff', border: `1px solid ${tpTokens.line}`, borderRadius: 14,
            padding: 22, position: 'relative', boxShadow: '0 8px 20px rgba(34,45,60,.04)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: t.accent, fontWeight: 700, letterSpacing: '.1em' }}>{s.n}</span>
              {i < 3 && <TpArrow size={16} color={tpTokens.line}/>}
            </div>
            <TpEyebrow tone="muted" style={{ marginBottom: 8 }}>{s.eyebrow}</TpEyebrow>
            <h3 style={{ margin: 0, fontSize: 17, fontWeight: 800, color: tpTokens.ink, letterSpacing: '-0.01em', lineHeight: 1.2 }}>{s.title}</h3>
            <p style={{ margin: '10px 0 0', fontSize: 14, color: tpTokens.muted, lineHeight: 1.5 }}>{s.body}</p>
          </div>
        ))}
      </div>
    </TpSection>
  );
}

// ─── TIP ACT COMPLIANCE ───────────────────────────────────────────────
function TipActSection() {
  const t = useTp();
  const bullets = [
    { k: '100%', l: 'Tips passed to staff with no deductions beyond statutory tax' },
    { k: 'Tronc', l: 'HMRC-registered scheme — no employer or employee NI due' },
    { k: 'Policy', l: 'Written tipping policy published, visible to staff' },
    { k: '3 years', l: 'Records retained and exportable on demand' },
  ];
  return (
    <TpSection id="compliance" tone="cream">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <TpEyebrow tone="accent" style={{ marginBottom: 12 }}>Tip Act 2023 · Statutory</TpEyebrow>
          <h2 style={{
            margin: 0, fontFamily: 'var(--font-display)',
            fontSize: 'clamp(30px, 3.6vw, 48px)', lineHeight: 1.06, letterSpacing: '-0.02em',
            fontWeight: 800, color: tpTokens.ink, textWrap: 'balance',
          }}>
            The law changed in October 2024.<br/>
            <span style={{ color: t.accent }}>Your terminals can solve it.</span>
          </h2>
          <p style={{ margin: '18px 0 0', fontSize: 17, lineHeight: 1.55, color: tpTokens.muted, maxWidth: 520, textWrap: 'pretty' }}>
            The Employment (Allocation of Tips) Act makes fair, traceable tip distribution a statutory duty. Miss it and the venue is exposed to employment tribunal claims. Tiploy handles it at the point of payment — so there's nothing to miss.
          </p>
          <div style={{ marginTop: 24, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <TpButton as="a" href="#contact">Talk to us about compliance</TpButton>
            <TpButton variant="ghost" as="a" href="#faq">Read the FAQ</TpButton>
          </div>
        </div>
        <div style={{
          background: '#fff', border: `1px solid ${tpTokens.line}`, borderRadius: 16,
          padding: 28, boxShadow: '0 24px 50px rgba(34,45,60,.06)',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20, paddingBottom: 16, borderBottom: `1px solid ${tpTokens.line}` }}>
            <div>
              <TpEyebrow tone="muted">Compliance checklist</TpEyebrow>
              <p style={{ margin: '4px 0 0', fontSize: 18, fontWeight: 800, color: tpTokens.ink }}>What the Act requires</p>
            </div>
            <TpChip variant="accent">Covered by default</TpChip>
          </div>
          <div style={{ display: 'grid', gap: 14 }}>
            {bullets.map(b => (
              <div key={b.k} style={{ display: 'flex', gap: 14, alignItems: 'start' }}>
                <div style={{
                  width: 64, flexShrink: 0, padding: '6px 8px', borderRadius: 8,
                  background: t.accentSoft, border: `1px solid ${t.accentBorder}`,
                  textAlign: 'center',
                }}>
                  <span style={{ fontSize: 13, fontWeight: 800, color: t.accent, letterSpacing: '-0.01em' }}>{b.k}</span>
                </div>
                <p style={{ margin: '4px 0 0', fontSize: 14, color: tpTokens.ink, lineHeight: 1.5 }}>{b.l}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </TpSection>
  );
}

// ─── FEATURE GRID ─────────────────────────────────────────────────────
function FeatureGrid() {
  const t = useTp();
  const features = [
    {
      title: 'Automatic tip distribution',
      body: 'Rules-based split across staff on shift or pool. Handles rotas, proportional hours, flat splits. Owners publish a ruleset; the engine does the rest.',
      tag: 'Split engine',
    },
    {
      title: 'Staff digital wallets',
      body: 'Virtual Visa/Mastercard, Apple Pay, Google Pay, Faster Payments cash-out. Staff see tips land in seconds — not on payday.',
      tag: 'Faster Payments',
    },
    {
      title: 'Tronc-aware tax engine',
      body: 'Per-tip PAYE calc against YTD earnings. No employer NI. No employee NI. HMRC-registered scheme from day one.',
      tag: 'HMRC-ready',
    },
    {
      title: 'Card-token loyalty',
      body: "Loyalty id = hash(card token + phone). Guests earn on swipe — no app, no QR, no sign-up. Progressive profile builds over return visits.",
      tag: 'No app needed',
    },
    {
      title: 'Owner compliance dashboard',
      body: 'Tip volume, tax withheld, staff YTD, manual-review queue, payout proofs, audit pack. One URL, one login.',
      tag: 'Audit-ready',
    },
    {
      title: 'Open provider architecture',
      body: 'Standard TiployProvider interface. Rapyd, Modulr, ClearBank, Verofy — route each ISO estate to the licensed provider you prefer.',
      tag: 'B2B2B',
    },
  ];
  return (
    <TpSection id="features" tone="default">
      <TpSectionHeader
        eyebrow="Platform"
        title="Everything a terminal alone can't do."
        lede="Six modules, one stack, one contract. Every merchant on your estate gets the same reliable tipping and retention layer."
      />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
        {features.map(f => (
          <div key={f.title} style={{
            background: '#fff', border: `1px solid ${tpTokens.line}`, borderRadius: 14,
            padding: 24, boxShadow: '0 8px 20px rgba(34,45,60,.04)',
            display: 'flex', flexDirection: 'column',
          }}>
            <TpChip variant="accent" style={{ alignSelf: 'flex-start', marginBottom: 16 }}>{f.tag}</TpChip>
            <h3 style={{ margin: 0, fontSize: 18, fontWeight: 800, color: tpTokens.ink, letterSpacing: '-0.01em', lineHeight: 1.25 }}>{f.title}</h3>
            <p style={{ margin: '10px 0 0', fontSize: 14, color: tpTokens.muted, lineHeight: 1.55 }}>{f.body}</p>
          </div>
        ))}
      </div>
    </TpSection>
  );
}

// ─── ISO PARTNERS / B2B2B ─────────────────────────────────────────────
function PartnersSection() {
  const t = useTp();
  const bullets = [
    { k: 'Estate-wide deployment', v: 'One commercial agreement. Tiploy rolls to every terminal on your book.' },
    { k: 'Premium tier you can sell', v: 'Bundle as "Payments + Tiploy". New revenue line, zero dev cost on your side.' },
    { k: 'Lower merchant churn', v: 'Loyalty data sits in Tiploy. Two years of customer visits = switching cost for the merchant.' },
    { k: 'More interchange per merchant', v: 'Loyalty drives return visits. Return visits drive transaction volume. You earn on every one.' },
    { k: 'White-label by default', v: 'Merchants see your brand. "Tiploy Payments" stays neutral — no disintermediation risk.' },
    { k: 'Close the Dojo gap', v: "Dojo built their own stack. Tiploy lets every other ISO match it — instantly, without dev spend." },
  ];
  return (
    <TpSection id="partners" tone="navy">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: 56, alignItems: 'start' }}>
        <div style={{ color: '#fff' }}>
          <TpEyebrow tone="muted" style={{ color: 'rgba(255,255,255,0.7)', marginBottom: 12 }}>For ISO partners</TpEyebrow>
          <h2 style={{
            margin: 0, fontFamily: 'var(--font-display)',
            fontSize: 'clamp(30px, 3.6vw, 48px)', lineHeight: 1.06, letterSpacing: '-0.02em',
            fontWeight: 800, textWrap: 'balance',
          }}>One partnership. Fifty thousand terminals.</h2>
          <p style={{ margin: '18px 0 0', fontSize: 17, lineHeight: 1.6, color: 'rgba(255,255,255,0.78)', maxWidth: 480, textWrap: 'pretty' }}>
            Tiploy is an ISV — we build, you distribute. Sign once, deploy estate-wide, and turn your PAX fleet into the most competitive tipping and loyalty offer in the UK.
          </p>

          <div style={{ marginTop: 32, padding: 22, borderRadius: 14, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)' }}>
            <p style={{ margin: 0, fontSize: 12, color: tpTokens.gold, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.09em' }}>How it's structured</p>
            <div style={{ marginTop: 14, fontFamily: 'var(--font-mono)', fontSize: 12.5, color: '#fff', lineHeight: 1.9 }}>
              <div style={{ color: 'rgba(255,255,255,0.55)' }}>Card schemes  <span style={{ color: 'rgba(255,255,255,0.25)' }}>— Visa · Mastercard</span></div>
              <div style={{ color: 'rgba(255,255,255,0.55)' }}>&nbsp;&nbsp;&nbsp;↓</div>
              <div style={{ color: 'rgba(255,255,255,0.55)' }}>Acquirer      <span style={{ color: 'rgba(255,255,255,0.25)' }}>— licensed bank</span></div>
              <div style={{ color: 'rgba(255,255,255,0.55)' }}>&nbsp;&nbsp;&nbsp;↓</div>
              <div style={{ color: '#fff' }}>ISO           <span style={{ color: tpTokens.gold }}>← you sit here</span></div>
              <div style={{ color: 'rgba(255,255,255,0.55)' }}>&nbsp;&nbsp;&nbsp;↓  <span style={{ color: tpTokens.coral }}>+ Tiploy (ISV)</span></div>
              <div style={{ color: 'rgba(255,255,255,0.85)' }}>Merchant      <span style={{ color: 'rgba(255,255,255,0.4)' }}>— the restaurant</span></div>
            </div>
          </div>

          <div style={{ display: 'flex', gap: 10, marginTop: 26, flexWrap: 'wrap' }}>
            <TpButton variant="primary" as="a" href="#contact" style={{ background: '#fff', color: tpTokens.navy, borderColor: '#fff' }}>Partner with Tiploy <TpArrow size={15}/></TpButton>
            <TpButton variant="ghost" as="a" href="#platform" style={{ background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }}>Download the deck</TpButton>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
          {bullets.map(b => (
            <div key={b.k} style={{
              padding: 18, borderRadius: 12,
              background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.12)',
              color: '#fff',
            }}>
              <p style={{ margin: 0, fontSize: 13, fontWeight: 800, color: tpTokens.gold, letterSpacing: '-0.01em' }}>{b.k}</p>
              <p style={{ margin: '8px 0 0', fontSize: 13.5, color: 'rgba(255,255,255,0.78)', lineHeight: 1.55 }}>{b.v}</p>
            </div>
          ))}
        </div>
      </div>
    </TpSection>
  );
}

Object.assign(window, { HowItWorks, TipActSection, FeatureGrid, PartnersSection });