/* ============================================================
   Autobrew marketing — page sections
   ============================================================ */

/* A compact live mock of the Production Readiness Report — the hero visual. */
function ReadinessMock() {
  const findings = [
    ['shield-alert', 'No authentication on /admin', 'critical', '#B23A2E'],
    ['database', 'Unindexed query on orders', 'at risk', '#C2872B'],
    ['activity', 'No observability configured', 'at risk', '#C2872B'],
  ];
  return (
    <div className="mk-card" style={{ padding: 22, width: '100%', maxWidth: 440 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon name="github" size={18} color="var(--ab-ink-700)" />
          <span style={{ fontFamily: 'var(--ab-font-mono)', fontSize: 13.5, color: 'var(--ab-ink-800)' }}>acme/api</span>
          <span style={{ fontFamily: 'var(--ab-font-mono)', fontSize: 11, color: 'var(--ab-fg-3)' }}>main</span>
        </div>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11.5, fontWeight: 500, background: 'var(--ab-success-bg)', color: 'var(--ab-success-fg)', borderRadius: 999, padding: '3px 9px' }}>
          <span style={{ width: 6, height: 6, borderRadius: 9, background: 'var(--ab-success)' }} /> live
        </span>
      </div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14, marginBottom: 14 }}>
        <div style={{ fontFamily: 'var(--ab-font-mono)', fontSize: 52, fontWeight: 600, lineHeight: .9, color: '#C2872B' }}>71</div>
        <div style={{ paddingBottom: 6 }}>
          <div style={{ fontSize: 13, fontWeight: 500 }}>Production readiness</div>
          <div style={{ fontSize: 12, color: 'var(--ab-fg-3)' }}>+14 since last scan</div>
        </div>
      </div>
      <div style={{ height: 8, borderRadius: 999, background: 'var(--ab-score-track)', overflow: 'hidden', marginBottom: 18 }}>
        <div style={{ width: '71%', height: '100%', background: 'linear-gradient(90deg,#C2872B,#3F7D5A)' }} />
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {findings.map(([ic, label, sev, col], i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '10px 12px', background: 'var(--ab-surface-2)', border: '1px solid var(--ab-border)', borderRadius: 10 }}>
            <Icon name={ic} size={16} color={col} />
            <span style={{ fontSize: 13, flex: 1, color: 'var(--ab-ink-800)' }}>{label}</span>
            <span style={{ fontSize: 11, fontWeight: 500, color: col }}>{sev}</span>
            <button className="mk-btn mk-btn-secondary" style={{ padding: '5px 10px', fontSize: 11.5, borderRadius: 7 }}>Fix</button>
          </div>
        ))}
      </div>
    </div>
  );
}

function Hero() {
  const isMobile = useIsMobile();
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="mk-wrap" style={{ paddingTop: isMobile ? 40 : 72, paddingBottom: isMobile ? 56 : 88, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.05fr .95fr', gap: isMobile ? 40 : 56, alignItems: 'center' }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 12px 5px 8px', background: 'var(--ab-surface)', border: '1px solid var(--ab-border)', borderRadius: 999, marginBottom: 26, boxShadow: 'var(--ab-shadow-xs)' }}>
            <span style={{ fontSize: 11, fontWeight: 600, background: 'var(--ab-terra-50)', color: 'var(--ab-terra-700)', borderRadius: 999, padding: '2px 8px', fontFamily: 'var(--ab-font-mono)' }}>NEW</span>
            <span style={{ fontSize: 13, color: 'var(--ab-fg-2)' }}>Graduated from Lovable, Bolt or Cursor? Start here →</span>
          </div>
          <h1 style={{ fontSize: isMobile ? 34 : 60, fontWeight: 600, lineHeight: isMobile ? 1.08 : 1.02, letterSpacing: '-0.028em', margin: 0, textWrap: 'balance' }}>
            The production backbone for the <span style={{ color: 'var(--ab-terra-500)' }}>AI era</span> of software.
          </h1>
          <p style={{ fontSize: isMobile ? 16 : 19, lineHeight: 1.58, color: 'var(--ab-fg-2)', marginTop: isMobile ? 16 : 22, maxWidth: 500 }}>
            Anyone can ship a prototype in a weekend. Almost no one can run it in production. Bring us any codebase — we make it production-ready, keep it that way, and grow with you.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: isMobile ? 26 : 32, flexDirection: isMobile ? 'column' : 'row' }}>
            <Button variant="primary" iconRight="arrow-right" style={isMobile ? { width: '100%', justifyContent: 'center' } : undefined}>Connect your GitHub</Button>
            <Button variant="secondary" icon="play" style={isMobile ? { width: '100%', justifyContent: 'center' } : undefined}>See a live scan</Button>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 26, fontSize: 13, color: 'var(--ab-fg-3)' }}>
            <Icon name="lock" size={14} /> Read-only access · Report in under 60 seconds · No card required
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
          {!isMobile && (
            <div style={{ position: 'absolute', inset: '-40px -20px', opacity: .5, zIndex: 0 }}>
              <svg width="100%" height="100%" viewBox="0 0 400 400" style={{ position: 'absolute', inset: 0 }}>
                <g stroke="var(--ab-ink-100)" strokeWidth="1.4">
                  <line x1="60" y1="80" x2="200" y2="200" /><line x1="340" y1="60" x2="200" y2="200" /><line x1="320" y1="330" x2="200" y2="200" /><line x1="80" y1="320" x2="200" y2="200" />
                </g>
                <g fill="var(--ab-terra-200)"><circle cx="60" cy="80" r="6" /><circle cx="340" cy="60" r="6" /><circle cx="320" cy="330" r="6" /><circle cx="80" cy="320" r="6" /></g>
              </svg>
            </div>
          )}
          <div style={{ position: 'relative', zIndex: 1 }}><ReadinessMock /></div>
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  const tools = ['Lovable', 'Bolt', 'Cursor', 'v0', 'Claude Code', 'Replit'];
  return (
    <section style={{ borderTop: '1px solid var(--ab-border)', borderBottom: '1px solid var(--ab-border)', background: 'var(--ab-surface-2)' }}>
      <div className="mk-wrap" style={{ padding: '28px 32px', display: 'flex', alignItems: 'center', gap: 40, flexWrap: 'wrap', justifyContent: 'center' }}>
        <span style={{ fontFamily: 'var(--ab-font-mono)', fontSize: 12, letterSpacing: '.06em', color: 'var(--ab-fg-3)', whiteSpace: 'nowrap' }}>Productionizes code from</span>
        {tools.map(t => (
          <span key={t} style={{ fontSize: 18, fontWeight: 500, color: 'var(--ab-ink-400)', letterSpacing: '-0.01em' }}>{t}</span>
        ))}
      </div>
    </section>
  );
}

function Problem() {
  const isMobile = useIsMobile();
  const stats = [
    ['100×', 'New code is entering the world 100× faster than the engineering capacity to operate it.'],
    ['90%', 'We are heading into a world where 90% of code is AI-generated — and almost none of it is governed.'],
    ['$200K', 'The senior platform engineer a founder needs costs $200K/year and six months to hire.'],
  ];
  return (
    <section className="mk-section">
      <div className="mk-wrap">
        <div style={{ maxWidth: 780 }}>
          <div className="mk-eyebrow">The gap</div>
          <h2 style={{ fontSize: isMobile ? 26 : 40, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.12, margin: '16px 0 0', textWrap: 'balance' }}>
            Generation tools stop at “the code compiles.” Deploy platforms stop at “the container runs.” Everything in between is still done by hand.
          </h2>
          <p style={{ fontSize: 17, color: 'var(--ab-fg-2)', lineHeight: 1.6, marginTop: 20, maxWidth: 640 }}>
            Scaling, compliance, observability, safe schema changes, coordinated releases — the production discipline that keeps software alive. The damage is already public: AI agents have deleted production databases and dropped customer schemas. That’s the new default failure mode.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3,1fr)', gap: isMobile ? 14 : 20, marginTop: isMobile ? 36 : 48 }}>
          {stats.map(([n, d], i) => (
            <div key={i} className="mk-card" style={{ padding: 24 }}>
              <div style={{ fontFamily: 'var(--ab-font-mono)', fontSize: 38, fontWeight: 600, color: 'var(--ab-terra-500)', letterSpacing: '-0.02em' }}>{n}</div>
              <p style={{ fontSize: 14.5, color: 'var(--ab-fg-2)', lineHeight: 1.55, marginTop: 12, marginBottom: 0 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const isMobile = useIsMobile();
  const steps = [
    ['git-pull-request-arrow', 'Connect your repo', 'Connect GitHub — Lovable, Bolt, Cursor, or hand-written. We read your system end-to-end in under 60 seconds.'],
    ['gauge', 'Get your readiness report', 'A single 0-to-100 score with prioritized risks in plain English. Missing auth, unindexed queries, no backups — exactly what’s wrong.'],
    ['git-merge', 'One-click fixes, forever', 'Click any finding and we open a pull request with the fix. Every future push is analyzed and breaking changes are surfaced before they ship.'],
  ];
  return (
    <section className="mk-section" style={{ background: 'var(--ab-surface-2)', borderTop: '1px solid var(--ab-border)', borderBottom: '1px solid var(--ab-border)' }}>
      <div className="mk-wrap">
        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto' }}>
          <div className="mk-eyebrow">How it works</div>
          <h2 style={{ fontSize: isMobile ? 27 : 38, fontWeight: 600, letterSpacing: '-0.02em', margin: '14px 0 0' }}>Production-ready in three steps</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3,1fr)', gap: isMobile ? 14 : 22, marginTop: isMobile ? 36 : 52 }}>
          {steps.map(([ic, t, d], i) => (
            <div key={i} className="mk-card" style={{ padding: 28, position: 'relative' }}>
              <div style={{ position: 'absolute', top: 22, right: 24, fontFamily: 'var(--ab-font-mono)', fontSize: 13, color: 'var(--ab-ink-200)', fontWeight: 600 }}>0{i + 1}</div>
              <div style={{ width: 46, height: 46, borderRadius: 12, background: 'var(--ab-terra-50)', border: '1px solid var(--ab-terra-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
                <Icon name={ic} size={22} color="var(--ab-terra-600)" />
              </div>
              <h3 style={{ fontSize: 19, fontWeight: 600, margin: 0, letterSpacing: '-0.01em' }}>{t}</h3>
              <p style={{ fontSize: 14.5, color: 'var(--ab-fg-2)', lineHeight: 1.6, marginTop: 10, marginBottom: 0 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pillars() {
  const isMobile = useIsMobile();
  const items = [
    ['workflow', 'System Knowledge Graph', 'A living map of every API, table, screen, and dependency. When code changes anywhere, we instantly know what else breaks — across mobile, backend, and database.'],
    ['git-compare-arrows', 'Coordinated changes', 'One approval, one audit trail. “Add organization support” touches three layers — we sequence backend, migration, and rollout safely, with rollback at every step.'],
    ['database-backup', 'Safe database updates', 'AI is a privileged-but-not-trusted user. A deterministic safety layer decides what executes. Never destructive in one step — your schema evolves without downtime.'],
    ['blocks', 'Component Catalog', 'Production-tested capabilities — payments, search, notifications, audit logs — GDPR / HIPAA / SOC-aware by default. One click integrates them into your system.'],
  ];
  return (
    <section className="mk-section">
      <div className="mk-wrap">
        <div style={{ maxWidth: 680 }}>
          <div className="mk-eyebrow">The platform</div>
          <h2 style={{ fontSize: isMobile ? 26 : 38, fontWeight: 600, letterSpacing: '-0.02em', margin: '14px 0 0', lineHeight: 1.12 }}>One governance backbone, under everything you ship</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 14 : 20, marginTop: isMobile ? 36 : 48 }}>
          {items.map(([ic, t, d], i) => (
            <div key={i} className="mk-card" style={{ padding: 28, display: 'flex', gap: 18, transition: 'box-shadow .2s var(--ab-ease), border-color .2s var(--ab-ease)' }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = 'var(--ab-shadow-md)'; e.currentTarget.style.borderColor = 'var(--ab-border-strong)'; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = 'var(--ab-shadow-sm)'; e.currentTarget.style.borderColor = 'var(--ab-border)'; }}>
              <div style={{ width: 44, height: 44, borderRadius: 11, background: 'var(--ab-ink-panel)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
                <Icon name={ic} size={21} color="#F4F1E9" />
              </div>
              <div>
                <h3 style={{ fontSize: 19, fontWeight: 600, margin: 0, letterSpacing: '-0.01em' }}>{t}</h3>
                <p style={{ fontSize: 14.5, color: 'var(--ab-fg-2)', lineHeight: 1.6, marginTop: 9, marginBottom: 0 }}>{d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Principle() {
  const isMobile = useIsMobile();
  return (
    <section style={{ background: 'var(--ab-ink-panel)', position: 'relative', overflow: 'hidden' }}>
      <GraphField opacity={0.1} />
      <div className="mk-wrap" style={{ padding: isMobile ? '64px 20px' : '104px 32px', position: 'relative', textAlign: 'center' }}>
        <div className="mk-eyebrow" style={{ color: 'var(--ab-terra-400)' }}>Our founding principle</div>
        <blockquote style={{ margin: '22px auto 0', maxWidth: 880, fontSize: isMobile ? 24 : 40, fontWeight: 500, lineHeight: 1.22, letterSpacing: '-0.02em', color: '#F4F1E9', textWrap: 'balance' }}>
          “LLMs propose, deterministic logic decides. Every AI suggestion passes through a rule-based safety layer before it touches your system.”
        </blockquote>
        <p style={{ marginTop: 26, fontSize: 15, color: 'var(--ab-fg-on-dark-2)' }}>The “an AI deleted my database” headline becomes impossible on autobrew.</p>
      </div>
    </section>
  );
}

function Pricing() {
  const isMobile = useIsMobile();
  const [annual, setAnnual] = React.useState(true);
  const tiers = [
    { name: 'Beta', price: annual ? 400 : 500, tag: 'For early customers', feats: ['Single-region', 'Daily backups', 'Readiness report + one-click fixes', 'Continuous push analysis', 'Community support'], cta: 'Start free', variant: 'secondary' },
    { name: 'Production', price: annual ? 1600 : 2000, tag: 'As you grow', feats: ['Multi-region, 99.9% uptime', 'Continuous backup', 'SOC 2 / HIPAA-ready', 'Coordinated changesets', 'Priority support'], cta: 'Connect a repo', variant: 'primary', featured: true },
    { name: 'Enterprise', price: null, tag: 'At scale', feats: ['Dedicated infrastructure', '24/7 support + SLA', 'Custom catalog components', 'SSO & audit logs', 'Solutions engineering'], cta: 'Talk to us', variant: 'secondary' },
  ];
  return (
    <section className="mk-section">
      <div className="mk-wrap">
        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto' }}>
          <div className="mk-eyebrow">Pricing</div>
          <h2 style={{ fontSize: isMobile ? 26 : 38, fontWeight: 600, letterSpacing: '-0.02em', margin: '14px 0 8px' }}>Replaces a $200K/year platform engineer</h2>
          <p style={{ fontSize: 16, color: 'var(--ab-fg-2)' }}>Same safety guarantees on every tier — only operational margin scales with price.</p>
          <div style={{ display: 'inline-flex', marginTop: 24, background: 'var(--ab-canvas-2)', border: '1px solid var(--ab-border)', borderRadius: 10, padding: 3 }}>
            {[['Monthly', false], ['Annual · save 20%', true]].map(([l, v]) => (
              <button key={l} onClick={() => setAnnual(v)} style={{ fontFamily: 'var(--ab-font-sans)', fontSize: 13, fontWeight: 500, border: 0, cursor: 'pointer', padding: '7px 16px', borderRadius: 7, background: annual === v ? 'var(--ab-surface)' : 'transparent', color: annual === v ? 'var(--ab-ink-800)' : 'var(--ab-fg-2)', boxShadow: annual === v ? 'var(--ab-shadow-xs)' : 'none' }}>{l}</button>
            ))}
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3,1fr)', gap: isMobile ? 14 : 20, marginTop: isMobile ? 32 : 44, alignItems: 'start' }}>
          {tiers.map((t, i) => (
            <div key={i} className="mk-card" style={{ padding: 28, ...(t.featured ? { border: '1.5px solid var(--ab-terra-400)', boxShadow: 'var(--ab-shadow-md)' } : {}) }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontSize: 16, fontWeight: 600 }}>{t.name}</span>
                {t.featured && <span style={{ fontSize: 11, fontWeight: 600, fontFamily: 'var(--ab-font-mono)', color: 'var(--ab-terra-700)', background: 'var(--ab-terra-50)', borderRadius: 999, padding: '3px 9px' }}>POPULAR</span>}
              </div>
              <div style={{ fontSize: 13, color: 'var(--ab-fg-3)', marginTop: 4 }}>{t.tag}</div>
              <div style={{ marginTop: 18, marginBottom: 20, minHeight: 48 }}>
                {t.price ? (
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                    <span style={{ fontFamily: 'var(--ab-font-mono)', fontSize: 40, fontWeight: 600, letterSpacing: '-0.02em' }}>${t.price.toLocaleString()}</span>
                    <span style={{ fontSize: 14, color: 'var(--ab-fg-3)' }}>/mo</span>
                  </div>
                ) : (
                  <div style={{ fontFamily: 'var(--ab-font-mono)', fontSize: 30, fontWeight: 600 }}>Custom</div>
                )}
              </div>
              <Button variant={t.variant} style={{ width: '100%', justifyContent: 'center' }}>{t.cta}</Button>
              <ul style={{ listStyle: 'none', margin: '22px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
                {t.feats.map(f => (
                  <li key={f} style={{ display: 'flex', gap: 10, fontSize: 13.5, color: 'var(--ab-fg-1)' }}>
                    <Icon name="check" size={16} color="var(--ab-success)" style={{ marginTop: 1 }} />{f}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA() {
  const isMobile = useIsMobile();
  return (
    <section className="mk-section" style={{ paddingTop: 40 }}>
      <div className="mk-wrap">
        <div style={{ background: 'var(--ab-terra-500)', borderRadius: isMobile ? 18 : 24, padding: isMobile ? '44px 24px' : '64px 48px', position: 'relative', overflow: 'hidden', textAlign: 'center' }}>
          <div style={{ position: 'absolute', inset: 0, opacity: .22 }}>
            <svg width="100%" height="100%" viewBox="0 0 1100 280" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0 }}>
              <g stroke="#F9F6EF" strokeWidth="1.4">
                <line x1="120" y1="60" x2="300" y2="180" /><line x1="300" y1="180" x2="540" y2="80" /><line x1="540" y1="80" x2="800" y2="200" /><line x1="800" y1="200" x2="980" y2="90" /></g>
              <g fill="#F9F6EF"><circle cx="120" cy="60" r="6" /><circle cx="300" cy="180" r="6" /><circle cx="540" cy="80" r="6" /><circle cx="800" cy="200" r="6" /><circle cx="980" cy="90" r="6" /></g>
            </svg>
          </div>
          <div style={{ position: 'relative' }}>
            <h2 style={{ fontSize: isMobile ? 28 : 42, fontWeight: 600, letterSpacing: '-0.025em', color: '#fff', margin: 0, textWrap: 'balance' }}>Generation is solved.<br />Production is next.</h2>
            <p style={{ fontSize: 17, color: 'rgba(255,255,255,.88)', marginTop: 16, maxWidth: 520, marginLeft: 'auto', marginRight: 'auto' }}>Connect a repo and get your production readiness report in under a minute.</p>
            <div style={{ marginTop: 28, display: 'flex', gap: 12, justifyContent: 'center' }}>
              <Button variant="onink" iconRight="arrow-right">Connect your GitHub</Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, TrustStrip, Problem, HowItWorks, Pillars, Principle, Pricing, CTA });