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

/* ---------- Reveal-on-scroll hook ---------- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll("[data-reveal]");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12 }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ---------- Photo ---------- */
// Royalty-free Unsplash hotlink (per their hotlink guidelines), with a
// Picsum.photos fallback so any missing/blocked image still renders cleanly.
function Photo({ unsplashId, seed, alt, caption, w = 1400, h = 900, dark = false, position = "50% 50%" }) {
  const unsplash = unsplashId
    ? `https://images.unsplash.com/photo-${unsplashId}?w=${w}&q=70&fm=jpg&fit=crop&auto=format`
    : null;
  const picsum = `https://picsum.photos/seed/${seed || "wlspro"}/${w}/${h}`;
  const initial = unsplash || picsum;
  return (
    <div className={"ph ph-img" + (dark ? " ph-dark" : "")}>
      <img
        src={initial}
        alt={alt || ""}
        loading="lazy"
        decoding="async"
        onError={(e) => {
          if (e.currentTarget.dataset.fb !== "1") {
            e.currentTarget.dataset.fb = "1";
            e.currentTarget.src = picsum;
          }
        }}
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          objectFit: "cover",
          objectPosition: position,
        }}
      />
      {caption && <span className="ph-cap">{caption}</span>}
    </div>
  );
}

/* ---------- Monogram ---------- */
function Monogram({ size = 38 }) {
  return (
    <div className="mark" style={{ width: size, height: size, fontSize: size * 0.6 }}>
      W
    </div>
  );
}

/* ---------- Nav ---------- */
function Nav() {
  const items = [
    { label: "Services", href: "#services" },
    { label: "Network", href: "#network" },
    { label: "Visibility", href: "#visibility" },
    { label: "Heritage", href: "#heritage" },
  ];
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="#top" className="brand">
          <Monogram />
          <div className="wordmark">
            WLS<span className="pro">PRO</span>
          </div>
        </a>
        <div className="nav-links">
          {items.map((i) => (
            <a key={i.label} href={i.href}>
              {i.label}
            </a>
          ))}
        </div>
        <a href="#contact" className="nav-cta">
          Speak with us <span className="arrow">→</span>
        </a>
      </div>
    </nav>
  );
}

/* ---------- Hero ---------- */
function Hero({ variant = "editorial" }) {
  return (
    <header className="hero wrap" id="top">
      <div className="hero-meta">
        <span><span className="dot"></span>EST. SOUTHAMPTON · INTEGRATED LOGISTICS</span>
        <span>SERVING 14 PORTS · 8 COUNTRIES</span>
        <span>VOL. XXVI · MMXXVI</span>
      </div>

      {variant === "editorial" && (
        <h1>
          Commodity &amp; maritime<br />
          logistics, <em>engineered</em>.
        </h1>
      )}
      {variant === "stacked" && (
        <h1>
          Move energy.<br />
          Move <em>agribulk</em>.<br />
          Move <em>everything</em>.
        </h1>
      )}
      {variant === "data" && (
        <h1>
          A century of cargo,<br />
          measured in <em>milliseconds</em>.
        </h1>
      )}

      <div className="hero-deck">
        <div>
          <p className="hero-sub">
            WLS Pro is the integrated logistics partner for energy, agribulk and project cargo —
            pairing a century of maritime craft with live data visibility, so every tonne moves
            with the precision your supply chain deserves.
          </p>
          <div className="hero-actions" style={{ marginTop: 32 }}>
            <a href="#contact" className="btn btn-primary">
              Request a consultation <span className="arrow">→</span>
            </a>
            <a href="#services" className="btn btn-ghost">
              Explore capabilities
            </a>
          </div>
        </div>
        <div className="hero-cred">
          <div>OPERATING SINCE</div>
          <span className="est">1924</span>
        </div>
      </div>

      <div className="hero-image">
        <Photo
          unsplashId="1508404999913-79a3a2e75437"
          seed="wls-hero"
          alt="Aerial view of container port at dusk"
          w={2000}
          h={1100}
          position="50% 55%"
        />
        <div className="badge">
          <span className="dot"></span>PORT OF ROTTERDAM · 51.949°N
        </div>
        <div className="live-data">
          <div className="lh">
            <span>VESSEL MV ARDENT</span>
            <span>LIVE</span>
          </div>
          <div className="row"><span>ETA Antwerp</span><span className="v">14:22 UTC</span></div>
          <div className="row"><span>Cargo</span><span className="v">42,300 t · agribulk</span></div>
          <div className="row"><span>CO₂ savings</span><span className="v">−18.4%</span></div>
          <div className="row"><span>Berth</span><span className="v">DLT-7 confirmed</span></div>
        </div>
      </div>

      <div className="marquee">
        <div className="marquee-inner">
          <span>
            Energy <span className="sep"></span> Agribulk <span className="sep"></span> Project Cargo
            <span className="sep"></span> Stevedoring <span className="sep"></span> Ports Agency
            <span className="sep"></span> Bonded Warehousing <span className="sep"></span>
            Insurance &amp; Consultancy <span className="sep"></span> Inland Barge
            <span className="sep"></span>
          </span>
          <span>
            Energy <span className="sep"></span> Agribulk <span className="sep"></span> Project Cargo
            <span className="sep"></span> Stevedoring <span className="sep"></span> Ports Agency
            <span className="sep"></span> Bonded Warehousing <span className="sep"></span>
            Insurance &amp; Consultancy <span className="sep"></span> Inland Barge
            <span className="sep"></span>
          </span>
        </div>
      </div>
    </header>
  );
}

/* ---------- Heritage ---------- */
function Heritage() {
  return (
    <section className="section" id="heritage">
      <div className="wrap" data-reveal>
        <div className="section-eyebrow">
          <span className="num">— 01</span>
          <span>About WLS Pro</span>
          <span className="line"></span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "end" }}>
          <h2 className="section-title">
            Rooted in a century<br />
            of maritime <em>heritage</em>.
          </h2>
          <p className="section-lede">
            Boots-on-deck expertise paired with live data visibility — removing friction, lowering
            emissions, and unlocking growth across every commodity sector we touch.
          </p>
        </div>

        <div className="heritage">
          <div className="cell">
            <div className="stat">1924<sup>★</sup></div>
            <div className="stat-label">Year Founded</div>
            <div className="stat-note">Four generations of port and quayside craft.</div>
          </div>
          <div className="cell">
            <div className="stat">14</div>
            <div className="stat-label">Active Ports</div>
            <div className="stat-note">From Felixstowe to Constanța.</div>
          </div>
          <div className="cell">
            <div className="stat">3,200<sup>m²</sup></div>
            <div className="stat-label">Bonded Storage</div>
            <div className="stat-note">Racked &amp; open cargo facilities.</div>
          </div>
          <div className="cell">
            <div className="stat">24/7</div>
            <div className="stat-label">Operations Desk</div>
            <div className="stat-note">Crew, compliance, and berth coordination.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Services ---------- */
const SERVICES = [
  {
    n: "i",
    title: "Inland & Coastal Shipping",
    body:
      "A dedicated barge network across Europe's inland waterways, engineered for just-in-time delivery and a materially lower carbon footprint.",
    tags: ["Barge fleet", "JIT delivery", "CO₂ −22%"],
    ph: "Barge convoy · low water-line, golden hour",
    img: "1494412519320-aa613dfb7738",
    seed: "wls-barge",
    pos: "50% 50%",
  },
  {
    n: "ii",
    title: "Port & Ships Agency",
    body:
      "Around-the-clock berth optimisation, crew logistics, customs and compliance — orchestrated for seamless vessel turnaround at any tier-one port.",
    tags: ["24/7 desk", "Berth ops", "Crew & customs"],
    ph: "Quayside ops · pilot boat at sunrise",
    img: "1577416412292-747c6607f055",
    seed: "wls-quay",
    pos: "50% 50%",
  },
  {
    n: "iii",
    title: "Stevedoring & Cargo Handling",
    body:
      "Award-winning terminal teams executing lift-on / lift-off, Ro-Ro and heavy-lift operations with the safety record and tempo our partners depend on.",
    tags: ["LoLo · RoRo", "Heavy-lift", "ISO 28000"],
    ph: "Gantry crane · containers mid-lift",
    img: "1494412651409-8963ce7935a7",
    seed: "wls-crane",
    pos: "50% 45%",
  },
  {
    n: "iv",
    title: "Storage & Warehousing",
    body:
      "Bonded and general-cargo facilities offering over 3,200 m² of racked and open storage — fully integrated with our digital inventory layer.",
    tags: ["Bonded", "Climate-controlled", "API-tracked"],
    ph: "Warehouse interior · racked pallets",
    img: "1553413077-190dd305871c",
    seed: "wls-warehouse",
    pos: "50% 50%",
  },
  {
    n: "v",
    title: "Consultancy & Insurance",
    body:
      "Supply-chain optimisation, risk modelling, and transport insurance — under one roof, sized to fleets of every scale.",
    tags: ["Risk modelling", "Cargo insurance", "Net-zero advisory"],
    ph: "Boardroom · charts and shipping atlas",
    img: "1497366216548-37526070297c",
    seed: "wls-board",
    pos: "50% 50%",
  },
  {
    n: "vi",
    title: "Digital Visibility & IT",
    body:
      "API-ready dashboards delivering live inventory, ETA and emissions data — built so your team can decide in seconds, not days.",
    tags: ["REST · Webhooks", "Live ETA", "Scope-3 reporting"],
    ph: "Dashboard close-up · dark UI",
    img: "1551288049-bebda4e38f71",
    seed: "wls-data",
    pos: "50% 50%",
  },
];

function Services() {
  return (
    <section className="section" id="services">
      <div className="wrap" data-reveal>
        <div className="section-eyebrow">
          <span className="num">— 02</span>
          <span>Capabilities</span>
          <span className="line"></span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "end" }}>
          <h2 className="section-title">
            Six disciplines.<br />
            One <em>integrated</em> chain.
          </h2>
          <p className="section-lede">
            Every leg of your commodity journey — from upriver origin to terminal gate — operated
            by specialists who answer to a single account team.
          </p>
        </div>

        <div className="services">
          {SERVICES.map((s) => (
            <div className="service" key={s.title}>
              <div className="num">{s.n}.</div>
              <div className="body">
                <h3>{s.title}</h3>
                <p>{s.body}</p>
                <div className="tags">
                  {s.tags.map((t) => (
                    <span className="tag" key={t}>{t}</span>
                  ))}
                </div>
                <div className="more" style={{ marginTop: 20 }}>
                  Read brief <span className="arrow">→</span>
                </div>
              </div>
              <div className="thumb">
                <Photo
                  unsplashId={s.img}
                  seed={s.seed}
                  alt={s.title}
                  position={s.pos}
                  w={800}
                  h={500}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Visibility (Dashboard mock) ---------- */
function Visibility() {
  return (
    <section className="section dark" id="visibility">
      <div className="wrap" data-reveal>
        <div className="section-eyebrow">
          <span className="num">— 03</span>
          <span>Digital Visibility</span>
          <span className="line"></span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "end" }}>
          <h2 className="section-title">
            Every tonne, <em>observable</em>.<br />
            Every decision, defensible.
          </h2>
          <p className="section-lede">
            One operating layer for inventory, ETA, emissions and exception alerts — ready for your
            ERP, BI stack, and the board pack you'll publish on Monday morning.
          </p>
        </div>

        <div className="viz-grid">
          <div className="viz-copy">
            <ul>
              <li>
                <span className="k">α</span>
                <span className="body">
                  <b>Live operational truth</b>
                  Vessel position, berth status and quayside throughput, refreshed every 30 seconds.
                </span>
              </li>
              <li>
                <span className="k">β</span>
                <span className="body">
                  <b>Scope-3 emissions, audit-ready</b>
                  GLEC-aligned reporting per shipment, per route, per partner.
                </span>
              </li>
              <li>
                <span className="k">γ</span>
                <span className="body">
                  <b>Exceptions, not noise</b>
                  Alerts triggered by SLA risk — never by routine. Quiet by design.
                </span>
              </li>
              <li>
                <span className="k">δ</span>
                <span className="body">
                  <b>Open API, no lock-in</b>
                  REST &amp; webhooks. Native connectors for SAP, Oracle TMS and Snowflake.
                </span>
              </li>
            </ul>
          </div>

          <Dashboard />
        </div>
      </div>
    </section>
  );
}

function Dashboard() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 2200);
    return () => clearInterval(id);
  }, []);

  const rows = [
    { id: "MV-ARDENT", route: "ROT → ANR", status: "on", eta: "14:22", co2: "−18%" },
    { id: "MV-NORTHWND", route: "FXT → HAM", status: "on", eta: "06:48", co2: "−12%" },
    { id: "MV-CALYX", route: "CTN → PIR", status: "warn", eta: "+04:10", co2: "−9%" },
    { id: "MV-OREL", route: "DUI → ANR", status: "on", eta: "21:55", co2: "−24%" },
    { id: "BG-LIRA-04", route: "ANR → STR", status: "on", eta: "11:30", co2: "−31%" },
  ];

  // animate one of the deltas slightly
  const deltaVal = (18.4 + Math.sin(tick / 2) * 0.6).toFixed(1);

  return (
    <div className="dashboard">
      <div className="dash-head">
        <div className="title">Fleet Visibility · Live</div>
        <div className="live"><span className="dot"></span>Streaming</div>
      </div>

      <div className="dash-row">
        <div className="dash-stat">
          <div className="lbl">Active Vessels</div>
          <div className="val">38</div>
          <div className="delta up">↑ 4 since 06:00</div>
        </div>
        <div className="dash-stat">
          <div className="lbl">On-Time Berthing</div>
          <div className="val">97.2<span style={{ fontSize: "0.5em", marginLeft: 4 }}>%</span></div>
          <div className="delta up">↑ 1.4 pts MoM</div>
        </div>
        <div className="dash-stat">
          <div className="lbl">Avg CO₂ vs Road</div>
          <div className="val">−{deltaVal}<span style={{ fontSize: "0.5em", marginLeft: 4 }}>%</span></div>
          <div className="delta up">trailing 30d</div>
        </div>
      </div>

      <div className="dash-table">
        <div className="th">
          <span>ID</span>
          <span>Route</span>
          <span>Status</span>
          <span>ETA</span>
          <span className="col-hide">CO₂</span>
        </div>
        {rows.map((r) => (
          <div className="tr" key={r.id}>
            <span style={{ color: "rgba(244, 239, 230, 0.5)" }}>{r.id}</span>
            <span>{r.route}</span>
            <span className={`status ${r.status}`}>
              {r.status === "on" ? "On track" : "Delayed"}
            </span>
            <span className="v">{r.eta}</span>
            <span className="v col-hide">{r.co2}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Coverage ---------- */
function Coverage() {
  const ports = [
    { code: "ROT", city: "Rotterdam", country: "NL", meta: "HQ · Tier-1" },
    { code: "ANR", city: "Antwerp", country: "BE", meta: "Stevedoring" },
    { code: "HAM", city: "Hamburg", country: "DE", meta: "Agency" },
    { code: "FXT", city: "Felixstowe", country: "UK", meta: "Stevedoring" },
    { code: "SOU", city: "Southampton", country: "UK", meta: "Global HQ" },
    { code: "DUI", city: "Duisburg", country: "DE", meta: "Inland" },
    { code: "STR", city: "Strasbourg", country: "FR", meta: "Inland" },
    { code: "CTN", city: "Constanța", country: "RO", meta: "Agency" },
    { code: "PIR", city: "Piraeus", country: "GR", meta: "Agency" },
  ];

  return (
    <section className="section" id="network">
      <div className="wrap" data-reveal>
        <div className="section-eyebrow">
          <span className="num">— 04</span>
          <span>Network</span>
          <span className="line"></span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "end" }}>
          <h2 className="section-title">
            From the North Sea<br />
            to the <em>Black Sea</em>.
          </h2>
          <p className="section-lede">
            Nine principal ports and a dense inland-waterway corridor. One account team, one
            invoice, one operational picture — across the entire European theatre.
          </p>
        </div>

        <div className="coverage">
          <div className="coverage-list">
            {ports.map((p) => (
              <div className="row" key={p.code}>
                <span className="iata">{p.code}</span>
                <span className="city">
                  {p.city}<span>· {p.country}</span>
                </span>
                <span className="meta">{p.meta}</span>
              </div>
            ))}
          </div>
          <CoverageMap />
        </div>
      </div>
    </section>
  );
}

function CoverageMap() {
  /* Stylized abstract Europe — dots, rivers, no realistic SVG drawing.
     Approximate-positioned port nodes on a striped backdrop. */
  const nodes = [
    { x: 38, y: 32, code: "SOU" },
    { x: 46, y: 30, code: "FXT" },
    { x: 49, y: 36, code: "ROT" },
    { x: 51, y: 39, code: "ANR" },
    { x: 56, y: 33, code: "HAM" },
    { x: 56, y: 47, code: "DUI" },
    { x: 53, y: 53, code: "STR" },
    { x: 78, y: 56, code: "CTN" },
    { x: 70, y: 70, code: "PIR" },
  ];

  return (
    <div className="coverage-map">
      <svg viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <pattern id="stripes" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <line x1="0" y1="0" x2="0" y2="6" stroke="rgba(14,22,34,0.07)" strokeWidth="2" />
          </pattern>
        </defs>
        <rect width="100" height="100" fill="url(#stripes)" />
        {/* river paths — simple straight-ish connections */}
        <g stroke="rgba(176,138,62,0.55)" strokeWidth="0.25" fill="none" strokeDasharray="0.6 0.4">
          <path d="M38,32 L46,30 L49,36 L51,39 L56,47 L53,53" />
          <path d="M51,39 L56,33" />
          <path d="M53,53 L78,56 L70,70" />
        </g>
        {nodes.map((n) => (
          <g key={n.code}>
            <circle cx={n.x} cy={n.y} r="1.2" fill="#0e1622" />
            <circle cx={n.x} cy={n.y} r="2.4" fill="none" stroke="#b08a3e" strokeWidth="0.18" opacity="0.6" />
          </g>
        ))}
      </svg>
      {nodes.slice(0, 6).map((n) => (
        <span
          key={n.code}
          className="map-tag"
          style={{ left: `calc(${n.x}% + 12px)`, top: `calc(${n.y}% - 8px)` }}
        >
          {n.code}
        </span>
      ))}
    </div>
  );
}

/* ---------- Case / Testimonial ---------- */
function Case() {
  return (
    <section className="section">
      <div className="wrap" data-reveal>
        <div className="section-eyebrow">
          <span className="num">— 05</span>
          <span>In Service</span>
          <span className="line"></span>
        </div>
        <div className="case">
          <div>
            <p className="quote">
              We moved 1.4 million tonnes of grain across a single harvest window — and never lost
              sight of a barge. WLS Pro is the rare partner that runs the quay and the dashboard.
            </p>
            <div className="quote-attr">
              <div className="avatar">H</div>
              <div className="who">
                <b>Helena Vermeulen</b>
                <span>Director of Supply Chain · Continental Agri Trading</span>
              </div>
            </div>
          </div>
          <div className="case-numbers">
            <div className="cell">
              <div className="big">1.4<em>m</em></div>
              <div className="lbl">Tonnes Moved</div>
            </div>
            <div className="cell">
              <div className="big">99.6<em>%</em></div>
              <div className="lbl">On-Time</div>
            </div>
            <div className="cell">
              <div className="big">−24<em>%</em></div>
              <div className="lbl">CO₂ vs Road</div>
            </div>
            <div className="cell">
              <div className="big">11</div>
              <div className="lbl">Quay Crews</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- CTA ---------- */
function CTA() {
  return (
    <section className="cta-section" id="contact">
      <div className="wrap">
        <div className="eyebrow">Ready when you are</div>
        <h2>
          Speak with our<br />
          <em>logistics engineers</em>.
        </h2>
        <div className="actions">
          <a href="mailto:info@wlspro.com" className="btn btn-primary">
            Book a consultation <span className="arrow">→</span>
          </a>
          <a href="#services" className="btn btn-ghost">
            Download capability brief
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="brand">
            <Monogram />
            <div className="wordmark" style={{ color: "var(--paper)" }}>
              WLS<span className="pro" style={{ color: "rgba(244,239,230,0.6)" }}>PRO</span>
            </div>
            <p className="blurb">
              Integrated maritime &amp; commodity logistics, founded 1924. Headquartered in
              Southampton, operating across the European theatre.
            </p>
          </div>
          <div>
            <h4>Capabilities</h4>
            <ul>
              <li><a href="#services">Inland &amp; Coastal</a></li>
              <li><a href="#services">Ports Agency</a></li>
              <li><a href="#services">Stevedoring</a></li>
              <li><a href="#services">Warehousing</a></li>
              <li><a href="#services">Consultancy</a></li>
            </ul>
          </div>
          <div>
            <h4>Company</h4>
            <ul>
              <li><a href="#heritage">About</a></li>
              <li><a href="#network">Network</a></li>
              <li><a href="#visibility">Visibility</a></li>
              <li><a href="#contact">Careers</a></li>
              <li><a href="#contact">Press</a></li>
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul>
              <li>info@wlspro.com</li>
              <li>+44 7520 674002</li>
              <li style={{ color: "rgba(244,239,230,0.5)", lineHeight: 1.55 }}>
                Westridge Court, 8 Westridge Road,<br />Southampton SO17 2HQ
              </li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© MMXXVI · WLS PRO INTEGRATED LOGISTICS</span>
          <span>SOU · ROT · ANR · HAM · FXT · DUI · STR · CTN · PIR</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Tweaks ---------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#b08a3e",
  "hero_variant": "editorial",
  "marquee": true
}/*EDITMODE-END*/;

const ACCENT_DARKER = {
  "#b08a3e": "#8d6d2c", // brass
  "#a64242": "#7d2e2e", // oxblood
  "#3e8a78": "#2c6d5e", // sea green
  "#3a5f8a": "#2a4565", // deep sea
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  // Apply accent palette
  useEffect(() => {
    const accent = t.accent || "#b08a3e";
    const darker = ACCENT_DARKER[accent] || accent;
    document.documentElement.style.setProperty("--accent", accent);
    document.documentElement.style.setProperty("--accent-2", darker);
  }, [t.accent]);

  // Toggle marquee visibility
  useEffect(() => {
    const m = document.querySelector(".marquee");
    if (m) m.style.display = t.marquee ? "" : "none";
  }, [t.marquee]);

  return (
    <>
      <Nav />
      <Hero variant={t.hero_variant} />
      <Heritage />
      <Services />
      <Visibility />
      <Coverage />
      <Case />
      <CTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent" />
        <TweakColor
          label="Palette"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
          options={["#b08a3e", "#a64242", "#3e8a78", "#3a5f8a"]}
        />
        <TweakSection label="Hero headline" />
        <TweakRadio
          label="Variant"
          value={t.hero_variant}
          onChange={(v) => setTweak("hero_variant", v)}
          options={[
            { value: "editorial", label: "Editorial" },
            { value: "stacked", label: "Stacked" },
            { value: "data", label: "Data" },
          ]}
        />
        <TweakSection label="Layout" />
        <TweakToggle
          label="Marquee strip"
          value={t.marquee}
          onChange={(v) => setTweak("marquee", v)}
        />
      </TweaksPanel>
    </>
  );
}

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