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

// ============================================================
// SAVE WITH FOLDERS
// ============================================================
function SaveFolders({ theme }) {
  return (
    <section style={{ padding: '60px 24px' }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <SectionHead
          theme={theme}
          eyebrow="Save posts and accounts"
          title="Save posts and accounts. Build folders. Come back later."
          sub="Bookmark any reel, post, carousel, or whole account — and group your saves into folders like Hooks, Competitors, Reference, or whatever your research demands."
        />
        <div className="resp-grid-2" 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="star" size={20} sw={2.4}/>
            </div>
            <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em', color: theme.text, marginBottom: 8 }}>
              One-click saves, anywhere
            </div>
            <div style={{ fontSize: 14.5, lineHeight: 1.55, color: theme.textDim }}>
              Hover any post on Instagram or TikTok and tap save. It lands in your library — searchable, sortable, and never lost in someone else's algorithm.
            </div>
          </FlatCard>
          <FlatCard theme={theme}>
            <div style={{ marginBottom: 16, color: 'oklch(0.65 0.18 245)' }}>
              <I name="folder" size={20} sw={2.4}/>
            </div>
            <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em', color: theme.text, marginBottom: 8 }}>
              Create Folders for every project
            </div>
            <div style={{ fontSize: 14.5, lineHeight: 1.55, color: theme.textDim }}>
              Group saves by client, niche, hook style, or campaign. Browse a folder like a private feed — sort by newest, oldest, or platform.
            </div>
          </FlatCard>
        </div>
        <div style={{ marginTop: 18 }}>
          <VideoPlaceholder theme={theme} aspect="16/9" src="Landing Page : Assets/Video 4.mp4"/>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// SCRUB BAR & FAST FORWARD — combined
// ============================================================
function ScrubAndForward({ theme }) {
  return (
    <section style={{ padding: '60px 24px' }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <SectionHead
          theme={theme}
          eyebrow="Scrub bar & Fast forward"
          title="Skip ahead on videos — without leaving the feed."
          sub="Drag the timeline to jump anywhere, or tap fast-forward to skip the slow opener. Features Instagram and TikTok don't give you by default."
        />
        <div className="resp-grid-2" 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="scrub" size={20} sw={2.2}/>
            </div>
            <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em', color: theme.text, marginBottom: 8 }}>
              Scrub bar
            </div>
            <div style={{ fontSize: 14.5, lineHeight: 1.55, color: theme.textDim }}>
              FeedRama overlays a precise timeline on every reel and video. Drag to preview any moment, click to jump there — no buffering.
            </div>
          </FlatCard>
          <FlatCard theme={theme}>
            <div style={{ marginBottom: 16, color: 'oklch(0.65 0.18 245)' }}>
              <I name="forward" size={20} sw={0}/>
            </div>
            <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em', color: theme.text, marginBottom: 8 }}>
              Fast-forward
            </div>
            <div style={{ fontSize: 14.5, lineHeight: 1.55, color: theme.textDim }}>
              Tap to skip ahead in any reel. Triple your effective scroll speed when you're deep-diving a niche or competitor account.
            </div>
          </FlatCard>
        </div>
        <div style={{ marginTop: 18 }}>
          <VideoPlaceholder theme={theme} aspect="16/9" src="Landing Page : Assets/Video 5.mp4"/>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 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, className }) {
  return (
    <div className={className} 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 className="resp-grid-2" 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="Sort and export top-performing posts in seconds."
          />
          <FeatureCard
            theme={theme}
            icon="download"
            iconColor="oklch(0.65 0.18 245)"
            title="Download and transcribe"
            body="Instantly download and transcribe content without leaving the page."
          />
        </div>

        <div style={{ marginTop: 24 }}>
          <VideoPlaceholder theme={theme} aspect="16/9" src="Landing Page : Assets/Video 2.mp4"/>
        </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={"Export data to CSV and JSON with one click."}
        />
        <div className="resp-grid-2" 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" src="Landing Page : Assets/Video 3.mp4"/>
        </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 className="resp-grid-2" 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 className="resp-grid-3" 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: '1,000+', 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} className="resp-grid-4" 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 use." — 2-up
// ============================================================
function Pricing({ theme, sectionRef, ctaLabel, onCTA, onProUpgrade }) {
  const [annual, setAnnual] = React.useState(true);

  const proGroups = [
    {
      heading: 'Sort',
      items: [
        { t: 'Unlimited sorts, any time range', bold: true },
        { t: 'Export sorted data + transcripts' },
      ],
    },
    {
      heading: 'Download & transcribe',
      items: [
        { t: 'Unlimited downloads, anywhere', bold: true },
        { t: 'Unlimited transcription. No caps.', bold: true },
      ],
    },
    {
      heading: 'Watch & browse',
      items: [
        { t: 'Scrub bar on reels & videos' },
        { t: 'Fast-forward on reels' },
        { t: 'Sort, download & transcribe history' },
      ],
    },
    {
      heading: 'Save',
      items: [
        { t: 'Unlimited saves & folders', bold: true },
      ],
    },
  ];

  const freeTier = {
    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: 'Unlimited sorts, limited range' },
          { t: 'Up to 25 posts or 1 previous week' },
        ],
      },
      {
        heading: 'Download & transcribe',
        items: [
          { t: '10 downloads per month' },
          { t: '5 transcriptions per month' },
        ],
      },
      {
        heading: 'Watch & browse',
        items: [
          { t: 'Scrub bar on reels & videos' },
          { t: 'Fast-forward on reels' },
          { t: 'Sort, download & transcribe history' },
        ],
      },
      {
        heading: 'Save',
        items: [
          { t: 'Save & folders — Pro only', muted: 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 use."}
          sub="Start free. Upgrade anytime."
        />
        <div className="resp-grid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18, marginTop: 48 }}>
          {/* Free card */}
          <FlatCard theme={theme} padding={28} style={{
            border: `0.5px solid ${theme.sep}`,
            position: 'relative',
            background: theme.dark ? 'rgba(255,255,255,0.04)' : 'oklch(0.965 0.003 80)',
          }}>
            <div style={{
              fontSize: 14, fontWeight: 600, color: theme.text,
              letterSpacing: '-0.01em', marginBottom: 14,
            }}>{freeTier.name}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 8 }}>
              <span style={{ fontSize: 44, fontWeight: 800, letterSpacing: '-0.04em', color: theme.text }}>{freeTier.price}</span>
              <span style={{ fontSize: 14, color: theme.textDim }}>{freeTier.cadence}</span>
            </div>
            <p style={{ fontSize: 13.5, color: theme.textDim, margin: '0 0 22px', lineHeight: 1.5, minHeight: 40 }}>{freeTier.sub}</p>
            <button onClick={() => onCTA()} style={{
              width: '100%', padding: '12px 16px', borderRadius: 12,
              border: 'none',
              background: theme.dark ? 'rgba(255,255,255,0.08)' : 'oklch(0.92 0.003 80)',
              color: theme.text,
              fontSize: 14, fontWeight: 600, fontFamily: 'inherit',
              cursor: 'pointer',
              transition: 'transform 0.15s',
            }}
            onMouseEnter={(e)=>{ e.currentTarget.style.transform='translateY(-1px)'; }}
            onMouseLeave={(e)=>{ e.currentTarget.style.transform='translateY(0)'; }}>
              {freeTier.cta}
            </button>
            <div style={{ marginTop: 12, fontSize: 12, color: theme.textFaint, textAlign: 'center' }}>{freeTier.footnote}</div>
            <div style={{
              marginTop: 22, paddingTop: 22, borderTop: `0.5px solid ${theme.sep}`,
              display: 'flex', flexDirection: 'column', gap: 18,
            }}>
              {freeTier.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: f.muted ? theme.textFaint : theme.text, lineHeight: 1.45,
                      fontWeight: f.bold ? 700 : 400,
                    }}>
                      <I name={f.muted ? 'minus' : 'check'} size={13} sw={2.6} style={{ color: f.muted ? theme.textFaint : theme.accent, flexShrink: 0, marginTop: 3 }}/>
                      <span>{f.t}</span>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </FlatCard>

          {/* Pro card with annual/monthly toggle */}
          <FlatCard theme={theme} padding={28} style={{
            border: `1.5px solid rgba(${theme.accentGlow},0.7)`,
            position: 'relative',
            background: theme.dark ? 'rgba(255,255,255,0.04)' : 'white',
          }}>
            {/* Badge */}
            {annual && (
              <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',
              }}>Save 50%</div>
            )}

            {/* Header row: name + toggle */}
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: theme.text, letterSpacing: '-0.01em' }}>
                {annual ? 'Pro Yearly' : 'Pro Monthly'}
              </div>
              {/* Annual discount toggle */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontSize: 12, fontWeight: 600, color: theme.textDim }}>Annual discount</span>
                <button
                  onClick={() => setAnnual(a => !a)}
                  aria-label="Toggle annual billing"
                  style={{
                    width: 42, height: 24, borderRadius: 999,
                    border: 'none', cursor: 'pointer', padding: 0,
                    background: annual ? theme.accent : (theme.dark ? 'rgba(255,255,255,0.15)' : '#d1d5db'),
                    position: 'relative', flexShrink: 0,
                    transition: 'background 0.2s',
                  }}
                >
                  <span style={{
                    position: 'absolute',
                    top: 3, left: annual ? 21 : 3,
                    width: 18, height: 18, borderRadius: '50%',
                    background: 'white',
                    boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
                    transition: 'left 0.2s',
                    display: 'block',
                  }}/>
                </button>
              </div>
            </div>

            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 8 }}>
              <span style={{ fontSize: 44, fontWeight: 800, letterSpacing: '-0.04em', color: theme.text }}>
                {annual ? '$5' : '$10'}
              </span>
              <span style={{ fontSize: 14, color: theme.textDim }}>/ month</span>
            </div>
            <p style={{ fontSize: 13.5, color: theme.textDim, margin: '0 0 22px', lineHeight: 1.5, minHeight: 40 }}>
              {annual ? 'Everything in Pro, paid annually.' : 'Unlimited everything. Cancel anytime.'}
            </p>
            <button onClick={() => onProUpgrade()} style={{
              width: '100%', padding: '12px 16px', borderRadius: 12,
              border: 'none',
              background: theme.accent,
              color: 'white',
              fontSize: 14, fontWeight: 600, fontFamily: 'inherit',
              cursor: 'pointer',
              boxShadow: `0 6px 20px -4px rgba(${theme.accentGlow},0.55), inset 0 1px 0 rgba(255,255,255,0.2)`,
              transition: 'transform 0.15s',
            }}
            onMouseEnter={(e)=>{ e.currentTarget.style.transform='translateY(-1px)'; }}
            onMouseLeave={(e)=>{ e.currentTarget.style.transform='translateY(0)'; }}>
              {annual ? 'Get Pro Yearly' : 'Get Pro Monthly'}
            </button>
            <div style={{ marginTop: 12, fontSize: 12, color: theme.textFaint, textAlign: 'center' }}>
              {annual ? 'Billed yearly · $60/year savings' : 'Billed monthly. Cancel anytime.'}
            </div>
            <div style={{
              marginTop: 22, paddingTop: 22, borderTop: `0.5px solid ${theme.sep}`,
              display: 'flex', flexDirection: 'column', gap: 18,
            }}>
              {proGroups.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>

        {/* Enterprise tile */}
        <div style={{ marginTop: 18 }}>
          <FlatCard theme={theme} padding={32} style={{
            border: `0.5px solid ${theme.sep}`,
          }}>
            <div className="resp-grid-enterprise" style={{
              display: 'grid',
              gridTemplateColumns: '1fr 1fr',
              gap: 40,
              alignItems: 'center',
            }}>
              {/* Left: copy + CTA */}
              <div>
                <div style={{
                  fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
                  textTransform: 'uppercase', color: theme.accent, marginBottom: 14,
                }}>Enterprise</div>
                <h3 style={{
                  fontSize: 'clamp(22px, 3vw, 30px)', fontWeight: 800,
                  letterSpacing: '-0.03em', lineHeight: 1.1,
                  margin: '0 0 14px', color: theme.text,
                }}>For agencies and big teams</h3>
                <p style={{
                  fontSize: 15, lineHeight: 1.6, color: theme.textDim,
                  margin: '0 0 28px', maxWidth: 380,
                }}>
                  Custom seat counts, shared workspaces, and team-ready exports — built for agencies and marketing teams running social research at scale.
                </p>
                <a
                  href={`mailto:hello@feedrama.com?subject=FeedRama%20x%20%5BCompany%20Name%5D&body=Name%3A%20%0A%0ACompany%3A%20%0A%0ARole%3A%20%0A%0ATeam%20size%20%2F%20seats%3A%20%0A%0AWhat%20are%20you%20hoping%20to%20use%20it%20for%3F%20%0A`}
                  style={{
                    display: 'inline-block',
                    padding: '12px 22px', borderRadius: 12,
                    background: theme.dark ? 'rgba(255,255,255,0.08)' : 'oklch(0.92 0.003 80)',
                    color: theme.text,
                    fontSize: 14, fontWeight: 600, fontFamily: 'inherit',
                    textDecoration: 'none',
                    border: `0.5px solid ${theme.sep}`,
                    transition: 'transform 0.15s',
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}
                >
                  Contact us
                </a>
              </div>

              {/* Right: feature list */}
              <div className="resp-grid-2" style={{
                display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '14px 24px',
              }}>
                {[
                  { icon: 'grid',       label: 'Multi-seat access & permissions' },
                  { icon: 'folder',     label: 'Shared save folders & workspaces' },
                  { icon: 'chart',      label: 'Advanced keyword & topic search' },
                  { icon: 'download',   label: 'Bulk exports across all accounts' },
                  { icon: 'bolt',       label: 'Unlimited transcriptions & exports' },
                  { icon: 'star',       label: 'Priority support & onboarding' },
                ].map(f => (
                  <div key={f.label} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                    <div style={{ color: theme.accent, flexShrink: 0, marginTop: 1 }}>
                      <I name={f.icon} size={15} sw={2.4}/>
                    </div>
                    <span style={{ fontSize: 13.5, color: theme.text, lineHeight: 1.45 }}>{f.label}</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, save, download, scrub, and transcribe posts on Instagram and TikTok — all without leaving the page. Use it to research what works in your niche, build folders of 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, your saved posts, and your own feed. The same sorting, saving, and exporting workflow runs everywhere.' },
    { q: 'How does sorting work on Free vs Pro?', a: 'On Free you get unlimited sorts, but the range is capped to the previous 25 posts or up to 1 previous week. On Pro you can sort unlimited posts across any time range — all-time, last year, last month, you name it.' },
    { q: 'Can I save posts and organize them into folders?', a: 'Yes — Save with folders is a Pro feature. Bookmark any reel, post, or carousel and drop it into folders like Hooks, Competitors, or whatever your project needs. Saves persist locally and you can browse them like a private feed sorted by newest, oldest, or platform.' },
    { q: 'What is the scrub bar?', a: 'Instagram reels and TikTok videos do not let you scrub through a video by default. FeedRama overlays a precise timeline on every video — drag to preview any moment, click to jump there, no buffering. Available on both Free and Pro.' },
    { q: 'What is fast-forward on reels?', a: 'A skip-ahead button on every reel that lets you jump past the slow opener and get straight to the part that matters. Triple your effective scroll speed when you are studying a niche. Available on both Free and Pro.' },
    { q: 'How does transcription work, and what are the limits?', a: 'FeedRama transcribes any reel or video to text. Free includes 5 transcriptions per month. Pro is unlimited. Transcripts are stored in history and can be re-exported or copied later, and they show up alongside metrics in your CSV exports.' },
    { q: 'What engagement data gets exported exactly?', a: 'Per post: URL, creation date, caption, likes, views, comments, shares, and saves (where available). Pro adds full transcripts in the same .csv.' },
    { q: 'Can I download videos and posts?', a: 'Yes. Free includes 10 downloads per month; Pro is unlimited — including carousel posts, which download every item in order. A history of everything you have downloaded is kept locally so you can re-find old files.' },
    { q: 'What does FeedRama Pro cost?', a: 'Pro is $10/month, or $5/month when billed annually (you save 50%, or $60/year). Pro unlocks unlimited sort range, unlimited transcription, and unlimited Save & folders. Scrub bar and fast-forward are included on Free too.' },
    { q: 'How do I activate 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 side panel automatically.' },
    { q: 'Can I cancel 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 or contact support?', a: 'Email hello@feedrama.com. Most shipped features come straight from user requests. 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] = React.useState(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 className="resp-grid-footer" 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="/instagram-downloader.html" style={link}>Instagram downloader</a>
            <a href="/tiktok-downloader.html" style={link}>TikTok downloader</a>
            <a href="/sort-instagram-feed.html" style={link}>Sort Instagram feed</a>
            <a href="/sort-tiktok-feed.html" style={link}>Sort TikTok feed</a>
            <a href="/instagram-video-transcription.html" style={link}>Instagram transcription</a>
            <a href="/tiktok-video-transcription.html" style={link}>TikTok transcription</a>
            <a href="https://chromewebstore.google.com/detail/feedrama/hjoeimndpbfodljnfhiaagpdpllaiieh" target="_blank" style={link}>Download extension</a>
            <a href="#pricing" style={link}>Pricing</a>
          </div>

          {/* Account */}
          <div style={col}>
            <div style={head}>Account</div>
            <a href="/account.html" 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,
  SaveFolders, ScrubAndForward,
  HowItWorks, Stats, Pricing, FAQ, FinalCTA, Footer, SectionHead, FlatCard,
});