/* eslint-disable no-undef */
// Канвас сборки.
// Верхняя секция — FULL CONCEPT (6 экранов flow).
// Нижняя секция — VARIANTS (3 ранние исследования направления).

function App() {
  const phone = (Body, dark, props = {}) => (
    <TelegramPhone dark={dark} botName="@theburger_bot" subtitle="MINI APP · BOT" {...props}>
      <Body />
    </TelegramPhone>
  );

  return (
    <DesignCanvas style={{ background: '#ECE7E0' }}>

      {/* ── FULL CONCEPT ───────────────────────────── */}
      <DCSection id="concept" title="the BURGER — FULL CONCEPT"
        subtitle="Полный flow Mini App: hero · меню (6 категорий) · соусы и напитки · сборка бургера · детали · трекинг. Реальные фото меню.">

        <DCArtboard id="hero" label="01 · HERO — JUST. WHAT. YOU. NEED." width={402} height={874}>
          {phone(HeroScreen, false)}
        </DCArtboard>

        <DCArtboard id="menu" label="02 · MENU — смэш бургеры (6 категорий)" width={402} height={874}>
          {phone(MenuScreen, false)}
        </DCArtboard>

        <DCArtboard id="extras" label="03 · EXTRAS — соусы / лимонады / drinks" width={402} height={874}>
          {phone(ExtrasScreen, false)}
        </DCArtboard>

        <DCArtboard id="customize" label="04 · СВОЙ ВКУС — сборка / выбор соуса" width={402} height={874}>
          {phone(CustomizeScreen, false)}
        </DCArtboard>

        <DCArtboard id="detail" label="05 · DETAIL — CLASSIC, тёмная" width={402} height={874}>
          {phone(DetailScreen, true)}
        </DCArtboard>

        <DCArtboard id="track" label="06 · TRACK — заказ #2841" width={402} height={874}>
          {phone(TrackScreen, false)}
        </DCArtboard>

      </DCSection>

      {/* ── VARIANTS (исследование направлений) ────── */}
      <DCSection id="variants" title="VARIANT EXPLORATION"
        subtitle="Три ранних варианта главного экрана: строго по гайду, кинетика, 3D-герой. Финальный концепт выше — комбинация лучшего из каждого.">

        <DCArtboard id="v1" label="V1 · STRICT" width={402} height={874}>
          {phone(V1Home, false)}
        </DCArtboard>

        <DCArtboard id="v2" label="V2 · KINETIC" width={402} height={874}>
          {phone(V2Home, false)}
        </DCArtboard>

        <DCArtboard id="v3" label="V3 · 3D HERO" width={402} height={874}>
          {phone(V3Home, true)}
        </DCArtboard>

      </DCSection>
    </DesignCanvas>
  );
}

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