/* global React */

function FeatVisual({ id }) {
  // Each visual is a small, bespoke illustration of the feature.
  switch (id) {
    case 'knowledge':
      return (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, padding: 12, background: '#F5EFE2', borderRadius: 14 }}>
          {/* Knowledge base — extracted entities */}
          <div className="shot-frame-compact" style={{ padding: 14, background: 'white', fontFamily: 'var(--font-sans-chrome)', display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div style={{ fontSize: 9, color: '#87878F', textTransform: 'uppercase', letterSpacing: '0.12em' }}>Knowledge base</div>
            {[
              { k: 'Characters', items: [['Mara Vance', 'protagonist · 214 mentions'], ['Capt. Iyer', 'mentor · 38']], c: '#1F6F6A' },
              { k: 'Places', items: [['The Reckoning (sloop)', '17 scenes'], ['Line Islands', '6']], c: '#2057B0' },
              { k: 'Events', items: [['The squall', 'Ch. 08'], ['Landfall', 'Ch. 14']], c: '#9A5213' },
            ].map(group => (
              <div key={group.k}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 8.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#87878F', marginBottom: 5 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: group.c }}/>{group.k}
                </div>
                {group.items.map(([n, m]) => (
                  <div key={n} style={{ display: 'flex', justifyContent: 'space-between', gap: 6, fontSize: 10.5, color: '#18181B', padding: '2px 0' }}>
                    <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{n}</span>
                    <span style={{ color: '#87878F', fontSize: 9, whiteSpace: 'nowrap' }}>{m}</span>
                  </div>
                ))}
              </div>
            ))}
          </div>
          {/* Timeline — sequence of events */}
          <div className="shot-frame-compact" style={{ padding: 14, background: '#FBF7F0', fontFamily: 'var(--font-sans-chrome)' }}>
            <div style={{ fontSize: 9, color: '#87878F', textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 10 }}>Timeline</div>
            <div style={{ position: 'relative', paddingLeft: 16 }}>
              <div style={{ position: 'absolute', left: 4, top: 4, bottom: 4, width: 2, background: 'rgba(154,82,19,0.25)', borderRadius: 2 }}/>
              {[
                { t: 'Day 1', e: 'Departs Honolulu', c: '#1F6F6A' },
                { t: 'Day 4', e: 'Trade winds collapse', c: '#9A5213' },
                { t: 'Day 4', e: 'The squall', c: '#B0351A' },
                { t: 'Day 9', e: 'Sights the atoll', c: '#2057B0' },
                { t: 'Day 11', e: 'Landfall', c: '#2E8B57' },
              ].map((n, i) => (
                <div key={i} style={{ position: 'relative', marginBottom: 9 }}>
                  <span style={{ position: 'absolute', left: -15, top: 3, width: 8, height: 8, borderRadius: '50%', background: n.c, boxShadow: '0 0 0 2px #FBF7F0' }}/>
                  <div style={{ fontSize: 9, color: '#87878F', fontFamily: 'var(--font-mono)' }}>{n.t}</div>
                  <div style={{ fontSize: 11, color: '#18181B' }}>{n.e}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      );

    case 'navigator':
      return (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, padding: 12, background: '#F5EFE2', borderRadius: 14 }}>
          <div className="shot-frame-compact" style={{ aspectRatio: '3/4', padding: 14, background: 'white', display: 'flex', flexDirection: 'column', gap: 3, fontSize: 11, color: '#4B4B52', fontFamily: 'var(--font-sans-chrome)' }}>
            <div style={{ fontSize: 9, color: '#87878F', textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 4 }}>Manuscript</div>
            <div style={{ padding: '3px 6px' }}>▾ Act I — Landfall</div>
            <div style={{ padding: '3px 6px 3px 18px' }}>Ch. 01 — Harbor</div>
            <div style={{ padding: '3px 6px 3px 18px' }}>Ch. 02 — Departure</div>
            <div style={{ padding: '3px 6px', background: 'rgba(31,111,106,0.1)', color: '#1F6F6A', borderRadius: 4 }}>▾ Act II — The Crossing</div>
            <div style={{ padding: '3px 6px 3px 18px' }}>Ch. 07 — Doldrums</div>
            <div style={{ padding: '3px 6px 3px 18px', background: 'rgba(31,111,106,0.15)', color: '#1F6F6A', borderRadius: 4 }}>Ch. 08 — The Reckoning</div>
            <div style={{ padding: '3px 6px 3px 28px', fontSize: 10, color: '#87878F' }}>● Scene 1</div>
            <div style={{ padding: '3px 6px 3px 28px', fontSize: 10, color: '#87878F' }}>● Scene 2</div>
            <div style={{ padding: '3px 6px 3px 18px' }}>Ch. 09 — Albatross</div>
            <div style={{ padding: '3px 6px' }}>▸ Act III — Port</div>
            <div style={{ marginTop: 6, fontSize: 9, color: '#87878F', textTransform: 'uppercase', letterSpacing: '0.12em' }}>Cutting Room</div>
            <div style={{ padding: '3px 6px', color: '#87878F', fontStyle: 'italic' }}>▸ 12 scraps</div>
          </div>
          <div className="shot-frame-compact" style={{ aspectRatio: '3/4', padding: 14, background: '#FBF7F0', fontFamily: 'var(--font-serif-classical)', fontSize: 10, lineHeight: 1.5, color: '#4B4B52' }}>
            <div style={{ fontSize: 8, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#87878F', fontFamily: 'var(--font-sans-chrome)', marginBottom: 4 }}>From the Cutting Room</div>
            <div style={{ fontFamily: 'var(--font-serif-literary)', fontStyle: 'italic', color: '#18181B', marginBottom: 8, fontSize: 11 }}>"The albatross never came back. That seemed, in the moment, worth noting."</div>
            <div style={{ fontSize: 9, color: '#87878F', fontFamily: 'var(--font-sans-chrome)', marginBottom: 10 }}>Cut from Ch. 09 · 3 weeks ago · Restore →</div>
            <div style={{ fontFamily: 'var(--font-serif-literary)', fontStyle: 'italic', color: '#18181B', fontSize: 11, marginBottom: 8 }}>"She thought about her mother. Then she didn't."</div>
            <div style={{ fontSize: 9, color: '#87878F', fontFamily: 'var(--font-sans-chrome)' }}>Cut from Ch. 08 · yesterday · Restore →</div>
          </div>
        </div>
      );

    case 'review':
      return (
        <div className="shot-frame-compact" style={{ padding: 18, background: '#FBF7F0', fontFamily: 'var(--font-serif)', fontSize: 13, lineHeight: 1.7, color: '#1A1816', position: 'relative' }}>
          <div style={{ fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#87878F', fontFamily: 'var(--font-sans-chrome)', marginBottom: 10 }}>Ch. 08 · Review mode</div>
          <p style={{ margin: '0 0 10px' }}>By the fourth day the <span style={{ background: 'rgba(123,143,184,0.28)', borderRadius: 2, padding: '0 2px' }}>trade winds had collapsed</span> into a prayerful silence.</p>
          <p style={{ margin: '0 0 10px' }}>Mara climbed to the foredeck with her <span style={{ background: 'rgba(138,160,116,0.28)', borderRadius: 2, padding: '0 2px' }}>notebook and the kettle</span>.</p>
          <p style={{ margin: '0 0 10px' }}>She had not <span style={{ background: 'rgba(201,167,101,0.3)', borderRadius: 2, padding: '0 2px' }}>spoken aloud in six days</span>.</p>
          <p style={{ margin: 0 }}>The words on the page were the only ones <span style={{ background: 'rgba(198,127,168,0.3)', borderRadius: 2, padding: '0 2px' }}>that mattered now</span>.</p>

          {/* Margin comments */}
          <div style={{ position: 'absolute', top: 40, right: -4, width: 150, display: 'flex', flexDirection: 'column', gap: 6 }}>
            {[
              { col: '#7B8FB8', type: 'Question', body: 'Is this the first time we feel the sea as adversary?' },
              { col: '#8AA074', type: 'Suggestion', body: 'Try: "the kettle she never boiled."' },
              { col: '#C9A765', type: 'Note', body: 'Six days — confirm with Ch. 7 timeline.' },
              { col: '#C67FA8', type: 'Praise', body: 'This line is the book.' },
            ].map(c => (
              <div key={c.type} style={{ background: 'white', borderRadius: 7, padding: '7px 9px', boxShadow: '0 0 0 0.5px rgba(15,15,17,0.08), 0 6px 14px -6px rgba(15,15,17,0.15)', fontFamily: 'var(--font-sans-chrome)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 8, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#4B4B52', marginBottom: 3 }}>
                  <span style={{ width: 7, height: 7, borderRadius: '50%', background: c.col }}/>
                  {c.type}
                </div>
                <div style={{ fontSize: 10, lineHeight: 1.35, color: '#18181B' }}>{c.body}</div>
              </div>
            ))}
          </div>
        </div>
      );

    case 'diff':
      return (
        <div className="shot-frame-compact" style={{ padding: 18, background: '#FFFCF6', fontFamily: 'var(--font-serif)', fontSize: 12, lineHeight: 1.6 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, fontSize: 10, fontFamily: 'var(--font-mono)', color: '#87878F' }}>
            <span>v.14 · 3 days ago</span>
            <span style={{ flex: 1, height: 1, background: 'rgba(15,15,17,0.08)' }}/>
            <span>v.15 · now</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <div style={{ background: 'rgba(176,53,26,0.08)', padding: 10, borderRadius: 6, borderLeft: '2px solid #B0351A' }}>
              <div style={{ fontSize: 9, fontFamily: 'var(--font-mono)', color: '#B0351A', letterSpacing: '0.06em', marginBottom: 6 }}>− REMOVED</div>
              <div style={{ color: '#6F5F55' }}>The horizon held the boat the way a <del>cupped hand holds a small bird.</del></div>
            </div>
            <div style={{ background: 'rgba(46,139,87,0.08)', padding: 10, borderRadius: 6, borderLeft: '2px solid #2E8B57' }}>
              <div style={{ fontSize: 9, fontFamily: 'var(--font-mono)', color: '#1E6B3F', letterSpacing: '0.06em', marginBottom: 6 }}>+ ADDED</div>
              <div style={{ color: '#1A1816' }}>The horizon held the boat the way a <ins style={{ textDecoration: 'none', background: 'rgba(46,139,87,0.2)', padding: '0 2px', borderRadius: 2 }}>palm cups a trembling bird.</ins></div>
            </div>
          </div>
          <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-sans-chrome)', fontSize: 10, color: '#87878F' }}>
            <span style={{ padding: '3px 7px', background: 'rgba(31,111,106,0.1)', color: '#1F6F6A', borderRadius: 999, fontWeight: 500 }}>Ch. 08 · Scene 2</span>
            <span>· 3 revisions today</span>
            <span style={{ marginLeft: 'auto' }}>Restore v.14 →</span>
          </div>
        </div>
      );

    case 'palette':
      return (
        <div style={{ padding: 20, background: 'linear-gradient(180deg,#2A2419 0%, #1C1A14 100%)', borderRadius: 16, minHeight: 260, position: 'relative' }}>
          <div style={{ margin: '10px auto 0', maxWidth: 340, background: 'rgba(30,28,22,0.9)', backdropFilter: 'blur(20px)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 12, overflow: 'hidden', boxShadow: '0 30px 60px -20px rgba(0,0,0,0.6)' }}>
            <div style={{ padding: '12px 14px', borderBottom: '1px solid rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 13, color: '#B6AE9A' }}>⌕</span>
              <input placeholder="Jump, search, command…" readOnly value="the reckoning"
                style={{ flex: 1, background: 'transparent', border: 0, color: '#F3ECDB', fontFamily: 'var(--font-sans-chrome)', fontSize: 13, outline: 'none' }}/>
              <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: '#6F6A5D', background: 'rgba(255,255,255,0.06)', padding: '2px 5px', borderRadius: 4 }}>⌘K</span>
            </div>
            {[
              { icon: '◐', t: 'Ch. 08 — The Reckoning', s: 'Chapter · Act II', on: true },
              { icon: '✎', t: '"spoken aloud in six days"', s: 'Match in Ch. 08 · line 4' },
              { icon: '◊', t: '"Reckoning, day of"', s: 'Scrap · Cutting Room · 3w ago' },
              { icon: '▶', t: 'Start Focus session', s: 'Command · F' },
            ].map((r, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 14px', background: r.on ? 'rgba(232, 161, 43, 0.12)' : 'transparent', borderLeft: r.on ? '2px solid var(--spice-saffron)' : '2px solid transparent' }}>
                <span style={{ color: r.on ? 'var(--spice-saffron)' : '#6F6A5D', fontSize: 13, width: 18 }}>{r.icon}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12, color: '#F3ECDB', fontFamily: 'var(--font-sans-chrome)' }}>{r.t}</div>
                  <div style={{ fontSize: 10, color: '#6F6A5D', fontFamily: 'var(--font-mono)', marginTop: 1 }}>{r.s}</div>
                </div>
                {r.on && <span style={{ fontSize: 9, fontFamily: 'var(--font-mono)', color: '#6F6A5D' }}>↵</span>}
              </div>
            ))}
          </div>
        </div>
      );

    case 'sync':
      return (
        <div style={{ padding: 24, background: '#F5EFE2', borderRadius: 14, minHeight: 260, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ textAlign: 'center', fontSize: 11, fontFamily: 'var(--font-mono)', color: '#8A8275', letterSpacing: '0.06em', textTransform: 'uppercase' }}>End-to-end encrypted sync</div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, padding: '8px 0' }}>
            {[
              { d: 'MacBook', i: 'M' },
              { lock: true },
              { d: 'iPad', i: 'P' },
              { lock: true },
              { d: 'iPhone', i: 'i' },
            ].map((node, idx) => node.lock ? (
              <div key={idx} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, color: '#9A5213' }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
                <span style={{ fontSize: 8, fontFamily: 'var(--font-mono)', color: '#A07868' }}>e2e</span>
              </div>
            ) : (
              <div key={idx} style={{ background: 'white', borderRadius: 12, width: 64, height: 64, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4, boxShadow: '0 0 0 1px rgba(15,15,17,0.05), 0 6px 14px -8px rgba(15,15,17,0.25)' }}>
                <span style={{ fontSize: 18, fontWeight: 600, fontFamily: 'var(--font-serif-classical)', color: '#16324A' }}>{node.i}</span>
                <span style={{ fontSize: 8, color: '#87878F', fontFamily: 'var(--font-mono)' }}>{node.d}</span>
              </div>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {[
              { k: 'Backed up', v: '14 sec ago', c: '#2E8B57' },
              { k: 'Snapshots', v: '142 kept', c: '#16324A' },
            ].map(r => (
              <div key={r.k} style={{ background: 'white', borderRadius: 8, padding: '10px 12px', boxShadow: '0 0 0 1px rgba(15,15,17,0.05)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 9, color: '#87878F', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 4 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: r.c }}/>{r.k}
                </div>
                <div style={{ fontSize: 13, color: '#18181B', fontFamily: 'var(--font-serif-classical)' }}>{r.v}</div>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', padding: 14, background: 'white', borderRadius: 10, fontSize: 12, color: '#18181B', boxShadow: '0 0 0 1px rgba(15,15,17,0.05)', fontStyle: 'italic', fontFamily: 'var(--font-serif-literary)' }}>
            Encrypted on your device before it ever leaves.<br/>Not even we can read your manuscript.
          </div>
        </div>
      );

    default: return null;
  }
}

const FEATURES = [
  {
    id: 'knowledge',
    num: '01 · Knowledge & timeline',
    title: 'It <em>understands</em> who, where, and when.',
    body: 'Story Builder reads your manuscript and extracts the people, places, and events inside it, so it can help you plan, organize, and cite references. Works whether you’re writing a novel or reporting a true story, where the cast is real and the chronology has to hold.',
    bullets: [
      'Auto-extracted characters, places, and events in a living knowledge base',
      'An interactive timeline of every event along every narrative thread',
      'Works with fiction or nonfiction'
    ],
  },
  {
    id: 'navigator',
    num: '02 · Structure',
    title: 'See the <em>forest</em> through the trees.',
    body: 'Drag a scene into a different act. Collapse a book into its bones. Everything you cut lives in the Cutting Room, so nothing is ever lost.',
    bullets: [
      'Browse and organize acts, chapters, scenes, or sections',
      'Cutting Room preserves every deleted fragment, forever',
      'Click a scene to jump; type to search across all of it'
    ],
    reverse: true,
  },
  {
    id: 'review',
    num: '03 · Review mode',
    title: 'Built-in tools for <em>professional</em> feedback.',
    body: 'More than just margin notes. Editorial feedback for a manuscript can be massive, and keeping track of all of it is an equally massive challenge. Wrangle versions, reviewers, and comments in a single place.',
    bullets: ['Review sessions automatically manage snapshots and reviewers', 'Threaded comments and long-form feedback', 'Versioned feedback that persists across sessions'],
  },
  {
    id: 'diff',
    num: '04 · Revision history',
    title: 'Kill your <em>darlings</em> with impunity.',
    body: 'Real diffs for prose. Pick any two versions of a chapter and see exactly what changed — word by word, sentence by sentence. Restore a line from two months ago in one click.',
    bullets: ['Automatic versioning per scene, session, or day', 'Word-level diff that respects the way writers edit', 'Restore any prior state without losing today\'s work'],
    reverse: true,
  },
  {
    id: 'palette',
    num: '05 · Omnisearch',
    title: 'Your fingers never leave the <em>keyboard.</em>',
    body: 'Jump to a chapter, find a line you half-remember, run a command, ask a question, or open a scrap from the Cutting Room. ⌘⇧O is the whole app.',
    bullets: ['Fuzzy search across manuscript, notes, and cuts', 'Every command and every navigation target in one place', 'Recent context remembered between sessions'],
    dark: true,
  },
  {
    id: 'sync',
    num: '06 · Encrypted sync',
    title: 'Everything everywhere <em>safe and secure.</em>',
    body: 'Your work follows you from Mac to iPad to iPhone, encrypted end-to-end before it leaves the device. Continuous backup means a lost laptop is never a lost manuscript, and no one but you can read a word of it. Not even us.',
    bullets: [
      'End-to-end encrypted',
      'Nothing to subpoena or steal from Yunacaba servers',
      'Continuous, versioned backup with point-in-time restore',
      'Seamless handoff across all your Apple devices'
    ],
    reverse: true,
  },
];

function FeatureSection({ f }) {
  const Panel = (
    <div className={`feat-panel ${f.dark ? 'dark' : ''}`} data-reveal>
      <div className={`feat-grid ${f.reverse ? 'reverse' : ''}`}>
        <div className="feat-copy">
          <div className="num">{f.num}</div>
          <h3 dangerouslySetInnerHTML={{ __html: f.title }}/>
          <p>{f.body}</p>
          <ul className="bullets">
            {f.bullets.map(b => <li key={b}>{b}</li>)}
          </ul>
        </div>
        <div className="feat-media">
          <FeatVisual id={f.id}/>
        </div>
      </div>
    </div>
  );
  return (
    <div style={{ marginBottom: 28 }}>
      {Panel}
    </div>
  );
}

function Features() {
  return (
    <section className="sec" id="features">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64, alignItems: 'end', marginBottom: 64 }}>
          <div data-reveal>
            <span className="eyebrow">Features</span>
          </div>
          <div data-reveal data-reveal-delay="1">
            <h2 className="headline" style={{ marginBottom: 20 }}>
              Designed for <em>every</em> part of the writing process.
            </h2>
            <p className="subhead">
              One coherent environment designed around how long-form writing is actually done.
            </p>
          </div>
        </div>
      </div>
      <div className="container">
        {FEATURES.map(f => <FeatureSection key={f.id} f={f}/>)}
      </div>
    </section>
  );
}

window.Features = Features;