// The story arc: positioning band → 6 alternating Feature sections → "everywhere" band.

function PositioningBand() {
  const cols = [
    ['Context', 'We keep the thread, the media, the Community Note — not just the link.'],
    ['Ranking', 'AI scores every save so the signal rises and the noise sinks.'],
    ['Permanence', 'Archived forever in your Vault, even if X deletes the original.'],
  ];
  return (
    <section style={pb.section}>
      <div className="container reveal">
        <div style={pb.head}>
          <span className="eyebrow" style={{ justifyContent:'center' }}>Not a read-it-later app</span>
          <p style={pb.claim}>Capture is table stakes. <span style={{ color:'var(--text)' }}>Backread is built for everything that happens after the save</span> — and it does one thing brilliantly: X.</p>
        </div>
        <div style={pb.grid} className="stack-sm">
          {cols.map(([t, b], i) => (
            <div key={i} style={pb.col}>
              <div className="mono" style={pb.colNum}>0{i+1}</div>
              <h3 style={pb.colTitle}>{t}</h3>
              <p style={pb.colBody}>{b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
const pb = {
  section: { padding:'40px 0 30px' },
  head: { textAlign:'center', maxWidth:760, margin:'0 auto 44px' },
  claim: { fontSize:'clamp(22px, 2.8vw, 32px)', fontWeight:600, letterSpacing:'-0.02em', lineHeight:1.3, color:'var(--text-mute)', marginTop:18, textWrap:'balance' },
  grid: { display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:1, background:'var(--border)', border:'0.5px solid var(--border)', borderRadius:'var(--radius-lg)', overflow:'hidden' },
  col: { background:'var(--bg)', padding:'28px 26px', display:'flex', flexDirection:'column', gap:8 },
  colNum: { fontSize:12, color:'var(--magenta)', letterSpacing:'.1em' },
  colTitle: { fontSize:20, fontWeight:600, letterSpacing:'-0.02em' },
  colBody: { fontSize:14.5, lineHeight:1.5, color:'var(--text-dim)', margin:0 },
};

function FeatureSections() {
  return (
    <div id="features">
      <Feature
        eyebrow="Capture & auto-organise"
        title="Bookmark like normal. Filing happens for you."
        lede="Keep saving on X exactly as you do. Backread syncs every post and an AI sorts it into your own categories — no manual filing, no folders to maintain."
      >
        <VisCapture />
      </Feature>

      <Feature reverse
        eyebrow="Triage with confidence"
        title="Only the uncertain saves ask for your attention."
        lede="Everything confident is already filed. The Inbox surfaces just the low-confidence items that need a human glance — one tap to confirm. Search is semantic and keyword, with X-native operators."
        lead={<span><span className="mono" style={{ color:'var(--magenta)' }}>from:</span> <span className="mono" style={{ color:'var(--purple)' }}>has:video</span> <span className="mono" style={{ color:'var(--emerald)' }}>is:starred</span> <span className="mono" style={{ color:'var(--orange)' }}>before:</span> — search X the way X works.</span>}
      >
        <VisTriage />
      </Feature>

      <Feature
        eyebrow="Act on what matters"
        title="A scarce working set for the saves you'll actually use."
        lede="Star to keep, unlimited. But Actions is deliberately capped at five — the rare posts worth doing something about. The AI Council turns each into a concrete next step, and Done closes the loop with a note on what you did."
        lead="Most saves are never revisited. This is the part built to fix that."
      >
        <VisAct />
      </Feature>

      <Feature reverse
        eyebrow="Reorganise in plain English"
        title="Restructure your whole library with a sentence."
        lede="“Move all my Tottenham posts out of Football into a new Tottenham category.” Batch-select and let AI organise — no dragging, no rules engine to learn."
      >
        <VisReorg />
      </Feature>

      <Feature
        eyebrow="Vault — kept forever"
        title="Permanence is a feature no one else ships."
        lede="Archive a post's full thread, its Community Note, and its media — preserved in your Vault so it survives even if the original is deleted. The internet forgets. Backread doesn't."
      >
        <VisVault />
      </Feature>

      <Feature reverse
        eyebrow="See your patterns"
        title="An honest picture of what you pay attention to."
        lede="Your top voices, recurring topics, and how your saves break down — plus a weekly digest that resurfaces forgotten gems you'd otherwise never see again."
      >
        <VisInsights />
      </Feature>

      <section style={ev.section}>
        <div className="container reveal" style={{ textAlign:'center' }}>
          <span className="eyebrow" style={{ justifyContent:'center' }}>Everywhere you are</span>
          <h2 className="sec-title" style={{ marginTop:16, maxWidth:680, marginInline:'auto' }}>Native Mac and iPhone apps and the web — in sync.</h2>
          <p className="sec-lede" style={{ margin:'14px auto 36px', maxWidth:520 }}>Triage on the train, act at your desk. Same data, one tap, always current.</p>
          <div style={{ maxWidth:720, margin:'0 auto' }}><VisEverywhere /></div>
        </div>
      </section>
    </div>
  );
}
const ev = { section: { padding:'56px 0 20px' } };

Object.assign(window, { PositioningBand, FeatureSections });