/* Personal page — remaining sections in one file for compactness */

function PersonalFeatures() {
  const features = [
    { eyebrow: 'Hold', title: 'Five currencies. One wallet.', body: 'GBP, EUR, USD, USDC, EURC — all in one account, no juggling apps.', tint: '#6B8CFF' },
    { eyebrow: 'Send', title: 'International transfers, fair prices.', body: 'Mid-market rates plus a 0.30% margin. Banks charge 1.5%+ and hide it in the rate.', tint: '#8B7BFF' },
    { eyebrow: 'Spend', title: 'A card that converts on the fly.', body: 'Tap anywhere. We charge the cheapest balance you hold at the spot rate.', tint: '#4DD4C5' },
    { eyebrow: 'Stablecoin', title: 'Hold USDC and EURC natively.', body: 'Receive on-chain or convert from fiat in seconds. Earn 4% APY when you opt in.', tint: '#FDB94E' },
  ];

  return (
    <section className="m-section">
      <div className="m-container">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <div className="m-eyebrow" style={{ marginBottom: 14 }}>What you can do</div>
          <h2 style={{
            font: '500 clamp(32px, 3.4vw, 44px)/1.1 var(--font-sans)',
            letterSpacing: '-0.025em', margin: 0,
          }}>
            A real bank account. Without the bank.
          </h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 16,
        }}>
          {features.map((f) => <FeatureCard key={f.title} feature={f} />)}
        </div>
      </div>
    </section>
  );
}

function FeatureCard({ feature }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: 'var(--m-card-bg, transparent)',
        border: '1px solid var(--m-border)',
        borderRadius: 24, padding: 32,
        position: 'relative', overflow: 'hidden',
        transition: 'transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard)',
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        boxShadow: hover ? `0 24px 60px -28px ${feature.tint}66` : 'none',
        cursor: 'pointer',
      }}>
      <div style={{
        position: 'absolute', top: 0, right: 0, width: 200, height: 200,
        background: `radial-gradient(circle at center, ${feature.tint}33 0%, transparent 70%)`,
        opacity: hover ? 1 : 0.4,
        transition: 'opacity var(--dur-base) var(--ease-standard)',
        pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative' }}>
        <div style={{
          display: 'inline-block', padding: '5px 10px',
          background: `${feature.tint}22`, color: feature.tint,
          borderRadius: 999,
          font: '600 11px/1 var(--font-sans)', letterSpacing: '0.1em', textTransform: 'uppercase',
        }}>{feature.eyebrow}</div>
        <h3 style={{
          font: '500 24px/1.2 var(--font-sans)',
          letterSpacing: '-0.018em', margin: '20px 0 12px',
        }}>{feature.title}</h3>
        <p style={{ font: '400 15px/1.55 var(--font-sans)', color: 'var(--m-fg-2)', margin: 0 }}>
          {feature.body}
        </p>
      </div>
    </article>
  );
}

function LiveFXWidget() {
  const PAIRS = [
    { from: 'GBP', to: 'EUR', base: 1.1684, vol: 0.0006 },
    { from: 'GBP', to: 'USD', base: 1.2735, vol: 0.0008 },
    { from: 'EUR', to: 'USD', base: 1.0898, vol: 0.0007 },
    { from: 'GBP', to: 'USDC', base: 1.2735, vol: 0.0008 },
    { from: 'EUR', to: 'EURC', base: 0.9998, vol: 0.0001 },
  ];

  const [rates, setRates] = React.useState(() => PAIRS.map((p) => ({ ...p, current: p.base, dir: 0 })));

  React.useEffect(() => {
    const id = setInterval(() => {
      setRates((rs) => rs.map((r) => {
        const drift = (Math.random() - 0.5) * r.vol * 2;
        const next = r.current + drift;
        return { ...r, current: next, dir: next > r.current ? 1 : -1 };
      }));
    }, 1800);
    return () => clearInterval(id);
  }, []);

  const [amount, setAmount] = React.useState(1000);

  return (
    <section className="m-section" style={{ paddingTop: 0 }}>
      <div className="m-container">
        <div style={{
          background: 'var(--m-fg)', color: 'var(--m-bg)',
          borderRadius: 28, padding: 48,
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48,
          position: 'relative', overflow: 'hidden',
        }}>
          <div>
            <div className="m-eyebrow" style={{ marginBottom: 14, color: 'rgba(255,255,255,0.55)' }}>Live mid-market</div>
            <h2 style={{
              font: '500 clamp(32px, 3.4vw, 44px)/1.1 var(--font-sans)',
              letterSpacing: '-0.025em', margin: 0, color: 'var(--m-bg)',
            }}>
              The rate you see is the rate you get.
            </h2>
            <p style={{
              font: '400 16px/1.55 var(--font-sans)',
              color: 'rgba(255,255,255,0.7)', margin: '20px 0 0', maxWidth: 440,
            }}>
              Banks pad the rate by 1.5–3% — invisibly. We charge a transparent 0.30% margin and show you the live mid-market price.
            </p>

            <div style={{ marginTop: 36 }}>
              <label style={{
                font: '500 11px/1 var(--font-sans)',
                letterSpacing: '0.12em', textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.55)',
              }}>You send</label>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 12 }}>
                <span style={{
                  fontSize: 40, fontWeight: 500, letterSpacing: '-0.025em',
                  fontFamily: 'IBM Plex Mono, monospace', color: 'var(--m-bg)',
                }}>£</span>
                <input
                  type="number"
                  value={amount}
                  onChange={(e) => setAmount(Math.max(0, +e.target.value || 0))}
                  style={{
                    background: 'transparent', border: 'none', outline: 'none',
                    color: 'var(--m-bg)',
                    fontSize: 40, fontWeight: 500, letterSpacing: '-0.025em',
                    fontFamily: 'IBM Plex Mono, monospace',
                    width: '100%',
                  }}
                />
              </div>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {rates.map((r) => {
              const received = amount * r.current;
              return (
                <div key={`${r.from}-${r.to}`} style={{
                  background: 'rgba(255,255,255,0.05)',
                  border: '1px solid rgba(255,255,255,0.08)',
                  borderRadius: 14, padding: '16px 20px',
                  display: 'grid', gridTemplateColumns: '50px 1fr auto', gap: 16, alignItems: 'center',
                  transition: 'background var(--dur-base) var(--ease-standard)',
                }}>
                  <div style={{
                    font: '500 13px/1 var(--font-sans)',
                    color: 'rgba(255,255,255,0.85)',
                    fontFamily: 'IBM Plex Mono, monospace',
                  }}>→ {r.to}</div>
                  <div>
                    <div style={{
                      fontSize: 16, fontWeight: 500,
                      fontFamily: 'IBM Plex Mono, monospace',
                      color: 'var(--m-bg)',
                      transition: 'color var(--dur-base) var(--ease-standard)',
                    }}>{received.toLocaleString('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                    <div style={{
                      fontSize: 11, color: 'rgba(255,255,255,0.45)',
                      marginTop: 2,
                      fontFamily: 'IBM Plex Mono, monospace',
                    }}>1 {r.from} = {r.current.toFixed(4)}</div>
                  </div>
                  <span style={{
                    fontSize: 11, fontWeight: 600,
                    padding: '3px 8px', borderRadius: 999,
                    background: r.dir > 0 ? 'rgba(116,219,168,0.18)' : 'rgba(255,150,150,0.18)',
                    color: r.dir > 0 ? '#9DE5C2' : '#FFB0B0',
                    fontFamily: 'IBM Plex Mono, monospace',
                  }}>{r.dir > 0 ? '▲' : '▼'}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

function CustomerCarousel() {
  const stories = [
    { quote: "I freelance for European clients. KwiikPay saved me £600 last year on FX alone.", name: "Maya Patel", role: "Designer · London", flag: "🇬🇧" },
    { quote: "I travel four months a year. One card. Five currencies. Zero ATM fees abroad.", name: "Tomás Silva", role: "Photographer · Lisbon", flag: "🇵🇹" },
    { quote: "I get paid in USD, spend in EUR. Holding USDC means I'm not at the bank's mercy.", name: "Anna Köhler", role: "Software engineer · Berlin", flag: "🇩🇪" },
    { quote: "My daughter is studying in Boston. Sending her money used to cost £30 a transfer.", name: "Adaeze Okafor", role: "Parent · Manchester", flag: "🇳🇬" },
  ];
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setIdx((i) => (i + 1) % stories.length), 5000);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="m-section" style={{ paddingTop: 0 }}>
      <div className="m-container">
        <div style={{
          background: 'var(--m-card-bg, transparent)',
          border: '1px solid var(--m-border)',
          borderRadius: 28, padding: 56,
          textAlign: 'center', maxWidth: 880, margin: '0 auto',
          position: 'relative',
        }}>
          <div className="m-eyebrow" style={{ marginBottom: 24 }}>From our customers</div>
          {stories.map((s, i) => (
            <div key={i} style={{
              opacity: i === idx ? 1 : 0,
              transform: i === idx ? 'translateY(0)' : 'translateY(8px)',
              transition: 'opacity 600ms ease, transform 600ms ease',
              position: i === idx ? 'static' : 'absolute',
              top: i === idx ? 'auto' : 80, left: i === idx ? 'auto' : 56, right: i === idx ? 'auto' : 56,
            }}>
              <blockquote style={{
                font: '500 clamp(22px, 2.4vw, 30px)/1.4 var(--font-sans)',
                letterSpacing: '-0.018em', margin: 0,
                color: 'var(--m-fg)',
              }}>
                "{s.quote}"
              </blockquote>
              <div style={{ marginTop: 28, fontSize: 14, color: 'var(--m-fg-2)' }}>
                <span style={{ fontSize: 18, marginRight: 8 }}>{s.flag}</span>
                <strong style={{ color: 'var(--m-fg)' }}>{s.name}</strong> · {s.role}
              </div>
            </div>
          ))}
          <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginTop: 32 }}>
            {stories.map((_, i) => (
              <button key={i} onClick={() => setIdx(i)} style={{
                width: i === idx ? 24 : 8, height: 8, borderRadius: 999,
                background: i === idx ? 'var(--m-fg)' : 'var(--m-border)',
                border: 'none', padding: 0, cursor: 'pointer',
                transition: 'all var(--dur-base) var(--ease-standard)',
              }} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.PersonalFeatures = PersonalFeatures;
window.LiveFXWidget = LiveFXWidget;
window.CustomerCarousel = CustomerCarousel;

/* ---------------------------------------------------------------------
   Send-anywhere corridor section — punchy, compact, brand-recognisable
   --------------------------------------------------------------------- */
function SendAnywhere() {
  const corridors = [
    { country: 'Nigeria',    code: 'NGN', flag: '🇳🇬', rails: ['Local bank', 'OPay', 'Paystack'], minutes: '< 2 min', popular: true },
    { country: 'Kenya',      code: 'KES', flag: '🇰🇪', rails: ['M-Pesa', 'Local bank'], minutes: '< 90 sec', popular: true },
    { country: 'Ghana',      code: 'GHS', flag: '🇬🇭', rails: ['MTN MoMo', 'Local bank'], minutes: '< 5 min' },
    { country: 'South Africa', code: 'ZAR', flag: '🇿🇦', rails: ['Local bank', 'PayShap'], minutes: '< 10 min' },
    { country: 'Mexico',     code: 'MXN', flag: '🇲🇽', rails: ['SPEI', 'Local bank'], minutes: '< 5 min' },
    { country: 'Brazil',     code: 'BRL', flag: '🇧🇷', rails: ['PIX'], minutes: '< 30 sec', popular: true },
  ];

  const [sourceCcy, setSourceCcy] = React.useState('GBP');

  return (
    <section className="m-section" style={{ paddingTop: 0 }}>
      <div className="m-container">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 32 }}>
          <div style={{ maxWidth: 620 }}>
            <div className="m-eyebrow" style={{ marginBottom: 14 }}>Send to anywhere</div>
            <h2 style={{
              font: '500 clamp(28px, 3.2vw, 40px)/1.1 var(--font-sans)',
              letterSpacing: '-0.022em', margin: 0,
            }}>
              Money arrives in minutes — not days.
            </h2>
            <p style={{
              font: '400 15px/1.55 var(--font-sans)',
              color: 'var(--m-fg-2)', margin: '14px 0 0', maxWidth: 540,
            }}>
              From GBP, EUR, or USD into M-Pesa wallets, MTN MoMo, PIX, or a local bank account.
              Mid-market rate. Real delivery times, not "1–3 days".
            </p>
          </div>

          {/* Source currency selector */}
          <div style={{
            display: 'inline-flex',
            background: 'color-mix(in oklab, var(--m-fg) 4%, transparent)',
            border: '1px solid var(--m-border)',
            borderRadius: 999, padding: 3,
          }}>
            {['GBP', 'EUR', 'USD'].map((c) => (
              <button key={c} onClick={() => setSourceCcy(c)} style={{
                border: 'none', cursor: 'pointer',
                padding: '8px 16px', borderRadius: 999,
                font: '500 13px/1 var(--font-sans)',
                fontFamily: 'IBM Plex Mono, ui-monospace, monospace',
                background: sourceCcy === c ? 'var(--m-fg)' : 'transparent',
                color: sourceCcy === c ? 'var(--m-bg)' : 'var(--m-fg-2)',
                transition: 'background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard)',
              }}>
                Send {c}
              </button>
            ))}
          </div>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 12,
        }}>
          {corridors.map((c) => <CorridorTile key={c.code} corridor={c} sourceCcy={sourceCcy} />)}
        </div>

        <p style={{
          marginTop: 24,
          font: '400 12.5px/1.5 var(--font-sans)',
          color: 'var(--m-fg-3)', textAlign: 'center',
        }}>
          + 40 more corridors — see the full list, or ask if your destination isn't here yet.
        </p>
      </div>
    </section>
  );
}

function CorridorTile({ corridor: c, sourceCcy }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        border: '1px solid var(--m-border)',
        background: 'var(--m-card-bg, transparent)',
        borderRadius: 16, padding: 20,
        display: 'flex', flexDirection: 'column', gap: 14,
        transition: 'transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard)',
        transform: hover ? 'translateY(-2px)' : 'translateY(0)',
        boxShadow: hover ? '0 12px 32px -16px rgba(20,15,49,0.20)' : 'none',
        cursor: 'pointer', position: 'relative',
      }}>
      {c.popular && (
        <span style={{
          position: 'absolute', top: 14, right: 14,
          font: '600 9.5px/1 var(--font-sans)',
          letterSpacing: '0.12em', textTransform: 'uppercase',
          padding: '4px 7px', borderRadius: 999,
          background: 'color-mix(in oklab, var(--m-accent) 15%, transparent)',
          color: 'var(--m-accent)',
        }}>Popular</span>
      )}

      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{ fontSize: 28, lineHeight: 1 }}>{c.flag}</span>
        <div>
          <div style={{ font: '500 16px/1.2 var(--font-sans)', letterSpacing: '-0.012em' }}>
            {sourceCcy} → {c.code}
          </div>
          <div style={{
            font: '400 12px/1.3 var(--font-sans)',
            color: 'var(--m-fg-3)', marginTop: 3,
          }}>{c.country}</div>
        </div>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
        {c.rails.map((r) => (
          <span key={r} style={{
            font: '500 11px/1 var(--font-sans)',
            padding: '5px 9px',
            background: 'color-mix(in oklab, var(--m-fg) 5%, transparent)',
            border: '1px solid var(--m-border)',
            borderRadius: 999,
            color: 'var(--m-fg-2)',
          }}>{r}</span>
        ))}
      </div>

      <div style={{
        paddingTop: 12, borderTop: '1px solid var(--m-border)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span style={{ font: '500 11px/1 var(--font-sans)', color: 'var(--m-fg-3)' }}>
          Delivers
        </span>
        <span style={{
          font: '600 12.5px/1 var(--font-sans)',
          fontFamily: 'IBM Plex Mono, ui-monospace, monospace',
          color: 'var(--m-fg)',
        }}>{c.minutes}</span>
      </div>
    </article>
  );
}

window.SendAnywhere = SendAnywhere;