/* NOVO ONE — User Manual */

const { useState, useEffect, useCallback } = React;

// ===========================================================
// Tweaks defaults (kept tiny for the manual — language only)
// ===========================================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "coverColorway": "onyx",
  "showPageBleed": false
} /*EDITMODE-END*/;

function useTweaks() {
  const [state, setState] = useState(TWEAK_DEFAULTS);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    function onMsg(e) {
      const d = e.data;if (!d) return;
      if (d.type === "__activate_edit_mode") setOpen(true);
      if (d.type === "__deactivate_edit_mode") setOpen(false);
    }
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);
  const update = useCallback((edits) => {
    setState((s) => {
      const next = { ...s, ...edits };
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits }, "*");
      return next;
    });
  }, []);
  return { tweaks: state, update, open, setOpen };
}

function TweaksPanel({ tweaks, update, onClose }) {
  return (
    <div className="tweaks-panel">
      <div className="tweaks-head">
        <span className="mono">TWEAKS</span>
        <button className="tweaks-close" onClick={onClose} aria-label="Close">
          <IconClose />
        </button>
      </div>
      <div className="tweaks-body">
        <div className="tweak-row">
          <div className="overline">Cover colorway</div>
          <div className="tweak-seg">
            {["onyx", "ivory", "champagne"].map((c) =>
            <button key={c}
            className={"seg-btn text " + (tweaks.coverColorway === c ? "on" : "")}
            onClick={() => update({ coverColorway: c })}>{c}</button>
            )}
          </div>
        </div>
      </div>
    </div>);

}

// ===========================================================
// Reusable sheet wrapper
// ===========================================================
function Sheet({ id, kind = "paper", section = "", page, total, children, label }) {
  return (
    <article className="sheet" data-kind={kind} id={id} style={kind === "ink" ? null : null}>
      <header className="sheet-head">
        <div className="h-left">
          <span className="word-sm">NOVO</span>
          <span>ONE<span style={{ color: "var(--nova-champagne-deep)" }}>.</span> · User Manual</span>
        </div>
        <div className="h-right">
          <span>{section}</span>
        </div>
      </header>
      <div className="sheet-body">
        {children}
      </div>
      <footer className="sheet-foot">
        <div className="f-left">
          <span>{label}</span>
        </div>
        <div className="f-right">
          <span>{String(page).padStart(2, "0")} / {String(total).padStart(2, "0")}</span>
        </div>
      </footer>
    </article>);

}

// ===========================================================
// 01 — Cover
// ===========================================================
function PageCover({ tweaks, total }) {
  return (
    <article className="sheet" id="cover" style={{ gridTemplateRows: "1fr" }}>
      <div className="sheet-body" style={{ padding: "16mm 18mm 14mm" }}>
        <div className="cover-grid">
          <div className="cover-left">
            <div>
              <div className="eyebrow">Premium sparkling water maker</div>
              <div style={{ marginTop: "10mm" }}>
                <div className="cover-wordmark">NOVO</div>
                <div className="cover-product">ONE<span className="dot">.</span></div>
              </div>
              <div className="cover-tag">Sparkling, refined.</div>
            </div>

            <div className="cover-doc">
              <div className="eyebrow" style={{ color: "var(--nova-champagne-deep)" }}>Document</div>
              <div className="title">User manual</div>
              <div className="meta">
                <div>
                  <div>Model</div>
                  <div>NOVO ONE</div>
                </div>
                <div>
                  <div>Edition</div>
                  <div>v1.0 · 2026</div>
                </div>
                <div>
                  <div>Pages</div>
                  <div>{String(total).padStart(2, "0")}</div>
                </div>
              </div>
            </div>
          </div>

          <div className="cover-right">
            <img src="images/cover-machine-black-complete.png" alt="NOVO ONE — Antracite Black" style={{ transform: "translateX(-5mm)" }} />
          </div>
        </div>
      </div>
    </article>);

}

// ===========================================================
// 02 — Contents
// ===========================================================
function PageContents({ total }) {
  const items = [
  { num: "01", title: "Welcome", page: "02" },
  { num: "02", title: "At a glance", page: "03" },
  { num: "03", title: "CO₂ cylinder", page: "04" },
  { num: "04", title: "Fill and secure the bottle", page: "05" },
  { num: "05", title: "Carbonate", page: "06" },
  { num: "06", title: "Release and serve", page: "07" },
  { num: "07", title: "Care", page: "08" },
  { num: "08", title: "Specifications & safety", page: "09" },
  { num: "09", title: "Contact", page: "10" }];

  return (
    <Sheet id="contents" section="01 — Welcome" page={2} total={total} label="Contents">
      <div className="contents-grid">
        <div className="contents-left">
          <div className="eyebrow">Welcome to NOVO</div>
          <h2 className="section-title">A refined<br />home ritual.</h2>
          <p className="welcome">
            Thank you for choosing NOVO ONE<span style={{ color: "var(--nova-champagne-deep)" }}>.</span>
            <br /><br />
            This manual covers setup, daily use, and care of your sparkling water maker.
            Please read it before first use, and keep it nearby for reference.
            <br /><br />
            Designed for modern kitchens — quiet to operate, simple to live with.
          </p>
        </div>
        <div className="toc">
          <div className="eyebrow" style={{ marginBottom: "6mm" }}>Contents</div>
          <ol>
            {items.map((it) =>
            <li key={it.num}>
                <span className="toc-num">{it.num}</span>
                <span>{it.title}</span>
                <span className="toc-page">p. {it.page}</span>
              </li>
            )}
          </ol>
        </div>
      </div>
    </Sheet>);

}

// ===========================================================
// 03 — At a glance (anatomy)
// ===========================================================
function PageAnatomy({ total }) {
  // Numbering matches the callouts baked into the line-art image.
  const parts = [
  "Top press button",
  "Column housing",
  "Lower column / cover panel",
  "Bottle gas release / Carbonation mode switch",
  "Bottle release cap",
  "Bottle body",
  "Bottle base",
  "Foldable base",
  "Lower case (CO₂ compartment)"];

  return (
    <Sheet id="anatomy" section="02 — At a glance" page={3} total={total} label="Schematic view">
      <div className="anatomy-grid">
        <div className="anatomy-visual">
          <img src="images/anatomy-lineart.png" alt="NOVO ONE — exploded view with numbered callouts" />
        </div>
        <div className="anatomy-info">
          <div className="eyebrow">02 — At a glance</div>
          <h2 className="section-title">Your machine,<br />part by part.</h2>
          <p className="section-sub">
            NOVO ONE is a slim vertical sparkling water maker with a bottom-loaded CO₂ cylinder,
            top press button, and rotary release knob. Foldable base for compact storage.
          </p>
          <div className="parts">
            <div className="eyebrow" style={{ marginBottom: "4mm" }}>Components</div>
            <ol>
              {parts.map((p, i) =>
              <li key={i}>
                  <span className="pn">{String(i + 1).padStart(2, "0")}</span>
                  <span>{p}</span>
                </li>
              )}
            </ol>
          </div>
        </div>
      </div>
    </Sheet>);

}

// ===========================================================
// 04 — CO2 Cylinder
// ===========================================================
function PageCO2({ total }) {
  return (
    <Sheet id="co2" section="03 — CO₂ cylinder" page={4} total={total} label="Installation & extraction">
      <div className="step-page">
        <header>
          <div className="eyebrow">03 — CO₂ cylinder</div>
          <h2 className="section-title">Load the cylinder<br />before first use.</h2>
          <p className="section-sub">
            Always place NOVO ONE upright on a flat, stable surface before installing or removing the cylinder.
          </p>
        </header>

        <div className="steps-grid steps-2">
          <div className="step">
            <span className="step-num">A — Install</span>
            <h3 className="step-title">Fit the CO₂ cylinder.</h3>
            <p className="step-body">
              Tilt the machine and remove the bottom cover. Insert the CO₂ cylinder into the designated compartment.
              Turn it <strong>clockwise</strong> until firmly locked, then replace the bottom cover.
            </p>
            <div className="step-note">Upright · Flat surface</div>
            <div className="step-art"><DiagramCO2Install /></div>
          </div>

          <div className="step">
            <span className="step-num">B — Remove</span>
            <h3 className="step-title">Extract a spent cylinder.</h3>
            <p className="step-body">
              Tilt the machine and remove the bottom cover. Turn the cylinder <strong>counter-clockwise</strong> to
              release it from the compartment. Replace the bottom cover when finished.
            </p>
            <div className="step-note">Empty cylinders only · Recycle</div>
            <div className="step-art"><DiagramCO2Extract /></div>
          </div>
        </div>
      </div>
    </Sheet>);

}

// ===========================================================
// 05 — Fill and secure
// ===========================================================
function PageFillSecure({ total }) {
  return (
    <Sheet id="fill" section="04 — Fill & secure" page={5} total={total} label="Preparing carbonated beverages · 1–2">
      <div className="step-page">
        <header>
          <div className="eyebrow">04 — Preparing · part one</div>
          <h2 className="section-title">Fill, then secure<br />the bottle.</h2>
          <p className="section-sub">
            Respect the maximum fill lines on the bottle. Over-filling reduces carbonation quality
            and may force liquid up through the release.
          </p>
        </header>

        <div className="steps-grid steps-2">
          <div className="step">
            <span className="step-num">Step 01 — Fill</span>
            <h3 className="step-title">Fill to the marked line.</h3>
            <p className="step-body">
              Sparkling water — fill to the <strong>800&nbsp;ml</strong> line.
              Juice or flavoured drinks — up to <strong>600&nbsp;ml</strong>, including ingredients
              (max. 10% additions). Close the cap firmly.
            </p>
            <div className="step-note">Cold liquid · Cap tight</div>
            <div className="step-art"><DiagramBottleFill /></div>
          </div>

          <div className="step">
            <span className="step-num">Step 02 — Secure</span>
            <h3 className="step-title">Lock the bottle into place.</h3>
            <p className="step-body">
              Lower the platform. The bottle base has a small arrow; align it with the
              <strong> open padlock</strong> mark on the platform, then turn
              <strong> clockwise</strong> until the arrow points to the <strong>closed padlock</strong>.
            </p>
            <div className="step-note">Listen for the click</div>
            <div className="step-art"><DiagramBottleSecure /></div>
          </div>
        </div>
      </div>
    </Sheet>);

}

// ===========================================================
// 06 — Carbonate + Detach
// ===========================================================
function PageCarbonate({ total }) {
  return (
    <Sheet id="carbonate" section="05 — Carbonate" page={6} total={total} label="Preparing carbonated beverages · 3–4">
      <div className="step-page">
        <header>
          <div className="eyebrow">05 — Preparing · part two</div>
          <h2 className="section-title">Press to carbonate,<br />then detach.</h2>
          <p className="section-sub">
            Each press of the carbonation button should last at least one second.
            For lighter fizz, press fewer times; for stronger fizz, press more.
          </p>
        </header>

        <div className="steps-grid steps-2">
          <div className="step">
            <span className="step-num">Step 03 — Carbonate</span>
            <h3 className="step-title">Press the top button.</h3>
            <p className="step-body">
              Press the carbonation button on the top of the machine. Hold each press for at least
              <strong> one second</strong>. A new cylinder is under high pressure — one second is enough.
              As it empties you may hold a little longer, but <strong>never more than 4–5 seconds</strong>.
            </p>
            <div className="step-note">Light 1× · Medium 2–3× · Strong 4–5×</div>
            <div className="step-art"><DiagramPressButton /></div>
          </div>

          <div className="step">
            <span className="step-num">Step 04 — Detach</span>
            <h3 className="step-title">Remove the bottle.</h3>
            <p className="step-body">
              Turn the bottle <strong>counter-clockwise</strong> until the arrow points back to
              the open padlock mark. Lift the bottle away from the machine.
            </p>
            <div className="step-note">Bottle should release smoothly</div>
            <div className="step-art"><DiagramDetach /></div>
          </div>
        </div>
      </div>
    </Sheet>);

}

// ===========================================================
// 07 — Release + Serve
// ===========================================================
function PageServe({ total }) {
  return (
    <Sheet id="serve" section="06 — Release & serve" page={7} total={total} label="Preparing carbonated beverages · 5–7">
      <div className="step-page">
        <header>
          <div className="eyebrow">06 — Preparing · part three</div>
          <h2 className="section-title">Settle, release,<br />then serve.</h2>
          <p className="section-sub">
            A short settling shake helps the gas dissolve evenly. Always release pressure
            through the cap valve <em>before</em> unscrewing the cap.
          </p>
        </header>

        <div className="steps-grid steps-3">
          <div className="step">
            <span className="step-num">Step 05 — Shake</span>
            <h3 className="step-title">Shake gently.</h3>
            <p className="step-body">
              Hold the bottle upright and shake vertically <strong>4–5 times</strong>,
              without too much force. This helps the gas dissolve evenly.
            </p>
            <div className="step-art"><DiagramShake /></div>
          </div>

          <div className="step">
            <span className="step-num">Step 06 — Release</span>
            <h3 className="step-title">Release the pressure.</h3>
            <p className="step-body">
              Press the release button on the cap. If liquid rises, release in
              short pulses. Once the liquid stops rising, open the cap.
            </p>
            <div className="step-art"><DiagramRelease /></div>
          </div>

          <div className="step">
            <span className="step-num">Step 07 — Serve</span>
            <h3 className="step-title">Pour over ice.</h3>
            <p className="step-body">
              Pour the freshly carbonated drink into a glass with ice.
              Enjoy cool and refreshing.
            </p>
            <div className="step-art"><img src="images/pour.png" alt="Pour carbonated water from the bottle over a glass of ice" style={{ maxWidth: 240, width: "100%", height: "232px" }} /></div>
          </div>
        </div>
      </div>
    </Sheet>);

}

// ===========================================================
// 08 — Care
// ===========================================================
function PageCare({ total }) {
  return (
    <Sheet id="care" section="07 — Care" page={8} total={total} label="Cleaning · device & bottle">
      <div className="step-page">
        <header>
          <div className="eyebrow">07 — Care</div>
          <h2 className="section-title">Cared for daily,<br />kept for years.</h2>
          <p className="section-sub">
            NOVO ONE is built to live on display. A simple, regular cleaning routine
            keeps every part performing at its best.
          </p>
        </header>

        <div className="care-grid" style={{ marginTop: "6mm" }}>
          <div className="care-col">
            <div className="eyebrow">Device</div>
            <h3>The machine.</h3>
            <ul>
              <li className="do">Wipe with a damp cloth and clean water.</li>
              <li className="dont">Do not use corrosive solvents or abrasives.</li>
              <li className="dont">Do not immerse the machine in water.</li>
              <li className="do">Keep away from heat, fire, and direct sunlight.</li>
              <li className="do">Always use upright, on a flat surface.</li>
            </ul>
          </div>

          <div className="care-col">
            <div className="eyebrow">Bottle</div>
            <h3>The bottle.</h3>
            <ul>
              <li className="do">Rinse before first use with water no warmer than 40°C.</li>
              <li className="do">Use a long-handled sponge brush for the interior.</li>
              <li className="dont">Do not place in a dishwasher.</li>
              <li className="dont">Do not freeze, or store in the freezer.</li>
              <li className="do">Air-dry with the cap left open between uses.</li>
              <li className="dont">Do not leave submerged in water for long periods.</li>
            </ul>
          </div>
        </div>
      </div>
    </Sheet>);

}

// ===========================================================
// 09 — Specs + Safety
// ===========================================================
function PageSpecsSafety({ total }) {
  return (
    <Sheet id="specs" section="08 — Specifications & safety" page={9} total={total} label="Technical · Safety">
      <div className="step-page">
        <header>
          <div className="eyebrow">08 — Specifications & safety</div>
          <h2 className="section-title">The details<br />and the rules.</h2>
        </header>

        <div className="specs-grid">
          <div>
            <div className="eyebrow" style={{ color: "var(--nova-champagne-deep)" }}>Technical</div>
            <table className="specs-table">
              <tbody>
                <tr><th>Model</th><td>NOVO ONE</td></tr>
                <tr><th>Bottle capacity</th><td>800 ml (sparkling water) · 600 ml (juices, drinks)</td></tr>
                <tr><th>Machine dimensions</th><td>129 × 239 × 445 mm</td></tr>
                <tr><th>Max. working pressure</th><td>0.65 MPa</td></tr>
                <tr><th>Bottle material</th><td>PCTG / Stainless steel</td></tr>
                <tr><th>Operation</th><td>Manual press button · Rotary release</td></tr>
                <tr><th>CO₂ system</th><td>Bottom-load · Standard threaded cylinder</td></tr>
                <tr><th>Colorways</th><td>Onyx · Ivory · Champagne</td></tr>
              </tbody>
            </table>
          </div>

          <aside className="safety">
            <div className="eyebrow">Safety precautions</div>
            <h3>Use with care.</h3>
            <ul>
              <li className="warn">Never carbonate an empty bottle.</li>
              <li>Always use NOVO ONE in an upright position on a flat surface.</li>
              <li>Clean with mild detergent only. Avoid abrasives and solvents.</li>
              <li>Do not use a dishwasher for any component.</li>
              <li>Keep away from heat, open flame, and direct sunlight.</li>
              <li>Remove the CO₂ cylinder before transporting the machine.</li>
              <li>Do not use deformed, damaged or expired bottles.</li>
              <li>Do not freeze the bottle.</li>
              <li>Store the bottle without the cap to prevent bacteria growth.</li>
              <li>Keep out of reach of children.</li>
            </ul>
          </aside>
        </div>
      </div>
    </Sheet>);

}

// ===========================================================
// 10 — Contact / Closing
// ===========================================================
function PageContact({ total }) {
  return (
    <article className="sheet ink" id="contact">
      <header className="sheet-head">
        <div className="h-left">
          <span className="word-sm">NOVO</span>
          <span>ONE<span style={{ color: "var(--nova-champagne)" }}>.</span> · User Manual</span>
        </div>
        <div className="h-right"><span>09 — Contact</span></div>
      </header>
      <div className="sheet-body">
        <div className="closing-grid">
          <div className="eyebrow" style={{ color: "rgba(245,242,235,0.55)" }}>09 — Thank you</div>

          <div className="closing-hero">
            <div className="word">NOVO</div>
            <div className="tag">Sparkling, refined.</div>
            <p className="thanks">
              Thank you for bringing NOVO ONE into your home. We designed it for everyday rituals —
              small moments at the counter, sparkling water served simply, drinks shared at the table.
              <br /><br />
              For setup help, replacement parts, or to register your product, reach us below.
            </p>
          </div>

          <div className="contact-grid">
            <div className="contact-col">
              <div className="eyebrow">Support</div>
              <div className="val">hello@novo-soda.shop</div>
            </div>
            <div className="contact-col">
              <div className="eyebrow">Online</div>
              <div className="val">novo-soda.shop</div>
            </div>
            <div className="contact-col">
              <div className="eyebrow">Social</div>
              <div className="val">@novo.soda</div>
            </div>
          </div>
        </div>
      </div>
      <footer className="sheet-foot">
        <div className="f-left"><span>© NOVO · Edition 2026</span></div>
        <div className="f-right"><span>10 / 10</span></div>
      </footer>
    </article>);

}

// ===========================================================
// Insert A — Inside front cover · "Built to do more" (vertical)
// Print-run only — reuses the landing-page benefit icons,
// re-laid as a vertical list to fill the back of the cover.
// ===========================================================
function PageBuiltToDoMore() {
  const benefits = [
  {
    title: "Works with anything",
    body: "Water, wine, juice, espresso, cocktails — bottom-up injection saturates them all without foam-out. One machine, every drink.",
    icon:
    <svg viewBox="0 0 40 40" fill="none" aria-hidden="true">
          <rect x="6" y="14" width="8" height="20" stroke="currentColor" strokeWidth="1.4" />
          <path d="M18 14 L28 14 L26 24 Q23 26 20 24 Z" stroke="currentColor" strokeWidth="1.4" />
          <line x1="23" y1="26" x2="23" y2="34" stroke="currentColor" strokeWidth="1.4" />
          <path d="M30 14 L38 14 Q36 22 34 22 Q32 22 30 14" stroke="currentColor" strokeWidth="1.4" />
          <line x1="34" y1="22" x2="34" y2="34" stroke="currentColor" strokeWidth="1.4" />
        </svg>

  },
  {
    title: "Bottom-up carbonation",
    body: "CO₂ injects directly into the bottle from below. Deeper saturation, even bubbles, zero overflow on anything but the messiest drink.",
    icon:
    <svg viewBox="0 0 40 40" fill="none" aria-hidden="true">
          <rect x="13" y="4" width="14" height="28" stroke="currentColor" strokeWidth="1.4" />
          <path d="M20 32 L20 16 M16 20 L20 16 L24 20" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" />
          <line x1="10" y1="36" x2="30" y2="36" stroke="currentColor" strokeWidth="1.4" />
        </svg>

  },
  {
    title: "Foldable footprint",
    body: "Opens to sparkle, folds to tuck. Half the counter space when it's not in use — built for kitchens with no room to spare.",
    icon:
    <svg viewBox="0 0 40 40" fill="none" aria-hidden="true">
          <path d="M8 28 L20 22 L32 28" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
          <line x1="8" y1="28" x2="8" y2="32" stroke="currentColor" strokeWidth="1.4" />
          <line x1="32" y1="28" x2="32" y2="32" stroke="currentColor" strokeWidth="1.4" />
          <line x1="20" y1="22" x2="20" y2="8" stroke="currentColor" strokeWidth="1.4" />
          <path d="M16 8 L24 8" stroke="currentColor" strokeWidth="1.4" />
        </svg>

  },
  {
    title: "Built to stay out",
    body: "Slim vertical silhouette in Onyx, Ivory or Champagne. Made to live on the counter beside the coffee machine — not in a cupboard.",
    icon:
    <svg viewBox="0 0 40 40" fill="none" aria-hidden="true">
          <rect x="14" y="6" width="12" height="28" stroke="currentColor" strokeWidth="1.4" />
          <line x1="14" y1="12" x2="26" y2="12" stroke="currentColor" strokeWidth="1.4" />
          <circle cx="20" cy="22" r="1.5" fill="currentColor" />
        </svg>

  }];


  return (
    <article className="sheet insert-sheet" data-kind="paper" id="insert-benefits">
      <header className="sheet-head">
        <div className="h-left">
          <span className="word-sm">NOVO</span>
          <span>ONE<span style={{ color: "var(--nova-champagne-deep)" }}>.</span> · User Manual</span>
        </div>
        <div className="h-right"><span>Why NOVO ONE</span></div>
      </header>
      <div className="sheet-body">
        <div className="insert-page">
          <header className="insert-head">
            <div className="eyebrow">More than water</div>
            <h2 className="section-title">Built to do <em>more.</em></h2>
            <p className="section-sub">
              Four things that make NOVO the only carbonation system you'll need —
              for water, and for everything that's not.
            </p>
          </header>
          <div className="benefit-rows">
            {benefits.map((b, i) =>
            <div className="benefit-row" key={i}>
                <span className="b-num">{String(i + 1).padStart(2, "0")}</span>
                <span className="b-icon">{b.icon}</span>
                <div>
                  <h3 className="b-title">{b.title}</h3>
                  <p className="b-body">{b.body}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
      <footer className="sheet-foot">
        <div className="f-left"><span>Sparkling, refined.</span></div>
        <div className="f-right"><span>NOVO ONE</span></div>
      </footer>
    </article>);

}

// ===========================================================
// Insert B — Inside back cover · "Every sparkling drink" (vertical)
// Print-run only — reuses the landing-page drink glasses,
// re-laid as a vertical list to fill the inside back cover.
// ===========================================================
function PageEverySparklingDrink() {
  const drinks = [
  {
    name: "Sparkling water",
    glass:
    <svg viewBox="0 0 60 130" fill="none" aria-hidden="true">
          <rect x="14" y="14" width="32" height="100" rx="2" stroke="currentColor" strokeWidth="1.2" />
          <rect x="16" y="58" width="28" height="54" rx="1" className="liquid" fill="rgba(216,199,170,0.35)" />
          <circle cx="22" cy="78" r="1.6" fill="rgba(17,17,17,0.4)" />
          <circle cx="34" cy="92" r="1.2" fill="rgba(17,17,17,0.4)" />
          <circle cx="28" cy="100" r="1.4" fill="rgba(17,17,17,0.4)" />
          <circle cx="38" cy="82" r="1" fill="rgba(17,17,17,0.4)" />
        </svg>

  },
  {
    name: "Wine spritz",
    glass:
    <svg viewBox="0 0 70 130" fill="none" aria-hidden="true">
          <path d="M15 6 L55 6 L48 50 Q35 60 22 50 Z" stroke="currentColor" strokeWidth="1.2" />
          <path d="M22 50 Q35 60 48 50 L42 24 Q35 30 28 24 Z" className="liquid" fill="rgba(180,50,60,0.35)" />
          <line x1="35" y1="60" x2="35" y2="110" stroke="currentColor" strokeWidth="1.2" />
          <line x1="22" y1="118" x2="48" y2="118" stroke="currentColor" strokeWidth="1.2" />
        </svg>

  },
  {
    name: "Espresso tonic",
    glass:
    <svg viewBox="0 0 60 130" fill="none" aria-hidden="true">
          <rect x="14" y="20" width="32" height="90" rx="2" stroke="currentColor" strokeWidth="1.2" />
          <rect x="16" y="36" width="28" height="72" rx="1" className="liquid" fill="rgba(90,55,30,0.45)" />
          <ellipse cx="30" cy="38" rx="14" ry="3" fill="rgba(255,255,255,0.6)" />
          <line x1="22" y1="52" x2="38" y2="52" stroke="rgba(255,255,255,0.5)" strokeWidth="0.8" />
          <circle cx="34" cy="86" r="1.4" fill="rgba(255,255,255,0.5)" />
        </svg>

  },
  {
    name: "Citrus juice",
    glass:
    <svg viewBox="0 0 60 130" fill="none" aria-hidden="true">
          <rect x="14" y="14" width="32" height="100" rx="2" stroke="currentColor" strokeWidth="1.2" />
          <rect x="16" y="46" width="28" height="66" rx="1" className="liquid" fill="rgba(240,180,40,0.4)" />
          <circle cx="30" cy="48" r="6" stroke="currentColor" strokeWidth="0.9" fill="rgba(240,180,40,0.5)" />
          <line x1="30" y1="42" x2="30" y2="54" stroke="currentColor" strokeWidth="0.6" />
          <line x1="24" y1="48" x2="36" y2="48" stroke="currentColor" strokeWidth="0.6" />
        </svg>

  },
  {
    name: "Sparkling cocktails",
    glass:
    <svg viewBox="0 0 80 130" fill="none" aria-hidden="true">
          <path d="M10 16 L70 16 Q60 58 40 58 Q20 58 10 16 Z" stroke="currentColor" strokeWidth="1.2" />
          <path d="M14 18 Q22 50 40 56 Q58 50 66 18 Z" className="liquid" fill="rgba(216,199,170,0.45)" />
          <line x1="40" y1="58" x2="40" y2="110" stroke="currentColor" strokeWidth="1.2" />
          <line x1="24" y1="118" x2="56" y2="118" stroke="currentColor" strokeWidth="1.2" />
        </svg>

  },
  {
    name: "Iced coffee",
    glass:
    <svg viewBox="0 0 60 130" fill="none" aria-hidden="true">
          <rect x="14" y="14" width="32" height="100" rx="2" stroke="currentColor" strokeWidth="1.2" />
          <rect x="16" y="62" width="28" height="50" rx="1" className="liquid" fill="rgba(180,140,90,0.4)" />
          <ellipse cx="22" cy="76" rx="3" ry="2.5" stroke="currentColor" strokeWidth="0.8" fill="rgba(255,255,255,0.4)" />
          <ellipse cx="32" cy="84" rx="3" ry="2.5" stroke="currentColor" strokeWidth="0.8" fill="rgba(255,255,255,0.4)" />
          <ellipse cx="26" cy="92" rx="3" ry="2.5" stroke="currentColor" strokeWidth="0.8" fill="rgba(255,255,255,0.4)" />
        </svg>

  }];


  return (
    <article className="sheet insert-sheet" data-kind="paper" id="insert-drinks">
      <header className="sheet-head">
        <div className="h-left">
          <span className="word-sm">NOVO</span>
          <span>ONE<span style={{ color: "var(--nova-champagne-deep)" }}>.</span> · User Manual</span>
        </div>
        <div className="h-right"><span>Beyond water</span></div>
      </header>
      <div className="sheet-body">
        <div className="insert-page">
          <header className="insert-head">
            <div className="eyebrow">One machine, one bottle</div>
            <h2 className="section-title">
              <span className="strike">Sparkling water.</span> <em>Every</em> sparkling drink.
            </h2>
            <p className="section-sub">
              Bottom-up bottle injection works on liquids other carbonators can't touch.
              One press for water. One press for a wine spritz. One press for an espresso
              tonic that actually fizzes.
            </p>
          </header>
          <div className="drink-rows">
            {drinks.map((d, i) =>
            <div className="drink-row" key={i}>
                <span className="d-glass">{d.glass}</span>
                <span className="d-num">{String(i + 1).padStart(2, "0")}</span>
                <h3 className="d-name">{d.name}</h3>
              </div>
            )}
          </div>
        </div>
      </div>
      <footer className="sheet-foot">
        <div className="f-left"><span>Sparkling, refined.</span></div>
        <div className="f-right"><span>NOVO ONE</span></div>
      </footer>
    </article>);

}

// ===========================================================
// App shell
// ===========================================================
function App() {
  const { tweaks, update, open, setOpen } = useTweaks();
  const total = 10;
  // Print-only cover-interior inserts (set by the A5 print page).
  const showInserts = typeof window !== "undefined" && window.__MANUAL_PRINT_INSERTS === true;

  return (
    <>
      <div className="manual-stage">
        <div className="manual-toolbar">
          <div className="left">
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase" }}>
              NOVO ONE · User manual · 10 pages · A4
            </span>
          </div>
          <div className="right">
            <a href="#cover">Cover</a>
            <a href="#contents">Contents</a>
            <button onClick={() => window.print()}>Print / PDF</button>
          </div>
        </div>

        <PageCover tweaks={tweaks} total={total} />
        {showInserts && <PageBuiltToDoMore />}
        <PageContents total={total} />
        <PageAnatomy total={total} />
        <PageCO2 total={total} />
        <PageFillSecure total={total} />
        <PageCarbonate total={total} />
        <PageServe total={total} />
        <PageCare total={total} />
        <PageSpecsSafety total={total} />
        {showInserts && <PageEverySparklingDrink />}
        <PageContact total={total} />
      </div>

      {open && <TweaksPanel tweaks={tweaks} update={update} onClose={() => setOpen(false)} />}
    </>);

}

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