/* Smash League — top-level app
   Composes a design canvas with:
   - Section 1: Pitch deck slides (6 × 1920×1080)
   - Section 2: Landing page — Direction C (Sport), the locked direction
   - Section 3: Responsive previews of Direction C (TV / Desktop / Tablet / Mobile)
*/

const { useState: useStateApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "sport",
  "pitchAnnotations": false,
  "screenFocus": "desktop"
}/*EDITMODE-END*/;

/* Card artboard that links out to the live standalone site. */
function SiteLinkCard() {
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        background: "var(--c-ink, #07070a)",
        color: "#efece6",
        padding: 40,
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        fontFamily: "var(--font-body, 'Space Grotesk', system-ui, sans-serif)",
        position: "relative",
        overflow: "hidden",
        backgroundImage:
          "repeating-linear-gradient(45deg, rgba(232,200,74,0.04) 0 14px, rgba(232,200,74,0.10) 14px 15px)",
      }}
    >
      <div
        style={{
          fontFamily: "var(--font-mono, monospace)",
          fontSize: 11,
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          color: "#e8c84a",
          opacity: 0.8,
        }}
      >
        // RWD remaster · deliverable
      </div>
      <div>
        <div
          style={{
            fontFamily: "var(--font-display, 'Archivo Black', sans-serif)",
            fontSize: 56,
            lineHeight: 0.95,
            textTransform: "uppercase",
            letterSpacing: "-0.01em",
            marginBottom: 16,
          }}
        >
          Open the<br />
          <span style={{ color: "#e8c84a" }}>standalone</span><br />
          website ↗
        </div>
        <p style={{ fontSize: 14, lineHeight: 1.5, opacity: 0.75, margin: 0, maxWidth: 340 }}>
          The earlier Direction B build, still deployable as a real page —
          kept live so the rationale for picking A stays scrollable. Opens
          in a new tab.
        </p>
      </div>
      <a
        href="Smash League - Site.html"
        target="_blank"
        rel="noopener"
        onClick={(e) => e.stopPropagation()}
        style={{
          background: "#e8c84a",
          color: "#07070a",
          fontFamily: "var(--font-display, 'Archivo Black', sans-serif)",
          textTransform: "uppercase",
          letterSpacing: "0.04em",
          fontSize: 16,
          padding: "16px 22px",
          textAlign: "center",
          textDecoration: "none",
          boxShadow: "6px 6px 0 #07070a, 6px 6px 0 1px #e8c84a",
          alignSelf: "stretch",
          position: "relative",
          zIndex: 2,
        }}
      >
        Launch standalone site →
      </a>
    </div>
  );
}

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

  // Each artboard takes (palette, annotate, screen) — the global tweaks drive
  // the *focus* preview; individual artboards override per-direction.
  return (
    <>
      <DesignCanvas>
        {/* ── Pitch deck ─────────────────────────────────────────────── */}
        <DCSection
          id="pitch"
          title="Pitch deck · for the Keith call"
          subtitle="5 slides · designed as off-camera reference + send-after leave-behind. Mirrors the call sheet flow."
        >
          <DCArtboard id="s1" label="01 · Cover" width={1920} height={1080}>
            <SlideCover />
          </DCArtboard>
          <DCArtboard id="s2" label="02 · Diagnosis" width={1920} height={1080}>
            <SlideDiagnosis />
          </DCArtboard>
          <DCArtboard id="s3" label="03 · Approach · the menu" width={1920} height={1080}>
            <SlideApproach />
          </DCArtboard>
          <DCArtboard id="s4" label="04 · The website remaster" width={1920} height={1080}>
            <SlideLanding />
          </DCArtboard>
          <DCArtboard id="s5" label="05 · Next step" width={1920} height={1080}>
            <SlideNext />
          </DCArtboard>
        </DCSection>

        {/* ── Landing-page — locked direction C ────────────────────────── */}
        <DCSection
          id="lp-direction-c"
          title="Landing page · Direction C (locked) — Sport Bold"
          subtitle="Direction C is the committed art direction — broadcast-sport energy, confident typography, treats the game like a league. This is the page we build out to deploy."
          mb={40}
        >
          <DCArtboard id="c-main" label="C · Sport Bold · 1440 desktop" width={1440} height={2200}>
            <LandingPage palette="sport" annotate={t.pitchAnnotations} />
          </DCArtboard>
        </DCSection>

        {/* ── Responsive sweep ────────────────────────────────────────── */}
        <DCSection
          id="responsive"
          title="Omni-screen sweep · direction C"
          subtitle="Same page, four screen sizes. TV (couch / Steam Big Picture) → desktop → tablet → mobile."
        >
          <DCArtboard id="r-tv" label="TV · 2560 wide" width={2560} height={1440}>
            <LandingPage palette={t.palette} annotate={false} screen="tv" />
          </DCArtboard>
          <DCArtboard id="r-desk" label="Desktop · 1440" width={1440} height={2200}>
            <LandingPage palette={t.palette} annotate={false} screen="desktop" />
          </DCArtboard>
          <DCArtboard id="r-tab" label="Tablet · 834" width={834} height={2200}>
            <LandingPage palette={t.palette} annotate={false} screen="tablet" />
          </DCArtboard>
          <DCArtboard id="r-mob" label="Mobile · 390" width={390} height={2400}>
            <LandingPage palette={t.palette} annotate={false} screen="mobile" />
          </DCArtboard>
        </DCSection>
      </DesignCanvas>

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakRadio
          label="Art direction"
          value={t.palette}
          options={["aaa", "arcade", "sport"]}
          onChange={(v) => setTweak("palette", v)}
        />
        <div style={{ fontSize: 11, opacity: 0.6, padding: "4px 0 0", lineHeight: 1.5 }}>
          Direction C (sport) is locked. Toggle for reference only.
        </div>
        <TweakSection label="Pitch mode" />
        <TweakToggle
          label="Show design annotations"
          value={t.pitchAnnotations}
          onChange={(v) => setTweak("pitchAnnotations", v)}
        />
        <div style={{ fontSize: 11, opacity: 0.6, padding: "4px 0 0", lineHeight: 1.5 }}>
          Off = clean prototype Keith can scroll while you narrate.<br />
          On = numbered callouts explaining the design rationale.
        </div>
        <TweakSection label="Quick links" />
        <TweakButton
          label="Open standalone site ↗"
          onClick={() => window.open("Smash League - Site.html", "_blank")}
        />
        <TweakButton
          label="Jump to pitch deck"
          onClick={() => document.getElementById("pitch")?.scrollIntoView({ behavior: "smooth", block: "start" })}
        />
        <TweakButton
          label="Jump to Direction C"
          onClick={() => document.getElementById("lp-direction-c")?.scrollIntoView({ behavior: "smooth", block: "start" })}
        />
        <TweakButton
          label="Jump to responsive sweep"
          onClick={() => document.getElementById("responsive")?.scrollIntoView({ behavior: "smooth", block: "start" })}
        />
      </TweaksPanel>
    </>
  );
}

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