// Tably landing page — sections 2: Features, How it works, Showcase, FAQ, CTA, Footer

function FeatureCard({ icon, title, desc, big = false, accent = false }) {
  return (
    <div style={{
      background: accent ? COLORS.primary : '#fff',
      color: accent ? '#fff' : COLORS.ink,
      borderRadius: 28, padding: big ? 36 : 28,
      border: accent ? 'none' : '1px solid rgba(27,20,8,0.06)',
      gridColumn: big ? 'span 2' : 'auto',
      display: 'flex', flexDirection: 'column', gap: 14,
      minHeight: big ? 260 : 220,
    }}>
      <div style={{
        width: 48, height: 48, borderRadius: 14,
        background: accent ? 'rgba(255,255,255,0.18)' : '#FFF6E6',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 24,
      }}>{icon}</div>
      <div style={{ marginTop: 'auto' }}>
        <div style={{ fontSize: big ? 26 : 21, fontWeight: 800, letterSpacing: -0.6, marginBottom: 8, lineHeight: 1.15 }}>{title}</div>
        <div style={{ fontSize: 15, lineHeight: 1.5, opacity: accent ? 0.92 : 0.7 }}>{desc}</div>
      </div>
    </div>
  );
}

function Features() {
  return (
    <section id="features" style={{ padding: '100px 32px 60px' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 40, gap: 24, flexWrap: 'wrap' }}>
          <div>
            <Pill style={{ marginBottom: 18 }}>✨ Why Tably</Pill>
            <h2 style={{
              fontSize: 56, lineHeight: 1.05, fontWeight: 800, letterSpacing: -1.6,
              color: COLORS.ink, margin: 0, maxWidth: 720,
              fontFamily: '"Instrument Serif", "Times New Roman", serif',
            }}>
              Personal finance, finally <span style={{ fontStyle: 'italic', color: COLORS.primary }}>fluent.</span>
            </h2>
          </div>
          <p style={{ fontSize: 17, color: COLORS.muted, maxWidth: 360, margin: 0, lineHeight: 1.5 }}>
            Five things spreadsheets, banking apps, and budget trackers will never do.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          <FeatureCard big accent
            icon="💬"
            title="Just type it. We log it."
            desc='"Uber 12.50" or "Latte at Blue Bottle 6" — Tably parses, categorizes, and files it. No forms, no dropdowns, no friction.'
          />
          <FeatureCard
            icon="🪄"
            title="Fix anything mid-sentence"
            desc='"Sorry, that was 10.99" updates instantly. Talk to your money like a person.'
          />
          <FeatureCard
            icon="📊"
            title="Ask anything"
            desc='"Coffee last month?" "Dining trend?" Real answers from your real data.'
          />
          <FeatureCard
            icon="🔒"
            title="Bank-grade privacy"
            desc="On-device parsing where possible. End-to-end encrypted. Your data is never sold."
          />
          <FeatureCard
            icon="🎙️"
            title="Voice-first too"
            desc="Hold the mic, speak naturally. Tably handles accents, abbreviations, and slang."
          />
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: '01', title: 'Say it', body: 'Tap, type or talk. "Spotify 11.99" is enough.', screen: 'chat-uber' },
    { n: '02', title: 'See it', body: 'Tably categorizes, dates, and files in under a second.', screen: 'dashboard' },
    { n: '03', title: 'Ask it', body: 'Charts, trends, summaries — by asking in plain English.', screen: 'chat-trend' },
  ];
  return (
    <section id="howitworks" style={{
      padding: '100px 32px',
      background: COLORS.ink, color: '#fff',
      borderRadius: 40, margin: '40px 24px',
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 60 }}>
          <Pill style={{ marginBottom: 18, background: 'rgba(255,255,255,0.08)', color: '#fff', border: '1px solid rgba(255,255,255,0.12)' }}>
            How it works
          </Pill>
          <h2 style={{
            fontSize: 56, lineHeight: 1.05, fontWeight: 800, letterSpacing: -1.6,
            margin: 0, color: '#fff',
            fontFamily: '"Instrument Serif", "Times New Roman", serif',
          }}>
            Three steps. <span style={{ fontStyle: 'italic', color: COLORS.primary }}>Zero friction.</span>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {steps.map(s => (
            <div key={s.n} style={{ textAlign: 'center' }}>
              <div style={{
                margin: '0 auto 24px', padding: 16, width: 'fit-content',
                background: 'rgba(255,255,255,0.04)', borderRadius: 32,
                border: '1px solid rgba(255,255,255,0.08)',
              }}>
                <TablyPhone screen={s.screen} dark width={240} />
              </div>
              <div style={{
                fontFamily: '"Instrument Serif", serif', fontStyle: 'italic',
                fontSize: 22, color: COLORS.primary, marginBottom: 6,
              }}>{s.n}</div>
              <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: -0.6, marginBottom: 8 }}>{s.title}</div>
              <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.6)', lineHeight: 1.5, maxWidth: 280, margin: '0 auto' }}>{s.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Showcase() {
  const examples = [
    { q: 'How much on coffee last month?', a: '$25.55 in April. ↓ $7 vs March.' },
    { q: 'Show electric bill trend', a: 'Peaked Jul at $172. Now $85.' },
    { q: 'Am I on track for May?', a: '64% of budget used, day 18/31.' },
    { q: 'Largest expense this week', a: 'Groceries — $87.50 on May 4.' },
    { q: 'Avg spend per weekend', a: '$112 — mostly dining + transport.' },
    { q: 'Compare March vs April', a: 'Spent 4% less. Saved $74.' },
  ];
  return (
    <section style={{ padding: '100px 32px 60px' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ marginBottom: 40, maxWidth: 760 }}>
          <Pill style={{ marginBottom: 18 }}>🗣️ Talk to your money</Pill>
          <h2 style={{
            fontSize: 52, lineHeight: 1.05, fontWeight: 800, letterSpacing: -1.4,
            color: COLORS.ink, margin: 0,
            fontFamily: '"Instrument Serif", "Times New Roman", serif',
          }}>
            Ask the questions you'd <span style={{ fontStyle: 'italic', color: COLORS.primary }}>actually</span> ask a friend.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {examples.map((ex, i) => (
            <div key={i} style={{
              background: '#fff', borderRadius: 22, padding: 22,
              border: '1px solid rgba(27,20,8,0.06)',
            }}>
              <div style={{
                display: 'inline-block', padding: '8px 14px', borderRadius: 14,
                background: COLORS.primary, color: '#fff', fontSize: 14, fontWeight: 700,
                marginBottom: 12,
              }}>{ex.q}</div>
              <div style={{ fontSize: 15, color: COLORS.ink, lineHeight: 1.5 }}>
                <span style={{ display: 'inline-flex', width: 20, height: 20, marginRight: 6, verticalAlign: 'middle' }}>
                  <CatMascot size={20} />
                </span>
                {ex.a}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const quotes = [
    { q: '"I deleted three budget apps the day I got Tably. Logging an expense takes literally 2 seconds."', n: 'Jordan M.', r: 'Designer · NYC' },
    { q: '"Asking ‘am I on track this month?’ and getting a real answer feels like having a CFO in my pocket."', n: 'Aliya K.', r: 'Founder · Berlin' },
    { q: '"My partner and I share a chat — we just type expenses as they happen. Game changer."', n: 'Luis P.', r: 'Engineer · Mexico City' },
  ];
  return (
    <section style={{ padding: '60px 32px 100px' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {quotes.map((qq, i) => (
            <div key={i} style={{
              background: i === 1 ? COLORS.primary : '#fff',
              color: i === 1 ? '#fff' : COLORS.ink,
              padding: 28, borderRadius: 24,
              border: i === 1 ? 'none' : '1px solid rgba(27,20,8,0.06)',
              display: 'flex', flexDirection: 'column', gap: 18,
            }}>
              <div style={{ display: 'flex', gap: 2, color: i === 1 ? '#fff' : '#E8A93C' }}>
                {[0,1,2,3,4].map(s => <svg key={s} width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>)}
              </div>
              <p style={{
                fontSize: 18, lineHeight: 1.4, margin: 0, fontWeight: 500,
                fontFamily: '"Instrument Serif", serif', letterSpacing: -0.3,
              }}>{qq.q}</p>
              <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 99,
                  background: i === 1 ? 'rgba(255,255,255,0.2)' : '#FFF6E6',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 800, fontSize: 13,
                }}>{qq.n.charAt(0)}</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>{qq.n}</div>
                  <div style={{ fontSize: 12, opacity: 0.65 }}>{qq.r}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: 'Does Tably connect to my bank?', a: 'Optional. You can use Tably purely as a chat-based logger, or connect accounts via Plaid for automatic imports. Either way, all parsing happens with end-to-end encryption.' },
    { q: 'How is this different from Mint or YNAB?', a: 'Mint and YNAB are forms-and-spreadsheets at heart. Tably is built around conversation: every action — logging, fixing, asking — is a sentence. No screens to learn.' },
    { q: 'What does it cost?', a: 'Free for up to 50 transactions/month. Tably Plus is $4.99/month for unlimited logging, voice input, multi-account, and shared chats.' },
    { q: 'Is my data sold or shared?', a: 'Never. Tably is funded by subscription, not ads. Your transactions are encrypted at rest and in transit.' },
    { q: 'Android?', a: 'Coming late 2026. Join the waitlist on the App Store page or our newsletter for early access.' },
  ];
  return (
    <section id="faq" style={{ padding: '100px 32px' }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 50 }}>
          <Pill style={{ marginBottom: 18 }}>❓ FAQ</Pill>
          <h2 style={{
            fontSize: 52, lineHeight: 1.05, fontWeight: 800, letterSpacing: -1.4,
            color: COLORS.ink, margin: 0,
            fontFamily: '"Instrument Serif", "Times New Roman", serif',
          }}>The short answers.</h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {items.map((it, i) => (
            <div key={i} style={{
              background: '#fff', borderRadius: 18,
              border: '1px solid rgba(27,20,8,0.06)',
              overflow: 'hidden',
            }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', textAlign: 'left',
                padding: '20px 24px', background: 'transparent', border: 'none', cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                fontSize: 17, fontWeight: 700, color: COLORS.ink, letterSpacing: -0.2,
              }}>
                {it.q}
                <span style={{
                  width: 28, height: 28, borderRadius: 99, background: COLORS.bg,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                  transition: 'transform .2s ease',
                }}>+</span>
              </button>
              {open === i && (
                <div style={{ padding: '0 24px 20px', fontSize: 15, lineHeight: 1.55, color: COLORS.muted }}>
                  {it.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ onCTA }) {
  return (
    <section style={{ padding: '60px 32px 100px' }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        background: COLORS.primary, color: '#fff',
        borderRadius: 40, padding: '80px 48px',
        position: 'relative', overflow: 'hidden',
        textAlign: 'center',
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18), transparent 50%), radial-gradient(circle at 80% 80%, rgba(255,255,255,0.12), transparent 50%)',
          pointerEvents: 'none',
        }} />
        <div style={{ position: 'relative' }}>
          <div style={{ display: 'inline-flex', padding: 12, background: 'rgba(255,255,255,0.18)', borderRadius: 20, marginBottom: 24 }}>
            <CatMascot size={48} />
          </div>
          <h2 style={{
            fontSize: 64, lineHeight: 1.02, fontWeight: 800, letterSpacing: -1.8,
            margin: '0 0 20px', color: '#fff',
            fontFamily: '"Instrument Serif", "Times New Roman", serif',
            textWrap: 'balance',
          }}>
            Stop budgeting.<br />
            <span style={{ fontStyle: 'italic' }}>Start chatting.</span>
          </h2>
          <p style={{ fontSize: 18, opacity: 0.9, maxWidth: 540, margin: '0 auto 32px', lineHeight: 1.5 }}>
            Free for 50 transactions a month. No card required. Takes 30 seconds to set up.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button onClick={onCTA} style={{
              background: '#fff', color: COLORS.ink, border: 'none',
              borderRadius: 99, padding: '16px 28px',
              fontSize: 17, fontWeight: 700, letterSpacing: -0.2, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 10,
            }}>
              <AppleIcon size={18} /> Download for iOS
            </button>
            <button style={{
              background: 'rgba(255,255,255,0.16)', color: '#fff',
              border: '1px solid rgba(255,255,255,0.3)',
              borderRadius: 99, padding: '16px 28px',
              fontSize: 17, fontWeight: 700, letterSpacing: -0.2, cursor: 'pointer',
            }}>Join Android waitlist</button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Features, HowItWorks, Showcase, Testimonials, FAQ, FinalCTA });