/* global React, MiniApp */

function Hero() {
  return (
    <section id="top" className="sec-tight sec-brick" style={{ paddingTop: 140, paddingBottom: 100 }}>
      <div className="container-wide">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 44 }}>
          <div data-reveal>
            <span className="eyebrow no-rule" style={{ marginBottom: 20 }}>
              <span className="eyebrow-dot"/> macOS and iOS native · Private beta · Launching late 2026
            </span>
            <h1 className="display" style={{ margin: '12px 0 28px', maxWidth: '18ch' }}>
              An app that <em>understands</em> your writing.
            </h1>
            <p className="subhead" style={{ marginBottom: 32 }}>
              A writing studio that reads the whole book with you, tracking the people, places, timelines, and continuity, so you can stay inside the story.
              It analyzes; it never writes for you.
              And it runs on your own machine, online or off.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#waitlist" className="btn btn-primary btn-arrow">
                Sign up for updates
                <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M3 7h8M7 3l4 4-4 4"/></svg>
              </a>
              <a href="#features" className="btn btn-ghost">See how it works</a>
            </div>
          </div>

          <div data-reveal data-reveal-delay="1" style={{ position: 'relative', marginTop: 20 }}>
            <div className="shot-frame">
              <MiniApp annotationTop={168}/>
            </div>
            {/* Atmospheric mood image behind the shot */}
            <div
              className="photo-ph photo-ph-grain loc-ocean loc-overlay-sky loc-horizon"
              style={{
                position: 'absolute',
                inset: '-40px -60px 40px -60px',
                zIndex: -1,
                borderRadius: 24,
                filter: 'blur(2px)',
                opacity: 0.55,
              }}
            />
          </div>
        </div>

        {/* Running strip under hero */}
        <div style={{ marginTop: 80, display: 'flex', gap: 40, flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center' }}>
          <span className="kicker">Built for authors · researchers · journalists · poets</span>
          <div style={{ display: 'flex', gap: 22, flexWrap: 'wrap' }}>
            <span className="tag"><span className="tag-dot" style={{ background: 'var(--accent)' }}/>Local-first AI</span>
            <span className="tag"><span className="tag-dot" style={{ background: '#C47A1D' }}/>Revision tracking</span>
            <span className="tag"><span className="tag-dot" style={{ background: '#7B8FB8' }}/>Scene analysis</span>
            <span className="tag"><span className="tag-dot" style={{ background: '#8AA074' }}/>Encrypted cloud backup and sync</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;