// Madrona — How it works. Three-phase flow, two-sided journeys, trust layer.
(function () {
const HWDS = window.MadronaDesignSystem_c8327b;
const { Button, Card, Badge } = HWDS;

const sectionPad = { ...container, paddingTop: 76, paddingBottom: 76 };

function Hero() {
  return (
    <section style={{ ...container, paddingTop: 76, paddingBottom: 16, textAlign: 'center' }}>
      <Eyebrow style={{ display: 'inline-block' }}>How it works</Eyebrow>
      <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 54, lineHeight: 1.04, letterSpacing: '-0.035em', fontWeight: 700, marginTop: 16, color: 'var(--text-strong)', maxWidth: 740, marginInline: 'auto', textWrap: 'balance' }}>Connect, route, and settle — Madrona owns the trust layer between.</h1>
      <p style={{ fontSize: 18, lineHeight: 1.5, color: 'var(--text-body)', marginTop: 18, maxWidth: 580, marginInline: 'auto' }}>Repo owners set policy. The scheduler matches approved jobs to trusted runners. Madrona meters every successful minute, bills teams, and pays providers.</p>
    </section>
  );
}

/* ---- three-phase ---- */
function Phases() {
  const phases = [
    { icon: 'github', t: 'Connect & set policy', d: 'Connect Madrona to GitHub and define which job classes may run where. Sensitive work is pinned to hosted infra.' },
    { icon: 'route', t: 'Route eligible jobs', d: 'The scheduler matches approved jobs to trusted external runners by trust tier, architecture and availability — in real time.' },
    { icon: 'wallet', t: 'Meter, bill & pay out', d: 'Every successful minute is metered. Teams are billed at $0.004/min, providers are paid for the work that completed.' },
  ];
  return (
    <section style={sectionPad}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 0, position: 'relative' }}>
        {phases.map((p, i) => (
          <div key={p.t} style={{ position: 'relative', padding: '0 24px', borderLeft: i ? '1px solid var(--border-subtle)' : 'none' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ width: 46, height: 46, borderRadius: 'var(--radius-lg)', background: 'var(--color-brand-subtle)', color: 'var(--color-brand)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}><Icon name={p.icon} size={22} /></span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 28, fontWeight: 500, color: 'var(--ink-200)', letterSpacing: '-0.02em' }}>0{i + 1}</span>
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, marginTop: 18, letterSpacing: '-0.02em', color: 'var(--text-strong)' }}>{p.t}</h3>
            <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--text-muted)', marginTop: 10 }}>{p.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---- routing diagram (dark) ---- */
function RoutingDiagram() {
  const chip = (label, sub, tone) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 'var(--radius-md)', padding: '11px 14px', minWidth: 168 }}>
      <span style={{ width: 8, height: 8, borderRadius: 999, background: tone, flex: 'none' }} />
      <div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600, color: 'var(--ink-25)' }}>{label}</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'rgba(242,245,241,0.55)' }}>{sub}</div>
      </div>
    </div>
  );
  return (
    <section style={{ background: `${DOT_DARK}, var(--ink-900)` }}>
      <div style={{ ...container, padding: '64px 28px' }}>
        <SectionHead dark eyebrow="The scheduler, live" title="One job, matched to the right runner." style={{ marginBottom: 44 }} maxW={540} />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 28, alignItems: 'center', maxWidth: 880, margin: '0 auto' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {chip('acme/api · tests', 'eligible · external', 'var(--madrona-400)')}
            {chip('acme/api · deploy', 'pinned · hosted', 'var(--color-warning)')}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, color: 'var(--madrona-300)' }}>
            <span style={{ width: 44, height: 44, borderRadius: 999, background: 'rgba(44,142,76,0.2)', border: '1px solid var(--madrona-400)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="route" size={20} /></span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'rgba(242,245,241,0.6)', textAlign: 'center' }}>policy +<br />trust tier</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {chip('rack-07', 'tier 3 · running', 'var(--color-success)')}
            {chip('mac-mini-2', 'tier 2 · ready', 'var(--evergreen-400)')}
            {chip('hosted pool', 'secrets · isolated', 'var(--color-warning)')}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- two journeys ---- */
function Journeys() {
  const journey = (tone, eyebrow, title, steps, cta, variant, href) => (
    <Card tone={tone} padding="lg" style={{ display: 'flex', flexDirection: 'column' }}>
      <Eyebrow>{eyebrow}</Eyebrow>
      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, letterSpacing: '-0.02em', marginTop: 12, color: 'var(--text-strong)' }}>{title}</h3>
      <div style={{ marginTop: 20, marginBottom: 24, display: 'flex', flexDirection: 'column', gap: 0 }}>
        {steps.map((s, i) => (
          <div key={s} style={{ display: 'flex', gap: 14, paddingBottom: i < steps.length - 1 ? 16 : 0 }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flex: 'none' }}>
              <span style={{ width: 26, height: 26, borderRadius: 999, background: tone === 'evergreen' ? 'var(--evergreen-500)' : 'var(--color-brand)', color: '#fff', fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{i + 1}</span>
              {i < steps.length - 1 && <span style={{ width: 1.5, flex: 1, background: 'var(--border-default)', marginTop: 4 }} />}
            </div>
            <span style={{ fontSize: 14.5, color: 'var(--text-body)', lineHeight: 1.45, paddingTop: 3 }}>{s}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 'auto' }}><a href={href} style={{ textDecoration: 'none' }}><Button variant={variant} iconRight={<Icon name="arrowRight" size={17} />}>{cta}</Button></a></div>
    </Card>
  );
  return (
    <section style={sectionPad}>
      <SectionHead eyebrow="Two sides, one platform" title="What each side actually does." style={{ marginBottom: 44 }} />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {journey('brand', 'Software teams', 'The buyer journey',
          ['Connect Madrona to your GitHub repositories', 'Classify workloads by sensitivity and resource profile', 'Set runner policies — trust tiers, regions, architectures', 'Eligible jobs route automatically; sensitive jobs stay hosted', 'Watch live logs, artifacts, usage and spend'],
          'Connect your repo', 'primary', 'for-teams.html')}
        {journey('evergreen', 'Compute providers', 'The provider journey',
          ['Install the sandboxed Madrona agent on your machine', 'Register hardware — Madrona fingerprints and attests it', 'Set availability hours, workload classes and resource caps', 'Approved jobs run isolated on your machine', 'Earn on successful minutes; paid out monthly'],
          'Start earning', 'provider', 'for-providers.html')}
      </div>
    </section>
  );
}

/* ---- trust layer ---- */
function TrustLayer() {
  const items = [
    { icon: 'route', t: 'Job scheduling', d: 'Real-time matching of jobs to runners.' },
    { icon: 'shield', t: 'Policy enforcement', d: 'Eligibility decided before anything runs.' },
    { icon: 'gauge', t: 'Metering', d: 'Successful minutes counted per run.' },
    { icon: 'lock', t: 'Isolation', d: 'Each job runs sandboxed and ephemeral.' },
    { icon: 'fileText', t: 'Logs & artifacts', d: 'Streamed live, retained per policy.' },
    { icon: 'wallet', t: 'Billing & payouts', d: 'Teams billed, providers paid, automatically.' },
    { icon: 'fingerprint', t: 'Attestation', d: 'Runners fingerprinted and trust-tiered.' },
    { icon: 'eye', t: 'Abuse prevention', d: 'Anomaly detection on jobs and hosts.' },
  ];
  return (
    <section style={{ background: 'var(--surface-card)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={sectionPad}>
        <SectionHead eyebrow="The hard parts, handled" title="Madrona owns the trust layer in between." sub="The platform handles everything that makes a runner marketplace safe to use." style={{ marginBottom: 44 }} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }}>
          {items.map((it) => (
            <Card key={it.t} padding="md">
              <span style={{ color: 'var(--color-brand)', display: 'inline-flex' }}><Icon name={it.icon} size={20} /></span>
              <div style={{ fontWeight: 600, fontSize: 14.5, marginTop: 12, color: 'var(--text-strong)' }}>{it.t}</div>
              <div style={{ fontSize: 12.5, lineHeight: 1.5, color: 'var(--text-muted)', marginTop: 5 }}>{it.d}</div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  return (
    <div style={{ background: 'var(--surface-page)', minHeight: '100vh' }}>
      <Nav active="how" />
      <Hero />
      <Phases />
      <RoutingDiagram />
      <Journeys />
      <TrustLayer />
      <CtaBand title="Run CI for less. Earn from idle compute." sub="Trust the system in between. Connect a repo or register a machine to get started." primary="Connect GitHub" primaryIcon="github" primaryHref="auth.html" secondary="Read the docs" secondaryHref="docs.html" />
      <Footer />
    </div>
  );
}
window.PageApp = HowItWorks;
})();