// landing.jsx — Heartbeat Kit landing page

const { useEffect, useState } = React;

function App() {
  const t = { accent: 'cyan', density: 'regular', codeVariant: 'ts', showPulseGlow: true };

  return (
    <>
      <Nav current="home" />
      <Hero tweaks={t} />
      <FeatureRow />
      <HowItWorks />
      <DashboardSection />
      <EditorialBreak />
      <ChannelsGrid />
      <UseCases />
      <FinalCTA />
      <Footer />
    </>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Hero
function Hero({ tweaks }) {
  return (
    <section data-screen-label="01 Hero" style={{ padding: '96px 0 0', position: 'relative' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'center' }}>
          <div className="col" style={{ gap: 32 }}>
            {/* Annotation row */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '5px 11px', borderRadius: 999,
                background: 'rgba(94,196,168,0.08)',
                border: '1px solid rgba(94,196,168,0.25)',
                color: 'var(--cyan)',
                fontFamily: 'var(--f-mono)', fontSize: 11.5, fontWeight: 500,
                letterSpacing: '0.04em',
              }}>
                <span className="dot active" style={{ width: 6, height: 6 }} />
                v1.0 · public beta
              </span>
              <span style={{ color: 'var(--slate)', fontFamily: 'var(--f-mono)', fontSize: 11.5, letterSpacing: '0.04em' }}>
                ↳ now with MCP server for AI agents
              </span>
            </div>

            {/* Layered display headline — two colors max */}
            <div className="col" style={{ gap: 8 }}>
              <h1 className="h-hero">If it goes silent,</h1>
              <h1 className="h-hero">
                we <span style={{ color: 'var(--cyan)' }}>respond.</span>
              </h1>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 10, marginTop: 14,
                fontFamily: 'var(--f-mono)', fontSize: 11.5,
                color: 'var(--slate)', letterSpacing: '0.06em',
              }}>
                <span style={{ width: 24, height: 1, background: 'var(--slate)', opacity: 0.4 }} />
                <span>[ heartbeat → miss → escalate → ack ]</span>
              </div>
            </div>

            {/* Lede — tighter, more concrete */}
            <p style={{
              fontSize: 17, lineHeight: 1.55, color: '#cfd0d6',
              maxWidth: '52ch', margin: 0,
            }}>
              Your AI agents run for hours unsupervised. When one hangs,
              an autonomous responder investigates logs, diagnoses the failure,
              and takes corrective action —{' '}
              <span style={{ color: 'var(--sand)' }}>before a human even notices</span>.
            </p>

            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a className="btn btn-primary" href="#">Start free</a>
              <a className="btn btn-secondary" href="docs.html">$ npm i @heartbeatkit/sdk</a>
            </div>

            {/* Stat row — ledger-style */}
            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 0, marginTop: 24,
              paddingTop: 0,
            }}>
              {[
                ['AI responder', 'autonomous investigation + remediation'],
                ['MCP-native', 'agents discover and use it directly'],
                ['Escalation chains', 'alert → investigate → fix → report'],
              ].map(([n, l], i) => (
                <div key={l} style={{
                  paddingLeft: i === 0 ? 0 : 20,
                }}>
                  <div style={{
                    fontFamily: 'var(--f-display)', fontSize: 15, fontWeight: 500,
                    color: 'var(--sand)', letterSpacing: '-0.01em',
                  }}>{n}</div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--slate)', marginTop: 4, letterSpacing: '0.04em', lineHeight: 1.4 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right: code / terminal */}
          <HeroPanel variant={tweaks.codeVariant} />
        </div>
      </div>

      {/* Pulse line below the hero */}
      <div style={{ marginTop: 64, position: 'relative' }}>
        <PulseLine height={240} state="active" />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, transparent 0%, transparent 70%, var(--navy) 100%)',
          pointerEvents: 'none',
        }} />
      </div>
    </section>
  );
}

function HeroPanel({ variant }) {
  return (
    <div className="col gap-12">
      {/* Configuration — a research agent with a 10min task timeout */}
      <Code label="configure heartbeat" lang="typescript">
<span className="com">{`// Research agent has 10 min to finish. If not → escalate.`}</span>{`
`}<span className="kw">const</span>{` task = `}<span className="kw">await</span>{` hbk.`}<span className="fn">task</span>{`(`}<span className="str">'research-agent'</span>{`, {
  `}<span className="prop">timeout</span>{`: `}<span className="num">600</span>{`,       `}<span className="com">// 10 minutes to complete</span>{`
  `}<span className="prop">policy</span>{`: {
    `}<span className="prop">steps</span>{`: [
      { `}<span className="prop">delay</span>{`: `}<span className="str">"0s"</span>{`,  `}<span className="prop">channels</span>{`: [`}<span className="str">"slack"</span>{`] },
      { `}<span className="prop">delay</span>{`: `}<span className="str">"2m"</span>{`,  `}<span className="prop">channels</span>{`: [`}<span className="str">"email"</span>{`] },
      { `}<span className="prop">delay</span>{`: `}<span className="str">"5m"</span>{`,  `}<span className="prop">channels</span>{`: [`}<span className="str">"ai-responder"</span>{`] },
    ]
  }
})

`}<span className="com">{`// Agent does work... then completes:`}</span>{`
`}<span className="kw">await</span>{` task.`}<span className="fn">complete</span>{`()`}<span className="com">{`  // ← if this never runs, policy fires`}</span>
      </Code>

      {/* Live terminal — the full failure + recovery story */}
      <Terminal
        height={220}
        title="research-agent · live"
        lines={[
          { t: '10:00', tag: 'start',   text: 'task created · deadline 10:10:00', tagBg: 'rgba(94,196,168,0.12)', tagColor: 'var(--cyan)', delay: 1400 },
          { t: '10:10', tag: 'missed',  text: 'deadline passed · no completion', tagBg: 'rgba(212,115,107,0.16)', tagColor: 'var(--coral)', color: '#e8c4c0', delay: 1800 },
          { t: '10:10', tag: 'step 1',  text: '→ Slack #agents', tagBg: 'rgba(158,195,255,0.12)', tagColor: '#9ec3ff', delay: 1600 },
          { t: '10:12', tag: 'step 2',  text: '→ email ops@team.com', tagBg: 'rgba(158,195,255,0.12)', tagColor: '#9ec3ff', delay: 1800 },
          { t: '10:15', tag: 'step 3',  text: '→ AI responder activated', tagBg: 'rgba(94,196,168,0.12)', tagColor: 'var(--cyan)', delay: 1600 },
          { t: '10:15', tag: 'agent',   text: 'reading logs... stuck on API timeout', tagBg: 'rgba(94,196,168,0.12)', tagColor: 'var(--cyan)', delay: 2000 },
          { t: '10:15', tag: 'agent',   text: 'killed process, restarted with retry', tagBg: 'rgba(94,196,168,0.12)', tagColor: 'var(--cyan)', delay: 2000 },
          { t: '10:16', tag: 'ack',     text: 'resolved · summary posted', tagBg: 'rgba(94,196,168,0.15)', tagColor: 'var(--cyan)', delay: 2200 },
        ]}
      />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// What can you monitor
function FeatureRow() {
  const items = [
    { icon: '↻', title: 'Long-running agents', desc: 'Agent checks in while working. If it stops, you know immediately.' },
    { icon: '⏱', title: 'Tasks with deadlines', desc: 'Deploy, migration, or batch job must finish in N minutes — or else.' },
    { icon: '◉', title: 'Scheduled jobs', desc: 'Cron runs at 3am. If it doesn\'t check in by 3:30, escalate.' },
    { icon: '⚡', title: 'Real-time health', desc: 'Agent reports metrics each cycle. If spend > $500, fire instantly.' },
  ];
  return (
    <section style={{ padding: '48px 0 56px' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {items.map((s, i) => (
            <div key={i} style={{ padding: '0 4px' }}>
              <div style={{ fontSize: 20, marginBottom: 10, opacity: 0.6 }}>{s.icon}</div>
              <div style={{
                fontFamily: 'var(--f-display)',
                fontSize: 16, fontWeight: 600,
                color: 'var(--sand)',
                marginBottom: 6,
              }}>{s.title}</div>
              <div style={{ fontSize: 14, color: 'var(--slate)', lineHeight: 1.5 }}>{s.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// How it works — 4 steps
function HowItWorks() {
  const steps = [
    {
      n: '01',
      title: 'Define a heartbeat',
      desc: 'Name it, pick a mode, set an interval and grace window. Slug-addressable so your code stays readable.',
      code: `hbk.heartbeats.create({\n  name: 'order-processor',\n  mode: 'recurring',\n  interval: 60,\n  grace: 15,\n})`,
    },
    {
      n: '02',
      title: 'Check in from anywhere',
      desc: 'One HTTP call per check-in. SDKs for Node, Python, Go — or call the API directly. Attach metadata for audit + health rules.',
      code: `await hbk.checkin('order-processor', {\n  metadata: { processed: 142 }\n})`,
    },
    {
      n: '03',
      title: 'Miss a deadline',
      desc: 'A heartbeat goes silent. The timer fires. The escalation policy walks step-by-step — webhook first, email next, agent last — pausing for ack at each stage.',
      code: `// no check-in for 60s + 15s grace\n// → policy "critical" begins\n// → step 1: Slack #incidents`,
    },
    {
      n: '04',
      title: 'AI agent remediates',
      desc: 'No human ack? An autonomous agent queries logs via MCP, identifies the root cause, restarts the stuck service, and posts a summary to Slack.',
      code: `// agent auto-triggered at T+15m\nagent.queryLogs('order-processor')\nagent.restartService('order-processor')\nagent.report('#incidents', 'OOM kill → restarted')`,
    },
  ];
  return (
    <section data-screen-label="02 How it works">
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, gap: 32 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>How it works</div>
            <h2 className="h-section">
              From <span style={{ color: 'var(--cyan)' }}>silent failure</span> to autonomous fix.
            </h2>
          </div>
          <p className="lede" style={{ maxWidth: 420 }}>
            Your agent checks in. When it doesn't, an AI responder takes over — investigates, remediates, reports back.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              background: 'var(--navy-2)',
              border: '1px solid var(--border-soft)',
              borderRadius: 14,
              padding: 32,
              display: 'flex', flexDirection: 'column', gap: 20,
              minHeight: 320,
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
                <span style={{
                  fontFamily: 'var(--f-mono)', fontSize: 14,
                  color: 'var(--cyan)', fontWeight: 600,
                }}>{s.n}</span>
                <h3 className="h-card">{s.title}</h3>
              </div>
              <p className="muted" style={{ margin: 0, fontSize: 15.5, lineHeight: 1.55 }}>{s.desc}</p>
              <pre style={{
                margin: 0, marginTop: 'auto',
                background: '#06070b',
                border: '1px solid var(--border)',
                borderRadius: 8,
                padding: '14px 16px',
                fontFamily: 'var(--f-mono)',
                fontSize: 13, lineHeight: 1.6,
                color: '#cdd0d8',
                overflow: 'hidden',
              }}>{s.code}</pre>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Dashboard preview
function DashboardSection() {
  return (
    <section data-screen-label="03 Dashboard">
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'center', marginBottom: 56 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Fleet view</div>
            <h2 className="h-section">Watch every promise<br />in one place.</h2>
          </div>
          <p className="lede">
            Real-time WebSocket pushes every check-in, every miss, every ack to your dashboard. Filter by namespace,
            slice by status, audit any heartbeat back to the second it was created. Group AI agents, cron jobs,
            and IoT fleets side by side.
          </p>
        </div>
        <DashboardMock />

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 24,
        }}>
          {[
            { l: 'Latest check-in', v: 'agent-research-7', sub: '2s ago · processed 412' },
            { l: 'Active escalation', v: 'embed-worker', sub: 'step 1 → Slack · awaiting ack' },
            { l: 'Acknowledged', v: 'deploy-canary', sub: 'by anya@ · 14:01:08' },
          ].map((c, i) => (
            <div key={i} style={{
              background: 'var(--navy-2)',
              border: '1px solid var(--border-soft)',
              borderRadius: 12,
              padding: '18px 22px',
            }}>
              <div className="eyebrow" style={{ fontSize: 11 }}>{c.l}</div>
              <div className="mono" style={{ fontSize: 16, color: 'var(--sand)', marginTop: 8, fontWeight: 500 }}>{c.v}</div>
              <div className="mono" style={{ fontSize: 12, color: 'var(--slate)', marginTop: 4 }}>{c.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Editorial break — sand background, escalation flow + manifesto pullquote
function EditorialBreak() {
  return (
    <section className="editorial" data-screen-label="04 Escalation" style={{ padding: '120px 0' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div className="col gap-24">
            <div className="eyebrow">Escalation policies</div>
            <h2 className="h-section" style={{ color: 'var(--navy)' }}>
              Silence is not<br />a strategy.
            </h2>
            <p className="lede" style={{ color: '#2a2b30' }}>
              Every escalation is a chain of responses. Alert fires first.
              If nobody acknowledges, an AI agent connects to your systems via MCP,
              reads logs, identifies the issue, and takes corrective action autonomously.
            </p>
            <div className="col gap-12" style={{ marginTop: 12 }}>
              {[
                ['AI agent', 'Queries logs, diagnoses failures, restarts services, posts summaries.'],
                ['Webhook', 'HMAC-signed POST to any URL — Slack, Discord, PagerDuty, custom.'],
                ['Email', 'Native Cloudflare email — zero config, instant delivery.'],
                ['WebSocket', 'Real-time push to dashboards and connected agents.'],
              ].map(([t, d]) => (
                <div key={t} style={{
                  display: 'grid', gridTemplateColumns: '120px 1fr',
                  padding: '14px 0',
                  borderTop: '1px solid rgba(0,0,0,0.08)',
                  fontSize: 15,
                }}>
                  <span style={{ fontWeight: 600, color: 'var(--navy)' }}>{t}</span>
                  <span style={{ color: '#5b5d63' }}>{d}</span>
                </div>
              ))}
            </div>
          </div>
          <EscalationFlow />
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Channels grid — small product surfaces
function ChannelsGrid() {
  const items = [
    { tag: 'AI responder', title: 'When alerts aren\'t enough, agents act.',
      body: 'Configure an AI responder with a system prompt, MCP tool access, and a timeout. When escalation reaches it, the agent autonomously investigates via your observability stack, takes corrective action, and reports findings.',
      mono: 'agent → logs → diagnose → fix → report' },
    { tag: 'MCP-native', title: 'Your agents already know how to use it.',
      body: 'Heartbeat Kit ships a Model Context Protocol server. Any MCP-aware agent gets the full API as tools — no SDK, no glue code. The agent decides when to start a heartbeat, when to check in, when to ack.',
      mono: 'tools/list → 12 heartbeat tools' },
    { tag: 'Health rules', title: 'Fire on conditions, not just silence.',
      body: 'Define rules on check-in metadata: "if compute spend > $500, fire immediately." "If error rate > 5%, escalate even though the agent is still running." Intelligence at the edge.',
      mono: 'if spend > 500 → fire' },
    { tag: 'Escalation chains', title: 'Alert → investigate → remediate → report.',
      body: 'Multi-step policies with acknowledgment tracking. Each step waits for ack before escalating. Terminal step: an AI agent that takes the wheel when humans don\'t respond.',
      mono: 'slack → email → ai agent → resolved' },
  ];
  return (
    <section data-screen-label="05 Capabilities">
      <div className="wrap">
        <div style={{ marginBottom: 64, maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>What's in the box</div>
          <h2 className="h-section">Your agents get a <em>safety net that thinks.</em></h2>
          <p className="lede" style={{ marginTop: 20 }}>
            When an agent fails, another agent responds. MCP tool access, log analysis,
            autonomous remediation — running on Cloudflare's edge so it stays up when your infra doesn't.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1, background: 'var(--border-soft)', border: '1px solid var(--border-soft)', borderRadius: 14, overflow: 'hidden' }}>
          {items.map((it, i) => (
            <div key={i} style={{
              background: 'var(--navy)',
              padding: '40px 36px',
              minHeight: 240,
              display: 'flex', flexDirection: 'column', gap: 16,
            }}>
              <div style={{
                display: 'inline-block', alignSelf: 'flex-start',
                fontFamily: 'var(--f-mono)', fontSize: 11, padding: '4px 10px',
                borderRadius: 999, background: 'rgba(94,196,168,0.08)',
                color: 'var(--cyan)', fontWeight: 600,
                letterSpacing: '0.06em', textTransform: 'uppercase',
              }}>{it.tag}</div>
              <h3 className="h-card" style={{ fontSize: 26, lineHeight: 1.15, maxWidth: 22 + 'ch' }}>{it.title}</h3>
              <p className="muted" style={{ margin: 0, fontSize: 15.5 }}>{it.body}</p>
              <span className="mono" style={{
                marginTop: 'auto', fontSize: 12.5,
                color: 'var(--slate)', padding: '8px 12px',
                background: '#06070b', borderRadius: 6,
                border: '1px solid var(--border)',
                alignSelf: 'flex-start',
              }}>{it.mono}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Use cases
function UseCases() {
  const cases = [
    {
      name: 'Overwatch',
      tag: 'AI agents',
      line: 'Your agents are running. Are they working?',
      desc: 'Know in seconds when an agent hangs — not hours later from a billing spike.',
    },
    {
      name: 'Greenlight',
      tag: 'DevOps',
      line: 'Ship with a safety net.',
      desc: 'Every deploy gets a countdown. Pass health checks or roll back automatically.',
    },
    {
      name: 'Beacon',
      tag: 'Worker safety',
      line: 'Check in. Or we send help.',
      desc: 'GPS-tagged check-ins for lone workers. Miss one and your supervisor knows where you are.',
    },
    {
      name: 'Vigil',
      tag: 'Elder care',
      line: 'Peace of mind, running quietly in the background.',
      desc: 'A phone app your parents never have to think about. If the phone goes still, family gets a call.',
    },
    {
      name: 'Encore',
      tag: 'Customer success',
      line: 'Bring them back before they\'re gone.',
      desc: 'Trigger re-engagement the moment a user goes quiet — not 90 days later in a spreadsheet.',
    },
    {
      name: 'Pulse Grid',
      tag: 'IoT',
      line: 'A heartbeat for every device in your fleet.',
      desc: 'Thousands of sensors reporting in. When one goes dark, the right person knows instantly.',
    },
  ];
  return (
    <section data-screen-label="06 Use cases" style={{ padding: '96px 0' }}>
      <div className="wrap">
        <div style={{ marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Built on Heartbeat Kit</div>
          <h2 className="h-section">Anywhere a system<br />can go silent.</h2>
          <p className="lede" style={{ marginTop: 20 }}>
            Six products. One API. Each one is a real business
            we're building on the same primitive you get access to.
          </p>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 1,
          background: 'rgba(255,255,255,0.04)',
          borderRadius: 14,
          overflow: 'hidden',
        }}>
          {cases.map((c) => (
            <div key={c.name} style={{
              padding: '36px 32px',
              transition: 'background 200ms',
              cursor: 'default',
              background: 'var(--navy)',
              display: 'flex', flexDirection: 'column', gap: 12,
            }}
            onMouseEnter={e => e.currentTarget.style.background = 'var(--navy-2)'}
            onMouseLeave={e => e.currentTarget.style.background = 'var(--navy)'}
            >
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <h3 className="h-card" style={{ fontSize: 22 }}>{c.name}</h3>
                <span className="mono" style={{ fontSize: 11, color: 'var(--slate)', letterSpacing: '0.04em' }}>{c.tag}</span>
              </div>
              <div style={{ fontSize: 15, color: 'var(--sand)', fontWeight: 500, lineHeight: 1.3 }}>{c.line}</div>
              <p style={{ margin: 0, color: 'var(--slate)', fontSize: 14, lineHeight: 1.55 }}>{c.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Final CTA
function FinalCTA() {
  return (
    <section data-screen-label="07 CTA" style={{ padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.5,
        maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 70%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 70%)',
      }}>
        <PulseLine height={420} state="active" />
      </div>
      <div className="wrap" style={{ position: 'relative', textAlign: 'center' }}>
        <div className="eyebrow" style={{ marginBottom: 18 }}>Ready when you are</div>
        <h2 className="h-display" style={{ fontSize: 'clamp(40px, 5vw, 68px)', maxWidth: 16 + 'ch', margin: '0 auto 24px' }}>
          Check in, or<br />
          we'll <span style={{ color: 'var(--coral)', fontWeight: 600 }}>check on you.</span>
        </h2>
        <p style={{ fontSize: 16, lineHeight: 1.5, color: '#cfd0d6', maxWidth: '50ch', margin: '0 auto 32px' }}>
          5 free heartbeats. No credit card. Two-minute setup.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a className="btn btn-primary" href="#">Start free →</a>
          <a className="btn btn-secondary" href="docs.html">Read the docs</a>
        </div>
        <div style={{ marginTop: 28, fontFamily: 'var(--f-mono)', fontSize: 13, color: 'var(--slate)' }}>
          npm i @heartbeatkit/sdk · also on Cloudflare Workers, Bun, Deno
        </div>
      </div>
    </section>
  );
}

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