// BeatBake landing page
// Sections wired together in <App />. Tweaks panel exposes a few options.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#22d3ee",
  "heroLayout": "split",
  "showFeatureIcons": true,
  "downloadUrl": "https://github.com/ntemples1/BeatBake-Releases/releases/latest/download/BeatBake.dmg",
  "buyUrl": "https://beatbake.lemonsqueezy.com/checkout/buy/633c5858-30f0-4cfa-bc88-382a11b3ba35?embed=1",
  "ipadUrl": ""
}/*EDITMODE-END*/;

// Stable external links (not user-tweakable).
const LINKS = {
  releases: "https://github.com/ntemples1/BeatBake-Releases",
  wiki:     "https://github.com/ntemples1/BeatBake-Releases/wiki",
  issues:   "https://github.com/ntemples1/BeatBake-Releases/issues",
  email:    "mailto:hello@beatbake.co.uk",
};

// ─── Tiny inline icons (1.5px stroke, currentColor) ────────────────────────
const Icon = {
  staff:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M3 7h18M3 11h18M3 15h18M3 19h18"/><circle cx="8" cy="13" r="1.6" fill="currentColor"/><circle cx="14" cy="17" r="1.6" fill="currentColor"/></svg>,
  grid:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M3 6h18M3 12h18M3 18h18M8 4v16M14 4v16M20 4v16"/></svg>,
  midi:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><circle cx="12" cy="12" r="9"/><circle cx="8" cy="12" r="1.2" fill="currentColor"/><circle cx="16" cy="12" r="1.2" fill="currentColor"/><circle cx="12" cy="8" r="1.2" fill="currentColor"/><path d="M12 16v3M9 19h6"/></svg>,
  sheet:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><rect x="5" y="3" width="14" height="18" rx="1.5"/><path d="M8 8h8M8 12h8M8 16h5"/></svg>,
  preset: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M5 5h11l3 3v11a2 2 0 0 1-2 2H5z"/><path d="M9 9h6M9 13h6M9 17h4"/></svg>,
  print:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M7 9V4h10v5M7 18H4v-7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7h-3"/><rect x="7" y="14" width="10" height="6" rx="1"/></svg>,
  apple:  (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M16.4 12.6c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9s-1.8-.9-3-.9c-1.5 0-3 .9-3.8 2.3-1.6 2.8-.4 7 1.2 9.3.8 1.1 1.7 2.4 3 2.3 1.2-.1 1.6-.8 3.1-.8 1.5 0 1.8.8 3.1.8 1.3 0 2.1-1.1 2.9-2.2.9-1.3 1.3-2.5 1.3-2.6-.1 0-2.6-1-2.9-3.8zM14 4.8c.6-.7 1-1.7.9-2.7-.9 0-1.9.6-2.5 1.3-.6.6-1.1 1.7-1 2.6 1 .1 2-.5 2.6-1.2z"/></svg>,
  download:(p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3v12M7 10l5 5 5-5M5 20h14"/></svg>,
  book:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2zM19 17H6a2 2 0 0 0-2 2"/></svg>,
  life:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.4"/><path d="M14.5 9.5 18 6M9.5 9.5 6 6m3.5 8.5L6 18m8.5-3.5L18 18"/></svg>,
  display:(p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="4" width="18" height="12" rx="1.5"/><path d="M9 20h6M12 16v4"/></svg>,
};

// ─── BeatBake logo mark (step-grid B) ──────────────────────────────────────
// A 5×5 sequencer grid where the lit cells form a B. Same construction as
// option 3 from the logo exploration — drawn in SVG so it scales cleanly.
function Logo({ size = 28, color = "currentColor" }) {
  const lit = new Set([
    "0,0","1,0","2,0",
    "0,1",      "3,1",
    "0,2","1,2","2,2",
    "0,3",      "3,3",
    "0,4","1,4","2,4",
  ]);
  const cells = 5;
  const pad = size * 0.18;
  const gridSize = size - pad * 2;
  const gap = gridSize * 0.07;
  const cell = (gridSize - gap * (cells - 1)) / cells;
  const tileR = size * 0.22;
  const rects = [];
  for (let row = 0; row < cells; row++) {
    for (let col = 0; col < cells; col++) {
      const isLit = lit.has(`${col},${row}`);
      rects.push(
        <rect key={`${col}-${row}`}
              x={pad + col * (cell + gap)}
              y={pad + row * (cell + gap)}
              width={cell} height={cell}
              rx={cell * 0.18}
              fill={isLit ? color : "transparent"}
              opacity={isLit ? 1 : 0.12}
              stroke={isLit ? "none" : color}
              strokeWidth={isLit ? 0 : Math.max(0.5, size * 0.012)} />
      );
    }
  }
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-hidden="true">
      <rect x="0" y="0" width={size} height={size} rx={tileR} ry={tileR}
            fill="none" stroke={color} strokeWidth={size * 0.045} opacity="0.9"/>
      {rects}
    </svg>
  );
}

// ─── Top nav ───────────────────────────────────────────────────────────────
const NAV_LINKS = [
  { href: "#features",  label: "Features" },
  { href: "#teaching",  label: "Teaching" },
  { href: "#preview",   label: "Preview" },
  { href: "#ipad",      label: "iPad" },
  { href: "#pricing",   label: "Pricing" },
];

function Nav({ buyUrl, downloadUrl, accent }) {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    document.body.classList.toggle('menu-open', open);
    return () => document.body.classList.remove('menu-open');
  }, [open]);
  // close menu if viewport grows past mobile breakpoint
  React.useEffect(() => {
    const mql = window.matchMedia('(min-width: 981px)');
    const onChange = (e) => { if (e.matches) setOpen(false); };
    mql.addEventListener('change', onChange);
    return () => mql.removeEventListener('change', onChange);
  }, []);
  return (
    <>
      <header className="nav">
        <a className="wordmark" href="#top" onClick={() => setOpen(false)}>
          <span className="logo-mark" style={{color: accent}}>
            <Logo size={30} color={accent} />
          </span>
          <span className="logo-type">BeatBake</span>
          <span className="logo-ver">v1.0</span>
        </a>
        <nav className="nav-links">
          {NAV_LINKS.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
        </nav>
        <a className="nav-buy lemonsqueezy-button" href={buyUrl}>Buy licence</a>
        <a className="nav-cta" href={downloadUrl}>
          <Icon.download width="16" height="16"/> Download
        </a>
        <button
          className="nav-burger"
          aria-label={open ? "Close menu" : "Open menu"}
          aria-expanded={open}
          onClick={() => setOpen(v => !v)}
        >
          {open ? (
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <path d="M6 6l12 12M18 6L6 18"/>
            </svg>
          ) : (
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <path d="M4 7h16M4 12h16M4 17h16"/>
            </svg>
          )}
        </button>
      </header>

      <div className={"mobile-menu" + (open ? " is-open" : "")} aria-hidden={!open}>
        <div className="mobile-menu-top">
          <a className="wordmark" href="#top" onClick={() => setOpen(false)}>
            <span className="logo-mark" style={{color: accent}}>
              <Logo size={30} color={accent} />
            </span>
            <span className="logo-type">BeatBake</span>
          </a>
          <button
            className="nav-burger"
            aria-label="Close menu"
            onClick={() => setOpen(false)}
            style={{display:'inline-flex'}}
          >
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <path d="M6 6l12 12M18 6L6 18"/>
            </svg>
          </button>
        </div>
        <div className="mobile-menu-links">
          {NAV_LINKS.map(l => (
            <a key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>
          ))}
        </div>
        <a
          className="mobile-menu-cta"
          href={downloadUrl}
          onClick={() => setOpen(false)}
          style={{background: accent}}
        >
          <Icon.download width="17" height="17"/> Download Free Trial
        </a>
        <a
          className="mobile-menu-buy lemonsqueezy-button"
          href={buyUrl}
          onClick={() => setOpen(false)}
        >
          Buy Licence — £17.99
        </a>
        <div className="mobile-menu-foot">Free 7‑day trial · macOS 14 or later</div>
      </div>
    </>
  );
}

// ─── Hero ──────────────────────────────────────────────────────────────────
function Hero({ accent, heroLayout, buyUrl, downloadUrl }) {
  const split = heroLayout === "split";
  return (
    <section className={"hero" + (split ? " hero--split" : " hero--stacked")} id="top">
      <div className="hero-copy">
        <div className="eyebrow">
          <span className="eyebrow-dot" style={{background: accent}} />
          <span>v1.0 release · macOS 14+</span>
        </div>
        <h1 className="hero-h1">
          A drum&#8209;editor that <em>thinks</em> like a drummer.
        </h1>
        <p className="hero-sub">
          Sketch a groove on the step grid. Read it back as live percussion notation.
          Print A4 worksheets for your students, send it to Logic Pro as MIDI, or just hit play.
          A focused tool for writing, teaching, and practising drum parts.
        </p>
        <div className="hero-cta">
          <a className="btn btn-primary" href={downloadUrl} style={{background: accent}}>
            <Icon.download width="18" height="18"/> Download Free Trial
          </a>
          <a className="btn btn-ghost lemonsqueezy-button" href={buyUrl}>
            Buy Licence — £17.99
          </a>
        </div>
        <p className="hero-trial">Try BeatBake free for 7 days. Buy a licence when you’re ready.</p>
        <ul className="hero-meta">
          <li><Icon.apple width="14" height="14"/> macOS 14 or later</li>
          <li><span className="dot"/> Free 7‑day trial</li>
          <li><span className="dot"/> Free updates for v1.x</li>
        </ul>
      </div>

      <div className="hero-shot">
        <div className="window-chrome">
          <span className="tl tl-r"/>
          <span className="tl tl-y"/>
          <span className="tl tl-g"/>
          <span className="window-title">BeatBake — Funky 2 Bar.drumgroove</span>
        </div>
        <img src="assets/beatbake-editor.png" alt="BeatBake editor showing a two-bar funk groove as live percussion notation above the step grid" loading="eager"/>
        <div className="shot-glow" style={{background: `radial-gradient(60% 50% at 50% 100%, ${accent}33, transparent 70%)`}}/>
      </div>
    </section>
  );
}

// ─── Features ──────────────────────────────────────────────────────────────
const FEATURES = [
  { icon: "staff",  title: "Live percussion notation",
    body: "Every note you place on the grid renders instantly as proper drum notation — stems, beams, dotted values, rests, triplet brackets, accents and hi‑hat marks. Ghost notes and grace notes render properly too, engraved with the Bravura music font." },
  { icon: "grid",   title: "Clickable step grid",
    body: "Write 1‑4 bars in straight, triplet or 32nd‑note grid modes. Time signatures from 2/4 to 12/8 — including 5/4, 7/8 and 5/8. Copy and paste bars across the groove to build ideas out fast." },
  { icon: "midi",   title: "MIDI Out & playback",
    body: "Route to Logic Pro or any DAW, or use the built‑in sound engine for offline practice. Loop the whole groove or play just one bar. Tap tempo, click track, and count‑ins that count odd meters properly — 7/8 counts to seven." },
  { icon: "sheet",  title: "Worksheets for teaching",
    body: "Build A4 exercise pages bar by bar, save reusable templates, then play through each exercise on loop — with a fresh count‑in between exercises. Numbered layout designed for clean teaching handouts." },
  { icon: "preset", title: "Practice Library",
    body: "Grooves, worksheets and rudiments — saved by name, searchable, always in reach. Comes stocked with built‑in presets and teaching templates, so the library is useful from your first session." },
  { icon: "print",  title: "Print & PDF export",
    body: "Print full groove scores or worksheet pages as true vector output — crisp, engraved notation at any size. Save as PDF via the macOS print dialog — no extra setup, no fighting a notation package." },
];

function Features({ accent, showIcons }) {
  return (
    <section className="features" id="features">
      <div className="section-rule">
        <span>§ 01</span><span>Features</span>
      </div>
      <div className="section-head">
        <div className="section-tag" style={{color: accent}}>writing · teaching · practice</div>
        <h2 className="section-h2">Everything you need to write a part —<br/>and nothing you don't.</h2>
      </div>
      <div className="feature-grid">
        {FEATURES.map((f, i) => {
          const I = Icon[f.icon];
          return (
            <article className="feature" key={i}>
              <div className="feature-num">0{i + 1}</div>
              {showIcons && (
                <div className="feature-icon" style={{color: accent}}>
                  <I width="22" height="22"/>
                </div>
              )}
              <h3 className="feature-title">{f.title}</h3>
              <p className="feature-body">{f.body}</p>
            </article>
          );
        })}
      </div>
    </section>
  );
}

// ─── Teaching tools ────────────────────────────────────────────────────────
const TEACHING = [
  { mark: "R\u2009L", title: "R/L sticking & voice control",
    body: "Add right/left stickings above any note, and move notes between voices — singles, doubles and paradiddles voiced around the kit." },
  { mark: "\u2016:", title: "Repeat-mark exercises",
    body: "Worksheet exercises print with proper repeat marks, so handouts read like real practice material — not screenshots." },
  { mark: "1\u20138\u00d7", title: "Loop each exercise 1–8 times",
    body: "Set how many times to loop each numbered exercise before the page advances. Hands-free practice through a worksheet." },
  { mark: "\u2922", title: "Play-along full screen",
    body: "A big, clean score for the lesson-room display. Auto-scrolls bar by bar with the playhead, with giant count-in numerals between exercises." },
  { mark: "\u25C9", title: "Note colour palette",
    body: "Colour-code notes on the grid for teaching, grouping or visual practice cues. Stays visible in the live notation view." },
  { mark: "\u29B8", title: "Show / hide instruments",
    body: "Hide guide parts from the printed notation while keeping them in the grid. Clean handouts without rebuilding the groove." },
];

function Teaching({ accent }) {
  return (
    <section className="teaching" id="teaching">
      <div className="section-rule">
        <span>§ 02</span><span>Teaching tools</span>
      </div>
      <div className="section-head">
        <div className="section-tag" style={{color: accent}}>built for lessons</div>
        <h2 className="section-h2">Not just a groove editor —<br/>a lesson and practice tool.</h2>
        <p className="section-sub">If you teach drums (or you're teaching yourself), BeatBake handles the lesson-room details a notation package usually makes you fight for.</p>
      </div>
      <ul className="teaching-grid">
        {TEACHING.map((t, i) => (
          <li className="teaching-item" key={i}>
            <span className="teaching-mark" style={{color: accent}}>{t.mark}</span>
            <div>
              <h3 className="teaching-title">{t.title}</h3>
              <p className="teaching-body">{t.body}</p>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}

// ─── Showcase (worksheets + library + mixer) ──────────────────────────────
function Showcase({ accent }) {
  return (
    <section className="showcase" id="preview">
      <div className="section-rule">
        <span>§ 03</span><span>In the app</span>
      </div>
      <div className="section-head">
        <div className="section-tag" style={{color: accent}}>worksheets · library · mixer</div>
        <h2 className="section-h2">Built for the way<br/>drummers actually work.</h2>
        <p className="section-sub">Turn an afternoon of writing into a stack of printable exercises. Save your favourites to the Practice Library and balance every voice in the mixer — all without ever leaving the page you're working on.</p>
      </div>

      <div className="showcase-stage">
        <aside className="showcase-points">
          <div className="showcase-point">
            <div className="showcase-point-h">
              <span className="showcase-num">A</span>
              <h3>Worksheet builder</h3>
            </div>
            <p>Send the current bar to a numbered worksheet, build out two‑per‑row A4 pages, then play through each exercise on loop. Save the whole thing as a reusable template.</p>
          </div>
          <div className="showcase-point">
            <div className="showcase-point-h">
              <span className="showcase-num">B</span>
              <h3>Practice Library</h3>
            </div>
            <p>Grooves, worksheets and rudiments — saved by name with search, in a panel at the bottom-left. Comes stocked with built-in presets and teaching templates. Survives between sessions.</p>
          </div>
          <div className="showcase-point">
            <div className="showcase-point-h">
              <span className="showcase-num">C</span>
              <h3>Per‑voice mixer</h3>
            </div>
            <p>Fourteen channels with VU meters — kick, snare, rim, snare grace, hi‑hats, toms, ride, ride bell, crash, cowbell. Mute any channel; mutes save with the groove. Get the balance right before you print.</p>
          </div>
        </aside>

        <div className="showcase-shots">
        <figure className="showcase-shot">
          <div className="window-chrome">
            <span className="tl tl-r"/>
            <span className="tl tl-y"/>
            <span className="tl tl-g"/>
            <span className="window-title">BeatBake — Simple Fill Builder</span>
          </div>
          <div className="showcase-img-wrap">
            <img src="assets/beatbake-worksheet.png" alt="BeatBake worksheet builder with eight numbered exercises laid out for printing"/>
          </div>
          <figcaption className="showcase-cap">
            <span>Worksheet builder · 8 numbered exercises · A4 layout</span>
          </figcaption>
        </figure>
        <figure className="showcase-shot">
          <div className="window-chrome">
            <span className="tl tl-r"/>
            <span className="tl tl-y"/>
            <span className="tl tl-g"/>
            <span className="window-title">BeatBake — 7_8 Groove.drumgroove</span>
          </div>
          <img src="assets/beatbake-grid.png" alt="BeatBake step grid in 7/8 with the editing toolbar: note value, voice, colour, accent and sticking controls"/>
          <figcaption className="showcase-cap">
            <span>Step grid · 7/8 · note values, accents, sticking &amp; colour</span>
          </figcaption>
        </figure>
        </div>
      </div>
    </section>
  );
}

// ─── iPad — coming soon ────────────────────────────────────────────────────
function Ipad({ accent, ipadUrl }) {
  const live = ipadUrl && ipadUrl.trim() !== "" && ipadUrl.trim() !== "#";
  const ON = [0,2,5,8,11,13,16,19,22,24,27,30];
  return (
    <section className="ipad" id="ipad">
      <div className="section-rule">
        <span>§ 04</span><span>On iPad</span>
      </div>
      <div className="ipad-card">
        <div className="ipad-card-bg" style={{background: `radial-gradient(90% 120% at 100% 0%, ${accent}1f, transparent 60%)`}}/>
        <div className="ipad-copy">
          <div className="ipad-tag" style={{color: accent}}>
            <span className="ipad-tag-dot" style={{background: accent}}/> Coming soon
          </div>
          <h2 className="ipad-h2">BeatBake is coming to iPad.</h2>
          <p className="ipad-sub">The same drum&#8209;editor, rebuilt for touch. Sketch grooves with your fingers, read them back as live notation, and take your worksheets wherever you teach.</p>
          <div className="ipad-cta">
            {live
              ? <a className="appstore-btn" href={ipadUrl} target="_blank" rel="noopener">
                  <span className="appstore-logo"><Icon.apple width="26" height="26"/></span>
                  <span className="appstore-text">
                    <small>Available on the</small>
                    <strong>App Store</strong>
                  </span>
                </a>
              : <span className="ipad-soon-pill">
                  <Icon.apple width="16" height="16"/> iPad version — coming soon
                </span>}
            <span className="ipad-note">Universal iPad app · free trial planned</span>
          </div>
        </div>
        <div className="ipad-art" aria-hidden="true">
          <div className="ipad-device" style={{borderColor: `${accent}55`}}>
            <div className="ipad-screen">
              <div className="ipad-grid">
                {Array.from({length: 32}).map((_, i) => (
                  <span key={i} className={"ipad-cell" + (ON.includes(i) ? " on" : "")}
                        style={ON.includes(i) ? {background: accent} : null}/>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Buy section ───────────────────────────────────────────────────────────
function Buy({ accent, buyUrl, downloadUrl }) {
  return (
    <section className="buy" id="pricing">
      <div className="section-rule">
        <span>§ 05</span><span>Pricing &amp; licence</span>
      </div>
      <div className="buy-card">
        <div className="buy-card-bg" style={{background: `radial-gradient(80% 100% at 50% 0%, ${accent}26, transparent 70%)`}}/>
        <div className="buy-tag" style={{color: accent}}>one‑time purchase · free 7‑day trial</div>
        <div className="buy-price">
          <span className="buy-currency">£</span>
          <span className="buy-amount">17</span>
          <span className="buy-cents">.99</span>
        </div>
        <div className="buy-tax">VAT included where applicable</div>
        <ul className="buy-includes">
          <li><span className="check" style={{color: accent}}>✓</span> BeatBake for macOS, full version</li>
          <li><span className="check" style={{color: accent}}>✓</span> Built‑in groove presets &amp; worksheet templates</li>
          <li><span className="check" style={{color: accent}}>✓</span> Free updates throughout v1.x</li>
          <li><span className="check" style={{color: accent}}>✓</span> Licence activation handled by Lemon Squeezy</li>
        </ul>
        <div className="buy-actions">
          <a className="btn btn-primary buy-btn" href={downloadUrl} style={{background: accent}}>
            <Icon.download width="18" height="18"/> Download Free Trial
          </a>
          <a className="btn btn-ghost buy-btn lemonsqueezy-button" href={buyUrl}>
            Buy Licence — £17.99
          </a>
        </div>
        <p className="buy-gate">Try everything free for 7 days. After the trial, <strong>saving your work, printing, and MIDI Out</strong> require a licence — your grooves stay on your Mac either way.</p>
        <div className="buy-fineprint">
          Secure checkout via Lemon Squeezy. Card, Apple Pay, PayPal. Licence key by email within 60 seconds.
        </div>
      </div>
    </section>
  );
}

// ─── System requirements ─────────────────────────────────────────────
const SYSREQS = [
  { icon: "apple",   k: "Operating system", v: "macOS 14 (Sonoma) or later" },
  { icon: "display", k: "Minimum window",   v: "About 1100 × 720" },
  { icon: "display", k: "Recommended",       v: "1280 × 800 or larger" },
  { icon: "sheet",   k: "Best for worksheets", v: "1440 × 900 or larger" },
];

function SystemReqs({ accent }) {
  return (
    <section className="sysreq" id="requirements">
      <div className="section-rule">
        <span>§ 06</span><span>System requirements</span>
      </div>
      <div className="section-head">
        <div className="section-tag" style={{color: accent}}>before you download</div>
        <h2 className="section-h2">What you need to run BeatBake.</h2>
        <p className="section-sub">BeatBake is a Mac app today, with an iPad version coming soon. It runs in a small window, but worksheet building is comfier with a little more room.</p>
      </div>
      <div className="sysreq-grid">
        {SYSREQS.map((r, i) => {
          const I = Icon[r.icon];
          return (
            <div className="sysreq-item" key={i}>
              <span className="sysreq-icon" style={{color: accent}}><I width="20" height="20"/></span>
              <div className="sysreq-k">{r.k}</div>
              <div className="sysreq-v">{r.v}</div>
            </div>
          );
        })}
      </div>
      <p className="sysreq-note">Note: at the minimum window size the macOS print dialog can feel large — that’s normal system behaviour, not a bug.</p>
    </section>
  );
}

// ─── Footer ────────────────────────────────────────────────────────────────
function Footer({ accent, buyUrl, downloadUrl }) {
  return (
    <footer className="foot">
      <div className="foot-cols">
        <div className="foot-col foot-brand">
          <div className="wordmark">
            <span className="logo-mark" style={{color: accent}}>
              <Logo size={30} color={accent} />
            </span>
            <span className="logo-type">BeatBake</span>
          </div>
          <p className="foot-tag">A drum sketchpad for macOS. Made by one drummer in a small room.</p>
        </div>
        <div className="foot-col">
          <div className="foot-h">Product</div>
          <a href="#features">Features</a>
          <a href="#teaching">Teaching</a>
          <a href="#preview">Preview</a>
          <a href="#pricing">Pricing</a>
        </div>
        <div className="foot-col">
          <div className="foot-h">Get BeatBake</div>
          <a href={downloadUrl}>Download for Mac</a>
          <a className="lemonsqueezy-button" href={buyUrl}>Buy Licence — £17.99</a>
        </div>
        <div className="foot-col">
          <div className="foot-h">Help &amp; support</div>
          <a href={LINKS.wiki} target="_blank" rel="noopener">Help / Wiki</a>
          <a href={LINKS.issues} target="_blank" rel="noopener">Support (GitHub Issues)</a>
          <a href={LINKS.email}>hello@beatbake.co.uk</a>
        </div>
        <div className="foot-col">
          <div className="foot-h">Legal</div>
          <a href="privacy-policy.html">Privacy Policy</a>
          <a href="refund-policy.html">Refund Policy</a>
          <a href="terms.html">Terms of Service</a>
        </div>
      </div>
      <div className="foot-base">
        <span>© 2026 BeatBake. · macOS 14 or later · iPad version coming soon.</span>
      </div>
    </footer>
  );
}

// ─── App ───────────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <div className="page" style={{ "--accent": t.accent }}>
      <Nav buyUrl={t.buyUrl} downloadUrl={t.downloadUrl} accent={t.accent} />
      <Hero accent={t.accent} heroLayout={t.heroLayout} buyUrl={t.buyUrl} downloadUrl={t.downloadUrl} />
      <Features accent={t.accent} showIcons={t.showFeatureIcons} />
      <Teaching accent={t.accent} />
      <Showcase accent={t.accent} />
      <Ipad accent={t.accent} ipadUrl={t.ipadUrl} />
      <Buy accent={t.accent} buyUrl={t.buyUrl} downloadUrl={t.downloadUrl} />
      <SystemReqs accent={t.accent} />
      <Footer accent={t.accent} buyUrl={t.buyUrl} downloadUrl={t.downloadUrl} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={t.accent}
          options={["#22d3ee","#3b82f6","#f59e0b","#a78bfa","#34d399","#f472b6"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Layout" />
        <TweakRadio label="Hero" value={t.heroLayout}
          options={["split","stacked"]}
          onChange={(v) => setTweak("heroLayout", v)} />
        <TweakToggle label="Feature icons" value={t.showFeatureIcons}
          onChange={(v) => setTweak("showFeatureIcons", v)} />
        <TweakSection label="Commerce" />
        <TweakText label="Download URL (Mac DMG)" value={t.downloadUrl}
          onChange={(v) => setTweak("downloadUrl", v)} />
        <TweakText label="Lemon Squeezy URL" value={t.buyUrl}
          onChange={(v) => setTweak("buyUrl", v)} />
        <TweakText label="iPad App Store URL (when live)" value={t.ipadUrl}
          onChange={(v) => setTweak("ipadUrl", v)} />
      </TweaksPanel>
    </div>
  );
}

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

// Hook up the Lemon Squeezy overlay checkout to every <a class="lemonsqueezy-button">.
// lemon.js scans the DOM once at script-load time, but our buttons are React-rendered after
// that — so we re-run setup as soon as React has mounted (and again whenever lemon.js
// finishes loading).
function initLemonSqueezy() {
  if (window.createLemonSqueezy) {
    try { window.createLemonSqueezy(); } catch (e) { /* ignore */ }
  } else {
    setTimeout(initLemonSqueezy, 100);
  }
}
requestAnimationFrame(initLemonSqueezy);
window.addEventListener('load', initLemonSqueezy);

// Safety net: if a click sneaks through before lemon.js is ready, intercept it and open
// the overlay manually. createLemonSqueezy() is idempotent, so calling it on click just
// rebinds the handler and we retrigger.
document.addEventListener('click', (e) => {
  const a = e.target.closest('a.lemonsqueezy-button');
  if (!a) return;
  if (window.createLemonSqueezy && !document.body.classList.contains('lemonsqueezy-open')) {
    // Bind handlers, then let lemon.js handle the next click naturally
    window.createLemonSqueezy();
  }
}, true);
