// Madrona home — reuses the kit's section vocabulary, wired to shared chrome,
// with switchable hero directions (the 3 brief options) via Tweaks.
(function () {
const HDS = window.MadronaDesignSystem_c8327b;
const { Button, Card } = HDS;

const HERO_VARIANTS = {
  v1: {
    eyebrow: 'Secure runner marketplace',
    title: 'Put idle compute to work.',
    sub: 'Madrona is a secure runner marketplace where software teams buy lower-cost CI minutes and compute providers earn money by running approved jobs on spare machines.',
    primary: 'Start earning', primaryVariant: 'provider', primaryHref: 'for-providers.html', primaryIcon: 'arrowRight',
    secondary: 'Buy CI minutes', secondaryHref: 'for-teams.html',
  },
  v2: {
    eyebrow: 'A two-sided CI marketplace',
    title: 'Cheaper CI for teams. Earnings for machines.',
    sub: 'Madrona connects GitHub repositories to a distributed network of external runners, helping teams reduce CI costs while giving providers a way to monetize idle compute.',
    primary: 'Become a runner', primaryVariant: 'provider', primaryHref: 'for-providers.html', primaryIcon: 'server',
    secondary: 'Connect GitHub', secondaryHref: 'for-teams.html',
  },
  v3: {
    eyebrow: 'Earn from spare compute',
    title: 'Your spare CPU cycles are worth something.',
    sub: 'Install the Madrona agent, register your machine, and earn when approved CI jobs run on your hardware. Teams get lower-cost runner minutes. You get paid for useful compute.',
    primary: 'Install the agent', primaryVariant: 'provider', primaryHref: 'for-providers.html', primaryIcon: 'server',
    secondary: 'See how it works', secondaryHref: 'how-it-works.html',
  },
};

function RoutingPanel() {
  const node = (label, sub, tone, top) => (
    <div style={{ position: 'absolute', right: 18, top, display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-sm)', padding: '9px 12px', width: 188 }}>
      <span style={{ width: 8, height: 8, borderRadius: 999, background: tone, flex: 'none' }} />
      <div style={{ minWidth: 0 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12.5, fontWeight: 600, color: 'var(--text-strong)' }}>{label}</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--text-muted)' }}>{sub}</div>
      </div>
    </div>
  );
  return (
    <div style={{ position: 'relative', height: 332, background: `${DOT_LIGHT}, var(--surface-card)`, border: '1px solid var(--border-default)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)' }}>
      <div style={{ position: 'absolute', left: 18, top: 18, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 7 }}>
        <span style={{ width: 7, height: 7, borderRadius: 999, background: 'var(--color-success)' }} />job scheduler · live
      </div>
      <div style={{ position: 'absolute', left: 18, top: 132, display: 'flex', alignItems: 'center', gap: 10, background: 'var(--ink-900)', borderRadius: 'var(--radius-md)', padding: '11px 13px', width: 176 }}>
        <span style={{ color: 'var(--madrona-300)', display: 'inline-flex' }}><Icon name="github" size={17} /></span>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12.5, fontWeight: 600, color: 'var(--ink-25)' }}>acme/api</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'rgba(242,245,241,0.6)' }}>12 jobs queued</div>
        </div>
      </div>
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }}>
        <path d="M 200 152 C 260 152, 250 64, 320 64" stroke="var(--madrona-400)" strokeWidth="2" fill="none" strokeDasharray="4 4" />
        <path d="M 200 152 C 260 152, 250 152, 320 152" stroke="var(--madrona-400)" strokeWidth="2" fill="none" strokeDasharray="4 4" />
        <path d="M 200 152 C 260 152, 250 240, 320 240" stroke="var(--madrona-400)" strokeWidth="2" fill="none" strokeDasharray="4 4" />
      </svg>
      {node('mac-mini-2', 'ubuntu · running', 'var(--color-success)', 48)}
      {node('rnr-8f2a', 'idle · ready', 'var(--evergreen-400)', 136)}
      {node('rack-07', 'arm64 · running', 'var(--color-success)', 224)}
    </div>
  );
}

function Hero({ variant }) {
  const h = HERO_VARIANTS[variant] || HERO_VARIANTS.v1;
  return (
    <section style={{ position: 'relative', ...container, paddingTop: 72, paddingBottom: 72, display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center', overflow: 'hidden' }}>
      <img src="assets/madrona-branch.svg" alt="" style={{ position: 'absolute', left: -80, top: -50, height: 340, opacity: 0.28, transform: 'rotate(-8deg)', pointerEvents: 'none' }} />
      <div style={{ position: 'relative' }}>
        <Eyebrow>{h.eyebrow}</Eyebrow>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 60, lineHeight: 1.02, letterSpacing: '-0.035em', fontWeight: 700, marginTop: 18, color: 'var(--text-strong)', textWrap: 'balance' }}>{h.title}</h1>
        <p style={{ fontSize: 19, lineHeight: 1.5, color: 'var(--text-body)', marginTop: 22, maxWidth: 480 }}>{h.sub}</p>
        <div style={{ display: 'flex', gap: 12, marginTop: 30, flexWrap: 'wrap' }}>
          <a href={h.primaryHref} style={{ textDecoration: 'none' }}><Button variant={h.primaryVariant} size="lg" iconRight={<Icon name={h.primaryIcon} size={18} />}>{h.primary}</Button></a>
          <a href={h.secondaryHref} style={{ textDecoration: 'none' }}><Button variant="secondary" size="lg">{h.secondary}</Button></a>
        </div>
        <div style={{ display: 'flex', gap: 20, marginTop: 30, fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--text-muted)', flexWrap: 'wrap' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><Icon name="check" size={15} style={{ color: 'var(--color-success)' }} />No card to browse</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><Icon name="check" size={15} style={{ color: 'var(--color-success)' }} />Policy-gated jobs</span>
        </div>
      </div>
      <RoutingPanel />
    </section>
  );
}

function PromiseBand() {
  return (
    <section style={{ background: 'var(--madrona-600)' }}>
      <div style={{ ...container, padding: '26px 28px', display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap', justifyContent: 'center' }}>
        {['Run CI for less.', 'Earn from idle compute.', 'Trust the system in between.'].map((t, i) => (
          <React.Fragment key={t}>
            {i > 0 && <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--madrona-200)' }} />}
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', color: '#F2F5F1' }}>{t}</span>
          </React.Fragment>
        ))}
      </div>
    </section>
  );
}

function TwoSided({ layout }) {
  const stacked = layout === 'stacked';
  const side = (tone, eyebrow, title, body, points, cta, ctaVariant, href) => (
    <Card tone={tone} padding="lg" style={{ display: 'flex', flexDirection: 'column' }}>
      <Eyebrow>{eyebrow}</Eyebrow>
      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 12, color: 'var(--text-strong)' }}>{title}</h3>
      <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--text-body)', marginTop: 12 }}>{body}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 11, marginTop: 20, marginBottom: 24 }}>
        {points.map((p) => (
          <div key={p} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <span style={{ color: tone === 'evergreen' ? 'var(--evergreen-500)' : 'var(--color-brand)', marginTop: 1, flex: 'none', display: 'inline-flex' }}><Icon name="check" size={17} /></span>
            <span style={{ fontSize: 14, color: 'var(--text-body)' }}>{p}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 'auto' }}><a href={href} style={{ textDecoration: 'none' }}><Button variant={ctaVariant} iconRight={<Icon name="arrowRight" size={17} />}>{cta}</Button></a></div>
    </Card>
  );
  return (
    <section style={{ ...container, paddingTop: 80, paddingBottom: 40 }}>
      <SectionHead eyebrow="A two-sided marketplace" title="Two groups that should have found each other a long time ago." style={{ marginBottom: 44 }} maxW={620} />
      <div style={{ display: 'grid', gridTemplateColumns: stacked ? '1fr' : '1fr 1fr', gap: 24 }}>
        {side('brand', 'For software teams', 'Lower your CI bill without losing control.',
          'Route eligible GitHub jobs to a secure marketplace of external runners. Keep sensitive jobs protected, control where work runs, and get full visibility into spend.',
          ['Classify workloads and set runner policies', 'Protect sensitive jobs on hosted infra', 'Full logs, artifacts, usage and spend'],
          'Connect your GitHub repo', 'primary', 'for-teams.html')}
        {side('evergreen', 'For compute providers', 'Earn from the machines you already own.',
          'Sell spare runner capacity to teams that need affordable CI. Install the agent, choose when your machine is available, and get paid for successful job minutes.',
          ['Choose which machines participate', 'You control availability and workloads', 'Madrona handles metering and payouts'],
          'Start earning with Madrona', 'provider', 'for-providers.html')}
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { icon: 'github', t: 'Connect & set policy', d: 'Repo owners connect Madrona to GitHub and define which jobs may run where.' },
    { icon: 'route', t: 'Route eligible jobs', d: 'The scheduler matches approved jobs to trusted external runners in real time.' },
    { icon: 'wallet', t: 'Meter, bill & pay out', d: 'Madrona meters successful minutes, bills teams, and pays providers automatically.' },
  ];
  return (
    <section style={{ ...container, paddingTop: 56, paddingBottom: 80 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
        {steps.map((s, i) => (
          <Card key={s.t} padding="lg">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ width: 40, height: 40, borderRadius: 'var(--radius-md)', background: 'var(--color-brand-subtle)', color: 'var(--color-brand)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={s.icon} size={20} /></span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-subtle)' }}>0{i + 1}</span>
            </div>
            <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, marginTop: 16, letterSpacing: '-0.015em', color: 'var(--text-strong)' }}>{s.t}</h4>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--text-muted)', marginTop: 8 }}>{s.d}</p>
          </Card>
        ))}
      </div>
      <div style={{ textAlign: 'center', marginTop: 32 }}>
        <a href="how-it-works.html" style={{ textDecoration: 'none' }}><Button variant="subtle" iconRight={<Icon name="arrowRight" size={16} />}>See the full flow</Button></a>
      </div>
    </section>
  );
}

function StatsBand() {
  const stat = (v, l) => (
    <div style={{ textAlign: 'center' }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 46, letterSpacing: '-0.02em', color: 'var(--ink-25)' }}>{v}</div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--madrona-300)', marginTop: 8 }}>{l}</div>
    </div>
  );
  return (
    <section style={{ background: `${DOT_DARK}, var(--evergreen-700)` }}>
      <div style={{ ...container, padding: '64px 28px' }}>
        <SectionHead dark eyebrow="Madrona handles the trust layer" title="Spare compute, turned into useful CI capacity." style={{ marginBottom: 44 }} maxW={560} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 24 }}>
          {stat('1,284', 'runners online')}
          {stat('61.4M', 'minutes run')}
          {stat('−68%', 'avg CI cost')}
          {stat('$0.004', 'per minute')}
        </div>
      </div>
    </section>
  );
}

const HOME_TWEAKS = /*EDITMODE-BEGIN*/{ "heroVariant": "v1", "twoSidedLayout": "split", "showPromise": true }/*EDITMODE-END*/;

function Home() {
  const [t, setTweak] = useTweaks(HOME_TWEAKS);
  return (
    <div style={{ background: 'var(--surface-page)', minHeight: '100vh' }}>
      <Nav active="home" />
      <Hero variant={t.heroVariant} />
      {t.showPromise && <PromiseBand />}
      <TwoSided layout={t.twoSidedLayout} />
      <HowItWorks />
      <StatsBand />
      <CtaBand title="Your spare CPU cycles are worth something." sub="Install the agent, register your machine, and earn when approved CI jobs run on your hardware." primary="Install the agent" primaryIcon="server" primaryHref="for-providers.html" secondary="See how it works" secondaryHref="how-it-works.html" providerCta />
      <Footer />
      <TweaksPanel>
        <TweakSection label="Hero direction" />
        <TweakRadio label="Headline" value={t.heroVariant} options={['v1', 'v2', 'v3']} onChange={(v) => setTweak('heroVariant', v)} />
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted, #888)', padding: '0 2px 4px', lineHeight: 1.5 }}>
          v1 “Put idle compute to work” · v2 “Cheaper CI…” · v3 “Spare CPU cycles…”
        </div>
        <TweakSection label="Layout" />
        <TweakRadio label="Two-sided" value={t.twoSidedLayout} options={['split', 'stacked']} onChange={(v) => setTweak('twoSidedLayout', v)} />
        <TweakToggle label="Promise band" value={t.showPromise} onChange={(v) => setTweak('showPromise', v)} />
      </TweaksPanel>
    </div>
  );
}
window.PageApp = Home;
})();