const { useState, useEffect, useRef, useMemo } = React;

// ============== ICONS (thin line, hand-crafted; not branded UI) ==============
const Icon = ({ name, size = 18, stroke = 1.4 }) => {
  const s = { width: size, height: size, fill: 'none', stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'plan': return (<svg viewBox="0 0 24 24" {...s}><path d="M4 5h12M4 10h16M4 15h9M4 20h13"/><circle cx="20" cy="15" r="1.5"/></svg>);
    case 'cal': return (<svg viewBox="0 0 24 24" {...s}><rect x="3" y="5" width="18" height="16" rx="1.5"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>);
    case 'list': return (<svg viewBox="0 0 24 24" {...s}><path d="M9 6h11M9 12h11M9 18h11"/><rect x="3" y="4" width="3" height="3"/><rect x="3" y="10" width="3" height="3"/><rect x="3" y="16" width="3" height="3"/></svg>);
    case 'coach': return (<svg viewBox="0 0 24 24" {...s}><path d="M21 12a8 8 0 1 1-3.2-6.4L21 4v6h-6"/><circle cx="12" cy="12" r="2.2"/></svg>);
    case 'video': return (<svg viewBox="0 0 24 24" {...s}><rect x="3" y="6" width="13" height="12" rx="1.5"/><path d="M16 10l5-3v10l-5-3"/></svg>);
    case 'cost': return (<svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9"/><path d="M15 9.5c-.7-1-1.8-1.5-3-1.5-1.7 0-3 .9-3 2.2 0 1.2 1 1.8 3 2.3s3 1.1 3 2.3c0 1.3-1.3 2.2-3 2.2-1.4 0-2.5-.6-3.2-1.6M12 6.5v11"/></svg>);
    case 'arrow': return (<svg viewBox="0 0 24 24" {...s}><path d="M5 12h14M13 6l6 6-6 6"/></svg>);
    case 'arrow-ne': return (<svg viewBox="0 0 24 24" {...s}><path d="M7 17 17 7M9 7h8v8"/></svg>);
    case 'check': return (<svg viewBox="0 0 24 24" {...s}><path d="M4 12l5 5L20 6"/></svg>);
    case 'spark': return (<svg viewBox="0 0 24 24" {...s}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></svg>);
    case 'play': return (<svg viewBox="0 0 24 24" {...s}><path d="M7 5v14l12-7z"/></svg>);
    case 'mail': return (<svg viewBox="0 0 24 24" {...s}><rect x="3" y="5" width="18" height="14" rx="1.5"/><path d="M3 7l9 7 9-7"/></svg>);
    case 'dot': return (<svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>);
    case 'send': return (<svg viewBox="0 0 24 24" {...s}><path d="M4 12l16-8-6 16-3-7-7-1z"/></svg>);
    case 'plus': return (<svg viewBox="0 0 24 24" {...s}><path d="M12 5v14M5 12h14"/></svg>);
    case 'flag': return (<svg viewBox="0 0 24 24" {...s}><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg>);
    default: return null;
  }
};

// ============== TICKER ==============
function Ticker() {
  const items = ['BUILT FOR SOLO OPERATORS', 'NO MARKETING TEAM REQUIRED', 'CAMPAIGNS ON AUTOPILOT', 'BETA NOW OPEN', 'SIX MONTHS FREE FOR EARLY ACCESS', 'FROM PRODUCT TO POST IN MINUTES'];
  return (
    <div style={{ borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)', background: 'var(--ink)', color: 'var(--paper)', overflow: 'hidden', whiteSpace: 'nowrap' }}>
      <div style={{ display: 'inline-flex', gap: 48, padding: '12px 0', animation: 'tickerScroll 38s linear infinite' }}>
        {[...items, ...items, ...items].map((it, i) => (
          <span key={i} className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 48 }}>
            <span style={{ opacity: 0.55, display: 'inline-flex' }}>
              <svg width="11" height="11" viewBox="0 0 64 64" fill="none" aria-hidden>
                <g stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><line x1="32" y1="32" x2="32" y2="14"/><line x1="32" y1="32" x2="49.12" y2="26.44"/><line x1="32" y1="32" x2="42.58" y2="46.56"/><line x1="32" y1="32" x2="21.42" y2="46.56"/><line x1="32" y1="32" x2="14.88" y2="26.44"/></g><circle cx="32" cy="32" r="5" fill="currentColor"/><circle cx="32" cy="14" r="3.3" fill="currentColor"/><circle cx="49.12" cy="26.44" r="3.3" fill="currentColor"/><circle cx="42.58" cy="46.56" r="3.3" fill="currentColor"/><circle cx="21.42" cy="46.56" r="3.3" fill="currentColor"/><circle cx="14.88" cy="26.44" r="3.3" fill="currentColor"/>
              </svg>
            </span>{it}
          </span>
        ))}
      </div>
      <style>{`@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }`}</style>
    </div>
  );
}

// ============== NAV (legacy, replaced by PageNav from pages.jsx) ==============
function Nav({ go }) {
  return <PageNav page="home" go={go || (() => {})} />;
}

function Logo({ size = 22 }) {
  return (
    <a href="#" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: 'var(--ink)' }}>
      <svg width={size} height={size} viewBox="0 0 64 64" fill="none">
        <g stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><line x1="32" y1="32" x2="32" y2="14"/><line x1="32" y1="32" x2="49.12" y2="26.44"/><line x1="32" y1="32" x2="42.58" y2="46.56"/><line x1="32" y1="32" x2="21.42" y2="46.56"/><line x1="32" y1="32" x2="14.88" y2="26.44"/></g><circle cx="32" cy="32" r="5" fill="currentColor"/><circle cx="32" cy="14" r="3.3" fill="currentColor"/><circle cx="49.12" cy="26.44" r="3.3" fill="currentColor"/><circle cx="42.58" cy="46.56" r="3.3" fill="currentColor"/><circle cx="21.42" cy="46.56" r="3.3" fill="currentColor"/><circle cx="14.88" cy="26.44" r="3.3" fill="currentColor"/>
      </svg>
      <span style={{ fontFamily: 'var(--serif)', fontSize: 22, letterSpacing: '-0.02em' }}>Campaign Caddie</span>
    </a>
  );
}

// ============== HERO ==============
function Hero({ go }) {
  return (
    <section style={{ borderBottom: '1px solid var(--ink)', position: 'relative' }}>
      <div className="shell hero-pad">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 32 }}>
          <span className="mono" style={{ color: 'var(--mute)' }}>ISSUE Nº 001 · BETA · MAY 2026</span>
          <span className="mono" style={{ color: 'var(--mute)' }}>FOR THE FOUNDER OF ONE</span>
        </div>
        <hr className="hair-ink" />

        <div className="stack-on-mobile" style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 64, padding: '56px 0 32px' }}>
          <div>
            <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 'clamp(72px, 9vw, 156px)', lineHeight: 0.92, letterSpacing: '-0.035em', margin: 0 }}>
              Your AI<br/>
              marketing team.<br/>
              <span style={{ fontStyle: 'italic' }}>Finally</span> affordable.
            </h1>
          </div>
          <aside style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', gap: 20 }}>
            <p className="mono" style={{ margin: 0, color: 'var(--mute)' }}>THE BRIEF</p>
            <p style={{ margin: 0, fontSize: 17, lineHeight: 1.55, maxWidth: 360, textWrap: 'pretty' }}>
              Campaign Caddie is a personal AI marketing department for small business owners. It plans your campaigns, writes the copy, schedules the posts, and tells you exactly what to do next — so you can get back to running the business.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 8, flexWrap: 'wrap' }}>
              <button onClick={() => go('apply')} style={{ ...ctaPrimary, border: 'none', cursor: 'pointer', fontFamily: 'inherit' }}>
                Apply for Free Beta <Icon name="arrow" size={16} />
              </button>
            </div>
            <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ display: 'flex' }}>
                {['RG','MK','JO','AL','TS'].map((x, i) => (
                  <div key={x} style={{
                    width: 26, height: 26, borderRadius: 999, background: 'var(--ink)', color: 'var(--paper)',
                    border: '2px solid var(--paper)', display: 'grid', placeItems: 'center',
                    fontSize: 9, fontFamily: 'var(--mono)', marginLeft: i ? -8 : 0
                  }}>{x}</div>
                ))}
              </div>
              <span className="mono" style={{ color: 'var(--mute)' }}>2,148 FOUNDERS ALREADY ON THE LIST</span>
            </div>
            <p className="mono" style={{ margin: '8px 0 0', color: 'var(--mute)' }}>
              <Icon name="check" size={12} stroke={2}/> &nbsp;6 months free when paid plans launch
            </p>
          </aside>
        </div>
      </div>

      {/* Editorial credit row */}
      <div style={{ borderTop: '1px solid var(--ink)' }}>
        <div className="shell stack-on-mobile" style={{ padding: '14px 0', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          <Stat k="$20–$50" v="Monthly when paid plans launch" />
          <Stat k="6" v="AI tools, one dashboard" />
          <Stat k="< 4 min" v="From signup to first campaign plan" />
          <Stat k="0" v="Agencies needed" />
        </div>
      </div>
    </section>
  );
}

const ctaPrimary = {
  display: 'inline-flex', alignItems: 'center', gap: 8,
  background: 'var(--ink)', color: 'var(--paper)',
  padding: '14px 22px', borderRadius: 999,
  textDecoration: 'none', fontSize: 14, fontWeight: 500,
  letterSpacing: '-0.005em',
};
const ctaGhost = {
  display: 'inline-flex', alignItems: 'center', gap: 8,
  background: 'transparent', color: 'var(--ink)',
  padding: '14px 22px', borderRadius: 999,
  textDecoration: 'none', fontSize: 14, fontWeight: 500,
  border: '1px solid var(--ink)',
};

function Stat({ k, v }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--serif)', fontSize: 28, lineHeight: 1, marginBottom: 4 }}>{k}</div>
      <div className="mono" style={{ color: 'var(--mute)' }}>{v}</div>
    </div>
  );
}

// ============== PROBLEM / SOLUTION ==============
function Problem() {
  return (
    <section style={{ background: 'var(--ink)', color: 'var(--paper)', borderBottom: '1px solid var(--ink)' }}>
      <div className="shell stack-on-mobile section-pad" style={{ display: 'grid', gridTemplateColumns: '180px 1fr 180px', gap: 40, alignItems: 'start' }}>
        <span className="mono" style={{ opacity: 0.6 }}>§ 01 — THE PROBLEM</span>
        <div>
          <p style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(40px, 5vw, 76px)', lineHeight: 1.05, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' }}>
            You didn't start a business <br/>to become a <span style={{ fontStyle: 'italic', textDecoration: 'line-through', textDecorationThickness: '2px' }}>marketer.</span>
            <br/>
            <span style={{ opacity: 0.6 }}>So we'll handle that part.</span>
          </p>
          <div className="stack-on-mobile" style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, borderTop: '1px solid rgba(255,255,255,0.18)', paddingTop: 32 }}>
            <DarkPoint n="01" t="No agency retainer" b="Replace the $4k/mo agency with software priced like a Netflix subscription." />
            <DarkPoint n="02" t="No blank-page panic" b="It hands you the calendar, the captions, and the next three things to do — already drafted." />
            <DarkPoint n="03" t="No guesswork" b="Cost estimates before you spend. Reach predictions before you post." />
          </div>
        </div>
        <span className="mono" style={{ opacity: 0.6, textAlign: 'right' }}>↘ KEEP READING</span>
      </div>
    </section>
  );
}
function DarkPoint({ n, t, b }) {
  return (
    <div>
      <span className="mono" style={{ opacity: 0.55 }}>{n}</span>
      <h4 style={{ fontFamily: 'var(--serif)', fontSize: 24, fontWeight: 400, margin: '8px 0 6px' }}>{t}</h4>
      <p style={{ fontSize: 14, lineHeight: 1.55, opacity: 0.75, margin: 0 }}>{b}</p>
    </div>
  );
}

// ============== DASHBOARD MOCKUP ==============
function DashboardPreview() {
  return (
    <section id="preview" style={{ background: 'var(--paper-warm)', borderBottom: '1px solid var(--ink)' }}>
      <div className="shell preview-pad">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
          <span className="mono" style={{ color: 'var(--mute)' }}>§ 02 — THE PRODUCT</span>
          <span className="mono" style={{ color: 'var(--mute)' }}>LIVE PREVIEW</span>
        </div>
        <hr className="hair-ink" />
        <div className="stack-on-mobile" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'end', padding: '32px 0 48px' }}>
          <h2 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(48px, 6vw, 92px)', lineHeight: 0.95, letterSpacing: '-0.025em', margin: 0 }}>
            One screen.<br/>The whole <span style={{ fontStyle: 'italic' }}>marketing</span> stack.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--mute-2)', margin: 0, maxWidth: 460, justifySelf: 'end' }}>
            Calendar, KPIs, scripts, AI coach — what used to live in five tools and three contractors, in a single dashboard tuned to your business.
          </p>
        </div>
      </div>

      <div className="shell" style={{ padding: '0 0 96px 0' }}>
        <DashboardFrame />
      </div>
    </section>
  );
}

const NAV_ITEMS = [
  { id: 'dashboard', label: 'Dashboard', icon: 'spark' },
  { id: 'campaigns', label: 'Campaigns', icon: 'flag' },
  { id: 'calendar', label: 'Calendar', icon: 'cal' },
  { id: 'todos', label: 'To-do & Scripts', icon: 'list' },
  { id: 'video', label: 'Video Tracker', icon: 'video' },
  { id: 'cost', label: 'Cost Estimator', icon: 'cost' },
  { id: 'products', label: 'Products', icon: 'plus' },
  { id: 'integrations', label: 'Integrations', icon: 'plan' },
];

function DashboardFrame() {
  const [view, setView] = useState('dashboard');
  const crumb = NAV_ITEMS.find(n => n.id === view)?.label || 'Dashboard';
  return (
    <div style={{
      background: 'var(--paper)', border: '1px solid var(--ink)',
      borderRadius: 14, overflow: 'hidden',
      boxShadow: '0 30px 60px -30px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.6) inset',
    }}>
      {/* Title bar */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 18px', borderBottom: '1px solid var(--hair)', background: 'var(--paper-warm)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 10, height: 10, borderRadius: 999, border: '1px solid var(--ink)' }} />
          <span style={{ width: 10, height: 10, borderRadius: 999, border: '1px solid var(--ink)' }} />
          <span style={{ width: 10, height: 10, borderRadius: 999, border: '1px solid var(--ink)', background: 'var(--ink)' }} />
        </div>
        <div className="mono" style={{ color: 'var(--mute)' }}>app.campaigncaddie.com / {view}</div>
        <div className="mono" style={{ color: 'var(--mute)' }}>⌘ K</div>
      </div>

      {/* Layout */}
      <div className="dashboard-frame-wrap" style={{ display: 'grid', gridTemplateColumns: '210px 1fr 340px', minHeight: 760 }}>
        <Sidebar view={view} setView={setView} />
        <ViewSwitcher view={view} setView={setView} />
        <CoachPanel view={view} crumb={crumb} />
      </div>
    </div>
  );
}

function ViewSwitcher({ view, setView }) {
  return (
    <div key={view} style={{ animation: 'fadeUp 0.32s ease both' }}>
      <style>{`@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }`}</style>
      {view === 'dashboard'    && <Main setView={setView} />}
      {view === 'campaigns'    && <CampaignsView />}
      {view === 'calendar'     && <CalendarView />}
      {view === 'todos'        && <TodosView />}
      {view === 'video'        && <VideoView />}
      {view === 'cost'         && <CostView />}
      {view === 'products'     && <ProductsView />}
      {view === 'integrations' && <IntegrationsView />}
    </div>
  );
}

function Sidebar({ view, setView }) {
  return (
    <aside style={{ borderRight: '1px solid var(--hair)', padding: '20px 12px', display: 'flex', flexDirection: 'column', gap: 2 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 10px 16px' }}>
        <svg width="20" height="20" viewBox="0 0 64 64" fill="none">
          <g stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><line x1="32" y1="32" x2="32" y2="14"/><line x1="32" y1="32" x2="49.12" y2="26.44"/><line x1="32" y1="32" x2="42.58" y2="46.56"/><line x1="32" y1="32" x2="21.42" y2="46.56"/><line x1="32" y1="32" x2="14.88" y2="26.44"/></g><circle cx="32" cy="32" r="5" fill="currentColor"/><circle cx="32" cy="14" r="3.3" fill="currentColor"/><circle cx="49.12" cy="26.44" r="3.3" fill="currentColor"/><circle cx="42.58" cy="46.56" r="3.3" fill="currentColor"/><circle cx="21.42" cy="46.56" r="3.3" fill="currentColor"/><circle cx="14.88" cy="26.44" r="3.3" fill="currentColor"/>
        </svg>
        <span style={{ fontFamily: 'var(--serif)', fontSize: 18 }}>Campaign Caddie</span>
      </div>
      {NAV_ITEMS.map(item => {
        const active = view === item.id;
        return (
          <button key={item.id} onClick={() => setView(item.id)} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '9px 10px', borderRadius: 6, fontSize: 13,
            background: active ? 'var(--ink)' : 'transparent',
            color: active ? 'var(--paper)' : 'var(--ink)',
            border: 'none', cursor: 'pointer', textAlign: 'left',
            fontFamily: 'inherit', fontWeight: active ? 500 : 400,
            transition: 'background 0.15s'
          }}
          onMouseEnter={e => { if (!active) e.currentTarget.style.background = 'rgba(10,10,10,0.05)'; }}
          onMouseLeave={e => { if (!active) e.currentTarget.style.background = 'transparent'; }}>
            <Icon name={item.icon} size={14} stroke={1.5}/>
            <span style={{ flex: 1 }}>{item.label}</span>
            {active && <span className="mono" style={{ opacity: 0.6 }}>•</span>}
          </button>
        );
      })}
      <div style={{ marginTop: 'auto', borderTop: '1px solid var(--hair)', paddingTop: 12, padding: '12px 6px 0' }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <div style={{ width: 30, height: 30, borderRadius: 999, background: 'var(--ink)', color: 'var(--paper)', display: 'grid', placeItems: 'center', fontSize: 12 }}>RG</div>
          <div style={{ fontSize: 12 }}>
            <div style={{ fontWeight: 500 }}>Reema's Goods</div>
            <div className="mono" style={{ color: 'var(--mute)' }}>BETA · OWNER</div>
          </div>
        </div>
      </div>
    </aside>
  );
}

function Main({ setView }) {
  return (
    <div style={{ padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: 20 }}>
      {/* Greeting row */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div className="mono" style={{ color: 'var(--mute)' }}>SAT, MAY 2 · WEEK 18</div>
          <h3 style={{ fontFamily: 'var(--serif)', fontSize: 28, margin: '4px 0 0', fontWeight: 400 }}>Good morning, Reema.</h3>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button style={pillBtn}><Icon name="plus" size={14}/> New product</button>
          <button style={pillBtnDark}><Icon name="spark" size={14}/> Launch campaign</button>
        </div>
      </div>

      {/* KPIs */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--hair)', borderRadius: 10, overflow: 'hidden' }}>
        <KPI label="REACH" v="48,210" delta="+22%" sparkUp />
        <KPI label="CONVERSIONS" v="312" delta="+8%" sparkUp />
        <KPI label="SPEND" v="$1,184" delta="−12%" sparkDown />
        <KPI label="CLICKS" v="6,430" delta="+34%" sparkUp last />
      </div>

      {/* Calendar + Active campaigns */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
        <Calendar />
        <ActiveCampaigns />
      </div>

      {/* To-do + Scripts */}
      <Todos />
    </div>
  );
}

const pillBtn = {
  display: 'inline-flex', alignItems: 'center', gap: 6,
  border: '1px solid var(--ink)', background: 'transparent',
  padding: '7px 12px', borderRadius: 999, fontSize: 12, cursor: 'pointer'
};
const pillBtnDark = {
  ...pillBtn, background: 'var(--ink)', color: 'var(--paper)', border: '1px solid var(--ink)'
};

function KPI({ label, v, delta, sparkUp, sparkDown, last }) {
  return (
    <div style={{ padding: '14px 16px', borderRight: last ? 'none' : '1px solid var(--hair)' }}>
      <div className="mono" style={{ color: 'var(--mute)' }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 6 }}>
        <span style={{ fontFamily: 'var(--serif)', fontSize: 30, lineHeight: 1 }}>{v}</span>
        <span className="mono" style={{ fontSize: 10 }}>{delta}</span>
      </div>
      <Spark up={sparkUp} down={sparkDown} />
    </div>
  );
}

function Spark({ up, down }) {
  // generate a tiny deterministic sparkline
  const pts = useMemo(() => {
    const n = 24;
    let y = 50;
    const trend = up ? -0.6 : down ? 0.6 : 0;
    return Array.from({ length: n }, (_, i) => {
      y += (Math.sin(i * 0.7) * 4) + (Math.cos(i * 1.3) * 3) + trend;
      y = Math.max(15, Math.min(85, y));
      return [i * (220 / (n - 1)), y];
    });
  }, [up, down]);
  const d = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
  return (
    <svg viewBox="0 0 220 90" width="100%" height="42" style={{ marginTop: 8, display: 'block' }}>
      <path d={d} fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" strokeLinecap="round"/>
      <circle cx={pts[pts.length-1][0]} cy={pts[pts.length-1][1]} r="2.6" fill="currentColor"/>
    </svg>
  );
}

function Calendar() {
  // build a month grid; highlight some days, label scheduled posts
  const weeks = 5;
  const startDay = 5; // offset
  const total = weeks * 7;
  const events = {
    7:  { type: 'post', label: 'IG Reel' },
    9:  { type: 'email', label: 'Email blast' },
    11: { type: 'ad', label: 'Meta ad' },
    14: { type: 'post', label: 'TikTok' },
    16: { type: 'today', label: 'Today' },
    19: { type: 'launch', label: 'Launch' },
    22: { type: 'post', label: 'IG carousel' },
    25: { type: 'email', label: 'Newsletter' },
    28: { type: 'ad', label: 'Boost post' },
  };
  return (
    <div style={{ border: '1px solid var(--hair)', borderRadius: 10, overflow: 'hidden' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 14px', borderBottom: '1px solid var(--hair)' }}>
        <div className="mono" style={{ color: 'var(--mute)' }}>MARKETING CALENDAR</div>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          <span className="mono">MAY 2026</span>
          <button style={chipBtn}>‹</button>
          <button style={chipBtn}>›</button>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', borderBottom: '1px solid var(--hair)' }} className="mono">
        {['MON','TUE','WED','THU','FRI','SAT','SUN'].map(d => (
          <div key={d} style={{ padding: '8px 10px', color: 'var(--mute)', borderRight: '1px solid var(--hair)' }}>{d}</div>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)' }}>
        {Array.from({ length: total }).map((_, i) => {
          const day = i - startDay + 1;
          const inMonth = day >= 1 && day <= 31;
          const ev = events[day];
          const isToday = ev?.type === 'today';
          return (
            <div key={i} style={{
              minHeight: 78,
              borderRight: ((i+1) % 7) ? '1px solid var(--hair)' : 'none',
              borderTop: i >= 7 ? '1px solid var(--hair)' : 'none',
              padding: '6px 8px', position: 'relative',
              background: isToday ? 'var(--ink)' : 'transparent',
              color: isToday ? 'var(--paper)' : 'inherit',
            }}>
              <div className="mono" style={{ fontSize: 10, opacity: inMonth ? 0.85 : 0.25 }}>{inMonth ? String(day).padStart(2,'0') : ''}</div>
              {ev && !isToday && <EventChip type={ev.type} label={ev.label} />}
              {isToday && <div className="mono" style={{ marginTop: 18, fontSize: 10, opacity: 0.8 }}>● TODAY</div>}
            </div>
          );
        })}
      </div>
    </div>
  );
}
const chipBtn = {
  width: 22, height: 22, border: '1px solid var(--ink)', background: 'transparent',
  borderRadius: 999, cursor: 'pointer', fontSize: 11, lineHeight: 1, padding: 0
};
function EventChip({ type, label }) {
  const filled = type === 'launch' || type === 'ad';
  return (
    <div style={{
      marginTop: 8, padding: '3px 6px', borderRadius: 4,
      fontSize: 10, fontFamily: 'var(--mono)',
      border: '1px solid var(--ink)',
      background: filled ? 'var(--ink)' : 'transparent',
      color: filled ? 'var(--paper)' : 'var(--ink)',
      display: 'inline-flex', alignItems: 'center', gap: 4,
    }}>
      {type === 'launch' ? '◆' : type === 'email' ? '✉' : type === 'ad' ? '$' : '●'} {label}
    </div>
  );
}

function ActiveCampaigns() {
  const rows = [
    { name: 'Mother\'s Day Capsule', status: 'Live', progress: 0.72, budget: 480, spent: 346, ch: 'IG · Meta · Email' },
    { name: 'Linen Tote Restock', status: 'Live', progress: 0.41, budget: 220, spent: 91, ch: 'IG · TikTok' },
    { name: 'Newsletter — May Edit', status: 'Drafting', progress: 0.18, budget: 0, spent: 0, ch: 'Email' },
    { name: 'Summer Preorder Tease', status: 'Scheduled', progress: 0.00, budget: 600, spent: 0, ch: 'Meta · IG' },
  ];
  return (
    <div style={{ border: '1px solid var(--hair)', borderRadius: 10, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 14px', borderBottom: '1px solid var(--hair)' }}>
        <div className="mono" style={{ color: 'var(--mute)' }}>ACTIVE CAMPAIGNS</div>
        <a className="mono" href="#" style={{ color: 'var(--mute)', textDecoration: 'none' }}>VIEW ALL ↗</a>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {rows.map((r, i) => (
          <div key={r.name} style={{ padding: '12px 14px', borderTop: i ? '1px solid var(--hair)' : 'none' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{r.name}</div>
              <span className="mono" style={{ fontSize: 10, padding: '2px 6px', border: '1px solid var(--ink)', borderRadius: 3, background: r.status === 'Live' ? 'var(--ink)' : 'transparent', color: r.status === 'Live' ? 'var(--paper)' : 'var(--ink)' }}>
                {r.status === 'Live' && <span style={{ display: 'inline-block', width: 5, height: 5, borderRadius: 999, background: 'var(--paper)', marginRight: 5, verticalAlign: 'middle' }}/>}
                {r.status.toUpperCase()}
              </span>
            </div>
            <div className="mono" style={{ color: 'var(--mute)', marginTop: 4 }}>{r.ch} &nbsp;·&nbsp; ${r.spent}/{r.budget}</div>
            <div style={{ marginTop: 8, height: 3, background: 'rgba(10,10,10,0.08)', borderRadius: 999, overflow: 'hidden' }}>
              <div style={{ width: `${r.progress * 100}%`, height: '100%', background: 'var(--ink)' }}/>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Todos() {
  const [done, setDone] = useState({ 0: true, 1: false, 2: false, 3: false });
  const items = [
    { t: 'Post Reel: "5 things I keep restocking"', meta: 'IG · Today · 11:00 AM', script: 'Hey friends — here are the five things I keep running out of in the shop. If any of these ring a bell for you, save this for later 👇' },
    { t: 'Send email: "Mother\'s Day Edit — 48hrs left"', meta: 'Klaviyo · Today · 4:00 PM', script: 'Subject: 48 hours left to grab the Mother\'s Day Edit. Preview: A quiet little reminder, in case the date snuck up on you...' },
    { t: 'Boost post on Meta — Linen Tote Restock', meta: 'Meta Ads · Tomorrow · $40', script: 'Audience: Lookalike of past purchasers, 25–44, US. Headline: "Back, briefly." Primary text: The linen tote you keep asking about is back. Small drop, ships Monday.' },
    { t: 'Reply to 12 new DMs flagged as "intent"', meta: 'IG Inbox · Anytime', script: '' },
  ];
  const [expanded, setExpanded] = useState(0);
  return (
    <div style={{ border: '1px solid var(--hair)', borderRadius: 10, overflow: 'hidden' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 14px', borderBottom: '1px solid var(--hair)' }}>
        <div className="mono" style={{ color: 'var(--mute)' }}>TODAY'S TO-DO &nbsp;·&nbsp; SCRIPTS READY</div>
        <span className="mono" style={{ color: 'var(--mute)' }}>4 ITEMS</span>
      </div>
      {items.map((it, i) => {
        const isOpen = expanded === i;
        const checked = done[i];
        return (
          <div key={i} style={{ borderTop: i ? '1px solid var(--hair)' : 'none' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px' }}>
              <button onClick={() => setDone(d => ({ ...d, [i]: !d[i] }))} style={{
                width: 16, height: 16, borderRadius: 4, border: '1px solid var(--ink)',
                background: checked ? 'var(--ink)' : 'transparent', color: 'var(--paper)',
                cursor: 'pointer', display: 'grid', placeItems: 'center', padding: 0, flexShrink: 0
              }}>
                {checked && <Icon name="check" size={11} stroke={2.6}/>}
              </button>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500, textDecoration: checked ? 'line-through' : 'none', opacity: checked ? 0.5 : 1 }}>{it.t}</div>
                <div className="mono" style={{ color: 'var(--mute)', marginTop: 2 }}>{it.meta}</div>
              </div>
              {it.script && (
                <button onClick={() => setExpanded(isOpen ? -1 : i)} className="mono" style={{
                  border: '1px solid var(--ink)', background: isOpen ? 'var(--ink)' : 'transparent',
                  color: isOpen ? 'var(--paper)' : 'var(--ink)',
                  padding: '5px 10px', borderRadius: 999, cursor: 'pointer', fontSize: 10
                }}>
                  {isOpen ? 'HIDE SCRIPT' : 'VIEW SCRIPT'}
                </button>
              )}
            </div>
            {isOpen && it.script && (
              <div style={{ padding: '0 14px 14px 42px' }}>
                <div style={{ background: 'var(--paper-warm)', border: '1px solid var(--hair)', borderRadius: 6, padding: 12, fontSize: 12.5, lineHeight: 1.55 }}>
                  <div className="mono" style={{ color: 'var(--mute)', marginBottom: 6 }}>DRAFTED BY CADDIE — TAP TO COPY</div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 15, lineHeight: 1.45 }}>"{it.script}"</div>
                </div>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

function CoachPanel({ view, crumb }) {
  const seed = [
    { who: 'caddie', t: "Morning, Reema. Your Mother's Day campaign is pacing 22% above target. Want me to push the budget?" },
    { who: 'me', t: "Maybe. What did the Reel post drive yesterday?" },
    { who: 'caddie', t: "1,840 views, 142 saves, 11 site clicks. Saves are 3.2× your average — strong organic signal. I'd bump the boost from $40 to $80 today only." },
  ];
  const [msgs, setMsgs] = useState(seed);
  const [draft, setDraft] = useState('');
  const [typing, setTyping] = useState(false);
  const endRef = useRef(null);
  useEffect(() => { endRef.current?.scrollTo({ top: 99999, behavior: 'smooth' }); }, [msgs, typing]);

  const send = () => {
    if (!draft.trim()) return;
    const q = draft.trim();
    setMsgs(m => [...m, { who: 'me', t: q }]);
    setDraft('');
    setTyping(true);
    setTimeout(() => {
      const reply = pickReply(q);
      setMsgs(m => [...m, { who: 'caddie', t: reply }]);
      setTyping(false);
    }, 900);
  };

  return (
    <aside style={{ borderLeft: '1px solid var(--hair)', display: 'flex', flexDirection: 'column', background: 'var(--paper-warm)' }}>
      <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--hair)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div className="mono" style={{ color: 'var(--mute)' }}>AI COACH</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 18, marginTop: 2 }}>Caddie</div>
        </div>
        <span className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--mute)' }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--ink)' }} /> ONLINE
        </span>
      </div>

      <div ref={endRef} style={{ flex: 1, overflowY: 'auto', padding: 14, display: 'flex', flexDirection: 'column', gap: 10, minHeight: 0 }}>
        {msgs.map((m, i) => (
          <div key={i} style={{
            alignSelf: m.who === 'me' ? 'flex-end' : 'flex-start',
            maxWidth: '90%',
            background: m.who === 'me' ? 'var(--ink)' : 'var(--paper)',
            color: m.who === 'me' ? 'var(--paper)' : 'var(--ink)',
            border: m.who === 'me' ? '1px solid var(--ink)' : '1px solid var(--hair)',
            padding: '9px 12px', borderRadius: 12, fontSize: 13, lineHeight: 1.45,
          }}>
            {m.t}
          </div>
        ))}
        {typing && (
          <div style={{ alignSelf: 'flex-start', display: 'flex', gap: 4, padding: '10px 12px', background: 'var(--paper)', border: '1px solid var(--hair)', borderRadius: 12 }}>
            <Dot delay={0}/><Dot delay={0.15}/><Dot delay={0.3}/>
          </div>
        )}
      </div>

      <div style={{ padding: 12, borderTop: '1px solid var(--hair)' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 10 }}>
          {['Best post time?', 'Write next caption', 'Cost to hit 50k reach?'].map(s => (
            <button key={s} onClick={() => { setDraft(s); }} className="mono" style={{
              border: '1px solid var(--ink)', background: 'transparent',
              padding: '5px 10px', borderRadius: 999, fontSize: 10, cursor: 'pointer'
            }}>{s}</button>
          ))}
        </div>
        <form onSubmit={e => { e.preventDefault(); send(); }} style={{ display: 'flex', gap: 8, alignItems: 'center', border: '1px solid var(--ink)', borderRadius: 999, padding: '4px 4px 4px 14px', background: 'var(--paper)' }}>
          <input
            value={draft}
            onChange={e => setDraft(e.target.value)}
            placeholder="Ask Caddie anything…"
            style={{ flex: 1, border: 'none', outline: 'none', fontSize: 13, background: 'transparent', fontFamily: 'inherit' }}
          />
          <button type="submit" style={{ width: 30, height: 30, borderRadius: 999, border: 'none', background: 'var(--ink)', color: 'var(--paper)', cursor: 'pointer', display: 'grid', placeItems: 'center' }}>
            <Icon name="send" size={14}/>
          </button>
        </form>
      </div>
    </aside>
  );
}
function Dot({ delay }) {
  return (
    <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--ink)', opacity: 0.4, animation: `coachDot 1.1s ${delay}s infinite ease-in-out` }}>
      <style>{`@keyframes coachDot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }`}</style>
    </span>
  );
}
function pickReply(q) {
  const Q = q.toLowerCase();
  if (Q.includes('time') || Q.includes('when')) return "For your audience, Tue–Thu 7:30–9:00 PM has driven 2.3× more saves over the last 30 days. I'll schedule there by default.";
  if (Q.includes('caption') || Q.includes('write')) return "Drafted three options in your voice — leaning quiet, useful, slightly funny. Open the To-do panel and tap 'View script'.";
  if (Q.includes('cost') || Q.includes('budget') || Q.includes('reach')) return "To hit ~50k reach this week, estimate ~$420 across Meta + boosted Reels. I can stage the spend so we pause if CPM spikes.";
  return "Got it. I'll work that into your plan and surface a draft in your to-do list this afternoon.";
}

// ============== EXTRA DASHBOARD VIEWS ==============

const viewWrap = { padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: 18 };
const viewHead = { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' };

function ViewHeader({ kicker, title, action }) {
  return (
    <div>
      <div style={viewHead}>
        <span className="mono" style={{ color: 'var(--mute)' }}>{kicker}</span>
        {action}
      </div>
      <h3 style={{ fontFamily: 'var(--serif)', fontSize: 30, fontWeight: 400, margin: '6px 0 0', letterSpacing: '-0.01em' }}>{title}</h3>
    </div>
  );
}

function CampaignsView() {
  const [filter, setFilter] = useState('All');
  const all = [
    { name: "Mother's Day Capsule", status: 'Live', progress: 0.72, budget: 480, spent: 346, ch: 'IG · Meta · Email', reach: '24.1k', conv: 142 },
    { name: 'Linen Tote Restock', status: 'Live', progress: 0.41, budget: 220, spent: 91, ch: 'IG · TikTok', reach: '11.8k', conv: 38 },
    { name: 'Newsletter — May Edit', status: 'Drafting', progress: 0.18, budget: 0, spent: 0, ch: 'Email', reach: '—', conv: '—' },
    { name: 'Summer Preorder Tease', status: 'Scheduled', progress: 0.00, budget: 600, spent: 0, ch: 'Meta · IG', reach: '—', conv: '—' },
    { name: 'Spring Closeout', status: 'Ended', progress: 1.00, budget: 320, spent: 318, ch: 'IG · Email', reach: '38.2k', conv: 211 },
    { name: 'New Customer Welcome', status: 'Live', progress: 0.55, budget: 90, spent: 49, ch: 'Email', reach: '4.1k', conv: 88 },
  ];
  const rows = filter === 'All' ? all : all.filter(r => r.status === filter);
  const filters = ['All', 'Live', 'Drafting', 'Scheduled', 'Ended'];
  return (
    <div style={viewWrap}>
      <ViewHeader kicker="ALL CAMPAIGNS · 6" title="Campaigns" action={
        <button style={pillBtnDark}><Icon name="spark" size={14}/> New campaign</button>
      }/>
      <div style={{ display: 'flex', gap: 6 }}>
        {filters.map(f => (
          <button key={f} onClick={() => setFilter(f)} className="mono" style={{
            padding: '6px 12px', borderRadius: 999, border: '1px solid var(--ink)',
            background: filter === f ? 'var(--ink)' : 'transparent',
            color: filter === f ? 'var(--paper)' : 'var(--ink)',
            cursor: 'pointer', fontSize: 10
          }}>{f.toUpperCase()}</button>
        ))}
      </div>
      <div style={{ border: '1px solid var(--hair)', borderRadius: 10, overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 0.8fr 1.4fr 1fr 1fr 0.8fr', padding: '10px 14px', borderBottom: '1px solid var(--hair)', background: 'var(--paper-warm)' }} className="mono">
          {['CAMPAIGN', 'STATUS', 'CHANNELS', 'BUDGET', 'REACH', 'CONV.'].map(h => (
            <span key={h} style={{ color: 'var(--mute)' }}>{h}</span>
          ))}
        </div>
        {rows.map((r, i) => (
          <div key={r.name} style={{
            display: 'grid', gridTemplateColumns: '2fr 0.8fr 1.4fr 1fr 1fr 0.8fr',
            padding: '14px', borderTop: i ? '1px solid var(--hair)' : 'none', alignItems: 'center', fontSize: 13,
            cursor: 'pointer', transition: 'background 0.15s'
          }}
          onMouseEnter={e => e.currentTarget.style.background = 'var(--paper-warm)'}
          onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
            <div>
              <div style={{ fontWeight: 500 }}>{r.name}</div>
              <div style={{ marginTop: 6, height: 3, background: 'rgba(10,10,10,0.08)', borderRadius: 999, overflow: 'hidden', maxWidth: 180 }}>
                <div style={{ width: `${r.progress * 100}%`, height: '100%', background: 'var(--ink)' }}/>
              </div>
            </div>
            <span className="mono" style={{ fontSize: 10, padding: '2px 6px', border: '1px solid var(--ink)', borderRadius: 3, justifySelf: 'start',
              background: r.status === 'Live' ? 'var(--ink)' : 'transparent', color: r.status === 'Live' ? 'var(--paper)' : 'var(--ink)' }}>
              {r.status.toUpperCase()}
            </span>
            <span className="mono" style={{ color: 'var(--mute)' }}>{r.ch}</span>
            <span>${r.spent}/{r.budget}</span>
            <span style={{ fontFamily: 'var(--serif)', fontSize: 18 }}>{r.reach}</span>
            <span style={{ fontFamily: 'var(--serif)', fontSize: 18 }}>{r.conv}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function CalendarView() {
  return (
    <div style={viewWrap}>
      <ViewHeader kicker="MAY 2026 · WEEK 18" title="Marketing Calendar" action={
        <div style={{ display: 'flex', gap: 8 }}>
          <button style={pillBtn}><Icon name="plus" size={14}/> Add event</button>
          <button style={pillBtnDark}><Icon name="spark" size={14}/> Auto-schedule</button>
        </div>
      }/>
      <Calendar />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
        {[
          { d: 'TUE 5', t: 'IG Reel — "5 things I keep restocking"', m: '11:00 AM · Drafted' },
          { d: 'THU 7', t: 'Email — Mother\'s Day 48hr', m: '4:00 PM · Drafted' },
          { d: 'SAT 9', t: 'Meta Ad — Linen Tote boost', m: '$40 · Awaiting approval' },
        ].map((u, i) => (
          <div key={i} style={{ border: '1px solid var(--hair)', borderRadius: 8, padding: 12 }}>
            <div className="mono" style={{ color: 'var(--mute)' }}>{u.d}</div>
            <div style={{ fontSize: 13, fontWeight: 500, margin: '6px 0 4px' }}>{u.t}</div>
            <div className="mono" style={{ color: 'var(--mute)' }}>{u.m}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function TodosView() {
  return (
    <div style={viewWrap}>
      <ViewHeader kicker="TODAY · 4 ITEMS" title="To-do & Scripts" action={
        <button style={pillBtn}><Icon name="check" size={14}/> Mark all done</button>
      }/>
      <Todos />
      <div style={{ border: '1px solid var(--hair)', borderRadius: 10, padding: 16, background: 'var(--paper-warm)' }}>
        <div className="mono" style={{ color: 'var(--mute)', marginBottom: 8 }}>SCRIPT LIBRARY</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {[
            ['IG Carousel template', '7 slides · brand voice'],
            ['Email — abandoned cart', '3 variants · A/B ready'],
            ['TikTok hook lines', '12 openers in your tone'],
            ['Meta ad — restock', 'Headline + primary text'],
          ].map(([t, m]) => (
            <div key={t} style={{ border: '1px solid var(--hair)', borderRadius: 8, padding: 12, background: 'var(--paper)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{t}</div>
                <div className="mono" style={{ color: 'var(--mute)' }}>{m}</div>
              </div>
              <span className="mono" style={{ color: 'var(--mute)' }}>USE →</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function VideoView() {
  const [score] = useState(78);
  return (
    <div style={viewWrap}>
      <ViewHeader kicker="LATEST UPLOAD · ANALYZED 2 MIN AGO" title="Video Reach Tracker" action={
        <button style={pillBtnDark}><Icon name="plus" size={14}/> Upload video</button>
      }/>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div style={{ border: '1px solid var(--hair)', borderRadius: 10, overflow: 'hidden' }}>
          <div style={{ aspectRatio: '9/16', maxHeight: 320, background: 'var(--ink)', position: 'relative', display: 'grid', placeItems: 'center', margin: '0 auto', width: 180 }}>
            <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 8px)' }}/>
            <div style={{ width: 44, height: 44, borderRadius: 999, border: '1.5px solid var(--paper)', display: 'grid', placeItems: 'center', color: 'var(--paper)' }}>
              <Icon name="play" size={18}/>
            </div>
            <span className="mono" style={{ position: 'absolute', bottom: 10, left: 10, color: 'var(--paper)', opacity: 0.7 }}>0:23</span>
          </div>
          <div style={{ padding: 14, borderTop: '1px solid var(--hair)' }}>
            <div style={{ fontSize: 13, fontWeight: 500 }}>"5 things I keep restocking" — IG Reel draft</div>
            <div className="mono" style={{ color: 'var(--mute)', marginTop: 4 }}>vertical_v3.mp4 · 23s</div>
          </div>
        </div>
        <div style={{ border: '1px solid var(--hair)', borderRadius: 10, padding: 16 }}>
          <div className="mono" style={{ color: 'var(--mute)' }}>CADDIE SCORE</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 6 }}>
            <span style={{ fontFamily: 'var(--serif)', fontSize: 72, lineHeight: 1 }}>{score}</span>
            <span className="mono" style={{ color: 'var(--mute)' }}>/100 · STRONG</span>
          </div>
          <div style={{ marginTop: 12, height: 4, background: 'rgba(10,10,10,0.08)', borderRadius: 999, overflow: 'hidden' }}>
            <div style={{ width: `${score}%`, height: '100%', background: 'var(--ink)' }}/>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 16 }}>
            <Metric k="Est. reach" v="9–14k" />
            <Metric k="Engagement" v="6.8%" />
            <Metric k="Save rate" v="3.2× avg" />
            <Metric k="Hook strength" v="High" />
          </div>
        </div>
      </div>
      <div style={{ border: '1px solid var(--hair)', borderRadius: 10, padding: 16 }}>
        <div className="mono" style={{ color: 'var(--mute)', marginBottom: 10 }}>3 WAYS TO MAKE IT LAND HARDER</div>
        {[
          'Cut the first 1.2s — your hook lands at 0:01.4. Tighten it so the payoff hits before the scroll instinct.',
          'Add a text overlay between 0:08–0:11. Saves spike when "what + why" appears on screen, not just in voiceover.',
          'End on a question, not a CTA. Your audience replies 4× more often when prompted to share their own list.',
        ].map((t, i) => (
          <div key={i} style={{ display: 'flex', gap: 12, padding: '10px 0', borderTop: i ? '1px solid var(--hair)' : 'none' }}>
            <span style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1, width: 26 }}>0{i+1}</span>
            <span style={{ fontSize: 13.5, lineHeight: 1.55 }}>{t}</span>
          </div>
        ))}
      </div>
    </div>
  );
}
function Metric({ k, v }) {
  return (
    <div style={{ borderTop: '1px solid var(--hair)', paddingTop: 10 }}>
      <div className="mono" style={{ color: 'var(--mute)' }}>{k.toUpperCase()}</div>
      <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 2 }}>{v}</div>
    </div>
  );
}

function CostView() {
  const [budget, setBudget] = useState(400);
  const [days, setDays] = useState(7);
  const reach = Math.round(budget * 110 + days * 800);
  const clicks = Math.round(budget * 4.2 + days * 18);
  const conv = Math.round(clicks * 0.038);
  const cpc = (budget / Math.max(clicks, 1)).toFixed(2);
  return (
    <div style={viewWrap}>
      <ViewHeader kicker="ESTIMATE BEFORE YOU SPEND" title="Campaign Cost Estimator" />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div style={{ border: '1px solid var(--hair)', borderRadius: 10, padding: 18 }}>
          <div className="mono" style={{ color: 'var(--mute)' }}>TOTAL BUDGET · ${budget}</div>
          <input type="range" min="50" max="2000" step="10" value={budget} onChange={e => setBudget(+e.target.value)}
            style={{ width: '100%', marginTop: 10, accentColor: '#0A0A0A' }}/>
          <div className="mono" style={{ color: 'var(--mute)', marginTop: 18 }}>DURATION · {days} DAYS</div>
          <input type="range" min="1" max="30" value={days} onChange={e => setDays(+e.target.value)}
            style={{ width: '100%', marginTop: 10, accentColor: '#0A0A0A' }}/>
          <div className="mono" style={{ color: 'var(--mute)', marginTop: 18, marginBottom: 8 }}>CHANNEL MIX</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {['Meta', 'IG', 'TikTok', 'Google'].map((c, i) => (
              <span key={c} className="mono" style={{
                padding: '5px 10px', borderRadius: 999,
                border: '1px solid var(--ink)',
                background: i < 2 ? 'var(--ink)' : 'transparent',
                color: i < 2 ? 'var(--paper)' : 'var(--ink)',
                fontSize: 10
              }}>{c.toUpperCase()}</span>
            ))}
          </div>
        </div>
        <div style={{ border: '1px solid var(--ink)', borderRadius: 10, padding: 18, background: 'var(--ink)', color: 'var(--paper)' }}>
          <div className="mono" style={{ opacity: 0.6 }}>ESTIMATED RETURN</div>
          <div style={{ marginTop: 10, display: 'grid', gap: 14 }}>
            <Big k="Reach" v={reach.toLocaleString()} />
            <Big k="Clicks" v={clicks.toLocaleString()} />
            <Big k="Conversions" v={conv.toLocaleString()} />
            <Big k="Avg. CPC" v={`$${cpc}`} />
          </div>
          <div className="mono" style={{ opacity: 0.55, marginTop: 18, fontSize: 10, lineHeight: 1.5 }}>
            BASED ON INDUSTRY AVERAGES · YOUR RESULTS WILL VARY<br/>
            EARLY-ACCESS ESTIMATE · NOT A GUARANTEE
          </div>
        </div>
      </div>
    </div>
  );
}
function Big({ k, v }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: '1px solid rgba(255,255,255,0.18)', paddingTop: 10 }}>
      <span className="mono" style={{ opacity: 0.7 }}>{k.toUpperCase()}</span>
      <span style={{ fontFamily: 'var(--serif)', fontSize: 32 }}>{v}</span>
    </div>
  );
}

function ProductsView() {
  const products = [
    { name: 'Linen Tote — Natural', sku: 'LT-001', price: 78, stock: 'In stock · 42', last: 'Featured 2 wks ago' },
    { name: 'Ceramic Mug Set (4)', sku: 'CM-104', price: 64, stock: 'Low · 8 left', last: 'Featured 5 days ago' },
    { name: 'Bedside Throw — Oat', sku: 'BT-220', price: 145, stock: 'In stock · 23', last: 'Never featured' },
    { name: 'Beeswax Candle — Fig', sku: 'BC-018', price: 32, stock: 'In stock · 71', last: 'Featured 1 mo ago' },
  ];
  return (
    <div style={viewWrap}>
      <ViewHeader kicker="4 PRODUCTS · SYNCED FROM YOUR STORE" title="Products" action={
        <button style={pillBtnDark}><Icon name="plus" size={14}/> Add product</button>
      }/>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {products.map(p => (
          <div key={p.sku} style={{ border: '1px solid var(--hair)', borderRadius: 10, padding: 14, display: 'flex', gap: 14, alignItems: 'center' }}>
            <div style={{ width: 64, height: 64, background: 'var(--paper-warm)', border: '1px solid var(--hair)', borderRadius: 8, position: 'relative', overflow: 'hidden', flexShrink: 0 }}>
              <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(45deg, rgba(10,10,10,0.06) 0 2px, transparent 2px 8px)' }}/>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{p.name}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 18 }}>${p.price}</div>
              </div>
              <div className="mono" style={{ color: 'var(--mute)', marginTop: 4 }}>{p.sku} · {p.stock}</div>
              <div className="mono" style={{ color: 'var(--mute)', marginTop: 2 }}>{p.last}</div>
            </div>
            <button style={{ ...pillBtn, fontSize: 10, padding: '5px 10px' }}><Icon name="spark" size={12}/> Launch</button>
          </div>
        ))}
      </div>
    </div>
  );
}

function IntegrationsView() {
  const items = [
    { n: 'Instagram', s: 'Connected', meta: '@reemasgoods · 4.2k' },
    { n: 'Meta Ads', s: 'Connected', meta: 'Ad acct #4421 · $12k spent YTD' },
    { n: 'Klaviyo', s: 'Connected', meta: '8,210 subscribers · 3 lists' },
    { n: 'Shopify', s: 'Connected', meta: 'reemasgoods.com · 4 products' },
    { n: 'TikTok', s: 'Disconnected', meta: 'Not yet linked' },
    { n: 'Google Ads', s: 'Disconnected', meta: 'Not yet linked' },
  ];
  return (
    <div style={viewWrap}>
      <ViewHeader kicker="4 OF 6 CONNECTED" title="Integrations" />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {items.map(it => {
          const on = it.s === 'Connected';
          return (
            <div key={it.n} style={{ border: '1px solid var(--hair)', borderRadius: 10, padding: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22 }}>{it.n}</div>
                <div className="mono" style={{ color: 'var(--mute)', marginTop: 2 }}>{it.meta.toUpperCase()}</div>
              </div>
              <span className="mono" style={{
                padding: '4px 10px', borderRadius: 999,
                border: '1px solid var(--ink)',
                background: on ? 'var(--ink)' : 'transparent',
                color: on ? 'var(--paper)' : 'var(--ink)',
                fontSize: 10
              }}>
                {on ? '● CONNECTED' : 'CONNECT →'}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ============== FEATURES GRID ==============
function Features() {
  const items = [
    { i: 'plan', t: 'AI Campaign Planner', n: '01', b: 'Add a product, hit launch. Caddie returns a full campaign plan — channels, timing, content ideas, and a budget estimate — tuned to your past performance and brand voice.' },
    { i: 'cal', t: 'Marketing Calendar', n: '02', b: 'A living posting and campaign schedule. Knows your launches, the holidays that matter for your business, and when your audience actually shows up.' },
    { i: 'list', t: 'Reminders & Scripts', n: '03', b: 'Each task arrives with its copy already written — captions, email scripts, ad copy. Approve, tweak, and send without staring at a blank box.' },
    { i: 'coach', t: 'Personal AI Coach', n: '04', b: 'A chatbot trained on your business. Ask anything from "Should I run a sale?" to "What\'s wrong with this caption?" — get answers, not lectures.' },
    { i: 'video', t: 'Video Reach Tracker', n: '05', b: 'Drop in a Reel, Short, or TikTok before posting. Get a reach estimate, an engagement score, and three concrete ways to make it land harder.' },
    { i: 'cost', t: 'Campaign Cost Estimator', n: '06', b: 'See what a campaign will likely cost — and what it will likely return — before a single dollar leaves your account.' },
  ];
  return (
    <section id="features" style={{ borderBottom: '1px solid var(--ink)' }}>
      <div className="shell section-pad">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span className="mono" style={{ color: 'var(--mute)' }}>§ 03 — THE TOOLKIT</span>
          <span className="mono" style={{ color: 'var(--mute)' }}>SIX TOOLS, ONE BRAIN</span>
        </div>
        <hr className="hair-ink" style={{ marginTop: 16 }}/>
        <div className="stack-on-mobile" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, padding: '40px 0 64px' }}>
          <h2 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(48px, 6vw, 92px)', lineHeight: 0.95, letterSpacing: '-0.025em', margin: 0 }}>
            Everything a marketing team would do, <span style={{ fontStyle: 'italic' }}>quietly</span> done.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--mute-2)', margin: 'auto 0', maxWidth: 460 }}>
            Six purpose-built tools, all aware of each other. The Planner schedules into the Calendar; the Calendar pulls scripts from the same brain that runs the Coach; the Tracker grades the videos that the Planner suggested. Nothing lives in a silo.
          </p>
        </div>
        <div className="stack-on-mobile" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderTop: '1px solid var(--ink)' }}>
          {items.map((it, i) => (
            <FeatureCell key={it.t} {...it} edgeRight={(i % 3) !== 2} edgeBottom={i < 3} />
          ))}
        </div>
      </div>
    </section>
  );
}

function FeatureCell({ i, t, n, b, edgeRight, edgeBottom }) {
  return (
    <article style={{
      padding: '36px 36px 40px',
      borderRight: edgeRight ? '1px solid var(--hair)' : 'none',
      borderBottom: edgeBottom ? '1px solid var(--ink)' : 'none',
      display: 'flex', flexDirection: 'column', gap: 14, minHeight: 280
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div style={{ width: 44, height: 44, border: '1px solid var(--ink)', borderRadius: 10, display: 'grid', placeItems: 'center' }}>
          <Icon name={i} size={20} stroke={1.4}/>
        </div>
        <span className="mono" style={{ color: 'var(--mute)' }}>{n}</span>
      </div>
      <h3 style={{ fontFamily: 'var(--serif)', fontSize: 30, fontWeight: 400, margin: '14px 0 0', letterSpacing: '-0.01em' }}>{t}</h3>
      <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--mute-2)', margin: 0, textWrap: 'pretty' }}>{b}</p>
    </article>
  );
}

// ============== HOW IT WORKS ==============
function HowItWorks() {
  const steps = [
    { n: '01', t: 'Connect your accounts.', b: 'Plug in Instagram, Meta Ads, your email tool, your store. Caddie reads what\'s already there — past campaigns, audience, what worked, what didn\'t.' },
    { n: '02', t: 'Tell us your goals.', b: 'A two-minute conversation: what you sell, who you sell to, how much you want to spend, what "winning" this month looks like.' },
    { n: '03', t: 'Caddie builds the plan.', b: 'You wake up to a calendar, a to-do list, and the first three things to post — already written. Approve, edit, or hand back.' },
  ];
  return (
    <section id="how" style={{ background: 'var(--paper-warm)', borderBottom: '1px solid var(--ink)' }}>
      <div className="shell section-pad">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
          <span className="mono" style={{ color: 'var(--mute)' }}>§ 04 — THE FLOW</span>
          <span className="mono" style={{ color: 'var(--mute)' }}>SETUP IN UNDER 4 MINUTES</span>
        </div>
        <hr className="hair-ink"/>
        <h2 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(48px, 6vw, 92px)', lineHeight: 0.95, letterSpacing: '-0.025em', margin: '40px 0 64px', maxWidth: 900 }}>
          Three steps. One coffee. <span style={{ fontStyle: 'italic' }}>That's it.</span>
        </h2>
        <div className="stack-on-mobile" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--ink)' }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              padding: '36px 36px 8px',
              borderRight: i < 2 ? '1px solid var(--hair-strong)' : 'none',
              position: 'relative'
            }}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 96, lineHeight: 1, letterSpacing: '-0.04em' }}>{s.n}</div>
              <h3 style={{ fontFamily: 'var(--serif)', fontSize: 28, fontWeight: 400, margin: '20px 0 10px' }}>{s.t}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--mute-2)', margin: 0, maxWidth: 360 }}>{s.b}</p>
              {i < 2 && (
                <div style={{ position: 'absolute', top: 56, right: -10, color: 'var(--mute)' }}>
                  <Icon name="arrow" size={20}/>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============== INTEGRATIONS ==============
function Integrations() {
  // wordmark-style, generic — no real logos.
  const items = ['Instagram', 'Meta Ads', 'TikTok', 'Email', 'Shopify', 'Google', 'Klaviyo', 'YouTube'];
  return (
    <section style={{ borderBottom: '1px solid var(--ink)' }}>
      <div className="shell section-pad-sm">
        <div className="stack-on-mobile" style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: 40, alignItems: 'center' }}>
          <div>
            <div className="mono" style={{ color: 'var(--mute)' }}>§ 05 — INTEGRATIONS</div>
            <h3 style={{ fontFamily: 'var(--serif)', fontSize: 32, fontWeight: 400, margin: '8px 0 0', letterSpacing: '-0.01em' }}>Plays well with the tools you already use.</h3>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 0, borderLeft: '1px solid var(--hair)' }}>
            {items.map((it, i) => (
              <div key={it} style={{
                flex: '1 1 25%',
                padding: '22px 20px',
                borderRight: '1px solid var(--hair)',
                borderBottom: i < 4 ? '1px solid var(--hair)' : 'none',
                fontFamily: 'var(--serif)', fontSize: 22, letterSpacing: '-0.01em',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between'
              }}>
                <span>{it}</span>
                <Icon name="check" size={14} stroke={1.6}/>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============== BETA BANNER ==============
function BetaBanner({ go }) {
  const [betaEmail, setBetaEmail] = useState('');
  const submitInline = (e) => {
    e.preventDefault();
    if (!/^\S+@\S+\.\S+$/.test(betaEmail)) return;
    // pass email forward to the application page
    try { sessionStorage.setItem('cc:applyEmail', betaEmail); } catch (_) {}
    go('apply');
  };
  return (
    <section id="beta" style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
      <div className="shell stack-on-mobile beta-pad" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <span className="mono" style={{ opacity: 0.6 }}>§ 06 — THE OFFER · ONLY 200 BETA SPOTS</span>
          <h2 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(48px, 6vw, 96px)', lineHeight: 0.95, letterSpacing: '-0.025em', margin: '16px 0 0' }}>
            Apply for Beta — <span style={{ fontStyle: 'italic' }}>It's Free.</span>
          </h2>
          <p style={{ fontFamily: 'var(--serif)', fontSize: 26, lineHeight: 1.35, opacity: 0.75, margin: '20px 0 0', maxWidth: 520 }}>
            Beta is completely free. When we go paid, beta members get their first 6 months on us.
          </p>
          <form onSubmit={submitInline} className="beta-inline-form" style={{
              marginTop: 28, display: 'flex', alignItems: 'center', gap: 8,
              background: 'var(--paper)', borderRadius: 999, padding: '6px 6px 6px 18px', maxWidth: 520
            }}>
              <input
                type="email" required
                value={betaEmail} onChange={(e) => setBetaEmail(e.target.value)}
                placeholder="you@business.com"
                style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', color: 'var(--ink)', fontSize: 15, fontFamily: 'inherit', padding: '12px 0' }}
              />
              <button type="submit" style={{
                background: 'var(--ink)', color: 'var(--paper)', border: 'none',
                padding: '13px 20px', borderRadius: 999, fontSize: 14, fontWeight: 500, cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'inherit', whiteSpace: 'nowrap'
              }}>
                Apply for Free Beta <Icon name="arrow" size={14}/>
              </button>
            </form>
          <div className="mono" style={{ opacity: 0.55, marginTop: 14 }}>BETA CLOSES WHEN WE HIT CAPACITY</div>
        </div>
        <div style={{ borderLeft: '1px solid rgba(255,255,255,0.18)', paddingLeft: 40 }}>
          <div className="mono" style={{ opacity: 0.6, marginBottom: 16 }}>PRICING WHEN WE LAUNCH</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
            <span style={{ fontFamily: 'var(--serif)', fontSize: 96, lineHeight: 1 }}>$20</span>
            <span style={{ opacity: 0.6, fontSize: 18 }}>– $50</span>
            <span className="mono" style={{ opacity: 0.6 }}>/MONTH</span>
          </div>
          <p style={{ fontSize: 15, lineHeight: 1.6, opacity: 0.75, margin: '24px 0 0', maxWidth: 360 }}>
            A free tier covers solo founders getting started. Paid tiers add ad budgets, deeper integrations, and the auto-send email engine. Beta members lock in 6 months free.
          </p>
          <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {['Full Pro access — every feature unlocked', 'Connect Facebook, Instagram, Shopify & more', 'Shape the product — your feedback builds it', 'Lock in 6 months free before anyone else'].map(x => (
              <li key={x} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14 }}>
                <Icon name="check" size={14} stroke={2}/> <span style={{ opacity: 0.9 }}>{x}</span>
              </li>
            ))}
          </ul>

        </div>
      </div>
    </section>
  );
}

// ============== WAITLIST ==============
function Waitlist({ go }) {
  const [email, setEmail] = useState('');
  const [biz, setBiz] = useState('');
  const [size, setSize] = useState('Just me');
  const [count, setCount] = useState(2148);

  useEffect(() => {
    // gentle live counter
    const id = setInterval(() => setCount(c => c + (Math.random() > 0.6 ? 1 : 0)), 4000);
    return () => clearInterval(id);
  }, []);

  const submit = (e) => {
    e.preventDefault();
    if (!/^\S+@\S+\.\S+$/.test(email)) return;
    try {
      sessionStorage.setItem('cc:applyEmail', email);
      sessionStorage.setItem('cc:applyBiz', biz);
      sessionStorage.setItem('cc:applySize', size);
    } catch (_) {}
    go('apply');
  };

  return (
    <section id="waitlist" style={{ borderBottom: '1px solid var(--ink)' }}>
      <div className="shell stack-on-mobile section-pad" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'start' }}>
        <div>
          <span className="mono" style={{ color: 'var(--mute)' }}>§ 07 — GET FREE BETA ACCESS</span>
          <h2 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(56px, 7vw, 120px)', lineHeight: 0.92, letterSpacing: '-0.03em', margin: '16px 0 0' }}>
            Apply for beta. <span style={{ fontStyle: 'italic' }}>Spots are limited.</span>
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--mute-2)', maxWidth: 460, marginTop: 24 }}>
            Caddie is still in active testing — we're letting beta users in slowly so we can hand-tune the product to real businesses. Drop your email and tell us a little about what you sell, and we'll be in touch as spots open up.
          </p>
          <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ display: 'flex' }}>
              {['RG','MK','JO','AL','TS'].map((x, i) => (
                <div key={x} style={{
                  width: 30, height: 30, borderRadius: 999, background: 'var(--ink)', color: 'var(--paper)',
                  border: '2px solid var(--paper)', display: 'grid', placeItems: 'center',
                  fontSize: 10, fontFamily: 'var(--mono)', marginLeft: i ? -10 : 0
                }}>{x}</div>
              ))}
            </div>
            <div className="mono" style={{ color: 'var(--mute)' }}>
              <span style={{ color: 'var(--ink)', fontWeight: 600 }}>{count.toLocaleString()}</span> &nbsp;FOUNDERS ON THE LIST
            </div>
          </div>
        </div>

        <div style={{ border: '1px solid var(--ink)', borderRadius: 14, padding: 32, background: 'var(--paper-warm)' }}>
            <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <div className="mono" style={{ color: 'var(--ink)', fontWeight: 600 }}>ONLY 200 BETA SPOTS · {Math.max(0, 200 - (count - 2148))} REMAINING</div>
                <div className="mono" style={{ color: 'var(--mute)' }}>~ 30 SECONDS</div>
              </div>

              <Field label="EMAIL" required>
                <input type="email" required value={email} onChange={e => setEmail(e.target.value)} placeholder="you@yourbusiness.com" style={inputCss}/>
              </Field>

              <Field label="BUSINESS NAME">
                <input value={biz} onChange={e => setBiz(e.target.value)} placeholder="Your business name" style={inputCss}/>
              </Field>

              <Field label="TEAM SIZE">
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  {['Just me', '2–5', '6–20', '20+'].map(s => (
                    <button type="button" key={s} onClick={() => setSize(s)} className="mono" style={{
                      padding: '8px 14px', borderRadius: 999, border: '1px solid var(--ink)',
                      background: size === s ? 'var(--ink)' : 'transparent',
                      color: size === s ? 'var(--paper)' : 'var(--ink)',
                      cursor: 'pointer', fontSize: 11
                    }}>{s}</button>
                  ))}
                </div>
              </Field>

              <button type="submit" style={{
                marginTop: 8, padding: '16px 22px', background: 'var(--ink)', color: 'var(--paper)',
                border: 'none', borderRadius: 999, cursor: 'pointer', fontSize: 14, fontWeight: 500,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8
              }}>
                Continue application <Icon name="arrow" size={16}/>
              </button>
              <p className="mono" style={{ color: 'var(--mute)', textAlign: 'center', margin: 0 }}>
                NO SPAM · UNSUBSCRIBE ANY TIME
              </p>
            </form>
        </div>
      </div>
    </section>
  );
}

const inputCss = {
  width: '100%', padding: '12px 14px',
  border: '1px solid var(--ink)', borderRadius: 8,
  background: 'var(--paper)', fontSize: 14, fontFamily: 'inherit',
  outline: 'none'
};

function Field({ label, required, children }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <span className="mono" style={{ color: 'var(--mute)' }}>{label}{required && <span style={{ color: 'var(--ink)' }}> *</span>}</span>
      {children}
    </label>
  );
}

function Confirmation({ email }) {
  return (
    <div style={{ textAlign: 'center', padding: '20px 8px' }}>
      <div style={{ width: 56, height: 56, borderRadius: 999, background: 'var(--ink)', color: 'var(--paper)', display: 'grid', placeItems: 'center', margin: '0 auto 20px' }}>
        <Icon name="check" size={26} stroke={2}/>
      </div>
      <h3 style={{ fontFamily: 'var(--serif)', fontSize: 36, fontWeight: 400, margin: 0, letterSpacing: '-0.01em' }}>You're on the list.</h3>
      <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--mute-2)', margin: '14px auto 0', maxWidth: 360 }}>
        We just sent a confirmation to <strong style={{ color: 'var(--ink)' }}>{email}</strong>. Caddie is still in testing — we'll reach out as beta spots open up, and you'll get a free year of paid plans when we launch them.
      </p>
      <div className="mono" style={{ marginTop: 20, color: 'var(--mute)' }}>APPLICATION RECEIVED · STILL IN TESTING</div>
    </div>
  );
}

// ============== FOOTER ==============
function Footer() {
  return (
    <footer style={{ background: 'var(--paper)' }}>
      <div className="shell stack-on-mobile" style={{ padding: '64px 0 28px 0', display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <Logo />
          <p style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.3, margin: '20px 0 0', maxWidth: 320, letterSpacing: '-0.01em' }}>
            A quiet, capable marketing team — for businesses small enough to know every customer's name.
          </p>
        </div>
        <FooterCol title="Product" items={['Features', 'How it works', 'Dashboard preview', 'Integrations', 'Beta program']} />
        <FooterCol title="Company" items={['About', 'Manifesto', 'Roadmap', 'Press kit', 'Contact']} />
        <FooterCol title="Resources" items={['Marketing playbook', 'Small biz field guide', 'Help center', 'Terms', 'Privacy']} />
      </div>
      <div style={{ borderTop: '1px solid var(--hair)' }}>
        <div className="shell" style={{ padding: '20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} className="mono">
          <span style={{ color: 'var(--mute)' }}>© 2026 CAMPAIGN CADDIE — MADE FOR THE FOUNDER OF ONE</span>
          <span style={{ color: 'var(--mute)' }}>BROOKLYN · LISBON · REMOTE</span>
        </div>
      </div>
    </footer>
  );
}
function FooterCol({ title, items }) {
  return (
    <div>
      <div className="mono" style={{ color: 'var(--mute)', marginBottom: 14 }}>{title.toUpperCase()}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
        {items.map(it => (
          <li key={it}><a href="#" style={{ textDecoration: 'none', fontSize: 14 }}>{it}</a></li>
        ))}
      </ul>
    </div>
  );
}

// ============== SIGN-IN PAGE ==============
function SignInPage({ go }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const [showPass, setShowPass] = useState(false);

  // Demo: any accepted@campaigncaddie.com + any password signs in
  const submit = (e) => {
    e.preventDefault();
    setError('');
    if (!/^\S+@\S+\.\S+$/.test(email)) { setError('Enter a valid email address.'); return; }
    if (password.length < 4) { setError('Password must be at least 4 characters.'); return; }
    setLoading(true);
    setTimeout(() => {
      // Demo acceptance check — in production this hits your auth API
      if (email.toLowerCase() === 'demo@campaigncaddie.com') {
        setError('That account is not found. Beta access is invite-only.');
        setLoading(false);
        return;
      }
      try { sessionStorage.setItem('cc:authed', '1'); } catch (_) {}
      go('app');
    }, 900);
  };

  return (
    <div style={{
      minHeight: '100vh', display: 'grid', placeItems: 'center',
      background: 'var(--paper)', padding: 24,
    }}>
      <div style={{ width: '100%', maxWidth: 420 }}>
        {/* Logo */}
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <button onClick={() => go('home')} style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            <svg width="24" height="24" viewBox="0 0 64 64" fill="none">
              <g stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><line x1="32" y1="32" x2="32" y2="14"/><line x1="32" y1="32" x2="49.12" y2="26.44"/><line x1="32" y1="32" x2="42.58" y2="46.56"/><line x1="32" y1="32" x2="21.42" y2="46.56"/><line x1="32" y1="32" x2="14.88" y2="26.44"/></g><circle cx="32" cy="32" r="5" fill="currentColor"/><circle cx="32" cy="14" r="3.3" fill="currentColor"/><circle cx="49.12" cy="26.44" r="3.3" fill="currentColor"/><circle cx="42.58" cy="46.56" r="3.3" fill="currentColor"/><circle cx="21.42" cy="46.56" r="3.3" fill="currentColor"/><circle cx="14.88" cy="26.44" r="3.3" fill="currentColor"/>
            </svg>
            <span style={{ fontFamily: 'var(--serif)', fontSize: 22 }}>Campaign Caddie</span>
          </button>
        </div>

        {/* Card */}
        <div style={{ border: '1px solid var(--ink)', borderRadius: 14, padding: '40px 36px', background: 'var(--paper-warm)' }}>
          <div className="mono" style={{ color: 'var(--mute)', marginBottom: 6 }}>BETA MEMBER LOGIN</div>
          <h1 style={{ fontFamily: 'var(--serif)', fontSize: 36, letterSpacing: '-0.02em', margin: '0 0 6px' }}>
            Welcome back.
          </h1>
          <p style={{ fontSize: 14, color: 'var(--mute-2)', margin: '0 0 28px', lineHeight: 1.5 }}>
            Beta access is invite-only. If you haven't been accepted yet,{' '}
            <button onClick={() => go('apply')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--ink)', textDecoration: 'underline', fontFamily: 'inherit', fontSize: 14, padding: 0 }}>apply here</button>.
          </p>

          <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: '0.06em' }}>EMAIL</span>
              <input
                type="email" required autoFocus
                value={email} onChange={e => { setEmail(e.target.value); setError(''); }}
                placeholder="you@business.com"
                style={signInInput}
              />
            </label>

            <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <span style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span className="mono" style={{ fontSize: 11, letterSpacing: '0.06em' }}>PASSWORD</span>
                <button type="button" onClick={() => {}} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--mute-2)', fontFamily: 'var(--mono)', fontSize: 10, padding: 0 }}>
                  FORGOT PASSWORD?
                </button>
              </span>
              <div style={{ position: 'relative' }}>
                <input
                  type={showPass ? 'text' : 'password'} required
                  value={password} onChange={e => { setPassword(e.target.value); setError(''); }}
                  placeholder="••••••••"
                  style={{ ...signInInput, paddingRight: 40 }}
                />
                <button type="button" onClick={() => setShowPass(s => !s)} style={{
                  position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)',
                  background: 'none', border: 'none', cursor: 'pointer', color: 'var(--mute-2)',
                  fontFamily: 'var(--mono)', fontSize: 10, padding: 0
                }}>
                  {showPass ? 'HIDE' : 'SHOW'}
                </button>
              </div>
            </label>

            {error && (
              <div style={{
                background: 'rgba(200,40,40,0.07)', border: '1px solid rgba(200,40,40,0.3)',
                borderRadius: 8, padding: '10px 14px', fontSize: 13, color: '#b22222'
              }}>
                {error}
              </div>
            )}

            <button type="submit" disabled={loading} style={{
              marginTop: 4, padding: '15px 22px',
              background: loading ? 'rgba(10,10,10,0.4)' : 'var(--ink)',
              color: 'var(--paper)', border: 'none', borderRadius: 999,
              cursor: loading ? 'not-allowed' : 'pointer',
              fontSize: 14, fontWeight: 500, fontFamily: 'inherit',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}>
              {loading ? 'Signing in…' : <>Sign in <Icon name="arrow" size={15}/></>}
            </button>
          </form>
        </div>

        <p className="mono" style={{ textAlign: 'center', color: 'var(--mute)', marginTop: 20, fontSize: 10 }}>
          NOT A BETA MEMBER YET? &nbsp;<button onClick={() => go('apply')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--ink)', fontFamily: 'var(--mono)', fontSize: 10, textDecoration: 'underline', padding: 0 }}>APPLY FOR FREE BETA →</button>
        </p>
      </div>
    </div>
  );
}

const signInInput = {
  width: '100%', padding: '13px 16px',
  border: '1px solid var(--ink)', borderRadius: 8,
  background: 'var(--paper)', fontSize: 15, fontFamily: 'inherit',
  outline: 'none', color: 'var(--ink)',
};

// ============== APP (full-screen product) ==============
function AppPage({ go }) {
  const [view, setView] = useState('dashboard');
  const [coachOpen, setCoachOpen] = useState(true);
  const [navOpen, setNavOpen] = useState(true);
  const crumb = NAV_ITEMS.find(n => n.id === view)?.label || 'Dashboard';
  return (
    <div style={{
      minHeight: '100vh',
      background: 'var(--paper)',
      display: 'flex', flexDirection: 'column',
      color: 'var(--ink)',
    }}>
      {/* Top bar — product chrome */}
      <header style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '10px 18px',
        borderBottom: '1px solid var(--hair)',
        background: 'var(--paper-warm)',
        position: 'sticky', top: 0, zIndex: 10,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <button onClick={() => setNavOpen(o => !o)} aria-label="Toggle nav" style={iconButton}>
            <Icon name="list" size={16}/>
          </button>
          <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }} style={{
            display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none', color: 'var(--ink)'
          }}>
            <svg width="20" height="20" viewBox="0 0 64 64" fill="none">
              <g stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><line x1="32" y1="32" x2="32" y2="14"/><line x1="32" y1="32" x2="49.12" y2="26.44"/><line x1="32" y1="32" x2="42.58" y2="46.56"/><line x1="32" y1="32" x2="21.42" y2="46.56"/><line x1="32" y1="32" x2="14.88" y2="26.44"/></g><circle cx="32" cy="32" r="5" fill="currentColor"/><circle cx="32" cy="14" r="3.3" fill="currentColor"/><circle cx="49.12" cy="26.44" r="3.3" fill="currentColor"/><circle cx="42.58" cy="46.56" r="3.3" fill="currentColor"/><circle cx="21.42" cy="46.56" r="3.3" fill="currentColor"/><circle cx="14.88" cy="26.44" r="3.3" fill="currentColor"/>
            </svg>
            <span style={{ fontFamily: 'var(--serif)', fontSize: 17 }}>Campaign Caddie</span>
          </a>
          <span className="mono" style={{
            fontSize: 10, padding: '3px 7px', border: '1px solid var(--ink)', borderRadius: 3,
          }}>BETA · COHORT 03</span>
        </div>

        <div style={{
          display: 'flex', alignItems: 'center', gap: 10, flex: 1, maxWidth: 520, margin: '0 32px',
          border: '1px solid var(--hair-strong)', borderRadius: 999, padding: '7px 14px',
          background: 'var(--paper)',
        }}>
          <Icon name="spark" size={13} stroke={1.4}/>
          <input
            placeholder="Ask Caddie or jump to anything…"
            style={{ flex: 1, border: 'none', outline: 'none', fontSize: 13, background: 'transparent', fontFamily: 'inherit' }}
          />
          <span className="mono" style={{ color: 'var(--mute)', fontSize: 10 }}>⌘ K</span>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <button onClick={() => setCoachOpen(o => !o)} aria-label="Toggle coach" style={{
            ...iconButton,
            background: coachOpen ? 'var(--ink)' : 'transparent',
            color: coachOpen ? 'var(--paper)' : 'var(--ink)',
          }}>
            <Icon name="spark" size={14}/>
          </button>
          <button aria-label="Notifications" style={iconButton}>
            <NotifBell />
          </button>
          <button aria-label="Help" style={iconButton}>
            <span style={{ fontSize: 13, fontWeight: 500 }}>?</span>
          </button>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8, padding: '4px 10px 4px 4px',
            border: '1px solid var(--hair-strong)', borderRadius: 999, background: 'var(--paper)',
          }}>
            <div style={{
              width: 26, height: 26, borderRadius: 999, background: 'var(--ink)', color: 'var(--paper)',
              display: 'grid', placeItems: 'center', fontSize: 10, fontFamily: 'var(--mono)',
            }}>RG</div>
            <span style={{ fontSize: 12, fontWeight: 500 }}>Reema</span>
          </div>
          <button onClick={() => {
            try { sessionStorage.removeItem('cc:authed'); } catch (_) {}
            go('home');
          }} className="mono" style={{
            background: 'transparent', color: 'var(--mute-2)', padding: '8px 12px',
            border: '1px solid var(--hair-strong)', borderRadius: 999,
            cursor: 'pointer', fontFamily: 'inherit', fontSize: 10,
            letterSpacing: '0.06em', textTransform: 'uppercase'
          }}>
            Sign out
          </button>
        </div>
      </header>

      {/* Body grid */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: `${navOpen ? '232px' : '0px'} 1fr ${coachOpen ? '380px' : '0px'}`,
        flex: 1, minHeight: 0,
        transition: 'grid-template-columns 0.2s ease',
      }} className="app-body-grid">
        {/* Sidebar */}
        <aside style={{
          borderRight: navOpen ? '1px solid var(--hair)' : 'none',
          padding: navOpen ? '20px 14px' : 0,
          display: navOpen ? 'flex' : 'none',
          flexDirection: 'column',
          gap: 1,
          overflow: 'hidden',
          background: 'var(--paper)',
        }}>
          <div className="mono" style={{ color: 'var(--mute)', padding: '0 10px 12px' }}>WORKSPACE</div>
          {NAV_ITEMS.map(item => {
            const active = view === item.id;
            return (
              <button key={item.id} onClick={() => setView(item.id)} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '10px 12px', borderRadius: 6, fontSize: 13,
                background: active ? 'var(--ink)' : 'transparent',
                color: active ? 'var(--paper)' : 'var(--ink)',
                border: 'none', cursor: 'pointer', textAlign: 'left',
                fontFamily: 'inherit', fontWeight: active ? 500 : 400,
                transition: 'background 0.15s'
              }}
              onMouseEnter={e => { if (!active) e.currentTarget.style.background = 'rgba(10,10,10,0.05)'; }}
              onMouseLeave={e => { if (!active) e.currentTarget.style.background = 'transparent'; }}>
                <Icon name={item.icon} size={14} stroke={1.5}/>
                <span style={{ flex: 1 }}>{item.label}</span>
                {item.id === 'todos' && <span className="mono" style={{
                  fontSize: 9, padding: '2px 5px', borderRadius: 3,
                  background: active ? 'rgba(255,255,255,0.18)' : 'var(--ink)',
                  color: active ? 'var(--paper)' : 'var(--paper)',
                }}>4</span>}
              </button>
            );
          })}

          <div style={{ marginTop: 24, padding: '0 10px' }}>
            <div className="mono" style={{ color: 'var(--mute)', marginBottom: 8 }}>QUICK ACTIONS</div>
            <button style={{
              ...pillBtn, width: '100%', justifyContent: 'flex-start', padding: '8px 12px',
              fontSize: 12, marginBottom: 6,
            }}><Icon name="plus" size={13}/> New campaign</button>
            <button style={{
              ...pillBtn, width: '100%', justifyContent: 'flex-start', padding: '8px 12px',
              fontSize: 12,
            }}><Icon name="cal" size={13}/> Schedule post</button>
          </div>

          <div style={{ marginTop: 'auto', borderTop: '1px solid var(--hair)', paddingTop: 14, padding: '14px 6px 0' }}>
            <div style={{ background: 'var(--paper-warm)', border: '1px solid var(--hair)', borderRadius: 8, padding: 12 }}>
              <div className="mono" style={{ color: 'var(--mute)' }}>BETA TIP</div>
              <div style={{ fontSize: 12, lineHeight: 1.5, marginTop: 6 }}>
                Things will occasionally look weird. Hit <span className="mono">?</span> to chat with the team.
              </div>
            </div>
          </div>
        </aside>

        {/* Main */}
        <section style={{ overflow: 'auto', minWidth: 0 }}>
          <ViewSwitcher view={view} setView={setView} />
        </section>

        {/* Coach */}
        {coachOpen && (
          <div style={{ minWidth: 0, display: 'flex', flexDirection: 'column' }}>
            <CoachPanel view={view} crumb={crumb} />
          </div>
        )}
      </div>

      <style>{`
        @media (max-width: 900px) {
          .app-body-grid { grid-template-columns: 1fr !important; }
          .app-body-grid > aside, .app-body-grid > div:last-child { display: none !important; }
        }
      `}</style>
    </div>
  );
}

const iconButton = {
  width: 32, height: 32, borderRadius: 999,
  border: '1px solid var(--hair-strong)', background: 'var(--paper)',
  display: 'grid', placeItems: 'center', cursor: 'pointer',
  color: 'var(--ink)', padding: 0,
  fontFamily: 'inherit',
};

function NotifBell() {
  return (
    <span style={{ position: 'relative', display: 'grid', placeItems: 'center', width: 14, height: 14 }}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
        <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
      </svg>
      <span style={{ position: 'absolute', top: -2, right: -2, width: 7, height: 7, borderRadius: 999, background: 'var(--ink)', border: '1.5px solid var(--paper)' }}/>
    </span>
  );
}

// ============== APP ==============
function App() {
  const [page, setPage] = useState('home');
  const go = (p, hash) => {
    setPage(p);
    setTimeout(() => {
      if (hash) {
        const el = document.querySelector(hash);
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      } else {
        window.scrollTo({ top: 0, behavior: 'smooth' });
      }
    }, 50);
  };
  const PageComp = window.PAGES?.[page];
  const isAuthed = () => { try { return sessionStorage.getItem('cc:authed') === '1'; } catch (_) { return false; } };
  const isApp = page === 'app';
  const isSignIn = page === 'signin';
  if (isApp) {
    if (!isAuthed()) { setTimeout(() => go('signin'), 0); return null; }
    return (
      <main>
        {window.RealApp ? <window.RealApp go={go} /> : <AppPage go={go} />}
      </main>
    );
  }
  if (isSignIn) {
    return (
      <main>
        <SignInPage go={go} />
      </main>
    );
  }
  return (
    <main>
      <PageNav page={page} go={go} />
      {page === 'home' ? (
        <>
          <Hero go={go} />
          <Ticker />
          <Problem />
          <DashboardPreview />
          <Features />
          <HowItWorks />
          <Integrations />
          <BetaBanner go={go} />
          <Waitlist go={go} />
        </>
      ) : PageComp ? (
        <PageComp go={go} />
      ) : null}
      <PageFooter go={go} />
      <SupportChat />
    </main>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);