/* global React */

function ValueProp() {
  return (
    <section className="sec sec-sky" id="value">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.8fr', gap: 64, alignItems: 'start' }}>
          <div data-reveal>
            <span className="eyebrow">The premise</span>
          </div>
          <div data-reveal data-reveal-delay="1">
            <h2 className="headline" style={{ marginBottom: 32 }}>
              Your most <em>devoted</em> reader.
            </h2>
            <p className="subhead" style={{ marginBottom: 24 }}>
              We believe that AI tools should support writers, and not replace them.
              Story Builder reads and understands your manuscript like a human reader:
              Fully, from front to back, keeping track of every person, place, event, and plot thread.
              It never writes any of it for you.
            </p>
          </div>
        </div>

        {/* Three-number strip */}
        <div style={{ marginTop: 96, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40 }}>
          {[
            { n: '01', h: 'Writing', b: 'You spend most of your time writing, so you should write in luxury. Our UI is fast, robust, and gets out of your way so you can focus on the story.' },
            { n: '02', h: 'Understanding', b: 'Scene-level analysis of pacing, POV, theme, and continuity. Auto-generated timelines and beat sheets. A research assistant at your fingertips.' },
            { n: '03', h: 'Privacy', b: 'End-to-end encryption, so there’s nothing to subpoena or steal. AI that can run locally on your Mac, in a log cabin, on a sailboat, or at 37,000 feet. No internet required.' },
          ].map((c, i) => (
            <div key={c.n} data-reveal data-reveal-delay={i + 1}>
              <div className="kicker" style={{ marginBottom: 14 }}>{c.n}</div>
              <h3 style={{ font: '500 clamp(20px, 1.8vw, 26px)/1.15 var(--font-serif-classical)', margin: '0 0 10px' }}>{c.h}</h3>
              <p style={{ font: '400 15px/1.55 var(--font-sans)', color: 'var(--ink-2)', margin: 0 }}>{c.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.ValueProp = ValueProp;