/* Personal landing — all sections in one file to keep load order simple.
   - PersonalHero: reactive phone/wallet mock + headline
   - PersonalFeatures: 4-up feature grid with hover tints
   - LiveFXWidget: animated currency ticker
   - TravelMoneySection: art + copy
   - CustomerCarousel: rotating testimonials
*/

function PersonalHero() {
  return (
    <section style={{ paddingTop: 64, paddingBottom: 80, position: 'relative', overflow: 'hidden' }}>
      <div className="m-container" style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center',
      }}>
        <div className="m-reveal">
          <div className="m-eyebrow" style={{ marginBottom: 18 }}>KwiikPay Personal</div>
          <h1 style={{
            font: '500 clamp(48px, 5.4vw, 72px)/1.04 var(--font-sans)',
            letterSpacing: '-0.032em', margin: 0,
          }}>
            One wallet.<br />
            <span style={{ color: 'var(--m-fg-2)' }}>Every currency you need.</span>
          </h1>
          <p style={{
            font: '400 18px/1.55 var(--font-sans)',
            color: 'var(--m-fg-2)', margin: '24px 0 0', maxWidth: 520,
          }}>
            Send money abroad at mid-market rates. Hold GBP, EUR, USD, USDC and EURC together.
            Spend with your KwiikPay card anywhere in the world.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
            <a href="../signup/index.html" style={{ textDecoration: 'none' }}>
              <button className="m-btn m-btn-primary" style={{ padding: '14px 22px' }}>
                Get the app
              </button>
            </a>
            <a href="../platform/index.html" style={{ textDecoration: 'none' }}>
              <button className="m-btn" style={{
                padding: '14px 22px', background: 'transparent',
                border: '1px solid var(--m-border)', color: 'var(--m-fg)',
              }}>
                See how it works
              </button>
            </a>
          </div>
          <div style={{ display: 'flex', gap: 16, marginTop: 32, fontSize: 12.5, color: 'var(--m-fg-3)' }}>
            <span>★ 4.8 · App Store</span>
            <span>·</span>
            <span>2.1M+ users worldwide</span>
            <span>·</span>
            <span>£0 monthly fee</span>
          </div>
        </div>

        <PhoneMock />
      </div>
    </section>
  );
}

function PhoneMock() {
  const [tab, setTab] = React.useState('home');
  const [balance, setBalance] = React.useState(2847.32);

  React.useEffect(() => {
    const id = setInterval(() => {
      setBalance((b) => +(b + (Math.random() - 0.45) * 0.85).toFixed(2));
    }, 2200);
    return () => clearInterval(id);
  }, []);

  return (
    <div style={{
      position: 'relative', maxWidth: 360, justifySelf: 'end',
    }}>
      {/* Phone frame */}
      <div style={{
        background: 'var(--m-fg)', borderRadius: 44, padding: 10,
        boxShadow: '0 40px 80px -20px rgba(20,15,49,0.32), 0 8px 24px rgba(20,15,49,0.12)',
      }}>
        <div style={{
          background: 'var(--m-bg)', borderRadius: 34, overflow: 'hidden',
          aspectRatio: '9 / 19.5', position: 'relative',
        }}>
          {/* Notch */}
          <div style={{
            position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)',
            width: 88, height: 24, background: 'var(--m-fg)', borderRadius: 999, zIndex: 2,
          }} />
          {/* Status bar */}
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            padding: '12px 24px 0', fontSize: 11, fontWeight: 600, color: 'var(--m-fg)',
            fontFamily: 'IBM Plex Mono, monospace',
          }}>
            <span>9:41</span>
            <span style={{ opacity: 0 }}>·</span>
          </div>

          {/* Wallet UI */}
          <div style={{ padding: '24px 18px 8px' }}>
            <div style={{ fontSize: 11.5, color: 'var(--m-fg-3)', fontWeight: 500 }}>Good evening, Sarah</div>
            <div style={{
              marginTop: 4,
              fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em',
              fontFamily: 'IBM Plex Mono, monospace', color: 'var(--m-fg)',
            }}>£{balance.toLocaleString('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
            <div style={{ fontSize: 11, color: 'var(--m-fg-3)', fontWeight: 500, marginTop: 3 }}>
              ≈ €3,316.04 · $3,605.21
            </div>
          </div>

          {/* Quick actions */}
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 5,
            padding: '0 14px',
          }}>
            {[
              { label: 'Send', icon: 'M2.5 8l11-5-3 11-3-4-5-2z' },
              { label: 'Add', icon: 'M8 2v12M2 8h12' },
              { label: 'FX', icon: 'M3 6h10m0 0L10.5 3.5M13 6l-2.5 2.5M13 10H3m0 0L5.5 7.5M3 10l2.5 2.5' },
              { label: 'Card', icon: 'M2 5h12v6H2zM2 7h12' },
            ].map((a) => (
              <button key={a.label} style={{
                background: 'color-mix(in oklab, var(--m-fg) 6%, transparent)',
                border: 'none', borderRadius: 11, padding: '10px 4px',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
                fontSize: 9.5, fontWeight: 600, color: 'var(--m-fg)',
                cursor: 'pointer',
              }}>
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                  <path d={a.icon} stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
                </svg>
                {a.label}
              </button>
            ))}
          </div>

          {/* Currency cards */}
          <div style={{ padding: '18px 14px 16px' }}>
            <div style={{
              fontSize: 10, fontWeight: 600, color: 'var(--m-fg-3)',
              letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8,
            }}>Your wallets</div>
            {[
              { code: 'GBP', amount: '2,847.32', sym: '£', accent: '#6B8CFF' },
              { code: 'EUR', amount: '824.16', sym: '€', accent: '#8B7BFF' },
              { code: 'USDC', amount: '912.50', sym: '$', accent: '#4DD4C5' },
            ].map((w) => (
              <div key={w.code} style={{
                background: 'color-mix(in oklab, var(--m-fg) 4%, transparent)',
                borderRadius: 12, padding: '10px 12px', marginBottom: 5,
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <span style={{
                  width: 26, height: 26, borderRadius: 999, background: w.accent, color: '#fff',
                  display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700,
                  flexShrink: 0,
                }}>{w.sym}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 600 }}>{w.code}</div>
                </div>
                <div style={{
                  fontFamily: 'IBM Plex Mono, monospace',
                  fontSize: 12.5, fontWeight: 600,
                }}>{w.sym}{w.amount}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Floating notification — slotted between balance & wallets, off to the left */}
      <div style={{
        position: 'absolute', left: -28, top: 280,
        background: 'var(--m-card-bg, white)',
        border: '1px solid var(--m-border)',
        borderRadius: 14, padding: '10px 14px',
        boxShadow: '0 16px 32px -8px rgba(20,15,49,0.18)',
        fontSize: 11.5, maxWidth: 200,
        animation: 'm-float 4s ease-in-out infinite',
        zIndex: 3,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
          <span style={{
            width: 7, height: 7, borderRadius: 999, background: '#4DD4C5',
          }} />
          <span style={{ fontWeight: 600 }}>Card payment</span>
        </div>
        <div style={{ color: 'var(--m-fg-3)', fontSize: 11 }}>Café Lisboa · −€4.80</div>
      </div>

      <style>{`
        @keyframes m-float {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-6px); }
        }
      `}</style>
    </div>
  );
}

window.PersonalHero = PersonalHero;