// sections.jsx — Marketing sections matching the reference Sort Feed layout.
// Light, minimal, big black headlines, simple cards, video placeholders inline.

// ============================================================
// SECTION HEAD — centered eyebrow (optional) + big black title + sub
// ============================================================
function SectionHead({ theme, eyebrow, title, sub, align = 'center' }) {
  return (
    <div style={{ textAlign: align, maxWidth: 760, margin: align === 'center' ? '0 auto' : 0 }}>
      {eyebrow && (
        <div style={{
          fontSize: 12, fontWeight: 600, letterSpacing: '0.08em',
          textTransform: 'uppercase', color: theme.accent, marginBottom: 14,
        }}>{eyebrow}</div>
      )}
      <h2 style={{
        fontSize: 'clamp(34px, 4.5vw, 56px)', fontWeight: 800,
        letterSpacing: '-0.035em', lineHeight: 1.05,
        margin: '0 0 16px', color: theme.text,
        textWrap: 'balance',
      }}>{title}</h2>
      {sub && (
        <p style={{
          fontSize: 17, lineHeight: 1.5, color: theme.textDim,
          margin: 0, textWrap: 'balance',
        }}>{sub}</p>
      )}
    </div>
  );
}

// ============================================================
// FLAT CARD — replaces glass; simple light-mode cards like reference
// ============================================================
function FlatCard({ theme, children, padding = 28, style }) {
  return (
    <div style={{
      borderRadius: 18,
      background: theme.dark ? 'rgba(255,255,255,0.04)' : 'oklch(0.965 0.003 80)',
      border: `0.5px solid ${theme.sep}`,
      padding,
      ...style,
    }}>{children}</div>
  );
}

// ============================================================
// SUPPORTED PLATFORMS STRIP — small reassurance row
// ============================================================
function Platforms({ theme }) {
  return (
    <section style={{ padding: '20px 24px 0' }}>
      <div style={{ maxWidth: 980, margin: '0 auto', textAlign: 'center' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 18,
          padding: '12px 22px', borderRadius: 999,
          background: theme.dark ? 'rgba(255,255,255,0.04)' : 'oklch(0.965 0.003 80)',
          border: `0.5px solid ${theme.sep}`,
        }}>
          <span style={{
            fontSize: 12, fontWeight: 600, letterSpacing: '0.06em',
            textTransform: 'uppercase', color: theme.textFaint,
          }}>Works on</span>
          <PlatformChip theme={theme} icon="instagram" name="Instagram" gradient="linear-gradient(135deg, oklch(0.7 0.18 35), oklch(0.55 0.2 320))"/>
          <PlatformChip theme={theme} icon="tiktok" name="TikTok" gradient="linear-gradient(135deg, oklch(0.2 0.005 240), oklch(0.15 0.005 240))"/>
          <span style={{ fontSize: 13, color: theme.textFaint }}>+ more soon</span>
        </div>
      </div>
    </section>
  );
}
function PlatformChip({ theme, icon, name, gradient }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
      <span style={{
        width: 22, height: 22, borderRadius: 6,
        background: gradient, color: 'white',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.2)',
      }}>
        <I name={icon} size={12} sw={2.2}/>
      </span>
      <span style={{ fontSize: 14, fontWeight: 600, color: theme.text, letterSpacing: '-0.01em' }}>{name}</span>
    </span>
  );
}

// ============================================================
// STREAMLINE — "Streamline your content game" — 2-up feature cards
// ============================================================
function Features({ theme, sectionRef }) {
  return (
    <section ref={sectionRef} style={{ padding: '90px 24px 30px' }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <SectionHead theme={theme} title="Streamline your content workflow"/>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 18, marginTop: 48,
        }}>
          <FeatureCard
            theme={theme}
            icon="bolt"
            iconColor="oklch(0.65 0.18 245)"
            title="Sort and export"
            body="Find top-performing posts fast — then export captions, links, and engagement data in one click to your spreadsheet."
          />
          <FeatureCard
            theme={theme}
            icon="download"
            iconColor="oklch(0.65 0.18 245)"
            title="Download and transcribe"
            body="Download and transcribe any post instantly — across profiles, search, saved posts, and more, without leaving the page."
          />
        </div>

        <div style={{ marginTop: 24 }}>
          <VideoPlaceholder theme={theme} aspect="16/9" label="VIDEO PLACEHOLDER HERE" sub="Demo: sort feed by likes, then bulk-export to .csv"/>
        </div>
      </div>
    </section>
  );
}

function FeatureCard({ theme, icon, iconColor, title, body }) {
  return (
    <FlatCard theme={theme}>
      <div style={{
        width: 28, height: 28, borderRadius: 8,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        color: iconColor, marginBottom: 22,
      }}>
        <I name={icon} size={20} sw={2.4}/>
      </div>
      <div style={{
        fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em',
        color: theme.text, marginBottom: 10,
      }}>{title}</div>
      <div style={{
        fontSize: 14.5, lineHeight: 1.55,
        color: theme.textDim, maxWidth: 380,
      }}>{body}</div>
    </FlatCard>
  );
}

// ============================================================
// BUILT FOR IG & TIKTOK — full-width single card + screenshot placeholder
// ============================================================
function PlatformDeepDive({ theme }) {
  return (
    <section style={{ padding: '60px 24px' }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <SectionHead theme={theme} title="Built for Instagram & TikTok"/>

        <FlatCard theme={theme} padding={32} style={{ marginTop: 48 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18 }}>
            <span style={{
              width: 22, height: 22, borderRadius: 6,
              background: 'linear-gradient(135deg, oklch(0.7 0.18 35), oklch(0.55 0.2 320))',
              color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.2)',
            }}><I name="instagram" size={12} sw={2.2}/></span>
            <span style={{
              width: 22, height: 22, borderRadius: 6,
              background: 'linear-gradient(135deg, oklch(0.2 0.005 240), oklch(0.15 0.005 240))',
              color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.2)',
            }}><I name="tiktok" size={12} sw={2.2}/></span>
          </div>
          <div style={{
            fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em',
            color: theme.text, marginBottom: 10,
          }}>Works everywhere</div>
          <div style={{
            fontSize: 14.5, lineHeight: 1.55, color: theme.textDim,
          }}>
            Quickly see what's performing best — with the same powerful features and seamless workflow across both platforms. Sort and export on profile pages, search, hashtags, explore, saved posts, and more.
          </div>
        </FlatCard>

        <div style={{ marginTop: 18 }}>
          <VideoPlaceholder theme={theme} aspect="16/9" label="VIDEO PLACEHOLDER HERE" sub="Side-by-side: FeedRama running on Instagram and TikTok"/>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// STRUCTURED DATA — "Get structured data — including transcripts" 2-up
// ============================================================
function StructuredData({ theme }) {
  return (
    <section style={{ padding: '60px 24px' }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <SectionHead
          theme={theme}
          title={"Get structured data — including transcripts"}
        />
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 18, marginTop: 48,
        }}>
          <FlatCard theme={theme}>
            <div style={{
              width: 24, height: 24, marginBottom: 16,
              color: 'oklch(0.7 0.18 35)',
            }}>
              <I name="instagram" size={20} sw={2.2}/>
            </div>
            <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em', color: theme.text, marginBottom: 8 }}>Instagram</div>
            <div style={{ fontSize: 14.5, lineHeight: 1.55, color: theme.textDim }}>
              Every post and reel, fully structured. URL, creation date, likes, comments, captions, and transcripts — all in one sheet.
            </div>
          </FlatCard>
          <FlatCard theme={theme}>
            <div style={{
              width: 24, height: 24, marginBottom: 16,
              color: theme.text,
            }}>
              <I name="tiktok" size={20} sw={2.2}/>
            </div>
            <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em', color: theme.text, marginBottom: 8 }}>TikTok</div>
            <div style={{ fontSize: 14.5, lineHeight: 1.55, color: theme.textDim }}>
              Every video, fully structured. URL, creation date, views, likes, comments, shares, saves, captions, and transcripts — all in one sheet.
            </div>
          </FlatCard>
        </div>

        <div style={{ marginTop: 18 }}>
          <VideoPlaceholder theme={theme} aspect="16/9" label="VIDEO PLACEHOLDER HERE" sub="Sample: exported .csv opening in Google Sheets"/>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// NEW FEATURES — "New features just dropped" 2-up with video
// ============================================================
function NewFeatures({ theme }) {
  return (
    <section style={{ padding: '60px 24px' }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <SectionHead
          theme={theme}
          title="New features just dropped"
          sub="Find winning content ideas in your niche — sort, export, download, and transcribe top-performing posts."
        />
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 18, marginTop: 48,
        }}>
          <FlatCard theme={theme}>
            <div style={{ marginBottom: 16, color: 'oklch(0.65 0.18 245)' }}>
              <I name="bolt" size={20} sw={2.4}/>
            </div>
            <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em', color: theme.text, marginBottom: 8 }}>
              Transcribe and export in bulk
            </div>
            <div style={{ fontSize: 14.5, lineHeight: 1.55, color: theme.textDim }}>
              Select any videos after sorting and export metrics and transcripts together into a single spreadsheet.
            </div>
          </FlatCard>
          <div style={{ borderRadius: 18, overflow: 'hidden' }}>
            <VideoPlaceholder theme={theme} aspect="1/1" label="VIDEO PLACEHOLDER HERE" sub="Bulk select → transcribe → export"/>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// HOW IT WORKS — kept for tweaks; matches simple 3-step style
// ============================================================
function HowItWorks({ theme, sectionRef }) {
  const steps = [
    { n: 1, h: 'Install in 30 seconds', sub: 'Add FeedRama to Chrome from the Web Store. Pin it to your toolbar — no account needed for the free plan.' },
    { n: 2, h: 'Open Instagram or TikTok', sub: 'Click the FeedRama icon. The panel slides in next to your feed, ready to sort.' },
    { n: 3, h: 'Sort, download, transcribe', sub: 'Pick your sort criteria. Reorder thousands of posts instantly. Save the ones you love.' },
  ];
  return (
    <section ref={sectionRef} style={{ padding: '60px 24px' }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <SectionHead theme={theme} title="From scrolling to studying in three steps."/>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginTop: 48 }}>
          {steps.map(s => (
            <FlatCard key={s.n} theme={theme}>
              <div style={{
                width: 32, height: 32, borderRadius: 10,
                background: theme.accent, color: 'white',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 14, fontWeight: 700, letterSpacing: '-0.02em',
                marginBottom: 16, fontVariantNumeric: 'tabular-nums',
              }}>{s.n}</div>
              <div style={{ fontSize: 17, fontWeight: 700, color: theme.text, letterSpacing: '-0.02em', marginBottom: 8 }}>{s.h}</div>
              <div style={{ fontSize: 14, lineHeight: 1.55, color: theme.textDim }}>{s.sub}</div>
            </FlatCard>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// STATS BAND — small inline stat row, kept simple
// ============================================================
function Stats({ theme }) {
  const stats = [
    { v: '70K+', l: 'Creators using FeedRama' },
    { v: '8.4M', l: 'Posts sorted this month' },
    { v: '420K', l: 'Videos downloaded' },
    { v: '96K',  l: 'Transcripts generated' },
  ];
  return (
    <section style={{ padding: '40px 24px' }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <FlatCard theme={theme} padding={32} style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18,
        }}>
          {stats.map((s, i) => (
            <div key={s.l} style={{
              textAlign: 'center',
              borderRight: i < stats.length - 1 ? `0.5px solid ${theme.sep}` : 'none',
              padding: '6px 0',
            }} className="stat-cell">
              <div style={{
                fontSize: 36, fontWeight: 800, letterSpacing: '-0.035em',
                color: theme.text,
              }}>{s.v}</div>
              <div style={{ fontSize: 12.5, color: theme.textDim, marginTop: 4 }}>{s.l}</div>
            </div>
          ))}
        </FlatCard>
      </div>
    </section>
  );
}

// ============================================================
// PRICING — "Discover winning content. Free to try." — 3-up
// ============================================================
function Pricing({ theme, sectionRef, ctaLabel, onCTA }) {
  const tiers = [
    {
      name: 'Free',
      price: '$0', cadence: 'forever',
      sub: 'Try sorting & download. No sign-up needed.',
      cta: 'Start with Free',
      ctaPrimary: false,
      footnote: 'Free to start, no sign-up needed.',
      groups: [
        {
          heading: 'Sort',
          items: [
            { t: 'Sort up to 25 posts or 1 week of content' },
            { t: 'Export sorted data after every sort' },
          ],
        },
        {
          heading: 'Download',
          items: [
            { t: 'Download posts & videos — unlimited, from anywhere' },
          ],
        },
      ],
    },
    {
      name: 'Pro Monthly',
      price: '$12', cadence: '/ month',
      sub: 'Unlimited sort, transcribe, and download.',
      cta: 'Get Pro Monthly',
      ctaPrimary: false,
      footnote: 'Billed monthly. Cancel anytime.',
      groups: [
        {
          heading: 'Sort',
          items: [
            { t: 'Sort unlimited posts, any time range' },
            { t: 'Export sorted data + transcripts after every sort' },
          ],
        },
        {
          heading: 'Download & transcribe',
          items: [
            { t: 'Download posts & videos — unlimited, from anywhere' },
            { t: 'Unlimited transcription. No caps.', bold: true },
          ],
        },
      ],
    },
    {
      name: 'Pro Yearly',
      badge: 'Save 33%',
      price: '$8', cadence: '/ month',
      priceNote: 'Billed yearly · $48/year savings',
      sub: 'Everything in Pro Monthly, paid annually.',
      cta: 'Get Pro Yearly',
      ctaPrimary: true,
      highlight: true,
      footnote: 'Billed yearly · $48/year savings',
      groups: [
        {
          heading: 'Sort',
          items: [
            { t: 'Sort unlimited posts, any time range' },
            { t: 'Export sorted data + transcripts after every sort' },
          ],
        },
        {
          heading: 'Download & transcribe',
          items: [
            { t: 'Download posts & videos — unlimited, from anywhere' },
            { t: 'Unlimited transcription. No caps.', bold: true },
          ],
        },
      ],
    },
  ];
  return (
    <section id="pricing" ref={sectionRef} style={{ padding: '90px 24px 60px' }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <SectionHead
          theme={theme}
          title={"Discover winning content.\nFree to try."}
          sub="Start free. Upgrade anytime."
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginTop: 48 }}>
          {tiers.map(t => (
            <FlatCard key={t.name} theme={theme} padding={28} style={{
              border: t.highlight
                ? `1.5px solid rgba(${theme.accentGlow},0.7)`
                : `0.5px solid ${theme.sep}`,
              position: 'relative',
              background: t.highlight && !theme.dark
                ? 'white'
                : (theme.dark ? 'rgba(255,255,255,0.04)' : 'oklch(0.965 0.003 80)'),
            }}>
              {t.badge && (
                <div style={{
                  position: 'absolute', top: -12, left: 24,
                  padding: '4px 10px', borderRadius: 999,
                  background: theme.accent, color: 'white',
                  fontSize: 11, fontWeight: 700, letterSpacing: '0.02em',
                }}>{t.badge}</div>
              )}
              <div style={{
                fontSize: 14, fontWeight: 600, color: theme.text,
                letterSpacing: '-0.01em', marginBottom: 14,
              }}>{t.name}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 8 }}>
                <span style={{ fontSize: 44, fontWeight: 800, letterSpacing: '-0.04em', color: theme.text }}>{t.price}</span>
                <span style={{ fontSize: 14, color: theme.textDim }}>{t.cadence}</span>
              </div>
              <p style={{ fontSize: 13.5, color: theme.textDim, margin: '0 0 22px', lineHeight: 1.5, minHeight: 40 }}>{t.sub}</p>
              <button onClick={onCTA} style={{
                width: '100%', padding: '12px 16px', borderRadius: 12,
                border: 'none',
                background: t.ctaPrimary ? theme.accent : (theme.dark ? 'rgba(255,255,255,0.08)' : 'oklch(0.92 0.003 80)'),
                color: t.ctaPrimary ? 'white' : theme.text,
                fontSize: 14, fontWeight: 600, fontFamily: 'inherit',
                cursor: 'pointer',
                boxShadow: t.ctaPrimary
                  ? `0 6px 20px -4px rgba(${theme.accentGlow},0.55), inset 0 1px 0 rgba(255,255,255,0.2)`
                  : 'none',
                transition: 'transform 0.15s',
              }}
              onMouseEnter={(e)=>{ e.currentTarget.style.transform='translateY(-1px)'; }}
              onMouseLeave={(e)=>{ e.currentTarget.style.transform='translateY(0)'; }}>
                {t.cta}
              </button>
              <div style={{
                marginTop: 12, fontSize: 12, color: theme.textFaint, textAlign: 'center',
              }}>{t.footnote}</div>
              <div style={{
                marginTop: 22, paddingTop: 22, borderTop: `0.5px solid ${theme.sep}`,
                display: 'flex', flexDirection: 'column', gap: 18,
              }}>
                {t.groups.map(g => (
                  <div key={g.heading} style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                    <div style={{
                      fontSize: 11, fontWeight: 600, color: theme.textFaint,
                      textTransform: 'uppercase', letterSpacing: '0.08em',
                    }}>{g.heading}</div>
                    {g.items.map(f => (
                      <div key={f.t} style={{
                        display: 'flex', alignItems: 'flex-start', gap: 9,
                        fontSize: 13.5, color: theme.text, lineHeight: 1.45,
                        fontWeight: f.bold ? 700 : 400,
                      }}>
                        <I name="check" size={13} sw={2.6} style={{ color: theme.accent, flexShrink: 0, marginTop: 3 }}/>
                        <span>{f.t}</span>
                      </div>
                    ))}
                  </div>
                ))}
              </div>
            </FlatCard>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FAQ — "Questions & answers" with email line
// ============================================================
function FAQ({ theme, sectionRef }) {
  const items = [
    { q: 'What exactly does FeedRama do?', a: 'FeedRama is a Chrome extension that lets you sort, filter, download, and transcribe posts on Instagram and TikTok — without leaving the page. Use it to research what works in your niche, save references, and export structured data to spreadsheets.' },
    { q: 'Does FeedRama work on any Instagram or TikTok page?', a: 'Yes — profile pages, hashtag feeds, search results, the explore tab, saved posts, and your own feed. The same sorting and exporting workflow runs everywhere.' },
    { q: 'What engagement data gets exported exactly?', a: 'Per post: URL, creation date, caption, likes, views, comments, shares, and saves (where available). On Pro you also get full transcripts in the same .csv.' },
    { q: 'Can I download or transcribe videos with FeedRama?', a: 'Yes. Free includes HD downloads and 5 transcripts a month. Pro unlocks 4K, no watermarks, and unlimited transcripts including translation to 40+ languages.' },
    { q: 'What does FeedRama Pro include?', a: 'Pro removes all limits — unlimited sorting, unlimited transcripts, 4K downloads with no watermarks, bulk export, translation, and priority support. Pricing is $8/month or $64/year (33% off).' },
    { q: 'How can I activate FeedRama Pro?', a: 'Click "Get Pro" inside the extension or from this page. After checkout, refresh Instagram or TikTok and the Pro badge appears in the panel automatically.' },
    { q: 'Can I cancel my subscription anytime?', a: 'Yes — one click from your account page. We also offer a 7-day money-back guarantee on Pro, no questions asked.' },
    { q: 'How can I request a feature idea?', a: 'Email hello@feedrama.com or drop into the FeedRama community on Discord. Most shipped features come straight from user requests.' },
    { q: 'How can I contact support?', a: 'Email hello@feedrama.com. Pro users get prioritized responses, usually within a few hours.' },
    { q: 'Is FeedRama affiliated with Instagram or TikTok?', a: 'No. FeedRama is an independent tool that runs in your browser using your existing logged-in session. It does not scrape, automate, or post anything on your behalf.' },
  ];
  const [open, setOpen] = uS(0);
  return (
    <section id="faq" ref={sectionRef} style={{ padding: '90px 24px 30px' }}>
      <div style={{ maxWidth: 760, margin: '0 auto' }}>
        <SectionHead
          theme={theme}
          title="Questions & answers"
          sub={<>Got more questions? Email us at <a href="mailto:hello@feedrama.com" style={{ color: theme.accent, textDecoration: 'none' }}>hello@feedrama.com</a></>}
        />
        <div style={{ marginTop: 40 }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderTop: `0.5px solid ${theme.sep}`, ...(i === items.length - 1 ? { borderBottom: `0.5px solid ${theme.sep}` } : {}) }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', padding: '20px 4px', border: 'none', background: 'transparent',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                  cursor: 'pointer', fontFamily: 'inherit',
                  color: theme.text, fontSize: 16, fontWeight: 600, letterSpacing: '-0.01em', textAlign: 'left',
                }}>
                  <span>{it.q}</span>
                  <I name={isOpen ? 'minus' : 'plus'} size={16} sw={2.4} style={{ color: theme.textDim, flexShrink: 0 }}/>
                </button>
                {isOpen && (
                  <div style={{ padding: '0 4px 22px', fontSize: 14.5, lineHeight: 1.6, color: theme.textDim }}>
                    {it.a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FINAL CTA — "Join 70,000+ FeedRama users"
// ============================================================
function FinalCTA({ theme, ctaLabel, onCTA }) {
  return (
    <section style={{ padding: '90px 24px 60px' }}>
      <div style={{ maxWidth: 980, margin: '0 auto', textAlign: 'center' }}>
        <h2 style={{
          fontSize: 'clamp(40px, 5.5vw, 68px)', fontWeight: 800,
          letterSpacing: '-0.04em', lineHeight: 1.05,
          margin: '0 0 18px', color: theme.text,
          textWrap: 'balance',
        }}>
          Join 1,000+<br/>FeedRama users
        </h2>
        <p style={{
          fontSize: 17, color: theme.textDim, margin: '0 auto 32px',
          maxWidth: 560, textWrap: 'balance',
        }}>
          Creators of every size trust FeedRama to boost their content.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
          <CTA theme={theme} primary big onClick={onCTA}>{ctaLabel}</CTA>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER — multi-column
// ============================================================
function Footer({ theme, productName }) {
  const col = { display: 'flex', flexDirection: 'column', gap: 0 };
  const head = {
    fontSize: 12, fontWeight: 700, color: theme.text,
    letterSpacing: '0.04em', textTransform: 'uppercase',
    marginBottom: 14,
  };
  const link = {
    fontSize: 14, color: theme.textDim, textDecoration: 'none',
    marginBottom: 10, display: 'block', transition: 'color 0.15s',
  };
  return (
    <footer style={{ padding: '56px 24px 32px', borderTop: `0.5px solid ${theme.sep}` }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '2fr 1fr 1fr 1fr',
          gap: 40,
          marginBottom: 48,
        }}>
          {/* Brand */}
          <div>
            <Logo size={22} theme={theme} name={productName}/>
            <p style={{
              fontSize: 13.5, color: theme.textDim,
              marginTop: 14, lineHeight: 1.6, maxWidth: 220, marginBottom: 0,
            }}>
              Sort, download, and transcribe Instagram & TikTok content.
            </p>
          </div>

          {/* Product */}
          <div style={col}>
            <div style={head}>Product</div>
            <a href="/getting-started.html" style={link}>Getting started</a>
            <a href="https://chromewebstore.google.com/" target="_blank" style={link}>Download</a>
            <a href="#pricing" style={link}>Pricing</a>
          </div>

          {/* Account */}
          <div style={col}>
            <div style={head}>Account</div>
            <a href="https://chromewebstore.google.com/" target="_blank" style={link}>My account</a>
            <a href="#faq" style={link}>FAQ</a>
          </div>

          {/* Legal */}
          <div style={col}>
            <div style={head}>Legal</div>
            <a href="/privacy.html" style={link}>Privacy policy</a>
            <a href="/terms.html" style={link}>Terms of service</a>
          </div>
        </div>

        <div style={{
          borderTop: `0.5px solid ${theme.sep}`,
          paddingTop: 24,
          display: 'flex', alignItems: 'center',
          justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
        }}>
          <span style={{ fontSize: 13, color: theme.textFaint }}>{productName} © 2026</span>
          <a href="mailto:hello@feedrama.com" style={{ fontSize: 13, color: theme.textDim, textDecoration: 'none' }}>
            hello@feedrama.com
          </a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Platforms, PlatformDeepDive, Features, StructuredData, NewFeatures,
  HowItWorks, Stats, Pricing, FAQ, FinalCTA, Footer, SectionHead, FlatCard,
});