/* Landing Page · InsideJams */

const SAMPLE_GIFT_PAGE_PATH = "/sample/maya-30th-birthday-roast";

function Logo({ size = 22, color = "currentColor" }) {
  // Mini cassette: outer shell + two reels + window slit
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 9, color }}>
      <svg width={size + 8} height={size} viewBox="0 0 38 28" fill="none" style={{ flexShrink: 0 }}>
        {/* Shell */}
        <rect x="1" y="1" width="36" height="26" rx="3" stroke="currentColor" strokeWidth="1.6" fill="none" />
        {/* Tape window */}
        <rect x="6" y="7" width="26" height="10" rx="1.2" stroke="currentColor" strokeWidth="1.1" fill="none" opacity="0.55" />
        {/* Left reel */}
        <circle cx="12" cy="12" r="2.4" fill="currentColor" />
        {/* Right reel */}
        <circle cx="26" cy="12" r="2.4" fill="currentColor" />
        {/* Connecting tape line */}
        <line x1="14.4" y1="12" x2="23.6" y2="12" stroke="currentColor" strokeWidth="0.8" opacity="0.65" />
        {/* Bottom screw dots */}
        <circle cx="7" cy="22" r="0.9" fill="currentColor" opacity="0.7" />
        <circle cx="31" cy="22" r="0.9" fill="currentColor" opacity="0.7" />
      </svg>
      <span style={{ fontFamily: "var(--f-italic)", fontWeight: 400, fontStyle: "italic", fontSize: size + 4, letterSpacing: "-0.01em", lineHeight: 1 }}>
        InsideJams
      </span>
    </div>);

}

function ThemeToggle() {
  const [theme, setTheme] = React.useState(() =>
  typeof document !== "undefined" ? document.documentElement.getAttribute("data-theme") || "light" : "light"
  );
  // Sync if changed externally (e.g. via Tweaks panel)
  React.useEffect(() => {
    const obs = new MutationObserver(() => {
      const t = document.documentElement.getAttribute("data-theme") || "light";
      setTheme(t);
    });
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
    return () => obs.disconnect();
  }, []);
  const toggle = () => {
    const next = theme === "dark" ? "light" : "dark";
    document.documentElement.setAttribute("data-theme", next);
    setTheme(next);
    // Persist via host edit-mode protocol so it survives reload
    try {window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { theme: next } }, "*");} catch (e) {}
  };
  const isDark = theme === "dark";
  return (
    <button
      onClick={toggle}
      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
      title={isDark ? "Switch to light" : "Switch to dark"}
      style={{
        display: "inline-flex", alignItems: "center", gap: 6,
        background: "var(--paper-2)",
        color: "var(--ink)",
        border: "1px solid var(--line-strong)",
        borderRadius: 999,
        padding: "6px 6px",
        cursor: "pointer",
        fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.1em",
        position: "relative", width: 56, height: 28
      }}>

      {/* sun icon */}
      <span style={{
        position: "absolute", left: 6, top: "50%", transform: "translateY(-50%)",
        opacity: isDark ? 0.4 : 1, transition: "opacity 0.15s"
      }}>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <circle cx="7" cy="7" r="2.6" fill="currentColor" />
          {[0, 45, 90, 135, 180, 225, 270, 315].map((a) =>
          <line key={a} x1="7" y1="1.5" x2="7" y2="3" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" transform={`rotate(${a} 7 7)`} />
          )}
        </svg>
      </span>
      {/* moon icon */}
      <span style={{
        position: "absolute", right: 6, top: "50%", transform: "translateY(-50%)",
        opacity: isDark ? 1 : 0.4, transition: "opacity 0.15s"
      }}>
        <svg width="13" height="13" viewBox="0 0 14 14" fill="none">
          <path d="M11.5 8.2 A4.6 4.6 0 1 1 5.8 2.5 A3.6 3.6 0 0 0 11.5 8.2 Z" fill="currentColor" />
        </svg>
      </span>
      {/* sliding pill */}
      <span aria-hidden style={{
        position: "absolute",
        top: 3, left: isDark ? "calc(100% - 25px)" : 3,
        width: 22, height: 22, borderRadius: 999,
        background: "var(--tangerine)",
        transition: "left 0.18s var(--ease-out)",
        boxShadow: "0 1px 3px rgba(0,0,0,0.25)"
      }} />
    </button>);

}

function Nav({ onNavigate }) {
  return (
    <nav style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "18px 32px",
      gap: 24,
      borderBottom: "1px solid var(--line)",
      position: "sticky", top: 0, zIndex: 50,
      background: "var(--paper)",
      backdropFilter: "blur(8px)"
    }}>
      <Logo />
      <div style={{ display: "flex", gap: 24, fontSize: 14, fontWeight: 500 }}>
        <a href="#examples" style={{ color: "var(--ink)", textDecoration: "none", opacity: 0.8 }}>Examples</a>
        <a href={SAMPLE_GIFT_PAGE_PATH} target="_top" style={{ color: "var(--ink)", textDecoration: "none", opacity: 0.8 }}>Sample gift page</a>
        <a href="#pricing" style={{ color: "var(--ink)", textDecoration: "none", opacity: 0.8 }}>Pricing</a>
        <a href="#faq" style={{ color: "var(--ink)", textDecoration: "none", opacity: 0.8 }}>FAQ</a>
      </div>
      <div style={{ display: "flex", gap: 10, flexShrink: 0, alignItems: "center" }}>
        <ThemeToggle />
        <button className="btn ghost small" onClick={() => onNavigate("examples")}>Hear examples</button>
        <button className="btn primary small" onClick={() => onNavigate("precheck")}>Create a song gift</button>
      </div>
    </nav>);

}

function SampleGiftPageLink({ dark = false, compact = false }) {
  return (
    <a
      className="btn ghost"
      href={SAMPLE_GIFT_PAGE_PATH}
      target="_top"
      style={{
        color: dark ? "var(--paper)" : "var(--ink)",
        borderColor: dark ? "rgba(245,233,215,0.55)" : "var(--ink)",
        justifyContent: "center",
        padding: compact ? "10px 14px" : "12px 16px",
        textDecoration: "none",
      }}>
      See a sample gift page
    </a>
  );
}

function landingCassetteTraits({ seed, recipient, occasion, title, songType, genre, tier = "Quick", durationSeconds = 54 }) {
  return createPrototypeCassetteTraits({
    seed,
    recipient,
    occasion,
    title,
    songType,
    genre,
    tier,
    durationSeconds,
  });
}

function landingCassetteProps(input, options = {}) {
  return getPrototypeCassettePreviewProps(landingCassetteTraits(input), {
    recipient: input.recipient,
    title: options.title,
    compact: options.compact,
    includeEdition: options.includeEdition,
  });
}

// Hero variant 1 · editorial mixtape, font set FREE
function HeroMixtape({ mood, onStart, onExamples }) {
  const [playing, setPlaying] = React.useState(true);
  const [t, setT] = React.useState(18);
  React.useEffect(() => {
    if (!playing) return;
    const id = setInterval(() => setT(prev => (prev >= 54 ? 0 : prev + 0.12)), 120);
    return () => clearInterval(id);
  }, [playing]);
  const progress = t / 54;
  const leftLevel = playing ? 0.46 + Math.sin(t * 1.7) * 0.22 + Math.sin(t * 5.2) * 0.05 : 0.06;
  const rightLevel = playing ? 0.52 + Math.cos(t * 1.35) * 0.2 + Math.sin(t * 4.6) * 0.05 : 0.06;
  const heroTape = landingCassetteProps({
    seed: "landing-hero-maya-roast",
    recipient: "Maya",
    occasion: "30th birthday",
    title: "The Ballad of Maya",
    songType: "Roast",
    genre: "Pop anthem",
    tier: "Quick",
    durationSeconds: 54,
  }, { includeEdition: false });
  const heroKeepsakeTape = landingCassetteProps({
    seed: "landing-hero-maya-polished",
    recipient: "Maya",
    occasion: "30th birthday",
    title: "The Ballad of Maya",
    songType: "Heartfelt",
    genre: "Acoustic singer-songwriter",
    tier: "Polished",
    durationSeconds: 112,
  }, { includeEdition: false });
  return (
    <section className="grain hero-free" style={{ padding: "44px 0 60px", background: "var(--paper)", position: "relative", overflow: "hidden" }}>
      {/* Decorative oversized type slab · set free behind everything, very subtle */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden",
        display: "flex", alignItems: "flex-end", justifyContent: "flex-end"
      }}>
        <div style={{
          fontFamily: "var(--f-display)",
          fontSize: "clamp(120px, 18vw, 260px)",
          color: "var(--tangerine)",
          opacity: 0.07,
          lineHeight: 0.85,
          letterSpacing: "-0.04em",
          marginRight: -40,
          marginBottom: -30,
          whiteSpace: "nowrap",
          transform: "rotate(-6deg)",
          fontStyle: "italic"
        }}>
          loud.
        </div>
      </div>

      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 40px", position: "relative", zIndex: 2 }}>
        <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 24 }}>
          <span className="tape">SIDE A · CUSTOM SONG GIFT</span>
          <span className="eyebrow">Private mixtape pages · From $29 · No accounts</span>
        </div>

        {/* HERO HEADLINE · controlled rhythm, two-line composition */}
        <h1 className="hero-headline" style={{ margin: 0, position: "relative", zIndex: 3 }}>
          <span className="line line-1">Custom songs from</span>
          <span className="line line-2"><em>inside jokes.</em></span>
        </h1>

        <div className="hero-after" style={{ display: "grid", gridTemplateColumns: "1fr 1.15fr", gap: 40, marginTop: 32, alignItems: "start" }}>
          <div style={{ paddingTop: 20 }}>
            <p style={{ fontSize: 21, lineHeight: 1.45, margin: 0, maxWidth: 560, fontWeight: 500 }}>
              Give them the song only you could send. Share the stories, nicknames, and running bits, then send a private cassette-style page they can play, read, download, and replay.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
              <button className="btn primary big" onClick={onStart}>
                Create their song gift
                <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 7 L12 7 M8 3 L12 7 L8 11" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round" /></svg>
              </button>
              <button className="btn ghost big" onClick={onExamples}>
                <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 1.5 L12 7 L3 12.5 Z" fill="currentColor" /></svg>
                Hear examples
              </button>
            </div>
            <div style={{ marginTop: 24, fontFamily: "var(--f-mono)", fontSize: 12, opacity: 0.7, letterSpacing: "0.08em" }}>
              QUICK JAM $29 · POLISHED JAM $69 · PRIVATE LINK
            </div>
          </div>

          {/* visual · large, climbs up alongside the headline */}
          <div className="hero-visual" style={{ position: "relative", height: 620, marginTop: -300, zIndex: 1 }}>
            <div style={{
              position: "absolute", top: 24, left: 40,
              transform: "rotate(-5deg)",
              filter: "drop-shadow(0 22px 44px rgba(0,0,0,0.32))"
            }}>
              <SkeuoCassette
                w={540}
                title={heroTape.title}
                meta={heroTape.meta}
                spinning={playing}
                reelRotation={progress * 720}
                accent={heroTape.accent}
                body={heroTape.body}
                bodyHighlight={heroTape.bodyHighlight}
                bodyShadow={heroTape.bodyShadow}
                labelTone={heroTape.labelTone}
              />
            </div>

            <div style={{
              position: "absolute", top: 356, right: -20,
              transform: "rotate(9deg)",
              filter: "drop-shadow(0 18px 34px rgba(0,0,0,0.36))"
            }}>
              <SkeuoCassette
                w={340}
                title={heroKeepsakeTape.title}
                meta={heroKeepsakeTape.meta}
                spinning={false}
                accent={heroKeepsakeTape.accent}
                body={heroKeepsakeTape.body}
                bodyHighlight={heroKeepsakeTape.bodyHighlight}
                bodyShadow={heroKeepsakeTape.bodyShadow}
                labelTone={heroKeepsakeTape.labelTone} />

            </div>

            <div style={{
              position: "absolute", bottom: 0, left: 60, width: 300,
              background: "var(--ink)",
              padding: "18px 20px",
              transform: "rotate(-3deg)",
              boxShadow: "0 14px 28px -10px rgba(0,0,0,0.4)",
              fontFamily: "var(--f-italic)",
              fontStyle: "italic",
              fontSize: 17,
              color: "var(--paper)",
              lineHeight: 1.35
            }}>
              "It feels like a gift because the details are theirs."
              <div style={{ marginTop: 8, fontFamily: "var(--f-mono)", fontStyle: "normal", fontSize: 10, letterSpacing: "0.08em", opacity: 0.7 }}>SAMPLE REACTION COPY

              </div>
            </div>
          </div>
        </div>

        {/* Inline mini-player · always-dark gradient, fixed cream text */}
        <div className={playing ? "hero-player ij-reactive-deck is-playing" : "hero-player ij-reactive-deck"} style={{ marginTop: 36, display: "flex", alignItems: "center", gap: 16, padding: "14px 18px", borderRadius: 14, background: "linear-gradient(180deg, #2a2a32 0%, #15151a 50%, #2a2a32 100%)", color: "#F2E4CC", boxShadow: "0 1px 0 rgba(255,255,255,0.08) inset, 0 14px 28px -14px rgba(0,0,0,0.5)" }}>
          <span className="chip solid" style={{ background: "var(--tangerine)", color: "#fff", borderColor: "var(--tangerine)" }}>NOW PLAYING</span>
          <button
            className="ij-hero-play"
            onClick={() => setPlaying(!playing)}
            aria-label={playing ? "Pause hero sample" : "Play hero sample"}
            style={{
              width: 34, height: 34, borderRadius: "50%", border: "1px solid rgba(242,228,204,0.28)",
              background: playing ? "var(--tangerine)" : "rgba(242,228,204,0.08)",
              color: "#F2E4CC", display: "grid", placeItems: "center", cursor: "pointer", flexShrink: 0,
            }}>
            {playing ? "❚❚" : "▶"}
          </button>
          <div>
            <div style={{ fontWeight: 700, fontSize: 14, color: "#F2E4CC" }}>Limon Laydown</div>
            <div style={{ opacity: 0.7, fontSize: 12, color: "#F2E4CC" }}>a custom roast song for the friend who made one drink their whole personality</div>
          </div>
          <div className="ij-reactive-wave" style={{ flex: 1, minWidth: 80 }}><Waveform seed={11} count={64} height={26} progress={progress} color="var(--tangerine)" /></div>
          <div style={{ display: "flex", gap: 6 }}>
            <VUMeter w={84} h={38} level={leftLevel} label="L" />
            <VUMeter w={84} h={38} level={rightLevel} label="R" />
          </div>
          <span className="chip" style={{ background: "rgba(255,255,255,0.08)", borderColor: "rgba(255,255,255,0.18)", color: "#F2E4CC" }}>0:{String(Math.floor(t)).padStart(2, "0")} / 0:54</span>
        </div>
      </div>
    </section>);

}

// Hero variant 2 · typographic poster
function HeroPoster({ mood, onStart, onExamples }) {
  const isHeartfelt = mood === "heartfelt";
  return (
    <section style={{ padding: "60px 40px 80px", background: "var(--ink)", color: "var(--paper)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.6, marginBottom: 40 }}>
          <span>Vol. 01 · Issue 01</span>
          <span>Original recordings · {isHeartfelt ? "Heartfelt" : "Roast"} edition</span>
          <span>Est. 2026</span>
        </div>
        <h1 className="display" style={{ fontSize: "clamp(72px, 12vw, 200px)", margin: 0, lineHeight: 0.88, textAlign: "center" }}>
          Inside<br />
          <span style={{ fontStyle: "italic", color: "var(--tangerine)" }}>jokes</span>,<br />
          on tape.
        </h1>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: 50 }}>
          <div style={{ maxWidth: 360, fontSize: 17, lineHeight: 1.5, opacity: 0.85 }}>
            Custom song gifts from your stories. Share the inside jokes only you would know, then send a private page they can play on repeat.
          </div>
          <div style={{ display: "flex", gap: 12 }}>
            <button className="btn primary" onClick={onStart}>Create their song gift →</button>
            <button className="btn ghost" style={{ color: "var(--paper)", borderColor: "var(--paper)" }} onClick={onExamples}>Hear examples</button>
          </div>
        </div>
      </div>
    </section>);

}

// Hero variant 3 · split tape recorder
function HeroSplit({ mood, onStart, onExamples }) {
  return (
    <section style={{ padding: 0, background: "var(--paper)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: 620 }}>
        <div style={{ padding: "80px 60px", display: "flex", flexDirection: "column", justifyContent: "center", borderRight: "1.5px solid var(--ink)" }}>
          <span className="tape" style={{ alignSelf: "flex-start", marginBottom: 24 }}>NEW · SIDE A</span>
          <h1 className="display" style={{ fontSize: "clamp(46px, 5.5vw, 84px)", margin: 0 }}>
            A song only<br />
            <em style={{ color: "var(--tangerine)" }}>you</em> could send.
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.5, marginTop: 24, maxWidth: 460, opacity: 0.78 }}>
            Tell us their nickname, the running joke, that one disastrous trip. We make it a song gift. They get a private page. You watch them lose it.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 32 }}>
            <button className="btn primary" onClick={onStart}>Create their song gift</button>
            <button className="btn ghost" onClick={onExamples}>Hear examples</button>
          </div>
        </div>
        <div style={{ background: "var(--ink)", color: "var(--paper)", padding: "60px 60px", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
          <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.6 }}>
            Now playing → on repeat at parties everywhere
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            {[
            { title: "Limon Laydown", sub: "Roast · Pop Anthem · 0:54", seed: 4 },
            { title: "The Ballad of Big Hunt", sub: "Roast · Country · 0:48", seed: 9 },
            { title: "For Mom (Forever)", sub: "Heartfelt · Acoustic · 0:52", seed: 14 }].
            map((t, i) =>
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 16, padding: "14px 16px", border: "1px solid rgba(245,233,215,0.2)", borderRadius: 999 }}>
                <div style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--tangerine)", color: "#fff", display: "grid", placeItems: "center", flexShrink: 0 }}>
                  <svg width="11" height="11" viewBox="0 0 14 14"><path d="M3 1.5 L12 7 L3 12.5 Z" fill="currentColor" /></svg>
                </div>
                <div style={{ flexShrink: 0, minWidth: 0 }}>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{t.title}</div>
                  <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, opacity: 0.65, letterSpacing: "0.06em" }}>{t.sub}</div>
                </div>
                <div style={{ flex: 1 }}><Waveform seed={t.seed} count={42} height={22} color="var(--tangerine)" progress={i === 0 ? 0.4 : 0} /></div>
              </div>
            )}
          </div>
          <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, opacity: 0.6, letterSpacing: "0.06em" }}>
            $29 QUICK JAM · $69 POLISHED JAM · NO ACCOUNTS
          </div>
        </div>
      </div>
    </section>);

}

// === Examples ===
function Examples() {
  const examples = [
  { kind: "ROAST JAM", title: "The Ballad of Big Hunt", sub: "Country · birthday roast · 0:42 sample", reaction: "For the friend group that wants the room laughing before cake.", waveformSeed: 17, recipient: "Hunt", occasion: "birthday roast", songType: "Roast", genre: "Country", tier: "Quick", durationSeconds: 42, seed: "sample-roast-big-hunt" },
  { kind: "HEARTFELT JAM", title: "For Mom (Forever)", sub: "Acoustic · birthday keepsake · 0:45 sample", reaction: "For the person who deserves names, memories, and a song that slows the room down.", waveformSeed: 21, recipient: "Mom", occasion: "birthday keepsake", songType: "Heartfelt", genre: "Acoustic singer-songwriter", tier: "Polished", durationSeconds: 45, seed: "sample-heartfelt-mom" },
  { kind: "HYPE JAM", title: "Promotion (Big Energy Mix)", sub: "EDM · promotion gift · 0:48 sample", reaction: "For wins, launches, and making someone feel impossible to ignore.", waveformSeed: 7, recipient: "Drew", occasion: "promotion gift", songType: "Hype", genre: "EDM/dance", tier: "Quick", durationSeconds: 48, seed: "sample-hype-drew" }];

  return (
    <section id="examples" style={{ padding: "100px 40px", background: "var(--paper-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 50 }}>
          <div>
            <span className="eyebrow">02 · Listen</span>
            <h2 className="display" style={{ fontSize: 64, margin: "10px 0 0", maxWidth: 700 }}>
              Sample tapes for the moment you want to <em>land</em>.
            </h2>
          </div>
          <div style={{ display: "grid", justifyItems: "end", gap: 10, maxWidth: 260, textAlign: "right" }}>
            <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, opacity: 0.6, letterSpacing: "0.08em" }}>
              PREVIEW WHAT YOUR RECIPIENT OPENS
            </div>
            <SampleGiftPageLink compact />
          </div>
        </div>

        <div className="ij-examples-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }}>
          {examples.map((e, i) => {
            const tape = landingCassetteProps(e, { includeEdition: false });
            return (
          <div key={i} className="ij-scroll-tape-card" style={{ background: "var(--paper)", border: "1.5px solid var(--ink)", borderRadius: 16, padding: 18, display: "flex", flexDirection: "column", gap: 14, "--scroll-tilt": `${i === 1 ? 1.6 : i === 2 ? -1.8 : -1.2}deg` }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span className="chip" style={{ borderColor: tape.accent, color: tape.accent }}>{e.kind}</span>
                <span style={{ fontFamily: "var(--f-mono)", fontSize: 11, opacity: 0.6 }}>0:{42 + i * 3}</span>
              </div>
              <div style={{ padding: "10px 0 4px", display: "flex", justifyContent: "center" }}>
                <div style={{ transform: i === 1 ? "rotate(2deg)" : i === 2 ? "rotate(-3deg)" : "rotate(-1.5deg)" }}>
                  {tape.tierStyle === "premium" ? (
                    <CassetteByVariant w={320} variant={tape.variant} recipient={tape.recipient} title={tape.title} meta={tape.meta} spinning={true} accent={tape.accent} />
                  ) : (
                    <SkeuoCassette w={320} title={tape.title} meta={tape.meta} spinning={true} accent={tape.accent} body={tape.body} bodyHighlight={tape.bodyHighlight} bodyShadow={tape.bodyShadow} labelTone={tape.labelTone} />
                  )}
                </div>
              </div>
              <div>
                <div className="display" style={{ fontSize: 24, fontStyle: "italic", fontFamily: "var(--f-italic)" }}>{e.title}</div>
                <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, opacity: 0.6, letterSpacing: "0.04em", marginTop: 4 }}>{e.sub}</div>
                <p style={{ fontSize: 14, lineHeight: 1.45, opacity: 0.78, margin: "10px 0 0" }}>{e.reaction}</p>
              </div>
              <AudioPlayer title="" seed={e.waveformSeed} duration={e.durationSeconds} accent={tape.accent} compact />
            </div>
          );})}
        </div>
      </div>
    </section>);

}

// === How it works ===
function HowItWorks({ onStart }) {
  const giftTape = landingCassetteProps({
    seed: "how-it-works-maya-private-page",
    recipient: "Maya",
    occasion: "30th birthday",
    title: "The Ballad of May-May",
    songType: "Roast",
    genre: "Pop anthem",
    tier: "Quick",
    durationSeconds: 54,
  }, { compact: true });
  return (
    <section id="how" style={{ padding: "100px 40px", background: "var(--paper)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <span className="eyebrow">03 · How it works</span>
        <h2 className="display" style={{ fontSize: 64, margin: "10px 0 50px", maxWidth: 700 }}>
          Three steps, one <em>unforgettable</em> gift.
        </h2>
        <div className="ij-how-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }}>
          {/* 01 · Tell us the story */}
          <div style={{ position: "relative", padding: "32px 28px", border: "1.5px solid var(--ink)", borderRadius: 16, background: "transparent", color: "var(--ink)", overflow: "hidden" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 28 }}>
              <span style={{ fontFamily: "var(--f-mono)", fontSize: 13, letterSpacing: "0.1em" }}>01</span>
              <span className="tape">Intake form</span>
            </div>
            <h3 className="display" style={{ fontSize: 32, margin: 0, fontStyle: "italic" }}>Tell us the story</h3>
            <p style={{ marginTop: 12, fontSize: 15, lineHeight: 1.55, opacity: 0.78 }}>Start with a short fit check, then unlock the full paid intake for names, pronunciation, memories, and the running bit nobody else would know.</p>
            <div style={{ marginTop: 24, padding: 14, background: "var(--paper-2)", borderRadius: 10, border: "1px dashed var(--line-strong)" }}>
              <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.15em", opacity: 0.6, marginBottom: 10 }}>PAID INTAKE · UNLOCKED AFTER CHECKOUT</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {[
                { label: "Pronunciation", value: "MAY-uh", filled: true },
                { label: "Inside joke", value: "the cancun shoe incident", filled: true },
                { label: "Roast traits", value: "always 20 mins late · texts in caps", filled: true },
                { label: "Off limits", value: "—", filled: false }].
                map((row, i) =>
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", background: "var(--paper)", borderRadius: 6, border: "1px solid var(--line)" }}>
                    <span style={{ width: 12, height: 12, borderRadius: 3, border: "1.5px solid var(--ink)", background: row.filled ? "var(--tangerine)" : "transparent", flexShrink: 0, position: "relative" }}>
                      {row.filled && <span style={{ position: "absolute", inset: 0, color: "var(--ink)", fontSize: 10, lineHeight: "10px", display: "grid", placeItems: "center", fontWeight: 700 }}>✓</span>}
                    </span>
                    <span style={{ fontFamily: "var(--f-mono)", fontSize: 9, letterSpacing: "0.08em", opacity: 0.55, width: 80, flexShrink: 0 }}>{row.label.toUpperCase()}</span>
                    <span style={{ fontFamily: "var(--f-italic)", fontStyle: "italic", fontSize: 13, opacity: row.filled ? 1 : 0.4, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{row.value}</span>
                  </div>
                )}
              </div>
              <div style={{ marginTop: 12, display: "flex", gap: 8, flexWrap: "wrap" }}>
                {["Names", "Memories", "Pronunciation", "Boundaries"].map((t) =>
                <span key={t} style={{ fontFamily: "var(--f-mono)", fontSize: 9, letterSpacing: "0.08em", padding: "4px 8px", borderRadius: 999, border: "1px solid var(--line-strong)", opacity: 0.7 }}>{t.toUpperCase()}</span>
                )}
              </div>
            </div>
          </div>

          {/* 02 · Choose the vibe */}
          <div style={{ position: "relative", padding: "32px 28px", border: "1.5px solid var(--ink)", borderRadius: 16, background: "transparent", color: "var(--ink)", overflow: "hidden" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 28 }}>
              <span style={{ fontFamily: "var(--f-mono)", fontSize: 13, letterSpacing: "0.1em" }}>02</span>
              <span className="tape" style={{ background: "var(--honey)", borderColor: "var(--honey)" }}>Mood + tier</span>
            </div>
            <h3 className="display" style={{ fontSize: 32, margin: 0, fontStyle: "italic" }}>Choose the emotional job</h3>
            <p style={{ marginTop: 12, fontSize: 15, lineHeight: 1.55, opacity: 0.78 }}>Pick the job the song has to do: make the room laugh, make someone cry in a good way, hype a win, or carry a business message. The pre-check recommends the right tier.</p>
            <div style={{ marginTop: 24, padding: 14, background: "var(--paper-2)", borderRadius: 10, border: "1px dashed var(--line-strong)" }}>
              <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.15em", opacity: 0.6, marginBottom: 10 }}>SONG TYPE</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                {[
                { name: "Roast", color: "var(--tangerine)", on: true },
                { name: "Heartfelt", color: "#C8553D" },
                { name: "Hype", color: "var(--honey)" },
                { name: "Romantic", color: "#E8779B" }].
                map((t) =>
                <span key={t.name} style={{
                  fontSize: 12, padding: "5px 10px", borderRadius: 999,
                  border: t.on ? "1.5px solid var(--ink)" : "1px solid var(--line-strong)",
                  background: t.on ? "var(--ink)" : "var(--paper)",
                  color: t.on ? "var(--paper)" : "var(--ink)",
                  display: "inline-flex", alignItems: "center", gap: 6
                }}>
                    <span style={{ width: 8, height: 8, borderRadius: 999, background: t.color }} />{t.name}
                  </span>
                )}
              </div>
              <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.15em", opacity: 0.6, margin: "14px 0 8px" }}>GENRE</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                {["Pop anthem", "Country", "Rap/trap", "Acoustic", "EDM"].map((g, i) =>
                <span key={g} style={{
                  fontSize: 12, padding: "5px 10px", borderRadius: 6,
                  border: "1px solid var(--line-strong)",
                  background: i === 0 ? "var(--honey)" : "var(--paper)",
                  fontWeight: i === 0 ? 600 : 400
                }}>{g}</span>
                )}
              </div>
              {/* tone slider */}
              <div style={{ marginTop: 14 }}>
                <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.1em", opacity: 0.6, marginBottom: 6 }}>
                  <span>MILD</span><span>MEDIUM</span><span>SAVAGE</span>
                </div>
                <div style={{ height: 6, background: "var(--paper)", borderRadius: 3, position: "relative", border: "1px solid var(--line-strong)" }}>
                  <div style={{ position: "absolute", inset: "-1px 0 -1px 0", width: "55%", background: "linear-gradient(90deg, var(--honey) 0%, var(--tangerine) 100%)", borderRadius: 3 }} />
                  <div style={{ position: "absolute", left: "55%", top: -5, width: 14, height: 14, borderRadius: "50%", background: "var(--ink)", transform: "translateX(-50%)", boxShadow: "0 2px 4px rgba(0,0,0,0.25)" }} />
                </div>
              </div>
            </div>
          </div>

          {/* 03 · They get their own mixtape page · featured */}
          <div style={{ position: "relative", padding: "32px 28px", border: "1.5px solid var(--ink)", borderRadius: 16, background: "var(--ink)", color: "var(--paper)", overflow: "hidden" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 28 }}>
              <span style={{ fontFamily: "var(--f-mono)", fontSize: 13, letterSpacing: "0.1em", opacity: 0.85 }}>03</span>
              <span className="tape" style={{ background: "var(--tangerine)", color: "var(--ink)", borderColor: "var(--tangerine)" }}>The good part</span>
            </div>
            <h3 className="display" style={{ fontSize: 32, margin: 0, fontStyle: "italic" }}>They get their own mixtape page</h3>
            <p style={{ marginTop: 12, fontSize: 15, lineHeight: 1.55, opacity: 0.85 }}>A private gift page with their custom cassette, full song, lyrics, MP3 download, and a note from you. One unlisted link, ready for the group chat or a one-person surprise.</p>
            <div style={{ marginTop: 24, padding: 14, background: "rgba(245,233,215,0.06)", borderRadius: 10, border: "1px dashed rgba(245,233,215,0.25)" }}>
              <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.15em", opacity: 0.7, marginBottom: 10 }}>PRIVATE /JAM LINK AFTER DELIVERY</div>
              <div style={{ display: "flex", justifyContent: "center" }}>
                <div style={{ transform: "rotate(-2deg)" }}>
                  <SkeuoCassette
                    w={220}
                    title={giftTape.title}
                    meta={giftTape.meta}
                    spinning={true}
                    accent={giftTape.accent}
                    body={giftTape.body}
                    bodyHighlight={giftTape.bodyHighlight}
                    bodyShadow={giftTape.bodyShadow}
                    labelTone={giftTape.labelTone}
                  />
                </div>
              </div>
              <div style={{ display: "flex", gap: 8, marginTop: 12, flexWrap: "wrap" }}>
                {["Custom cassette", "Full lyrics", "MP3 download", "Note from you"].map((t) =>
                <span key={t} style={{ fontFamily: "var(--f-mono)", fontSize: 9, letterSpacing: "0.08em", padding: "4px 8px", borderRadius: 999, border: "1px solid rgba(245,233,215,0.3)", color: "var(--paper)" }}>{t.toUpperCase()}</span>
                )}
              </div>
              <div style={{ marginTop: 14 }}>
                <SampleGiftPageLink dark compact />
                <div style={{ marginTop: 8, fontFamily: "var(--f-mono)", fontSize: 9, letterSpacing: "0.08em", opacity: 0.65 }}>
                  EXAMPLE ONLY · NOT A CUSTOMER PAGE
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 40 }}>
          <button className="btn primary" onClick={onStart}>Create their song gift →</button>
        </div>
      </div>
    </section>);

}

// === Song types · wall of mixtapes ===
function SongTypes({ onStart }) {
  const types = [
  {
    name: "Roast",
    body: "Birthdays, bachelor parties, friends who deserve it.",
  },
  {
    name: "Heartfelt",
    body: "Parents, partners, the sincere version of someone you love.",
  },
  {
    name: "Hype",
    body: "Wins, promotions, launches. Make someone feel legendary.",
  },
  {
    name: "Romantic",
    body: "Anniversaries, Valentine's, the relationship-into-a-song one.",
  },
  {
    name: "Birthday",
    body: "Custom seasonal gifts that feel more personal than a card.",
  },
  {
    name: "Custom",
    body: "Unusual ideas. Tell us the brief. We'll figure it out together.",
  }];


  return (
    <section style={{ padding: "100px 40px", background: "var(--ink)", color: "var(--paper)", position: "relative", overflow: "hidden" }}>
      {/* faint slanted "MIXTAPES" backplate */}
      <div aria-hidden style={{
        position: "absolute", top: "8%", left: "-4%", right: "-4%",
        fontFamily: "var(--f-display)", fontStyle: "italic",
        fontSize: "22vw", lineHeight: 0.85, letterSpacing: "-0.03em",
        color: "var(--paper)", opacity: 0.04, pointerEvents: "none",
        whiteSpace: "nowrap"
      }}>mixtapes · mixtapes</div>

      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative" }}>
        <span className="eyebrow" style={{ color: "var(--paper)", opacity: 0.7 }}>04 · Six modes</span>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, margin: "10px 0 60px" }}>
          <h2 className="display" style={{ fontSize: 64, margin: 0, maxWidth: 760 }}>
            Whatever the moment · we have a <em>tape</em> for that.
          </h2>
          <span style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.18em", opacity: 0.55 }}>
            ↓ EVERY SHELL · CUSTOM PAINTED
          </span>
        </div>

        {/* wall of mixtapes */}
        <div className="ij-song-types-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "60px 32px" }}>
          {types.map((t, i) => {
            const tilts = [-3, 2.5, -1.5, 1.5, -2, 3];
            const rot = tilts[i % tilts.length];
            const tape = landingCassetteProps({
              seed: `song-type-${t.name.toLowerCase()}`,
              recipient: t.name === "Custom" ? "your weird idea" : `the ${t.name.toLowerCase()} one`,
              occasion: t.name === "Birthday" ? "birthday gift" : `${t.name.toLowerCase()} jam`,
              title: `${t.name} tape`,
              songType: t.name === "Birthday" ? "Birthday/Holiday" : t.name === "Custom" ? "Other" : t.name,
              genre: t.name === "Hype" ? "EDM/dance" : t.name === "Romantic" ? "Acoustic singer-songwriter" : "Pop anthem",
              tier: t.name === "Heartfelt" || t.name === "Romantic" ? "Polished" : "Quick",
              durationSeconds: t.name === "Heartfelt" || t.name === "Romantic" ? 112 : 54,
            }, { compact: true });
            return (
              <div key={i} className="ij-scroll-tape-card" style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", "--scroll-tilt": `${rot}deg` }}>
                <div style={{
                  transform: `rotate(${rot}deg)`,
                  filter: "drop-shadow(0 18px 28px rgba(0,0,0,0.5))",
                  transition: "transform 0.3s ease"
                }}
                onMouseEnter={(e) => e.currentTarget.style.transform = `rotate(${rot * 0.3}deg) translateY(-6px) scale(1.02)`}
                onMouseLeave={(e) => e.currentTarget.style.transform = `rotate(${rot}deg)`}>

                  <SkeuoCassette
                    w={300}
                    title={tape.title}
                    meta={tape.meta}
                    spinning={false}
                    accent={tape.accent}
                    body={tape.body}
                    bodyHighlight={tape.bodyHighlight}
                    bodyShadow={tape.bodyShadow}
                    labelTone={tape.labelTone} />

                </div>
                <div style={{ marginTop: 18, display: "flex", alignItems: "center", gap: 10, justifyContent: "center" }}>
                  <span style={{ width: 10, height: 10, borderRadius: 999, background: tape.accent }} />
                  <h3 className="display" style={{ fontSize: 32, fontStyle: "italic", margin: 0 }}>{t.name}</h3>
                  <span style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.12em", opacity: 0.5 }}>0{i + 1}/06</span>
                </div>
                <p style={{ marginTop: 8, fontSize: 14, opacity: 0.72, lineHeight: 1.5, maxWidth: 280 }}>{t.body}</p>
                <button
                  onClick={onStart}
                  style={{
                    marginTop: 14,
                    fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.14em", fontWeight: 700,
                    background: "transparent", color: "var(--paper)",
                    border: 0, borderBottom: `1.5px solid ${tape.accent}`,
                    padding: "4px 0", cursor: "pointer"
                  }}>
                  START A {t.name.toUpperCase()} JAM →</button>
              </div>);

          })}
        </div>

        {/* Bottom CTA bar */}
        <div style={{
          marginTop: 80, padding: "24px 32px",
          background: "var(--paper)", color: "var(--ink)",
          borderRadius: 16,
          display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16
        }}>
          <div>
            <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.14em", opacity: 0.6 }}>NOT SURE YET?</div>
            <div className="display" style={{ fontFamily: "var(--f-italic)", fontStyle: "italic", fontSize: 28, marginTop: 4 }}>Answer four quick questions. The full story comes after checkout.</div>
          </div>
          <button className="btn primary" onClick={onStart}>Find the right tier →</button>
        </div>
      </div>
    </section>);

}

// === Pricing ===
function Pricing({ onStart }) {
  const quickPreviewTapes = [
    { seed: "pricing-quick-roast", recipient: "Maya", occasion: "birthday roast", title: "Quick Roast", songType: "Roast", genre: "Pop anthem", tier: "Quick", durationSeconds: 54 },
    { seed: "pricing-quick-heartfelt", recipient: "Mom", occasion: "birthday gift", title: "Quick Heartfelt", songType: "Heartfelt", genre: "Acoustic singer-songwriter", tier: "Quick", durationSeconds: 54 },
    { seed: "pricing-quick-hype", recipient: "Drew", occasion: "promotion gift", title: "Quick Hype", songType: "Hype", genre: "EDM/dance", tier: "Quick", durationSeconds: 54 },
    { seed: "pricing-quick-birthday", recipient: "Sam", occasion: "holiday party", title: "Quick Birthday", songType: "Birthday/Holiday", genre: "Pop anthem", tier: "Quick", durationSeconds: 54 },
  ];
  const polishedPreviewTapes = [
    { seed: "pricing-polished-business", recipient: "Maya", occasion: "launch day", title: "Polished Business", songType: "Business", genre: "Pop anthem", tier: "Polished", durationSeconds: 112 },
    { seed: "pricing-polished-heartfelt", recipient: "Mom", occasion: "birthday keepsake", title: "Polished Heartfelt", songType: "Heartfelt", genre: "Acoustic singer-songwriter", tier: "Polished", durationSeconds: 112 },
    { seed: "pricing-polished-romantic", recipient: "Drew", occasion: "anniversary", title: "Polished Romantic", songType: "Romantic", genre: "Acoustic singer-songwriter", tier: "Polished", durationSeconds: 112 },
    { seed: "pricing-polished-roast", recipient: "Sam", occasion: "best man speech", title: "Polished Roast", songType: "Roast", genre: "Rock/punk", tier: "Polished", durationSeconds: 112 },
  ];

  return (
    <section id="pricing" style={{ padding: "100px 40px", background: "var(--paper-2)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <span className="eyebrow">05 · Pricing</span>
        <h2 className="display" style={{ fontSize: 64, margin: "10px 0 8px", maxWidth: 700 }}>
          Two ways to <em>press play</em>.
        </h2>
        <p style={{ fontSize: 17, opacity: 0.7, maxWidth: 620, marginBottom: 50 }}>
          Quick is for fast, funny, low-stakes gifts. Polished is the better choice when the song has to feel considered, emotional, romantic, highly specific, or business-ready.
        </p>
        <div className="ij-pricing-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }}>
          {/* Quick */}
          <div style={{ padding: "36px 36px 32px", border: "1.5px solid var(--ink)", borderRadius: 16, background: "var(--paper)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div>
                <div className="eyebrow">Quick Jam</div>
                <div className="display" style={{ fontSize: 84, marginTop: 4, lineHeight: 1 }}>$29</div>
              </div>
              <span className="tape">Fast gift</span>
            </div>
            <p style={{ fontSize: 16, opacity: 0.78, marginTop: 8, lineHeight: 1.5 }}>
              45-60 second song with a target delivery under 10 minutes after paid intake. Best for fast, funny, "I need this tonight" moments where speed matters more than human review.
            </p>
            {/* Cassette preview · color-only variations */}
            <div style={{ marginTop: 24, padding: "18px 14px 14px", background: "var(--paper-2)", borderRadius: 12, border: "1px dashed var(--line-strong)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
                <span style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.12em", opacity: 0.65 }}>YOUR CASSETTE · STANDARD SHELL</span>
                <span style={{ fontFamily: "var(--f-mono)", fontSize: 10, opacity: 0.55 }}>4 COLORS</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", gap: 6 }}>
                {quickPreviewTapes.map((c, i) => {
                  const tape = landingCassetteProps(c, { compact: true });
                  return (
                <div key={i} style={{ flex: 1, transform: `rotate(${i % 2 === 0 ? -1.5 : 1.5}deg)` }}>
                    <SkeuoCassette w={120} title={tape.title} meta={tape.meta} spinning={false} accent={tape.accent} body={tape.body} bodyHighlight={tape.bodyHighlight} bodyShadow={tape.bodyShadow} labelTone={tape.labelTone} />
                  </div>
                );})}
              </div>
              <div style={{ marginTop: 10, fontSize: 12, opacity: 0.65, lineHeight: 1.4 }}>
                Same private gift page, lyric sheet, MP3 download, and cassette label. Color is matched to the song's mood.
              </div>
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 28px", display: "flex", flexDirection: "column", gap: 10 }}>
              {[
              "45-60 second personalized song",
              "Target delivery under 10 minutes after paid intake",
              "Private gift page + standard cassette",
              "1 free regeneration for technical issues",
              "No customer account required",
              "No promised human review"].
              map((f, i) =>
              <li key={i} style={{ display: "flex", gap: 10, fontSize: 15 }}>
                  <span style={{ color: "var(--tangerine)" }}>✓</span> {f}
                </li>
              )}
            </ul>
            <button className="btn primary" onClick={onStart} style={{ width: "100%", justifyContent: "center" }}>Start a Quick Jam · $29</button>
          </div>
          {/* Polished */}
          <div style={{ padding: "36px 36px 32px", border: "1.5px solid var(--ink)", borderRadius: 16, background: "var(--ink)", color: "var(--paper)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div>
                <div className="eyebrow" style={{ color: "var(--paper)", opacity: 0.7 }}>Polished Jam</div>
                <div className="display" style={{ fontSize: 84, marginTop: 4, lineHeight: 1 }}>$69</div>
              </div>
              <span className="chip" style={{ background: "var(--honey)", borderColor: "var(--honey)", color: "var(--ink)" }}>Recommended for heartfelt + romantic</span>
            </div>
            <p style={{ fontSize: 16, opacity: 0.85, marginTop: 8, lineHeight: 1.5 }}>
              90-120 second song with human-polished lyrics, deeper personalization, and quality-checked audio. For songs that have to land.
            </p>
            {/* Cassette preview · custom premium designs */}
            <div style={{ marginTop: 24, padding: "18px 14px 14px", background: "rgba(245,233,215,0.06)", borderRadius: 12, border: "1px solid var(--honey)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
                <span style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.12em", color: "var(--honey)" }}>YOUR CASSETTE · CUSTOM-DESIGNED SHELL</span>
                <span style={{ fontFamily: "var(--f-mono)", fontSize: 10, opacity: 0.6 }}>6 STYLES</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", gap: 6 }}>
                {polishedPreviewTapes.map((c, i) => {
                  const tape = landingCassetteProps(c, { compact: true });
                  return (
                <div key={i} style={{ flex: 1, transform: `rotate(${i % 2 === 0 ? -1.5 : 1.5}deg)` }}>
                    <CassetteByVariant variant={tape.variant} recipient={tape.recipient} title={tape.title} meta={tape.meta} w={120} spinning={false} accent={tape.accent} />
                  </div>
                );})}
              </div>
              <div style={{ marginTop: 10, fontSize: 12, opacity: 0.85, lineHeight: 1.4 }}>
                Translucent chrome, handmade Sharpie, vaporwave, punk demo, and more. Designed to match your story, not just its color.
              </div>
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 28px", display: "flex", flexDirection: "column", gap: 10 }}>
              {[
              "90-120 second personalized song",
              "Delivered within 24 hours",
              "Custom premium cassette design",
              "Human-polished lyrics & deeper personalization",
              "Quality-checked audio before delivery",
              "1 minor revision included",
              "Available for business / commercial"].
              map((f, i) =>
              <li key={i} style={{ display: "flex", gap: 10, fontSize: 15 }}>
                  <span style={{ color: "var(--honey)" }}>✓</span> {f}
                </li>
              )}
            </ul>
            <button className="btn" onClick={onStart} style={{ width: "100%", justifyContent: "center", background: "var(--honey)", borderColor: "var(--honey)", color: "var(--ink)" }}>Choose Polished Jam · $69</button>
          </div>
        </div>
      </div>
    </section>);

}

// === FAQ ===
function FAQ() {
  const faqs = [
  { q: "What is InsideJams?", a: "InsideJams is a custom-song gift product. Buyers share the stories, names, occasions, and inside jokes behind a gift, then receive a private page with a personalized song, lyrics, share controls, and an MP3 download." },
  { q: "Are these made with AI?", a: "Yes. InsideJams uses AI-assisted music tools plus our own creative process. Quick Jams are generated automatically with quality safeguards. Polished Jams include human review, lyric polish, and audio quality checks before delivery." },
  { q: "How long does a custom song gift take?", a: "Quick Jams target delivery in under 10 minutes after the paid intake is complete. Polished Jams are delivered within 24 hours." },
  { q: "How much does InsideJams cost?", a: "InsideJams has two MVP tiers: Quick Jam is $29 for a 45-60 second custom song, and Polished Jam is $69 for a 90-120 second song with human-polished lyrics and audio QA." },
  { q: "Are InsideJams songs private?", a: "Yes. Customer songs are delivered through unlisted private gift pages. Anyone with the link can view the page, but customer songs are not released on Spotify, Apple Music, or public streaming platforms." },
  { q: "Can I make a roast song?", a: "Yes. Roast Jams can be mild, medium, or savage, but they still cannot include hate, threats, doxxing, serious trauma jokes, harassment, or other off-limits content." },
  { q: "Can I use it for a business song?", a: "Yes, but business and commercial songs require Polished Jam so the lyrics, usage, and audio quality receive a human pass before delivery." },
  { q: "What do recipients receive?", a: "Recipients receive a private gift page with a personalized cassette visual, audio player, lyrics, sender note, share/copy controls, and an MP3 download." },
  { q: "Can I request changes?", a: "Quick Jam includes one free regeneration for technical issues or missed required details. Polished Jam includes one minor revision." },
  { q: "Can I get a physical card?", a: "Physical cards are coming soon. Join the waitlist to be notified when printed or true singing cards become available." },
  { q: "What if I don't finish the intake form?", a: "Your intake link stays active for 30 days after purchase." }];

  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ padding: "100px 40px", background: "var(--paper)" }}>
      <div style={{ maxWidth: 980, margin: "0 auto" }}>
        <span className="eyebrow">06 · Questions, answered</span>
        <h2 className="display" style={{ fontSize: 64, margin: "10px 0 50px" }}>
          The fine print, in <em>plain</em> English.
        </h2>
        <div style={{ borderTop: "1px solid var(--line)" }}>
          {faqs.map((f, i) =>
          <div key={i} style={{ borderBottom: "1px solid var(--line)" }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
              width: "100%", padding: "24px 0", background: "transparent", border: "none",
              display: "flex", justifyContent: "space-between", alignItems: "center",
              fontFamily: "var(--f-display)", fontSize: 26, fontWeight: 500,
              color: "var(--ink)", cursor: "pointer", textAlign: "left"
            }}>
                <span style={{ fontStyle: open === i ? "italic" : "normal" }}>{f.q}</span>
                <span style={{ fontFamily: "var(--f-mono)", fontSize: 14, opacity: 0.5 }}>{open === i ? "·" : "+"}</span>
              </button>
              {open === i &&
            <div className="appear" style={{ paddingBottom: 24, fontSize: 16, lineHeight: 1.55, opacity: 0.78, maxWidth: 720 }}>
                  {f.a}
                </div>
            }
            </div>
          )}
        </div>
      </div>
    </section>);

}

// === Waitlist ===
function Waitlist() {
  const [submitted, setSubmitted] = React.useState(false);
  const emailRef = React.useRef(null);
  const occasionRef = React.useRef(null);
  const [price, setPrice] = React.useState("");
  const submit = () => {
    const email = emailRef.current?.value || "";
    const occasion = occasionRef.current?.value || "";
    if (!email) return;
    try {
      const list = JSON.parse(localStorage.getItem("ij_waitlist") || "[]");
      list.push({ email, occasion, price, at: new Date().toISOString() });
      localStorage.setItem("ij_waitlist", JSON.stringify(list));
    } catch (e) {}
    setSubmitted(true);
  };
  return (
    <section style={{ padding: "100px 40px", background: "var(--honey)", color: "var(--ink)" }}>
      <div className="ij-waitlist-grid" style={{ maxWidth: 1080, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center" }}>
        <div>
          <span className="chip solid">Coming soon</span>
          <h2 className="display" style={{ fontSize: 56, margin: "16px 0", fontStyle: "italic" }}>
            Want this as a real singing card?
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.5, opacity: 0.85, maxWidth: 460 }}>
            Physical cards are waitlist-only in the MVP. Tell us if you would want a printed or true singing card when that version is ready.
          </p>
        </div>
        <div style={{ background: "var(--ink)", color: "var(--paper)", padding: 32, borderRadius: 16 }}>
          {submitted ?
          <div style={{ padding: "20px 0" }}>
              <div className="display" style={{ fontSize: 36, fontStyle: "italic" }}>You're on the list.</div>
              <p style={{ marginTop: 12, opacity: 0.8 }}>We'll email you the moment singing cards are ready.</p>
            </div> :

          <>
              <div className="eyebrow" style={{ color: "var(--paper)", opacity: 0.7 }}>Join the waitlist</div>
              <div className="field" style={{ marginTop: 16 }}>
                <label>Email</label>
                <input ref={emailRef} placeholder="you@somewhere.com" style={{ borderColor: "rgba(245,233,215,0.3)", color: "var(--paper)" }} />
              </div>
              <div className="field" style={{ marginTop: 14 }}>
                <label>What occasion?</label>
                <select ref={occasionRef} style={{ borderColor: "rgba(245,233,215,0.3)", color: "var(--paper)", background: "transparent" }}>
                  <option style={{ background: "var(--ink)" }}>Birthday</option>
                  <option style={{ background: "var(--ink)" }}>Anniversary</option>
                  <option style={{ background: "var(--ink)" }}>Holiday</option>
                  <option style={{ background: "var(--ink)" }}>Just because</option>
                </select>
              </div>
              <div className="field" style={{ marginTop: 14 }}>
                <label>Comfortable price?</label>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                  {["$15", "$20", "$30", "$45+"].map((p) =>
                <button key={p} onClick={() => setPrice(p)} style={{ padding: "10px 14px", borderRadius: 999, border: price === p ? "1px solid var(--tangerine)" : "1px solid rgba(245,233,215,0.3)", background: price === p ? "var(--tangerine)" : "transparent", color: price === p ? "var(--ink)" : "var(--paper)", fontFamily: "var(--f-mono)", fontSize: 12, cursor: "pointer" }}>{p}</button>
                )}
                </div>
              </div>
              <button className="btn primary" onClick={submit} style={{ width: "100%", justifyContent: "center", marginTop: 20 }}>Notify me →</button>
            </>
          }
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer style={{ padding: "60px 40px 40px", background: "var(--ink)", color: "var(--paper)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: 40 }}>
          <div style={{ maxWidth: 320 }}>
            <Logo />
            <p style={{ marginTop: 16, fontSize: 14, opacity: 0.65, lineHeight: 1.55 }}>
              Custom song gifts from your stories. Private pages, no customer accounts.
            </p>
          </div>
          <div style={{ display: "flex", gap: 60, fontSize: 13 }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <span className="eyebrow" style={{ color: "var(--paper)", opacity: 0.5 }}>Product</span>
              <a href="#examples" style={{ color: "var(--paper)", textDecoration: "none", opacity: 0.85 }}>Examples</a>
              <a href="#pricing" style={{ color: "var(--paper)", textDecoration: "none", opacity: 0.85 }}>Pricing</a>
              <a href="#faq" style={{ color: "var(--paper)", textDecoration: "none", opacity: 0.85 }}>FAQ</a>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <span className="eyebrow" style={{ color: "var(--paper)", opacity: 0.5 }}>Boundaries</span>
              <a href="/content-policy" style={{ color: "var(--paper)", textDecoration: "none", opacity: 0.85 }}>Content policy</a>
              <a href="/terms" style={{ color: "var(--paper)", textDecoration: "none", opacity: 0.85 }}>Terms</a>
              <a href="/privacy" style={{ color: "var(--paper)", textDecoration: "none", opacity: 0.85 }}>Privacy</a>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <span className="eyebrow" style={{ color: "var(--paper)", opacity: 0.5 }}>Talk to us</span>
              <a href="mailto:hi@insidejams.fm" style={{ color: "var(--paper)", textDecoration: "none", opacity: 0.85 }}>hi@insidejams.fm</a>
              <a href="#" style={{ color: "var(--paper)", textDecoration: "none", opacity: 0.85 }}>Press</a>
            </div>
          </div>
        </div>
        <hr className="divider" style={{ marginTop: 40, background: "rgba(245,233,215,0.15)" }} />
        <div style={{ marginTop: 24, display: "flex", justifyContent: "space-between", fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.08em", opacity: 0.5 }}>
          <span>© 2026 INSIDEJAMS · ALL RECORDINGS PRIVATE</span>
          <span>MADE WITH HEADPHONES ON</span>
        </div>
      </div>
    </footer>);

}

function Landing({ heroVariant = "mixtape", mood, onNavigate }) {
  const Hero = heroVariant === "poster" ? HeroPoster : heroVariant === "split" ? HeroSplit : HeroMixtape;
  return (
    <div style={{ background: "var(--paper)", color: "var(--ink)" }}>
      <Nav onNavigate={onNavigate} />
      <Hero mood={mood} onStart={() => onNavigate("precheck")} onExamples={() => onNavigate("examples")} />
      <Examples />
      <HowItWorks onStart={() => onNavigate("precheck")} />
      <SongTypes onStart={() => onNavigate("precheck")} />
      <Pricing onStart={() => onNavigate("precheck")} />
      <FAQ />
      <Waitlist />
      <Footer />
    </div>);

}

Object.assign(window, { Landing, Logo, Nav, ThemeToggle });