/* global React */

function LocalAI() {
  const tiers = [
    {
      on: false,
      h: 'Cloud',
      t: 'iPhone and iPad',
      d: 'For devices that can’t run local models. Uses our hosted inference, end-to-end encrypted. (Macs can use cloud analysis too, if you choose.)',
      feats: ['Full app features', 'Pay-as-you-go'],
      off: ['No offline AI'],
    },
    {
      on: false,
      h: 'Base',
      t: 'M1 / M2 · 8 GB',
      d: 'Everyday writing assistance, scene analysis, lightweight diff suggestions. All local to your machine.',
      feats: ['Scene pacing & POV', 'Light continuity checks', 'Offline suggestions'],
      off: ['Long-context analysis limited'],
    },
    {
      on: true,
      h: 'Studio',
      t: 'M2 Pro / M3 · 16–32 GB',
      d: 'Our recommended tier. Full manuscript-aware analysis. Every feature, every chapter, fully offline.',
      feats: [
        'Full manuscript context',
        'Full continuity checks',
        'Knowledge base articles built from facts',
      ],
      off: [],
    },
    {
      on: false,
      h: 'Atelier',
      t: 'M3 Max / M4 / M5 · 64 GB+',
      d: 'For the writer who wants the state-of-the-art local model running on their own desk.',
      feats: ['Largest local model tier', 'Multi-book corpus analysis', 'Analyze as you type'],
      off: [],
    },
  ];

  return (
    <section className="sec" id="local" style={{ background: 'var(--paper-deep)', color: 'var(--ink-on-deep)' }}>
      <div className="container">
        <div data-reveal style={{ marginBottom: 48 }}>
          <span className="eyebrow" style={{ color: 'var(--ink-on-deep-3)' }}>
            <span className="eyebrow-dot" style={{ background: 'var(--spice-saffron)' }}/> On your machine
          </span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'start', marginBottom: 72 }}>
          <div data-reveal data-reveal-delay="1">
            <h2 className="headline" style={{ color: 'var(--ink-on-deep)', marginBottom: 28 }}>
              The understanding runs <em style={{ color: 'var(--spice-saffron)' }}>on the laptop in front of you.</em>
            </h2>
            <p className="subhead" style={{ color: 'var(--ink-on-deep-2)', marginBottom: 20 }}>
              Story Builder uses Apple’s neural engine and unified memory to run manuscript-aware models locally.
              Most Macs made in the last three years are enough.
              The analysis, the suggestions, and the diffs never leave your machine.
            </p>
            <p style={{ font: '400 15px/1.6 var(--font-sans)', color: 'var(--ink-on-deep-2)', margin: 0, maxWidth: '52ch' }}>
              It’s fast because it’s close. It’s private because it has to be.
              And it keeps working when you don’t have a connection.
            </p>
          </div>
          <div data-reveal data-reveal-delay="2" style={{
            background: 'linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0))',
            borderRadius: 18,
            border: '1px solid rgba(255,255,255,0.08)',
            padding: 24,
            fontFamily: 'var(--font-mono)',
            fontSize: 12,
            lineHeight: 1.7,
            color: 'var(--ink-on-deep-2)',
          }}>
            <div style={{ color: 'var(--spice-saffron)', marginBottom: 10, letterSpacing: '0.08em', textTransform: 'uppercase', fontSize: 10 }}>What stays local</div>
            <div>◆ Your manuscript</div>
            <div>◆ Every edit you make</div>
            <div>◆ Every comment you write</div>
            <div>◆ The model’s read of your pages</div>
            <div>◆ Character & theme extractions</div>
            <div>◆ Version history & diffs</div>
            <div style={{ color: '#6F6A5D', marginTop: 14, fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase' }}>What leaves (optional, end-to-end encrypted)</div>
            <div style={{ color: 'var(--ink-on-deep-3)' }}>◇ Cloud sync</div>
            <div style={{ color: 'var(--ink-on-deep-3)' }}>◇ Cloud analysis</div>
            <div style={{ color: 'var(--ink-on-deep-3)' }}>◇ Critiques</div>
          </div>
        </div>

        <div className="local-grid">
          {tiers.map((t, i) => (
            <div key={t.h} className={`tier ${t.on ? 'on' : ''}`} data-reveal data-reveal-delay={i % 4 + 1}>
              {t.on && <span className="tag tag-accent" style={{ position: 'absolute', top: 14, right: 14, background: 'rgba(232, 161, 43, 0.2)', color: 'var(--spice-saffron)' }}>Recommended</span>}
              <div className="tier-h">{t.h}</div>
              <div className="tier-title">{t.t}</div>
              <p className="tier-desc">{t.d}</p>
              <ul className="tier-feats">
                {t.feats.map(f => <li key={f}>{f}</li>)}
                {t.off.map(f => <li key={f} className="off">{f}</li>)}
              </ul>
            </div>
          ))}
        </div>

        <p data-reveal style={{
          marginTop: 48,
          font: '400 14px/1.5 var(--font-sans)',
          color: 'var(--ink-on-deep-3)',
          textAlign: 'center',
          maxWidth: '56ch',
          marginLeft: 'auto',
          marginRight: 'auto',
        }}>
          We detect your hardware on install and set the right defaults. You can always switch tiers or opt out of AI entirely and use Story Builder as a pure writing environment.
        </p>
      </div>
    </section>
  );
}

window.LocalAI = LocalAI;