// Quillpilot — all section components
const { useState, useEffect, useRef } = React;

// --- ICONS ---
const Icon = {
  Quill: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M20 4c-6 1-9 4-11 8l-2 8 8-2c4-2 7-5 8-11"/><path d="M9 13l3-3"/><path d="M7 22l5-5"/></svg>,
  Arrow: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  Plus: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" {...p}><path d="M12 5v14M5 12h14"/></svg>,
  Check: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="var(--ember-soft)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="4 12 10 18 20 6"/></svg>,
  Calendar: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>,
  Close: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M6 6l12 12M6 18L18 6"/></svg>,
  Sparkle: (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 0l1.6 7.4L21 9l-7.4 1.6L12 18l-1.6-7.4L3 9l7.4-1.6z"/></svg>,
};

// =============== NAV ===============
function Nav({ onOpenModal }) {
  return (
    <div className="nav-wrap">
      <div className="nav">
        <a href="#" className="brand">
          <span className="mark">
            <svg viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M19 5c-5 1-8 4-9 7l-2 7 7-2c3-1 6-4 7-9"/></svg>
          </span>
          Mismu
        </a>
        <div className="nav-links">
          <a href="#features">Features</a>
          <a href="#pricing">Pricing</a>
          <a href="#" onClick={(e) => { e.preventDefault(); onOpenModal('changelog'); }}>Changelog</a>
        </div>
        <a href="#cta" className="nav-cta">Start writing</a>
      </div>
    </div>
  );
}

// =============== HERO ===============
function Hero({ onSignup }) {
  const [email, setEmail] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [typed, setTyped] = useState('');
  const full = "There's a particular kind of quiet you find at sunrise on a slow trail — the kind that makes your espresso taste like a small triumph and reminds you why you started running before the world woke up";

  useEffect(() => {
    let i = 0;
    let timer;
    const tick = () => {
      if (i <= full.length) {
        setTyped(full.slice(0, i));
        i++;
        timer = setTimeout(tick, 28 + Math.random() * 30);
      } else {
        // restart after pause
        timer = setTimeout(() => { i = 0; setTyped(''); tick(); }, 4500);
      }
    };
    tick();
    return () => clearTimeout(timer);
  }, []);

  const submit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setSubmitting(true);
    setTimeout(() => {
      onSignup(email);
      setEmail('');
      setSubmitting(false);
    }, 600);
  };

  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="container hero-inner">
        <div>
          <h1>
            Your AI co-author<br />
            for <span className="underline">WordPress
              <svg viewBox="0 0 200 14" preserveAspectRatio="none"><path d="M2 8 C 40 4, 80 12, 120 7 S 180 4, 198 9" fill="none" stroke="var(--ember)" strokeWidth="2" strokeLinecap="round" opacity="0.9"/></svg>
            </span><br />
            <span className="script">running on autopilot</span>
          </h1>
          <p className="lede">Two long-form, humanized articles delivered to your WordPress feed every week — researched, drafted, SEO-tuned, and scheduled. You stay hands-free.</p>

          <form className="signup" onSubmit={submit}>
            <input type="email" placeholder="Discover the autopilot — your.email@site.com" value={email} onChange={(e) => setEmail(e.target.value)} required />
            <button type="submit" disabled={submitting}>{submitting ? 'Joining…' : 'Join the beta'}</button>
          </form>

          <div className="signup-meta">
            <div className="avatars">
              {[
                'https://i.pravatar.cc/56?img=12',
                'https://i.pravatar.cc/56?img=32',
                'https://i.pravatar.cc/56?img=44',
                'https://i.pravatar.cc/56?img=68',
              ].map((src, i) => (
                <div key={i} className="av" style={{ backgroundImage: `url(${src})` }} />
              ))}
            </div>
            <div className="meta-text">Be among the first to taste hands-free.<br/><strong>2,000+ WordPress writers</strong> already on the waitlist.</div>
          </div>
        </div>

        <div className="preview">
          <div className="wp-badge">
            <span className="wp-dot">W</span>
            <span>thoughtful-wanderings.com</span>
          </div>
          <div className="preview-card">
            <div className="preview-head">
              <div className="left">
                <span className="dot"></span>
                <span>Drafting · Tuesday morning post</span>
              </div>
              <div className="right">982 / 1,200 words</div>
            </div>
            <div className="preview-body">
              <span className="tag"><Icon.Sparkle style={{width:9,height:9}}/> Lifestyle · Long-form</span>
              <h3>Why the slowest miles teach the most</h3>
              <div className="article">
                <span className="typed">{typed}</span><span className="caret"></span>
              </div>
            </div>
            <div className="preview-action">
              <div className="schedule">
                <Icon.Calendar />
                Auto-publishing Tue 7:00 AM · 4 day queue
              </div>
              <div className="publish-btn">Preview draft →</div>
            </div>
          </div>
          <div className="claude-chip">
            <span className="claude-mark"><Icon.Sparkle style={{width:8,height:8,color:'#fff'}}/></span>
            Humanized by Claude
          </div>
        </div>
      </div>
    </section>
  );
}

// =============== LOGOS ===============
function Logos() {
  const logos = [
    { name: 'Substack', mark: '✦' },
    { name: 'Ghost', mark: '◐' },
    { name: 'Medium', mark: 'M.' },
    { name: 'Webflow', mark: 'w' },
    { name: 'Notion', mark: 'N' },
    { name: 'BeeHiiv', mark: '🐝' },
  ];
  return (
    <div className="logos">
      <div className="container">
        <div className="label">Trusted by writers shipping on</div>
        <div className="row">
          {logos.map((l, i) => (
            <div key={i} className="logo">
              <span style={{ fontFamily: i % 2 ? "'Instrument Serif', serif" : 'Geist', fontStyle: i === 0 ? 'normal' : i === 2 ? 'italic' : 'normal', fontWeight: i === 4 ? 700 : 500 }}>{l.mark}</span>
              <span style={{ fontWeight: 500, letterSpacing: '-0.01em' }}>{l.name}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// =============== HOW IT WORKS ===============
function Steps() {
  return (
    <section className="section" id="how" data-screen-label="02 How it works">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Three steps to autopilot</div>
          <h2>Hands-free in <br /><span className="script">under five minutes</span></h2>
          <p>From a fresh WordPress install to a self-updating publishing engine — no plugins, no prompts, no babysitting.</p>
        </div>

        <div className="steps">
          {/* Step 1: Connect */}
          <div className="step">
            <div className="glow"></div>
            <div className="glow-bg"></div>
            <div className="step-num">01</div>
            <div className="step-visual">
              <ConnectVisual />
            </div>
            <h3>Connect WordPress</h3>
            <p>One-click OAuth or paste your site URL. We auto-detect categories, tags, author profiles, and your house style.</p>
          </div>

          {/* Step 2: Configure */}
          <div className="step">
            <div className="glow"></div>
            <div className="glow-bg"></div>
            <div className="step-num">02</div>
            <div className="step-visual">
              <ConfigureVisual />
            </div>
            <h3>Configure your voice</h3>
            <p>Pick topics, cadence, tone, target length. Drop in past articles — Mismu learns your rhythm and vocabulary.</p>
          </div>

          {/* Step 3: Publish */}
          <div className="step">
            <div className="glow"></div>
            <div className="glow-bg"></div>
            <div className="step-num">03</div>
            <div className="step-visual">
              <PublishVisual />
            </div>
            <h3>Publish on autopilot</h3>
            <p>Two humanized articles drop into your queue every week — already SEO-structured, image-paired, and scheduled.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function ConnectVisual() {
  return (
    <div style={{ position: 'relative', width: '100%', height: '160px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 24 }}>
      <div style={{ width: 64, height: 64, borderRadius: 14, background: 'linear-gradient(135deg, #21759b, #155a78)', display: 'grid', placeItems: 'center', boxShadow: '0 8px 24px rgba(33, 117, 155, 0.4)' }}>
        <span style={{ color: '#fff', fontWeight: 700, fontSize: 32, lineHeight: 1 }}>W</span>
      </div>
      <svg width="60" height="20" viewBox="0 0 60 20">
        <path d="M2 10 H 58" stroke="var(--ember)" strokeWidth="1.5" strokeDasharray="4 4" fill="none" />
        <circle cx="10" cy="10" r="2" fill="var(--ember)">
          <animate attributeName="cx" values="2;58;2" dur="2.5s" repeatCount="indefinite" />
        </circle>
      </svg>
      <div style={{ width: 64, height: 64, borderRadius: 14, background: 'linear-gradient(135deg, var(--ember) 0%, var(--ember-deep) 100%)', display: 'grid', placeItems: 'center', boxShadow: '0 8px 24px var(--ember-glow)' }}>
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M19 5c-5 1-8 4-9 7l-2 7 7-2c3-1 6-4 7-9"/></svg>
      </div>
    </div>
  );
}

function ConfigureVisual() {
  return (
    <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 8 }}>
      {[
        { label: 'Cadence', value: '2× per week', icon: '⟳' },
        { label: 'Tone', value: 'Conversational, expert', icon: '◐' },
        { label: 'Length', value: '1,200—1,800 words', icon: '⎯' },
      ].map((row, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 12px', background: 'rgba(255,255,255,0.03)', border: '1px solid var(--border)', borderRadius: 8 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 22, height: 22, display: 'grid', placeItems: 'center', borderRadius: 6, background: 'rgba(255,90,44,0.12)', color: 'var(--ember-soft)', fontSize: 11 }}>{row.icon}</span>
            <span style={{ fontSize: 12, color: 'var(--text-mute)' }}>{row.label}</span>
          </div>
          <span style={{ fontSize: 12, color: 'var(--text)', fontWeight: 500 }}>{row.value}</span>
        </div>
      ))}
    </div>
  );
}

function PublishVisual() {
  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
  const publish = [1, 4]; // Tue, Fri
  return (
    <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
        {days.map((d, i) => (
          <div key={i} style={{ height: 36, borderRadius: 6, border: '1px solid var(--border)', background: publish.includes(i) ? 'linear-gradient(180deg, var(--ember), var(--ember-deep))' : 'rgba(255,255,255,0.02)', display: 'grid', placeItems: 'center', fontSize: 10, color: publish.includes(i) ? '#fff' : 'var(--text-mute)', fontWeight: publish.includes(i) ? 600 : 400, boxShadow: publish.includes(i) ? '0 4px 12px var(--ember-glow)' : 'none' }}>{d.slice(0, 1)}</div>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'rgba(255,255,255,0.03)', border: '1px solid var(--border)', borderRadius: 8 }}>
        <span style={{ fontSize: 12, color: 'var(--text-mute)' }}>Next post in queue</span>
        <span style={{ fontSize: 12, color: 'var(--ember-soft)', fontWeight: 500 }}>Tue · 7:00 AM</span>
      </div>
    </div>
  );
}

// =============== BENTO / FEATURES ===============
function Bento({ onOpenModal }) {
  return (
    <section className="section" id="features" data-screen-label="03 Features">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Mismu — Beyond</div>
          <h2><span className="script">AI-generated</span><br />slop.</h2>
          <p>Every article is researched, structured, voiced, and humanized — written to be read, not just indexed.</p>
        </div>

        <div className="bento">
          {/* Big card: Humanization */}
          <div className="b-card span-2" style={{ minHeight: 320 }}>
            <h3><span className="accent">Humanization</span> that<br />actually reads like you.</h3>
            <div className="b-sub">A two-pass voice engine studies your published archive and rewrites every draft in your cadence, idioms, and edge cases.</div>
            <HumanizationVisual />
          </div>

          {/* SEO */}
          <div className="b-card">
            <h3>Built-in <span className="accent">SEO</span></h3>
            <div className="b-sub">Keyword intent, semantic clusters, internal links — handled before publish.</div>
            <SeoVisual />
          </div>

          {/* Scheduling */}
          <div className="b-card">
            <h3>Smart <span className="accent">scheduling</span></h3>
            <div className="b-sub">Posts queue at your audience's peak windows — never the same day twice.</div>
            <ScheduleVisual />
          </div>

          {/* Wide: Research */}
          <div className="b-card span-2">
            <h3>Research that <span className="accent">cites sources</span></h3>
            <div className="b-sub">Mismu pulls fresh, citable sources from the open web and threads them inline — never fabricated.</div>
            <ResearchVisual onClick={() => onOpenModal('research')} />
          </div>
        </div>
      </div>
    </section>
  );
}

function HumanizationVisual() {
  return (
    <div style={{ marginTop: 20, position: 'relative' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <div style={{ padding: 14, background: 'rgba(255,255,255,0.02)', border: '1px solid var(--border)', borderRadius: 10 }}>
          <div style={{ fontSize: 10.5, color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>Generic AI draft</div>
          <div style={{ fontSize: 12, lineHeight: 1.5, color: 'var(--text-mute)' }}>
            <span style={{ background: 'rgba(255, 90, 44, 0.18)', padding: '0 2px', borderRadius: 2 }}>In conclusion</span>, running offers <span style={{ background: 'rgba(255, 90, 44, 0.18)', padding: '0 2px', borderRadius: 2 }}>numerous benefits</span> for both physical and mental <span style={{ background: 'rgba(255, 90, 44, 0.18)', padding: '0 2px', borderRadius: 2 }}>well-being</span>.
          </div>
        </div>
        <div style={{ padding: 14, background: 'rgba(255, 90, 44, 0.04)', border: '1px solid rgba(255, 90, 44, 0.3)', borderRadius: 10 }}>
          <div style={{ fontSize: 10.5, color: 'var(--ember-soft)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8, fontWeight: 500 }}>Voice-matched output</div>
          <div style={{ fontSize: 12, lineHeight: 1.5, color: 'var(--text)' }}>
            You don't run to feel good. You run to <em>find out</em> something about the day — what hurts, what doesn't, what you keep forgetting to bring up at dinner.
          </div>
        </div>
      </div>
      <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 8, fontSize: 11.5, color: 'var(--text-mute)' }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#25c46e' }}></span>
        Voice match: <strong style={{ color: 'var(--text)', fontWeight: 500 }}>94%</strong> · AI-detection score: <strong style={{ color: 'var(--text)', fontWeight: 500 }}>0.04</strong>
      </div>
    </div>
  );
}

function SeoVisual() {
  return (
    <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
      {[
        { kw: 'slow running benefits', vol: '2.4K', pos: 1 },
        { kw: 'easy run pace heart rate', vol: '880', pos: 1 },
        { kw: 'zone 2 training morning', vol: '1.1K', pos: 1 },
      ].map((row, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '7px 10px', background: 'rgba(255,255,255,0.02)', border: '1px solid var(--border)', borderRadius: 6 }}>
          <span style={{ fontSize: 11.5, color: 'var(--text-dim)' }}>{row.kw}</span>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <span style={{ fontSize: 10, color: 'var(--text-mute)' }}>{row.vol}/mo</span>
            <span style={{ fontSize: 10, color: 'var(--ember-soft)', fontWeight: 500, background: 'rgba(255,90,44,0.1)', padding: '2px 6px', borderRadius: 4 }}>↑ #{row.pos}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

function ScheduleVisual() {
  return (
    <div style={{ marginTop: 16 }}>
      <svg viewBox="0 0 220 80" style={{ width: '100%', height: 80 }}>
        <defs>
          <linearGradient id="schedGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--ember)" stopOpacity="0.4"/>
            <stop offset="100%" stopColor="var(--ember)" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <path d="M 0 70 Q 30 65, 50 50 T 100 35 Q 130 25, 160 30 T 220 20 L 220 80 L 0 80 Z" fill="url(#schedGrad)" />
        <path d="M 0 70 Q 30 65, 50 50 T 100 35 Q 130 25, 160 30 T 220 20" fill="none" stroke="var(--ember)" strokeWidth="1.5" />
        <circle cx="50" cy="50" r="3" fill="var(--ember)"/>
        <circle cx="160" cy="30" r="3" fill="var(--ember)"/>
        <text x="50" y="68" fontSize="9" fill="var(--text-mute)" textAnchor="middle" fontFamily="Geist">Tue 7am</text>
        <text x="160" y="48" fontSize="9" fill="var(--text-mute)" textAnchor="middle" fontFamily="Geist">Fri 9am</text>
      </svg>
      <div style={{ fontSize: 11, color: 'var(--text-mute)', marginTop: 4 }}>Engagement window · last 90 days</div>
    </div>
  );
}

function ResearchVisual({ onClick }) {
  return (
    <div style={{ marginTop: 18, padding: 16, background: 'rgba(255,255,255,0.02)', border: '1px solid var(--border)', borderRadius: 10, fontFamily: 'Geist' }}>
      <div style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text-dim)' }}>
        Heart-rate variability research from <span style={{ color: 'var(--ember-soft)', cursor: 'pointer', textDecoration: 'underline', textDecorationStyle: 'dotted', textUnderlineOffset: 3 }} onClick={onClick}>Stanford's HRV Lab (2024)</span> shows that morning zone-2 runs produce a 12% larger overnight recovery delta than evening sessions
        <span style={{ color: 'var(--ember-soft)', cursor: 'pointer', fontSize: 10, marginLeft: 4, padding: '1px 5px', background: 'rgba(255,90,44,0.12)', borderRadius: 3 }} onClick={onClick}>[3]</span>.
      </div>
      <div style={{ marginTop: 14, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {['Stanford HRV (2024)', 'J. Sports Sci.', 'Garmin DB', 'NIH meta-2023'].map((s, i) => (
          <span key={i} style={{ fontSize: 10.5, padding: '3px 8px', background: 'rgba(255,255,255,0.04)', border: '1px solid var(--border)', borderRadius: 4, color: 'var(--text-mute)' }}>{s}</span>
        ))}
      </div>
    </div>
  );
}

// =============== PERSONAS ===============
function Personas() {
  const personas = [
    { tag: 'Lifestyle', name: 'For Creators', desc: 'Travel, food, wellness — keep your aesthetic, lose the burnout.', img: 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&q=80' },
    { tag: 'Indie SaaS', name: 'For Founders', desc: 'A consistent content engine that ships while you build the product.', img: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&q=80' },
    { tag: 'Affiliate', name: 'For Marketers', desc: 'Long-tail keyword coverage, on schedule, in your brand voice.', img: 'https://images.unsplash.com/photo-1573496799652-408c2ac9fe98?w=600&q=80' },
    { tag: 'Agency', name: 'For Studios', desc: 'Run twenty client blogs from a single dashboard. White-labeled.', img: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&q=80' },
  ];
  return (
    <section className="section" data-screen-label="04 Personas">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Mismu is built</div>
          <h2>Made for writers,<br /><span className="script">marketers, and makers.</span></h2>
          <p>Whoever you publish for, Quillpilot adapts to the cadence and the audience.</p>
        </div>

        <div className="personas">
          {personas.map((p, i) => (
            <div key={i} className="persona">
              <div className="img" style={{ backgroundImage: `url(${p.img})` }} />
              <div className="persona-label">
                <span className="persona-tag">{p.tag}</span>
                <div className="persona-name">{p.name}</div>
                <div className="persona-desc">{p.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============== TESTIMONIALS ===============
function Testimonials() {
  const testis = [
    { q: "I was writing one post a month on a good month. Mismu puts two out a week — and readers can't tell which I wrote myself.", n: 'Priya Shah', r: 'Travel blogger', av: 'https://i.pravatar.cc/96?img=47' },
    { q: "Our agency runs eleven client blogs through Mismu. The voice-match is uncanny — clients think we hired writers.", n: 'Marcus Diallo', r: 'Founder, Headline Studio', av: 'https://i.pravatar.cc/96?img=12' },
    { q: "I used to spend Sunday nights writing for the week. Now I spend Sunday nights actually resting.", n: 'Hana Watanabe', r: 'Solo SaaS founder', av: 'https://i.pravatar.cc/96?img=44' },
    { q: "The SEO structure alone justifies the price. We ranked for 14 long-tail keywords in the first month.", n: 'Theo Bauer', r: 'Affiliate marketer', av: 'https://i.pravatar.cc/96?img=33' },
    { q: "I was skeptical of the 'humanized' claim. Then my editor read three drafts back to back and couldn't pick which was AI.", n: 'Ada Okonkwo', r: 'Newsletter writer', av: 'https://i.pravatar.cc/96?img=49' },
    { q: "The Claude integration matters. The prose feels considered — not the usual AI sludge. Worth every dollar.", n: 'Lev Antonov', r: 'Indie publisher', av: 'https://i.pravatar.cc/96?img=58' },
  ];
  return (
    <section className="section" data-screen-label="05 Testimonials">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Real writers.</div>
          <h2><span className="script">Real publishing</span><br />on autopilot.</h2>
          <p>Six months in, here's how Quillpilot has changed the way they ship.</p>
        </div>

        <div className="testis">
          {testis.map((t, i) => (
            <div key={i} className="testi">
              <div className="q">{t.q}</div>
              <div className="who">
                <div className="av" style={{ backgroundImage: `url(${t.av})` }} />
                <div>
                  <div className="n">{t.n}</div>
                  <div className="r">{t.r}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============== PRICING ===============
function Pricing() {
  const [annual, setAnnual] = useState(false);
  const plans = [
    {
      name: 'Starter',
      monthly: 0,
      annual: 0,
      desc: 'Test the engine on one site.',
      cta: 'Start free',
      ctaClass: 'outline',
      features: [
        '1 article per week',
        '1 WordPress site',
        'Voice trained on 3 sample posts',
        'Standard SEO structure',
        'Watermark in footer',
      ],
    },
    {
      name: 'Writer',
      monthly: 29,
      annual: 23,
      desc: 'For solo creators who publish on cadence.',
      cta: 'Start writing',
      ctaClass: 'primary',
      featured: true,
      badge: 'Popular',
      features: [
        '2 articles per week — hands-free',
        '1 WordPress site',
        'Full voice training on 50 posts',
        'Advanced SEO + internal links',
        'Image suggestions + alt text',
        'Citable research with sources',
      ],
    },
    {
      name: 'Studio',
      monthly: 79,
      annual: 63,
      desc: 'Agencies & multi-site publishers.',
      cta: 'Talk to us',
      ctaClass: 'outline',
      features: [
        'Up to 5 sites',
        '4 articles per week per site',
        'Per-site voice profiles',
        'White-label dashboard',
        'Priority Claude routing',
        'Team seats included',
      ],
    },
  ];
  return (
    <section className="section" id="pricing" data-screen-label="06 Pricing">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Flexible plans</div>
          <h2>One price.<br /><span className="script">Two articles a week.</span></h2>
          <p>Cancel anytime. Voice training & first week are always free.</p>

          <div style={{ marginTop: 28, display: 'flex', justifyContent: 'center' }}>
            <div className="pricing-toggle">
              <button className={!annual ? 'active' : ''} onClick={() => setAnnual(false)}>Monthly</button>
              <button className={annual ? 'active' : ''} onClick={() => setAnnual(true)}>
                Annual <span className="save">-20%</span>
              </button>
            </div>
          </div>
        </div>

        <div className="plans">
          {plans.map((p, i) => {
            const price = annual ? p.annual : p.monthly;
            return (
              <div key={i} className={`plan${p.featured ? ' featured' : ''}`}>
                {p.badge && <span className="badge">{p.badge}</span>}
                <div style={{ fontSize: 14, color: 'var(--text-dim)', fontWeight: 500 }}>{p.name}</div>
                <div className="price-line">
                  <span className="price">${price}</span>
                  {price > 0 && <span className="per">/{annual ? 'month, billed annually' : 'month'}</span>}
                </div>
                <div className="desc">{p.desc}</div>
                <ul>
                  {p.features.map((f, j) => (
                    <li key={j}><span className="check"><Icon.Check /></span>{f}</li>
                  ))}
                </ul>
                <button className={`cta ${p.ctaClass}`}>{p.cta}</button>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// =============== FAQ ===============
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
    { q: "How is this different from ChatGPT or generic AI writers?", a: "Mismu runs on Claude with a voice-matching layer trained on your archive. Generic models produce generic prose — Quillpilot drafts read like you on a good morning, with cited sources and on-brand structure." },
    { q: "Will Google penalize AI-generated content on my site?", a: "Google penalizes low-quality content, not AI per se. Our humanization pass + research citations + SEO structure consistently score in the top quartile for E-E-A-T signals. We also include a 'human-in-the-loop' approval mode if you prefer to review before publishing." },
    { q: "Does it integrate with my existing WordPress setup?", a: "Yes. One-click OAuth or an Application Password connects in 30 seconds. We respect your existing categories, tags, featured-image flow, and post statuses. No plugin required, but we ship one if you want deeper control." },
    { q: "Can I edit the drafts before they publish?", a: "Of course. Switch any post from 'auto-publish' to 'review queue' and the draft will sit in your inbox until you approve, edit, or reject it. The voice engine learns from every edit you make." },
    { q: "What if I run multiple sites or write for clients?", a: "The Studio plan supports up to 5 WordPress sites with separate voice profiles per site. For larger agency rollouts, talk to us — we offer white-label dashboards and unlimited-site pricing." },
  ];
  return (
    <section className="section" data-screen-label="07 FAQ">
      <div className="container">
        <div className="faq">
          <div>
            <div className="eyebrow" style={{ color: 'var(--ember-soft)', fontSize: 13, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 500 }}>Got questions?</div>
            <h2 style={{ marginTop: 8, fontSize: 40, lineHeight: 1.08, letterSpacing: '-0.03em', fontWeight: 500 }}>We've got <br /><span className="script" style={{ color: 'var(--ember-soft)', fontSize: 50 }}>autopilot answers.</span></h2>
            <p style={{ marginTop: 16, fontSize: 14, color: 'var(--text-dim)', lineHeight: 1.55, maxWidth: 280 }}>Can't find your answer? Email <span style={{ color: 'var(--ember-soft)' }}>support@mismu.com</span> — we reply within a day.</p>
          </div>
          <div className="faq-list">
            {items.map((item, i) => (
              <div key={i} className={`faq-item${open === i ? ' open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="q">
                  {item.q}
                  <span className="icon"><Icon.Plus /></span>
                </div>
                <div className="a">{item.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// =============== CTA + FOOTER ===============
function CTA() {
  return (
    <section className="cta-section" id="cta" data-screen-label="08 CTA">
      <div className="container">
        <h2>Write less.<br /><span className="script">Publish twice as much.</span></h2>
        <p>Be among the first to plug Claude into your WordPress feed. Free for the first week, no credit card needed.</p>
        <a href="#" className="btn-big">Join the autopilot beta →</a>
      </div>
    </section>
  );
}

function FooterWordmark() {
  return (
    <div className="wordmark-wrap">
      <div className="container">
        <div className="wordmark">Mismu</div>
      </div>
    </div>
  );
}

function FooterBottom() {
  return (
    <div className="container">
      <div className="footer-bottom">
        <div className="col">
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <span style={{ width: 22, height: 22, borderRadius: 6, background: 'linear-gradient(135deg, var(--ember) 0%, var(--ember-deep) 100%)', display: 'grid', placeItems: 'center', boxShadow: '0 0 18px var(--ember-glow)' }}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M19 5c-5 1-8 4-9 7l-2 7 7-2c3-1 6-4 7-9"/></svg>
            </span>
            <span style={{ fontWeight: 600, fontSize: 15 }}>Quillpilot</span>
          </div>
          <p className="desc">Two humanized articles a week on your WordPress feed — researched, voiced, and scheduled. Powered by Claude.</p>
        </div>
        <div className="col">
          <h4>Product</h4>
          <a href="#features">Features</a>
          <a href="#pricing">Pricing</a>
          <a href="#how">How it works</a>
          <a href="#">Changelog</a>
        </div>
        <div className="col">
          <h4>Company</h4>
          <a href="#">About</a>
          <a href="#">Blog</a>
          <a href="#">Contact</a>
          <a href="#">Careers</a>
        </div>
        <div className="col">
          <h4>Legal</h4>
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">Security</a>
          <a href="#">DMCA</a>
        </div>
      </div>
      <div style={{ padding: '20px 0 30px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, color: 'var(--text-mute)' }}>
        <span>© 2026 Quillpilot Inc. All rights reserved.</span>
        <span>Built with Claude · Made for writers</span>
      </div>
    </div>
  );
}

// Modal content
function ModalContent({ kind, onClose }) {
  if (kind === 'changelog') {
    return (
      <div>
        <div className="modal-head">
          <div className="title">Changelog</div>
          <button className="close" onClick={onClose}><Icon.Close /></button>
        </div>
        <div className="modal-body">
          {[
            { d: 'May 18, 2026', t: 'Voice engine v3.1', n: 'Better handling of em-dashes, idiom matching across 12 new languages.' },
            { d: 'May 04, 2026', t: 'WordPress Multisite support', n: 'Manage a network of sites under a single subscription. Studio plan only.' },
            { d: 'Apr 22, 2026', t: 'Live source citations', n: 'Inline footnotes now link to original sources with publication dates.' },
            { d: 'Apr 09, 2026', t: 'Image pairing beta', n: 'Quillpilot now suggests royalty-free hero images per draft.' },
          ].map((c, i) => (
            <div key={i} style={{ padding: '14px 0', borderTop: i ? '1px solid var(--border-soft)' : 'none' }}>
              <div style={{ fontSize: 11, color: 'var(--text-mute)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>{c.d}</div>
              <div style={{ marginTop: 4, fontSize: 15, fontWeight: 500 }}>{c.t}</div>
              <div style={{ marginTop: 4, fontSize: 13, color: 'var(--text-dim)', lineHeight: 1.5 }}>{c.n}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  if (kind === 'research') {
    return (
      <div>
        <div className="modal-head">
          <div className="title">Sources cited in this draft</div>
          <button className="close" onClick={onClose}><Icon.Close /></button>
        </div>
        <div className="modal-body">
          {[
            { i: 1, t: 'Effects of low-intensity endurance training on HRV in recreational runners', src: 'Journal of Sports Sciences · 2024', url: 'jssm.org/2024/hrv-zone2' },
            { i: 2, t: 'Sleep quality and morning vs. evening aerobic exercise', src: 'NIH meta-analysis · 2023', url: 'pubmed.ncbi.../sleep-hrv' },
            { i: 3, t: 'Stanford HRV Lab — Recovery Delta Report', src: 'Stanford Medicine · 2024', url: 'med.stanford.edu/hrv' },
            { i: 4, t: 'Anonymized Garmin recovery data, N=24,011', src: 'Garmin Research DB · 2025', url: 'garmin.com/research' },
          ].map((s) => (
            <div key={s.i} style={{ padding: '14px 0', borderTop: s.i > 1 ? '1px solid var(--border-soft)' : 'none', display: 'flex', gap: 14 }}>
              <span style={{ flexShrink: 0, width: 24, height: 24, borderRadius: 6, background: 'rgba(255,90,44,0.12)', color: 'var(--ember-soft)', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 600 }}>{s.i}</span>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500, lineHeight: 1.4 }}>{s.t}</div>
                <div style={{ marginTop: 3, fontSize: 12, color: 'var(--text-mute)' }}>{s.src}</div>
                <div style={{ marginTop: 6, fontSize: 12, color: 'var(--ember-soft)' }}>{s.url}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  return null;
}

Object.assign(window, {
  Nav, Hero, Logos, Steps, Bento, Personas, Testimonials, Pricing, FAQ, CTA, FooterWordmark, FooterBottom, ModalContent, Icon
});