/* global React, ReactDOM */

const { useState, useEffect, useRef } = React;

// ============= NAV =============
function Nav() {
  return (
    <nav className="nav">
      <div className="shell nav-inner">
        <a href="#top" className="logo">
          <Logo />
          <span>Half&nbsp;Machine</span>
        </a>
        <div className="nav-links" style={{ display: window.innerWidth > 720 ? "flex" : "none" }}>
          <a href="#thesis">Thesis</a>
          <a href="#capabilities">Capabilities</a>
          <a href="#offers">Offers</a>
          <a href="#work">Work</a>
        </div>
        <a href="contact.html" className="nav-cta">
          Get in touch
          <Arrow />
        </a>
      </div>
    </nav>);

}

function Logo() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="10.5" stroke="currentColor" strokeWidth="1.5" />
      <path d="M12 1.5 V 22.5" stroke="currentColor" strokeWidth="1.5" />
      <rect x="12.5" y="2" width="9.5" height="20" fill="currentColor" />
    </svg>);

}

function Arrow({ size = 14 }) {
  return (
    <svg className="arrow" width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

// ============= HERO =============
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="shell hero-grid">
        <div>
          <span className="eyebrow"><span className="dot" />Agent product studio · Est. 2017</span>
          <h1 className="h1">
            Build the <em>vertical agent</em> your market is waiting&nbsp;for.
          </h1>
          <p className="lede">
            Half Machine helps ventures and companies turn expert workflows into AI products — pairing human judgment with purpose-built agents, interfaces, and harnesses.
          </p>
          <div className="hero-ctas">
            <a className="btn btn-primary" href="contact.html">
              Design an agent product
              <Arrow />
            </a>
            <a className="btn btn-ghost" href="#thesis">
              Read the thesis
            </a>
          </div>

          <div className="hero-meta">
            <div className="hero-meta-item">
              <div className="k">Focus</div>
              <div className="v">Expert-facing AI</div>
            </div>
            <div className="hero-meta-item">
              <div className="k">Disciplines</div>
              <div className="v">Strategy · Design · Build</div>
            </div>
            <div className="hero-meta-item">
              <div className="k">Origins</div>
              <div className="v">Pathways · Material</div>
            </div>
            <div className="hero-meta-item">
              <div className="k">Engagements</div>
              <div className="v">2 — 12 weeks</div>
            </div>
          </div>
        </div>

        <Diagram />
      </div>
    </section>);

}

// ============= INTERACTIVE DIAGRAM =============
const NODES = [
{
  key: "expert",
  idx: "01",
  label: "Expert",
  glyph: "person",
  headline: "The capable human in the loop.",
  fields: [
  { k: "Who", v: "Clinician · QS · Analyst · Lawyer · Engineer · Founder" },
  { k: "Owns", v: "Judgment, accountability, taste, edge cases." }],

  chips: ["Domain knowledge", "Judgment", "Accountability"]
},
{
  key: "agent",
  idx: "02",
  label: "Agent",
  glyph: "atom",
  headline: "A purpose-built reasoner, not a chat box.",
  fields: [
  { k: "Loop", v: "Plan → act → reflect, scoped to the artifact." },
  { k: "Style", v: "Narrow, opinionated, evaluable." }],

  chips: ["Planner", "Critics", "Memory", "Sub-agents"]
},
{
  key: "harness",
  idx: "03",
  label: "Harness",
  glyph: "frame",
  headline: "Everything around the model that makes it work.",
  fields: [
  { k: "Includes", v: "Context, tools, workflows, evals, guardrails, UI." },
  { k: "Why", v: "The harness is the moat — not the prompt." }],

  chips: ["Context", "Tools", "Workflow", "Evals", "Safety", "Interface"]
},
{
  key: "artifact",
  idx: "04",
  label: "Artifact",
  glyph: "doc",
  headline: "The valuable output the work is actually about.",
  fields: [
  { k: "Examples", v: "Estimate · Diagnosis · Plan · Report · Codebase · Proposal." },
  { k: "Bar", v: "Better, faster, more defensible than the status quo." }],

  chips: ["High-value", "Reviewable", "Commercial"]
}];


function NodeGlyph({ kind }) {
  const props = { width: 14, height: 14, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" };
  if (kind === "person") return <svg className="glyph" {...props}><circle cx="8" cy="5.5" r="2.5" /><path d="M2.5 14c.6-3 3-4.5 5.5-4.5s4.9 1.5 5.5 4.5" /></svg>;
  if (kind === "atom") return <svg className="glyph" {...props}><circle cx="8" cy="8" r="1.5" /><ellipse cx="8" cy="8" rx="6" ry="2.5" /><ellipse cx="8" cy="8" rx="6" ry="2.5" transform="rotate(60 8 8)" /><ellipse cx="8" cy="8" rx="6" ry="2.5" transform="rotate(120 8 8)" /></svg>;
  if (kind === "frame") return <svg className="glyph" {...props}><rect x="2" y="2" width="12" height="12" rx="1" /><path d="M2 6h12M6 2v12" /></svg>;
  if (kind === "doc") return <svg className="glyph" {...props}><path d="M3.5 1.5h6L13 5v9.5H3.5z" /><path d="M9.5 1.5V5H13" /><path d="M5.5 8.5h5M5.5 11h3.5" /></svg>;
  return null;
}

function Diagram() {
  const [active, setActive] = useState(0);

  // auto-advance
  useEffect(() => {
    const id = setInterval(() => {
      setActive((a) => (a + 1) % NODES.length);
    }, 3400);
    return () => clearInterval(id);
  }, []);

  const node = NODES[active];

  return (
    <div className="diagram-card" id="thesis-anchor">
      <div className="diagram-head">
        <span className="title">Half Machine · Pattern</span>
        <span className="live">
          <span className="pulse" />
          Live
        </span>
      </div>

      <div className="flow">
        {NODES.map((n, i) =>
        <button
          key={n.key}
          className={"node" + (i === active ? " active" : "")}
          onClick={() => setActive(i)}
          onMouseEnter={() => setActive(i)}>
          
            <span className="idx">{n.idx}</span>
            <NodeGlyph kind={n.glyph} />
            <div className="label">{n.label}</div>
          </button>
        )}
      </div>

      <div className="diagram-body">
        <div style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.2, letterSpacing: "-0.01em" }}>
          {node.headline}
        </div>
        {node.fields.map((f) =>
        <div className="detail-row" key={f.k}>
            <div className="k">{f.k}</div>
            <div className="v">{f.v}</div>
          </div>
        )}
        <div className="detail-row">
          <div className="k">Pieces</div>
          <ul className="detail-list">
            {node.chips.map((c) => <li key={c}>{c}</li>)}
          </ul>
        </div>
      </div>
    </div>);

}

// ============= THESIS =============
function Thesis() {
  return (
    <section className="s thesis" id="thesis">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow"><span className="dot" />01 — Thesis</span>
          <div>
            <h2>The winning pattern is <em>not</em> a generic assistant.</h2>
            <p>
              Most AI value won't come from chat boxes. It will come from systems that pair an expert human with a domain-specific agent, surrounded by the context, tools, and interface that turn judgment into a high-value output.
            </p>
          </div>
        </div>

        <div className="thesis-equation">
          <div className="thesis-term"><div className="num">A</div><div className="word">Expert</div></div>
          <div className="thesis-op">+</div>
          <div className="thesis-term"><div className="num">B</div><div className="word">AI&nbsp;agent</div></div>
          <div className="thesis-op">+</div>
          <div className="thesis-term"><div className="num">C</div><div className="word">Harness</div></div>
          <div className="thesis-op eq">=</div>
          <div className="thesis-term" style={{ borderColor: "var(--accent)", background: "color-mix(in oklab, var(--accent) 16%, #131311)" }}>
            <div className="num" style={{ color: "var(--bg)" }}>D</div>
            <div className="word">High-value artifact</div>
          </div>
        </div>

        <div className="artifact-line">
          We start from the <span className="accent">artifact</span> — the estimate, diagnosis, plan, report, codebase, analysis, proposal, or decision that makes the work commercially valuable — then design backwards into the agent, the harness, and the interface.
        </div>

        <div className="metrics">
          <div className="metric">
            <div className="v">5</div>
            <div className="l">Layers in a working harness</div>
          </div>
          <div className="metric">
            <div className="v">1</div>
            <div className="l">Artifact per agent product</div>
          </div>
          <div className="metric">
            <div className="v">2–12</div>
            <div className="l">Weeks from sprint to prototype</div>
          </div>
          <div className="metric">
            <div className="v">∞</div>
            <div className="l">Cognitive leverage at the edge</div>
          </div>
        </div>
      </div>
    </section>);

}

// ============= CAPABILITIES =============
const CAPS = [
{ num: "01", title: "Agent product strategy", body: "Where the real value lives — and where it doesn't. Use cases, defensibility, market shape." },
{ num: "02", title: "Vertical agent discovery", body: "Find the highest-leverage agent opportunity inside a workflow, market, or company." },
{ num: "03", title: "Expert workflow mapping", body: "Sit with the experts. Decompose the work into decisions, artifacts, and judgment calls." },
{ num: "04", title: "Agent design sprints", body: "Two-week sprints that turn an opportunity into a designed product concept." },
{ num: "05", title: "Harness & interface design", body: "Context, tools, evaluations, safety, and the UI experts will actually live in." },
{ num: "06", title: "Setup autonomous agents", body: "Stand up autonomous agents like OpenClaw and Hermes inside real expert workflows. Scope, harness, and operating discipline so the autonomy compounds — instead of burning tokens." },
{ num: "07", title: "Fast Core Design websites", body: "Sharp, inexpensive websites for founders who need to move quickly. Days, not months." },
{ num: "08", title: "AI venture productisation", body: "Help shape and ship agent-native products end-to-end with founding teams." }];


function CapIcon({ i }) {
  const props = { width: 36, height: 36, viewBox: "0 0 36 36", fill: "none", stroke: "currentColor", strokeWidth: 1.3, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (i % 8) {
    case 0:return <svg className="cap-icon" {...props}><rect x="4" y="4" width="28" height="28" rx="2" /><path d="M4 14h28M4 22h28M14 4v28M22 4v28" /></svg>;
    case 1:return <svg className="cap-icon" {...props}><circle cx="18" cy="18" r="14" /><path d="M4 18h28M18 4c4 4 6 9 6 14s-2 10-6 14M18 4c-4 4-6 9-6 14s2 10 6 14" /></svg>;
    case 2:return <svg className="cap-icon" {...props}><path d="M4 28V8l8-4 12 4 8-4v20l-8 4-12-4-8 4z" /><path d="M12 4v24M24 8v24" /></svg>;
    case 3:return <svg className="cap-icon" {...props}><path d="M6 6h24v24H6z" /><path d="M6 12h24M6 22h24M12 6v24M22 6v24" /><circle cx="17" cy="17" r="2" fill="currentColor" /></svg>;
    case 4:return <svg className="cap-icon" {...props}><rect x="4" y="6" width="28" height="20" rx="1" /><path d="M4 12h28" /><circle cx="8" cy="9" r=".5" fill="currentColor" /><circle cx="11" cy="9" r=".5" fill="currentColor" /><path d="M9 18h18M9 22h12" /></svg>;
    case 5:return <svg className="cap-icon" {...props}><path d="M6 30 18 4l12 26" /><path d="M11 20h14" /></svg>;
    case 6:return <svg className="cap-icon" {...props}><path d="M4 8h28v6H4zM4 16h28v6H4zM4 24h28v6H4z" /><circle cx="9" cy="11" r="1.2" fill="currentColor" /><circle cx="9" cy="19" r="1.2" fill="currentColor" /><circle cx="9" cy="27" r="1.2" fill="currentColor" /></svg>;
    case 7:return <svg className="cap-icon" {...props}><circle cx="11" cy="11" r="6" /><circle cx="25" cy="11" r="6" /><circle cx="18" cy="25" r="6" /><path d="M14 14l4 6M22 14l-4 6" /></svg>;
    default:return null;
  }
}

function Capabilities() {
  return (
    <section className="s" id="capabilities">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow"><span className="dot" />02 — What we do</span>
          <div>
            <h2>From <em>opportunity</em> to <em>shipped artifact</em>.</h2>
            <p>Eight disciplines, one workflow. We come in early on a market or workflow, identify the agent opportunity, design the system, and build until experts are using it.</p>
          </div>
        </div>

        <div className="capgrid">
          {CAPS.map((c, i) =>
          <div className="cap" key={c.num}>
              <span className="cap-num">{c.num}</span>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
              <CapIcon i={i} />
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============= OFFERS =============
const OFFERS = [
{
  num: "/01",
  title: "Agent Design Sprint",
  body: "Find the strongest agent opportunity in your market or workflow. Expert interviews, artifact analysis, and a designed concept ready to validate.",
  duration: "2 weeks",
  output: "Concept + Plan"
},
{
  num: "/02",
  title: "Vertical Agent Prototype",
  body: "Turn a validated use case into a working product concept. Real harness, real tools, real artifacts — used by real experts inside a tight loop.",
  duration: "6 weeks",
  output: "Working prototype"
},
{
  num: "/03",
  title: "AI Venture Build Partner",
  body: "Help shape and ship agent-native products for new ventures. Co-found, co-build, or embed alongside the founding team end-to-end.",
  duration: "3+ months",
  output: "Shipped product"
},
{
  num: "/04",
  title: "Fast Website Build",
  body: "Sharp, inexpensive websites using Core Design for founders who need to move quickly. Strategy, copy, design, and build — all in one pass.",
  duration: "5 days",
  output: "Live site"
}];


function Offers() {
  return (
    <section className="s" id="offers" style={{ background: "var(--bg)" }}>
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow"><span className="dot" />03 — Engagements</span>
          <div>
            <h2>Four ways to <em>work with us</em>.</h2>
            <p>From a two-week sprint that maps the strongest agent opportunity in your space, to long-form venture partnerships that ship the product itself.</p>
          </div>
        </div>

        <div className="offers">
          {OFFERS.map((o) =>
          <a className="offer" key={o.num} href="#book">
              <div className="offer-num">{o.num}</div>
              <h3>{o.title.replace(/\b(Sprint|Prototype|Partner|Build)$/, "")}<em>{o.title.match(/\b(Sprint|Prototype|Partner|Build)$/)?.[0]}</em></h3>
              <p>{o.body}</p>
              <div className="offer-meta">
                <span>Duration · {o.duration}</span>
                <span>Output · {o.output}</span>
                <span className="arrow">→</span>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

// ============= PROOF / WORK =============
function Work() {
  return (
    <section className="s" id="work">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow"><span className="dot" />04 — Work</span>
          <div>
            <h2>Built around <em>expert judgment</em>.</h2>
            <p>Every project starts with the artifact and the expert who makes it. Below, two of the systems we've designed, and the pattern they share.</p>
          </div>
        </div>

        <div className="proof-grid">
          <div className="case feature">
            <span className="case-tag">Featured · Healthcare AI</span>
            <h4><em>Pathways</em><br />Clinical reasoning support for clinicians.</h4>
            <p>An expert-facing system for primary care. Pairs the clinician with a reasoning agent that drafts differentials, suggests next steps, and surfaces the evidence — leaving judgment with the human.</p>

            <div className="mini-flow">
              <div className="mini-node">Clinician</div>
              <div className="mini-node">Reasoning agent</div>
              <div className="mini-node">EHR · Evidence · Memory</div>
              <div className="mini-node">Decision note</div>
            </div>

            <div className="case-stage">
              <div>
                <div className="stage-k">Artifact</div>
                <div className="stage-v">Decision note</div>
              </div>
              <div>
                <div className="stage-k">Stage</div>
                <div className="stage-v">In production</div>
              </div>
            </div>
          </div>

          <div className="case">
            <span className="case-tag">Construction · AEC</span>
            <h4><em>Material</em><br />Estimating support for QSs &amp; builders.</h4>
            <p>A vertical agent that drafts construction estimates from drawings and specs, then loops a quantity surveyor through the line items that need judgment.</p>
            <div className="artifact-preview">[ Estimate workbook · placeholder ]</div>
            <div className="case-stage">
              <div>
                <div className="stage-k">Artifact</div>
                <div className="stage-v">Estimate</div>
              </div>
              <div>
                <div className="stage-k">Stage</div>
                <div className="stage-v">Pilot</div>
              </div>
            </div>
          </div>

          <div className="case">
            <span className="case-tag">Pattern · Across projects</span>
            <h4>The shape of <em>every</em> engagement.</h4>
            <p>We don't start from the model. We start from the artifact, the expert, and the workflow — then design the agent and harness inward from there.</p>
            <ol style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10, fontSize: 13.5 }}>
              <li><span className="mono" style={{ marginRight: 10 }}>STEP·01</span>Find the artifact.</li>
              <li><span className="mono" style={{ marginRight: 10 }}>STEP·02</span>Map expert judgment.</li>
              <li><span className="mono" style={{ marginRight: 10 }}>STEP·03</span>Design the agent loop.</li>
              <li><span className="mono" style={{ marginRight: 10 }}>STEP·04</span>Build the harness.</li>
              <li><span className="mono" style={{ marginRight: 10 }}>STEP·05</span>Ship to real experts.</li>
            </ol>
            <div className="case-stage">
              <div>
                <div className="stage-k">Use it for</div>
                <div className="stage-v">Sprints &amp; prototypes</div>
              </div>
              <div>
                <div className="stage-k">Status</div>
                <div className="stage-v">Always-on</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============= PILLARS (NOT/BUT) =============
const PILLARS = [
["01", "Generic AI strategy", "Specific agent opportunities."],
["02", "Chatbots", "Designed expert-agent systems."],
["03", "Replacement", "Cognitive leverage for capable humans."],
["04", "Prompts", "Harnesses, tools, context, evaluation, interface."],
["05", "Vague innovation", "Prototypes, products, websites, ventures."]];


function Pillars() {
  return (
    <section className="s" id="how">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow"><span className="dot" />05 — How we differ</span>
          <div>
            <h2>What this is, and <em>isn't</em>.</h2>
            <p>A short way of saying what kind of partner we are. If the left column is what you're shopping for, we're probably not the right shop.</p>
          </div>
        </div>

        <div className="pillars">
          {PILLARS.map(([n, no, yes]) =>
          <div className="pillar" key={n}>
              <div className="num">{n}</div>
              <div className="not">Not — {no}</div>
              <div className="yes">{yes}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============= FINAL CTA =============
function FinalCTA() {
  return (
    <section className="s final-cta" id="book">
      <div className="shell">
        <span className="eyebrow"><span className="dot" />Get in touch</span>
        <h2 className="h2">Design an <em>agent product</em> the market is waiting for.</h2>

        <div className="ctas">
          <a className="btn btn-primary" href="contact.html">
            Book an agent design sprint
            <Arrow />
          </a>
          <a className="btn btn-ghost" href="contact.html">Build a fast website</a>
          <a className="btn btn-ghost" href="contact.html">Explore a vertical agent idea</a>
          <a className="btn btn-ghost" href="contact.html">Setup autonomous agent</a>
        </div>

        <div className="contact-grid">
          <div className="contact-cell">
            <div className="k">Calls</div>
            <div className="v"><a href="#book">Book 30 min →</a></div>
          </div>
          <div className="contact-cell">
            <div className="k">Based</div>
            <div className="v">Sydney & everywhere remote.</div>
          </div>
        </div>
      </div>
    </section>);

}

// ============= FOOTER =============
function Foot() {
  return (
    <footer className="foot">
      <div className="shell foot-inner">
        <div>© Half Machine 2026 · Human · Machine</div>
        <div>v1.0 · Sydney AUS</div>
      </div>
    </footer>);

}

// ============= TWEAKS =============
const ACCENT_OPTIONS = [
"oklch(0.62 0.14 50)", // burnt orange
"oklch(0.55 0.13 250)", // deep blue
"oklch(0.58 0.14 145)", // forest green
"oklch(0.62 0.16 12)" // tomato red
];
const TYPE_OPTIONS = [
{ id: "default", label: "Geist + Instrument" },
{ id: "fraunces", label: "Inter + Fraunces" },
{ id: "mono-led", label: "Mono · technical" }];


function applyType(id) {
  const r = document.documentElement.style;
  if (id === "default") {
    r.setProperty("--font-sans", '"Geist", ui-sans-serif, system-ui, -apple-system, sans-serif');
    r.setProperty("--font-serif", '"Instrument Serif", "Times New Roman", serif');
    r.setProperty("--font-mono", '"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace');
  } else if (id === "fraunces") {
    r.setProperty("--font-sans", '"Inter", ui-sans-serif, system-ui, sans-serif');
    r.setProperty("--font-serif", '"Fraunces", "Times New Roman", serif');
    r.setProperty("--font-mono", '"JetBrains Mono", ui-monospace, monospace');
  } else if (id === "mono-led") {
    r.setProperty("--font-sans", '"JetBrains Mono", ui-monospace, monospace');
    r.setProperty("--font-serif", '"Instrument Serif", serif');
    r.setProperty("--font-mono", '"JetBrains Mono", ui-monospace, monospace');
  }
}

function Tweaks() {
  const TweaksPanel = window.TweaksPanel;
  const useTweaks = window.useTweaks;
  const TweakSection = window.TweakSection;
  const TweakColor = window.TweakColor;
  const TweakRadio = window.TweakRadio;
  const TweakSelect = window.TweakSelect;
  if (!TweaksPanel || !useTweaks) return null;

  const [t, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "accent": "oklch(0.62 0.14 50)",
    "typePair": "default",
    "density": "default",
    "showGrid": true
  } /*EDITMODE-END*/);

  // apply
  useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty(
      "--accent-soft",
      t.accent.replace(/^oklch\(([^)]+)\)$/, "oklch($1 / 0.12)")
    );
  }, [t.accent]);
  useEffect(() => {applyType(t.typePair);}, [t.typePair]);
  useEffect(() => {document.documentElement.dataset.density = t.density;}, [t.density]);
  useEffect(() => {
    const hero = document.querySelector(".hero");
    if (hero) hero.style.setProperty("--show-grid", t.showGrid ? 1 : 0);
    document.documentElement.style.setProperty("--hero-grid-opacity", t.showGrid ? 0.7 : 0);
  }, [t.showGrid]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Accent">
        <TweakColor
          label="Color"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
          options={ACCENT_OPTIONS} />
        
      </TweakSection>
      <TweakSection title="Type">
        <TweakSelect
          label="Pairing"
          value={t.typePair}
          onChange={(v) => setTweak("typePair", v)}
          options={TYPE_OPTIONS.map((o) => ({ value: o.id, label: o.label }))} />
        
      </TweakSection>
      <TweakSection title="Layout">
        <TweakRadio
          label="Density"
          value={t.density}
          onChange={(v) => setTweak("density", v)}
          options={[
          { value: "compact", label: "Compact" },
          { value: "default", label: "Default" },
          { value: "spacious", label: "Spacious" }]
          } />
        
        <window.TweakToggle
          label="Hero grid"
          value={t.showGrid}
          onChange={(v) => setTweak("showGrid", v)} />
        
      </TweakSection>
    </TweaksPanel>);

}

// ============= APP =============
function App() {
  return (
    <>
      <Nav />
      <Hero />
      <Thesis />
      <Capabilities />
      <Offers />
      <Work />
      <Pillars />
      <FinalCTA />
      <Foot />
      <Tweaks />
    </>);

}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);