// Tably landing page sections — split out to keep main file lean.

// Reuse globals from blog-shared.jsx
function Pill({ children, style }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '7px 14px', borderRadius: 99,
      background: '#fff', border: '1px solid rgba(27,20,8,0.08)',
      fontSize: 13, fontWeight: 600, color: COLORS.ink,
      ...style,
    }}>{children}</span>
  );
}

// ─────────────────────────────────────────────────────────────
// HERO
// ─────────────────────────────────────────────────────────────
function Hero({ phoneScreen, onCTA }) {
  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      padding: '64px 32px 80px',
    }}>
      {/* soft glow */}
      <div style={{
        position: 'absolute', top: -200, right: -200, width: 600, height: 600,
        borderRadius: '50%',
        background: `radial-gradient(circle, ${COLORS.primary}33 0%, transparent 60%)`,
        pointerEvents: 'none',
      }} />
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 40, alignItems: 'center',
      }}>
        <div>
          <Pill style={{ marginBottom: 24 }}>
            <span style={{ width: 7, height: 7, borderRadius: 99, background: COLORS.accent }} />
            New · Conversational personal finance
          </Pill>
          <h1 style={{
            fontSize: 76, lineHeight: 1.02, fontWeight: 800, letterSpacing: -2.4,
            color: COLORS.ink, margin: '0 0 20px',
            textWrap: 'balance',
            fontFamily: '"Instrument Serif", "Times New Roman", serif',
            fontStyle: 'normal',
          }}>
            Your money,<br />
            <span style={{ fontStyle: 'italic', color: COLORS.primary }}>just by chatting.</span>
          </h1>
          <p style={{
            fontSize: 19, lineHeight: 1.5, color: COLORS.muted, maxWidth: 520,
            margin: '0 0 32px',
            textWrap: 'pretty',
          }}>
            Log expenses, fix typos, and ask anything — “How much on coffee last month?”
            Tably turns personal finance into a conversation. No spreadsheets. No forms. Just text.
          </p>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
            <CTAButton onClick={onCTA} big icon={<AppleIcon size={18} />}>Download for iOS</CTAButton>
            <CTAButton primary={false} big icon={<PlayIcon size={16} />}>Watch demo</CTAButton>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 28 }}>
            <div style={{ display: 'flex' }}>
              {['#F0B872','#E89A4C','#D4823C','#B86A2E','#9B5821'].map((c, i) => (
                <div key={i} style={{
                  width: 32, height: 32, borderRadius: 99, background: c,
                  border: '2.5px solid ' + COLORS.bg, marginLeft: i === 0 ? 0 : -10,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 11, fontWeight: 700, color: '#fff',
                }}>{['JM','AK','LP','RS','TY'][i]}</div>
              ))}
            </div>
            <div style={{ fontSize: 13, color: COLORS.muted, lineHeight: 1.4 }}>
              <div style={{ display: 'flex', gap: 2, color: '#E8A93C' }}>
                {[0,1,2,3,4].map(i => <svg key={i} width="13" height="13" 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>)}
                <span style={{ color: COLORS.ink, fontWeight: 700, marginLeft: 4 }}>4.9</span>
              </div>
              Loved by 12,400+ early users
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
          <div style={{ position: 'absolute', top: 40, left: -20, transform: 'rotate(-6deg)', opacity: 0.6, zIndex: 0 }}>
            <TablyPhone screen="dashboard" width={240} />
          </div>
          <div style={{ position: 'relative', zIndex: 2 }}>
            <TablyPhone screen={phoneScreen} width={320} />
          </div>
          {/* floating chat bubble cards */}
          <div style={{
            position: 'absolute', top: 80, right: -10, zIndex: 3,
            background: '#fff', borderRadius: 16, padding: '12px 16px',
            boxShadow: '0 14px 40px rgba(70,40,10,0.18)',
            fontSize: 13, fontWeight: 600, color: COLORS.ink,
            display: 'flex', alignItems: 'center', gap: 8,
            transform: 'rotate(3deg)',
          }}>
            <span style={{ fontSize: 18 }}>☕</span> "Latte 5.50"
          </div>
          <div style={{
            position: 'absolute', bottom: 110, left: -20, zIndex: 3,
            background: COLORS.primary, color: '#fff',
            borderRadius: 16, padding: '12px 16px',
            boxShadow: '0 14px 40px rgba(240,140,44,0.32)',
            fontSize: 13, fontWeight: 700,
            transform: 'rotate(-4deg)',
          }}>
            Logged ☕ $5.50
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// LOGOS
// ─────────────────────────────────────────────────────────────
function LogoStrip() {
  const logos = ['Lifehacker','The Verge','Product Hunt','TechCrunch','Wirecutter','MacStories'];
  return (
    <section style={{ padding: '24px 32px 40px', borderTop: '1px solid rgba(27,20,8,0.06)', borderBottom: '1px solid rgba(27,20,8,0.06)' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: COLORS.muted, letterSpacing: 1.5, textTransform: 'uppercase' }}>As seen in</div>
        {logos.map(l => (
          <div key={l} style={{
            fontSize: 18, fontWeight: 700, color: COLORS.muted, opacity: 0.55,
            fontFamily: 'Georgia, serif', letterSpacing: -0.5,
          }}>{l}</div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Pill, Hero, LogoStrip });