/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSlider, TweakToggle */
const { useState, useEffect, useMemo, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "mexican-global",
  "accent": "cyan",
  "showCalculator": true,
  "showLogosRow": true
} /*EDITMODE-END*/;

const HEADLINES = {
  "mexican-global": { eyebrow: "GLOBAL STAFFING", a: "Mexican engineering.", b: "Global cost.", italic: "Global" },
  "missing-layer": { eyebrow: "GLOBAL STAFFING", a: "The engineering layer", b: "your U.S. team is missing.", italic: "missing" },
  "twenty-one-days": { eyebrow: "GLOBAL STAFFING", a: "Senior engineers.", b: "Productive in 21 days.", italic: "21 days" }
};

const ACCENTS = {
  cyan: { primary: "#02c1d8", lime: "#bfe007", navy: "#0a1f3d", deep: "#06142b" },
  lime: { primary: "#bfe007", lime: "#02c1d8", navy: "#0a1f3d", deep: "#06142b" }
};

// ---------- HERO ----------
function Hero({ tweaks }) {
  const h = HEADLINES[tweaks.headline] || HEADLINES["mexican-global"];
  const c = ACCENTS[tweaks.accent] || ACCENTS.cyan;

  return (
    <section className="hero" style={{ "--primary": c.primary, "--lime": c.lime, "--navy": c.navy, "--deep": c.deep }}>
      <div className="hero-grid-bg" aria-hidden="true"></div>
      <div className="hero-glow" aria-hidden="true"></div>

      <header className="topbar">
        <div className="brand">
          <img src="assets/stn-logo-official.png" alt="STN People — Headhunting & Staffing" className="brand-logo" />
        </div>
        <nav className="topnav">
          <a href="#why">Why STN</a>
          <a href="#how">How it works</a>
          <a href="#compare">Compare</a>
          <a href="#faq">FAQ</a>
        </nav>
        <a href="https://calendly.com/ramon-alarcon-stnpeople/30min" target="_blank" rel="noopener noreferrer" className="btn btn-pill btn-primary">Book a 20-min call →</a>
      </header>

      <div className="hero-inner">
        <div className="hero-eyebrow">
          <span className="dot"></span>
          <span>{h.eyebrow} · NEARSHORE · MONTERREY, MX</span>
        </div>

        <h1 className="hero-headline">
          <span className="line">{h.a}</span>
          <span className="line">
            <span className="serif-italic">{h.italic}</span>{" "}
            {h.b.replace(h.italic, "")}
          </span>
        </h1>

        <div className="hero-meta">
          <div className="meta-stat" style={{ flexDirection: "row", gap: "24px", alignItems: "center", justifyContent: "flex-start", textAlign: "left" }}>
            <div className="stat-num">40<span className="pct">%</span></div>
            <div className="stat-label" style={{ textAlign: "left", lineHeight: "1.45", fontSize: "14px", maxWidth: "180px" }}>lower cost vs. local U.S. or European engineering talent.</div>
          </div>
          <div className="meta-divider"></div>
          <ul className="meta-bullets">
            <li><CheckIcon /> Senior remote engineers</li>
            <li><CheckIcon /> Same time zone (CST/EST)</li>
            <li><CheckIcon /> Cultural alignment</li>
            <li><CheckIcon /> One invoice. No Mexican entity.</li>
          </ul>
        </div>

        <div className="hero-cta">
          <a href="https://calendly.com/ramon-alarcon-stnpeople/30min" target="_blank" rel="noopener noreferrer" className="btn btn-primary btn-lg">Book your 20-min call →</a>
          <a href="#how" className="btn btn-ghost btn-lg">See how it works</a>
          <div className="cta-trust">
            <span className="trust-dot"></span>
            <span>21 days to productive · REPSE certified · Est. 2009</span>
          </div>
        </div>
      </div>

      {tweaks.showLogosRow &&
      <div className="logos-row">
          <div className="logos-label">Trusted by U.S. and global teams — from Fortune 500 to MSP partners</div>
          <div className="logos-track">
            <ClientLogo name="RACKSPACE" sub="Cloud / Salesforce" />
            <ClientLogo name="TWILIO" sub="APIs / Project Mgmt" />
            <ClientLogo name="SAMSUNG" sub="Industrial" />
            <ClientLogo name="CENTRIENT" sub="Pharma / GMP" />
            <ClientLogo name="KELLY OCG" sub="MSP partner" />
            <ClientLogo name="CYTVA" sub="Pharma automation" />
          </div>
        </div>
      }
    </section>);

}

function ClientLogo({ name, sub }) {
  return (
    <div className="client-logo">
      <span className="client-logo-name">{name}</span>
      <span className="client-logo-sub">{sub}</span>
    </div>);

}

// ---------- SECTION 1: WHY STN ----------
function WhySTN() {
  const items = [
  { k: "01", t: "Senior. Not junior outsourcing.", d: "We place engineers with 7+ years of experience. Same caliber as your U.S. hires — at Mexican rates.", tag: "QUALITY" },
  { k: "02", t: "Same time zone. Same culture.", d: "Monterrey runs on CST. Your standups, your sprint planning, your Slack threads — all in real time, in fluent English.", tag: "ALIGNMENT" },
  { k: "03", t: "One invoice. No entity needed.", d: "We are the legal employer in Mexico. IMSS, payroll, compliance — all ours. You get one USD invoice per month.", tag: "LEGAL" },
  { k: "04", t: "Keep the talent. No buyout fees.", d: "After 6 months, if you want to hire the engineer directly, you can — without paying conversion fees. The talent stays yours.", tag: "FAIR" }];


  return (
    <section className="section section-light" id="why">
      <div className="section-head">
        <div className="kicker">— Why STN People</div>
        <h2 className="section-title">
          A staffing partner, <span className="serif-italic">not</span> a body shop.
        </h2>
        <p className="section-lede">
          We've spent 15+ years matching senior Mexican engineers to U.S. teams that need real technical depth — not just headcount.
        </p>
      </div>

      <div className="why-grid">
        {items.map((it) =>
        <article className="why-card" key={it.k}>
            <div className="why-top">
              <span className="why-num">{it.k}</span>
              <span className="why-tag">{it.tag}</span>
            </div>
            <h3 className="why-title">{it.t}</h3>
            <p className="why-desc">{it.d}</p>
          </article>
        )}
      </div>

      <div className="testimonial">
        <div className="quote-mark">"</div>
        <blockquote>
          Leopoldo has been an <em>incredible asset to the team</em>, and they truly value his contributions.
        </blockquote>
        <div className="quote-meta">
          <span>CYTVA · Automation Industry · PlantPAX Automation Engineer placed by STN People</span>
        </div>
      </div>

      <div className="projects-band">
        <div className="projects-label">— Real projects we've staffed</div>
        <div className="projects-grid">
          <div className="project-item">
            <div className="project-client">RACKSPACE</div>
            <div className="project-role">Cloud developers, Salesforce devs, data analysts, process engineers</div>
          </div>
          <div className="project-item">
            <div className="project-client">TWILIO</div>
            <div className="project-role">Project managers & scrum masters for API integration</div>
          </div>
          <div className="project-item">
            <div className="project-client">CYTVA</div>
            <div className="project-role">Automation engineers — Rockwell / PlantPAX / FDA-compliant lines</div>
          </div>
          <div className="project-item">
            <div className="project-client">CENTRIENT</div>
            <div className="project-role">Pharma operations under GMP standards, project management</div>
          </div>
          <div className="project-item">
            <div className="project-client">KELLY OCG</div>
            <div className="project-role">Specialized technical talent under MSP model</div>
          </div>
          <div className="project-item">
            <div className="project-client">SAMSUNG</div>
            <div className="project-role">Industrial engineering and operations support</div>
          </div>
        </div>
      </div>

      <SectionCTA tone="light" lede="See how a senior Mexican engineer fits your team." />
    </section>);

}

// ---------- SECTION 2: HOW IT WORKS ----------
function HowItWorks() {
  const steps = [
  { n: "01", days: "Day 0–3", t: "Intake call", d: "20-min call. We map the role, the stack, the seniority, and how the engineer will fit your team's rituals." },
  { n: "02", days: "Day 4–10", t: "Shortlist", d: "You get 3–5 hand-picked profiles. Each one already vetted on technical depth, English fluency, and cultural fit." },
  { n: "03", days: "Day 11–18", t: "Interview", d: "You interview the way you would for any U.S. hire. We coordinate, you decide. No pressure, no quotas." },
  { n: "04", days: "Day 19–21", t: "Onboard", d: "We handle contract, payroll setup in MX, equipment, and IMSS. They start productive — not orienting." }];


  const specialties = [
  { k: "AUTOMATION", t: "Industrial Automation & Engineering" },
  { k: "AI / DATA", t: "AI, Data & Cybersecurity Engineering" },
  { k: "SOFTWARE", t: "Software Development & Agile Leadership" },
  { k: "DEVOPS", t: "Cloud, DevOps & Platform Engineering" }];


  return (
    <section className="section section-dark" id="how">
      <div className="section-head section-head-dark">
        <div className="kicker kicker-dark">— How it works</div>
        <h2 className="section-title section-title-dark">
          From intake call to a productive engineer <span className="serif-italic">in 21 days.</span>
        </h2>
      </div>

      <ol className="steps">
        {steps.map((s, i) =>
        <li className="step" key={s.n}>
            <div className="step-rail">
              <span className="step-num">{s.n}</span>
              {i < steps.length - 1 && <span className="step-line"></span>}
            </div>
            <div className="step-body">
              <div className="step-days">{s.days}</div>
              <h3 className="step-title">{s.t}</h3>
              <p className="step-desc">{s.d}</p>
            </div>
          </li>
        )}
      </ol>

      <div className="specialties">
        <div className="specialties-label">— Specialties we staff for</div>
        <div className="specialties-grid">
          {specialties.map((s) =>
          <div className="specialty" key={s.k}>
              <div className="specialty-key">{s.k}</div>
              <div className="specialty-title">{s.t}</div>
            </div>
          )}
        </div>
        <div className="specialties-foot">
          Pricing depends on role, seniority, and stack. We size each engagement around your scope — and we always show the math.
        </div>
      </div>

      <SectionCTA tone="dark" lede="Skip the 90-day hire cycle. Start the 21-day one." />
    </section>);

}

// ---------- SECTION 3: COMPARISON ----------
function Comparison() {
  const rows = [
  { label: "Hourly cost (senior eng.)", stn: "≈ 40% less", us: "Baseline", india: "Lowest, varies", eor: "≈ 15–25% less" },
  { label: "Time zone overlap with U.S.", stn: "Full (CST/EST)", us: "Full", india: "≤ 2 hrs", eor: "Depends on country" },
  { label: "Cultural / English fluency", stn: "Native-level English", us: "Native", india: "Variable", eor: "Variable" },
  { label: "Legal employer in Mexico", stn: "STN (IMSS, REPSE)", us: "Not applicable", india: "Not applicable", eor: "Yes — generic, not local" },
  { label: "Mexican entity required", stn: "No", us: "No", india: "No", eor: "No" },
  { label: "Buyout / conversion fee", stn: "$0 after 6 months", us: "Not applicable", india: "Often 15–25%", eor: "Often 15–25%" },
  { label: "Time to productive", stn: "21 days", us: "60–90+ days", india: "30–45 days", eor: "30–60 days" },
  { label: "Misclassification risk", stn: "None — fully compliant", us: "None", india: "Yours to handle", eor: "Low" }];


  return (
    <section className="section section-light" id="compare">
      <div className="section-head">
        <div className="kicker">— How we compare</div>
        <h2 className="section-title">
          STN vs. <span className="serif-italic">the alternatives</span> you're weighing.
        </h2>
      </div>

      <div className="compare-wrap">
        <table className="compare-table">
          <thead>
            <tr>
              <th></th>
              <th className="col-stn">
                <div className="col-head-stn">STN PEOPLE</div>
                <div className="col-sub">Nearshore Mexico</div>
              </th>
              <th>
                <div className="col-head">Hire local U.S.</div>
                <div className="col-sub">In-market</div>
              </th>
              <th>
                <div className="col-head">India offshore</div>
                <div className="col-sub">Far-shore</div>
              </th>
              <th>
                <div className="col-head">Generic EOR</div>
                <div className="col-sub">Global platforms</div>
              </th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r) =>
            <tr key={r.label}>
                <td className="row-label">{r.label}</td>
                <td className="cell-stn">{r.stn}</td>
                <td>{r.us}</td>
                <td>{r.india}</td>
                <td>{r.eor}</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      <SectionCTA tone="light" lede="Convinced on paper? Let's talk specifics on a 20-min call." />
    </section>);

}

// ---------- SECTION 4: FAQ ----------
function FAQ() {
  const items = [
  {
    q: "Do I need a legal entity in Mexico?",
    a: "No. STN is the legal employer of the engineer in Mexico — IMSS, payroll, REPSE compliance, all handled by us. You receive one monthly invoice in USD. Zero footprint required."
  },
  {
    q: "What if I want to hire the engineer directly later?",
    a: "After 6 months, you can convert the engineer to your direct payroll with $0 buyout fee. The talent is yours. Many clients do this once they spin up an entity — and we still help them transition."
  },
  {
    q: "Time zone, language, culture — really?",
    a: "Monterrey is on Central Time. Our engineers communicate in English daily, attend the same standups your team does, and grew up consuming the same tech culture. Same field, same playbook."
  },
  {
    q: "What if the engineer isn't a fit?",
    a: "We replace at no cost during the first 90 days. We also stay close after — if friction shows up at month 7, we resolve it. We'd rather lose a placement than a client."
  },
  {
    q: "How is this different from an EOR like Deel or Remote.com?",
    a: "An EOR rents you legal compliance. We source, vet, and place the engineer too — and we know the local market because we live in it. Generic EORs hand you a payroll product. We hand you a teammate."
  },
  {
    q: "Can you white-label for MSPs and staffing partners?",
    a: "Yes. We operate invisibly under your brand for MSPs and boutique staffing agencies. Preferential rates, mutual NDA, no direct contact with your client. Ask about our partner program."
  }];


  const [open, setOpen] = useState(0);

  return (
    <section className="section section-light section-tight" id="faq">
      <div className="section-head">
        <div className="kicker">— Common questions</div>
        <h2 className="section-title">
          The objections we hear <span className="serif-italic">every week.</span>
        </h2>
      </div>

      <div className="faq-list">
        {items.map((it, i) =>
        <div className={`faq-item ${open === i ? "open" : ""}`} key={i}>
            <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
              <span className="faq-num">{String(i + 1).padStart(2, "0")}</span>
              <span className="faq-q-text">{it.q}</span>
              <span className="faq-toggle">{open === i ? "—" : "+"}</span>
            </button>
            {open === i && <div className="faq-a">{it.a}</div>}
          </div>
        )}
      </div>

      <SectionCTA tone="light" lede="Got more questions? We answer them in plain English on the call." />
    </section>);

}

// ---------- SECTION 5: SAVINGS CALCULATOR ----------
function Calculator({ show }) {
  const [engineers, setEngineers] = useState(3);
  const [usSalary, setUsSalary] = useState(155);

  const stnRate = 0.6; // 40% less
  const annualUS = engineers * usSalary * 1000;
  const annualSTN = annualUS * stnRate;
  const annualSavings = annualUS - annualSTN;

  const fmt = (n) => "$" + n.toLocaleString("en-US", { maximumFractionDigits: 0 });

  if (!show) return null;

  return (
    <section className="section section-calc" id="calc">
      <div className="section-head">
        <div className="kicker kicker-dark">— Run the math</div>
        <h2 className="section-title section-title-dark">
          What 40% less <span className="serif-italic">actually</span> looks like.
        </h2>
      </div>

      <div className="calc-card">
        <div className="calc-controls">
          <div className="calc-row">
            <div className="calc-label">
              <span className="calc-label-key">ENGINEERS</span>
              <span className="calc-label-val">{engineers}</span>
            </div>
            <input
              type="range"
              min="1" max="20" step="1"
              value={engineers}
              onChange={(e) => setEngineers(+e.target.value)}
              className="calc-slider" />
            
            <div className="calc-scale"><span>1</span><span>20</span></div>
          </div>

          <div className="calc-row">
            <div className="calc-label">
              <span className="calc-label-key">U.S. ALL-IN SALARY (USD/YR)</span>
              <span className="calc-label-val">${usSalary}k</span>
            </div>
            <input
              type="range"
              min="100" max="280" step="5"
              value={usSalary}
              onChange={(e) => setUsSalary(+e.target.value)}
              className="calc-slider" />
            
            <div className="calc-scale"><span>$100k</span><span>$280k</span></div>
          </div>
        </div>

        <div className="calc-result">
          <div className="result-block">
            <div className="result-key">Local U.S. cost / yr</div>
            <div className="result-val result-muted">{fmt(annualUS)}</div>
          </div>
          <div className="result-arrow">→</div>
          <div className="result-block">
            <div className="result-key">With STN / yr</div>
            <div className="result-val">{fmt(annualSTN)}</div>
          </div>
          <div className="result-arrow">=</div>
          <div className="result-block result-block-big">
            <div className="result-key">Annual savings</div>
            <div className="result-val result-big">{fmt(annualSavings)}</div>
          </div>
        </div>

        <div className="calc-foot">
          Estimate based on 40% blended cost differential. Actual rates depend on role, seniority, and stack — we'll size yours in the intake call.
        </div>
      </div>

      <div className="section-cta-wrap section-cta-wrap-dark"><SectionCTA tone="dark" lede="Like the math? Lock it in on a 20-min call." /></div>
    </section>);

}

// ---------- SECTION 6: BOOK / FORM ----------
function BookSection() {
  return (
    <section className="section section-book" id="book">
      <div className="book-grid">
        <div className="book-left">
          <div className="kicker kicker-dark">— Let's talk</div>
          <h2 className="book-headline">
            Ready to save on your engineering costs?
          </h2>
          <p className="book-lede">
            Book a 20-min call. We'll map your roles, walk you through pricing, and have a shortlist on your desk within a week.
          </p>

          <div className="book-options">
            <a href="https://calendly.com/ramon-alarcon-stnpeople/30min" target="_blank" rel="noopener noreferrer" className="book-cta">
              <div className="book-cta-key">OPTION 01 — RECOMMENDED</div>
              <div className="book-cta-title">Book a 20-min call →</div>
              <div className="book-cta-sub">Calendly · pick your slot · meet Ramón</div>
            </a>
            <div className="book-or">or</div>
            <div className="book-cta book-cta-alt">
              <div className="book-cta-key">OPTION 02 — IF YOU PREFER ASYNC</div>
              <div className="book-cta-title">Send us your brief →</div>
              <div className="book-cta-sub">We reply within one business day</div>
            </div>
          </div>

          <div className="book-contact">
            <div><span className="bc-key">EMAIL</span> sales@stnpeople.com</div>
            <div><span className="bc-key">WHATSAPP</span> +52 3421 0822</div>
            <div><span className="bc-key">WEB</span> www.stnpeople.com/hire</div>
          </div>
        </div>

        <div className="book-right">
          <div className="airtable-wrap">
            <div className="form-head form-head-airtable">
              <div className="form-key">SEND US A BRIEF</div>
              <div className="form-title">Powered by Airtable · we'll respond within 1 business day.</div>
            </div>
            <iframe
              className="airtable-embed"
              src="https://airtable.com/embed/appFiH8ZV5lRXIM6l/pagWt5FY0nf52bXh9/form"
              frameBorder="0"
              width="100%"
              height="720"
              title="Send STN People a brief"
              style={{ background: "transparent", border: "1px solid var(--line)", borderRadius: "12px" }} />
          </div>
        </div>
      </div>
    </section>);

}

// ---------- FOOTER ----------
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-brand">
          <img src="assets/stn-logo-official.png" alt="STN People — Headhunting & Staffing" className="footer-logo" />
          <div className="footer-tag">Headhunting & Staffing · Est. 2009 · Monterrey, MX</div>
        </div>
        <div className="footer-cols">
          <div className="footer-col">
            <div className="footer-key">SERVICES</div>
            <a>Global Staffing</a>
            <a>REPSE Industrial</a>
            <a>Headhunting</a>
            <a>RPO / Sourcing</a>
          </div>
          <div className="footer-col">
            <div className="footer-key">COMPANY</div>
            <a>About</a>
            <a>Partners</a>
            <a>Careers</a>
            <a>Contact</a>
          </div>
          <div className="footer-col">
            <div className="footer-key">LEGAL</div>
            <a>REPSE Certified</a>
            <a>Privacy</a>
            <a>Terms</a>
          </div>
        </div>
      </div>
      <div className="footer-base">
        <div>SECODISA TRANSNATIONAL MEXICO S DE RL DE CV · © 2026 STN People</div>
        <div>www.stnpeople.com/hire</div>
      </div>
    </footer>);

}

// ---------- SECTION CTA (reusable inline CTA at end of each section) ----------
function SectionCTA({ tone = "light", lede }) {
  return (
    <div className={`section-cta section-cta-${tone}`}>
      <div className="section-cta-text">{lede}</div>
      <a href="https://calendly.com/ramon-alarcon-stnpeople/30min" target="_blank" rel="noopener noreferrer" className={tone === "dark" ? "btn btn-primary btn-lg" : "btn btn-dark btn-lg"}>
        Book your 20-min call →
      </a>
    </div>
  );
}

// ---------- STICKY FLOATING CTA ----------
function StickyCTA() {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      const heroH = window.innerHeight * 0.6;
      const nearBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 600;
      setVisible(window.scrollY > heroH && !nearBottom);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <a href="https://calendly.com/ramon-alarcon-stnpeople/30min" target="_blank" rel="noopener noreferrer" className={`sticky-cta ${visible ? "sticky-cta-visible" : ""}`}>
      <span className="sticky-cta-dot"></span>
      <span className="sticky-cta-text">Book your 20-min call</span>
      <span className="sticky-cta-arrow">→</span>
    </a>
  );
}

// ---------- ICONS ----------
function CheckIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
      <path d="M2 7.5L5.5 11L12 3.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

// ---------- TWEAKS ----------
function Tweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Headline">
        <TweakRadio
          value={tweaks.headline}
          onChange={(v) => setTweak("headline", v)}
          options={[
          { value: "mexican-global", label: "Mexican / Global" },
          { value: "missing-layer", label: "Missing layer" },
          { value: "twenty-one-days", label: "21 days" }]
          } />
        
      </TweakSection>

      <TweakSection title="Accent color">
        <TweakRadio
          value={tweaks.accent}
          onChange={(v) => setTweak("accent", v)}
          options={[
          { value: "cyan", label: "Cyan (brand)" },
          { value: "lime", label: "Lime-led" }]
          } />
        
      </TweakSection>

      <TweakSection title="Sections">
        <TweakToggle label="Show client logos row" value={tweaks.showLogosRow} onChange={(v) => setTweak("showLogosRow", v)} />
        <TweakToggle label="Show savings calculator" value={tweaks.showCalculator} onChange={(v) => setTweak("showCalculator", v)} />
      </TweakSection>
    </TweaksPanel>);

}

// ---------- APP ----------
function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const c = ACCENTS[tweaks.accent] || ACCENTS.cyan;

  useEffect(() => {
    document.documentElement.style.setProperty("--brand-primary", c.primary);
    document.documentElement.style.setProperty("--brand-lime", c.lime);
    document.documentElement.style.setProperty("--brand-navy", c.navy);
    document.documentElement.style.setProperty("--brand-deep", c.deep);
  }, [tweaks.accent]);

  return (
    <div className="page">
      <Hero tweaks={tweaks} />
      <WhySTN />
      <HowItWorks />
      <Comparison />
      <FAQ />
      <Calculator show={tweaks.showCalculator} />
      <BookSection />
      <Footer />
      <StickyCTA />
      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </div>);

}

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