const {
  CalmHome,
  CalmMobile,
  CalmMenu,
  PaceHome,
  PaceMobile,
  PaceMenu,
  PaceMenuMobile,
  PaceProgram,
  PaceProgramMobile,
  PaceVisit,
  PaceVisitMobile,
  MixHome,
  MixMobile,
  MixMenu,
  CONCEPT_CSS,
} = window.LTSConcepts;

const BOARD_CSS = `
  ${CONCEPT_CSS}
  :root{color-scheme:dark}.design-board{min-height:100vh;background-color:#11120f;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:24px 24px;color:white;font-family:${window.LTSTokens.type.sans}}.board-toolbar{height:64px;position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:20px;padding:0 22px;background:rgba(13,14,12,.94);backdrop-filter:blur(14px);border-bottom:1px solid #30312d}.toolbar-title{display:flex;align-items:center;gap:10px;min-width:260px}.toolbar-title strong{font-size:13px}.toolbar-title span{font-family:${window.LTSTokens.type.mono};font-size:8px;color:#8e9087}.toolbar-nav{display:flex;gap:8px;flex:1}.toolbar-nav a{text-decoration:none;color:#bbbdb3;border:1px solid #3c3d37;padding:8px 11px;border-radius:99px;font-size:9px}.toolbar-actions{display:flex;align-items:center;gap:8px}.toolbar-actions button{border:1px solid #44463f;background:#20211e;color:white;border-radius:7px;height:30px;min-width:30px;padding:0 9px;font-size:10px;cursor:pointer}.toolbar-actions button.active{background:#daff00;color:#090a08;border-color:#daff00}.toolbar-zoom{font-family:${window.LTSTokens.type.mono};font-size:9px;min-width:42px;text-align:center}.board-intro{max-width:1180px;margin:0 auto;padding:70px 28px 35px}.board-intro-top{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:end}.board-kicker{font-family:${window.LTSTokens.type.mono};font-size:10px;color:#daff00;letter-spacing:.1em}.board-intro h1{font-size:54px;line-height:.94;letter-spacing:-.05em;margin:16px 0 0;max-width:700px}.board-intro p{font-size:13px;line-height:1.65;color:#bfc1b8;margin:0}.board-notes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:40px}.board-note{padding:18px;border:1px solid #34352f;background:#181916;border-radius:12px}.board-note b{display:block;font-size:12px;margin-bottom:8px}.board-note span{font-size:10px;line-height:1.5;color:#a4a69d}.concept-section{padding:50px 28px 90px;border-top:1px solid #292a26}.section-meta{max-width:1180px;margin:0 auto 28px;display:grid;grid-template-columns:100px 1fr 1fr;gap:24px;align-items:start}.section-number{font-family:${window.LTSTokens.type.mono};color:#daff00;font-size:12px}.section-meta h2{font-size:36px;letter-spacing:-.04em;margin:0}.section-meta p{font-size:11px;line-height:1.6;color:#aeb0a7;margin:3px 0 0}.artboard-row{display:flex;gap:42px;align-items:flex-start;overflow-x:auto;padding:18px max(28px,calc((100vw - 1180px)/2)) 45px;scrollbar-color:#555 #222}.artboard-wrap{flex:0 0 auto}.artboard-label{height:38px;display:flex;align-items:center;justify-content:space-between;font-family:${window.LTSTokens.type.mono};font-size:9px;color:#d5d7ce}.artboard-label span:last-child{color:#777a72}.artboard-shell{position:relative;box-shadow:0 28px 70px rgba(0,0,0,.42);background:#fff;overflow:hidden}.artboard-inner{position:absolute;left:0;top:0;transform-origin:top left}.artboard-inner>.screen{width:100%;height:100%;overflow:hidden}.board-footer{max-width:1180px;margin:0 auto;padding:40px 28px 80px;color:#85877f;font-size:10px;line-height:1.6}.board-footer strong{color:#daff00}
  .focus-board{min-height:100vh;background:#11120f;color:#fff;padding:28px 40px 80px;font-family:${window.LTSTokens.type.sans}}.focus-board>a{display:inline-block;color:#daff00;text-decoration:none;font-family:${window.LTSTokens.type.mono};font-size:10px;margin-bottom:16px}.focus-board .artboard-wrap{width:max-content;margin:0 auto}.focus-board .artboard-label{height:42px}.focus-board .artboard-inner{transform:none!important}
  @media(max-width:900px){.toolbar-title{min-width:auto}.toolbar-title span,.toolbar-nav{display:none}.board-toolbar{gap:10px}.toolbar-actions{margin-left:auto}.board-intro-top,.section-meta{grid-template-columns:1fr}.board-notes{grid-template-columns:1fr}.board-intro h1{font-size:40px}.focus-board{padding:16px}}
`;

const SECTIONS = [
  {
    id: "calm",
    number: "01",
    title: "CALM PERFORMANCE CLUB",
    description: "Odporúčaný hybrid: japonská čistota, Vydrica a teplé svetlo s kontrolovanými Love Them signálmi. Najširší denný aj večerný záber.",
    screens: [
      { id: "calm-home", label: "Homepage · desktop", size: "1280 × 3420", width: 1280, height: 3420, component: CalmHome },
      { id: "calm-mobile", label: "Homepage · mobile", size: "390 × 1120", width: 390, height: 1120, component: CalmMobile },
      { id: "calm-menu", label: "Menu · desktop", size: "1280 × 1330", width: 1280, height: 1330, component: CalmMenu },
    ],
  },
  {
    id: "pace",
    number: "02",
    title: "PACE / POSTER — LTS SIGNAL",
    description: "Vybraný smer V8: full-bleed Love Them hero film, pokojný marquee, Bento menu, reel-ready týždenný program a ľahká Editorial Arrival pätička. Bez pôvodnej Wolfies červenej v UI.",
    screens: [
      { id: "pace-home", label: "Homepage · desktop", size: "1280 × 4030", width: 1280, height: 4030, component: PaceHome },
      { id: "pace-mobile", label: "Homepage · mobile", size: "390 × 1200", width: 390, height: 1200, component: PaceMobile },
      { id: "pace-menu", label: "Menu · desktop", size: "1280 × 2380", width: 1280, height: 2380, component: PaceMenu },
      { id: "pace-menu-mobile", label: "Menu · mobile", size: "390 × 3350", width: 390, height: 3350, component: PaceMenuMobile },
      { id: "pace-program", label: "Program · desktop", size: "1280 × 1810", width: 1280, height: 1810, component: PaceProgram },
      { id: "pace-program-mobile", label: "Program · mobile", size: "390 × 1300", width: 390, height: 1300, component: PaceProgramMobile },
      { id: "pace-visit", label: "Community + Visit · desktop", size: "1280 × 1790", width: 1280, height: 1790, component: PaceVisit },
      { id: "pace-visit-mobile", label: "Community + Visit · mobile", size: "390 × 1120", width: 390, height: 1120, component: PaceVisitMobile },
    ],
  },
  {
    id: "mix",
    number: "03",
    title: "LOCAL MIXTAPE",
    description: "Kurátorský, hravý smer: menu ako playlist, partneri ako featuring a každá návšteva ako iný mood. Najsilnejší partner story.",
    screens: [
      { id: "mix-home", label: "Homepage · desktop", size: "1280 × 3230", width: 1280, height: 3230, component: MixHome },
      { id: "mix-mobile", label: "Homepage · mobile", size: "390 × 1160", width: 390, height: 1160, component: MixMobile },
      { id: "mix-menu", label: "Menu · desktop", size: "1280 × 1460", width: 1280, height: 1460, component: MixMenu },
    ],
  },
];

function Artboard({ screen, zoom, lang }) {
  const ScreenComponent = screen.component;
  const scaledWidth = Math.round(screen.width * zoom);
  const scaledHeight = Math.round(screen.height * zoom);
  return (
    <article className="artboard-wrap" id={screen.id}>
      <div className="artboard-label"><span>{screen.label}</span><span>{screen.size}</span></div>
      <div className="artboard-shell" style={{ width: scaledWidth, height: scaledHeight }}>
        <div className="artboard-inner" style={{ width: screen.width, height: screen.height, transform: `scale(${zoom})` }}>
          <ScreenComponent lang={lang} />
        </div>
      </div>
    </article>
  );
}

function Board() {
  const [zoom, setZoom] = React.useState(0.38);
  const [lang, setLang] = React.useState("sk");
  const updateZoom = (value) => setZoom(Math.max(0.2, Math.min(0.75, Number(value.toFixed(2)))));

  return (
    <div className="design-board">
      <style>{BOARD_CSS}</style>
      <header className="board-toolbar">
        <div className="toolbar-title"><window.LTSKit.Icon name="bolt" size={19} stroke="#DAFF00" /><div><strong>LTS BRATISLAVA</strong><span> / DESIGN DIRECTIONS</span></div></div>
        <nav className="toolbar-nav">{SECTIONS.map((section) => <a href={`#${section.id}`} key={section.id}>{section.number} {section.title}</a>)}</nav>
        <div className="toolbar-actions">
          <button className={lang === "sk" ? "active" : ""} onClick={() => setLang("sk")}>SK</button>
          <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
          <button onClick={() => updateZoom(zoom - 0.05)} aria-label="Zoom out">−</button>
          <span className="toolbar-zoom">{Math.round(zoom * 100)}%</span>
          <button onClick={() => updateZoom(zoom + 0.05)} aria-label="Zoom in">+</button>
        </div>
      </header>

      <section className="board-intro">
        <div className="board-intro-top"><div><span className="board-kicker">LOVE THEM SPACE * BRATISLAVA</span><h1>One clubhouse.<br />Three ways to feel it.</h1></div><p>Tri vizuálne smery nad rovnakým obsahom. Vybraný Pace / Poster smer je rozpracovaný do klikateľného homepage, menu, programu a visit flow v desktop aj mobile verzii. Prepínač SK/EN mení obsah obrazoviek.</p></div>
        <div className="board-notes">
          <div className="board-note"><b>Verified brand core</b><span>Acid lime #DAFF00, black, lightning mark, direct community voice and authentic movement.</span></div>
          <div className="board-note"><b>Editorial arrival</b><span>V7 removes the mailing block and ends Pace pages with a light location CTA, Chapter 01 signal and compact useful navigation.</span></div>
          <div className="board-note"><b>Full-bleed motion</b><span>V8 connects the selected homepage to the Love Them shop with the approved hero film, local poster fallback and accessible playback control.</span></div>
          <div className="board-note"><b>Prototype content</b><span>Explicit notes now identify proposed prices, hours and programme details that require LTS confirmation before publishing.</span></div>
        </div>
      </section>

      {SECTIONS.map((section) => (
        <section className="concept-section" id={section.id} key={section.id}>
          <div className="section-meta"><span className="section-number">{section.number}</span><h2>{section.title}</h2><p>{section.description}</p></div>
          <div className="artboard-row">{section.screens.map((screen) => <Artboard key={screen.id} screen={screen} zoom={zoom} lang={lang} />)}</div>
        </section>
      ))}

      <footer className="board-footer"><strong>Prototype only.</strong> Final content, photography, opening hours, menu prices, availability, allergens and dietary claims require confirmation before production.</footer>
    </div>
  );
}

function App() {
  const params = new URLSearchParams(window.location.search);
  const showBoard = params.get("board") === "1";
  const focusId = params.get("screen") || (showBoard ? null : "pace-home");
  const focusLang = params.get("lang") === "en" ? "en" : "sk";
  const focusScreen = SECTIONS.flatMap((section) => section.screens).find((screen) => screen.id === focusId);
  if (!focusScreen) return <Board />;
  const focusZoom = 1;
  return <div className="focus-board"><style>{BOARD_CSS}</style><a href="?board=1">← ALL DESIGN DIRECTIONS</a><Artboard screen={focusScreen} zoom={focusZoom} lang={focusLang} /></div>;
}

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