// Showcase — before/after proof rows; full set on the Cases page, top 3 on the homepage.
const { Cta, CloseBand } = window.GenAISchnitzlerDesignSystem_ce4f9c;

const gsnCases = [
  {
    label: 'Sonnenbrillen · Kaleos «Porter»',
    href: 'https://campaignpilot-eyewear.genai-schnitzler.ch/',
    fact: '1 → 13 Bilder + 1 Film aus einer Fassung',
    src: 'https://campaignpilot-eyewear.genai-schnitzler.ch/media/src__kaleos-porter_front.jpg',
    out: [
      { img: 'https://campaignpilot-eyewear.genai-schnitzler.ch/media/campaign__kaleos-porter_campaign-woman-milan_nanopro_v3.jpg', cap: 'Mailand — Hero-Motiv im Abendlicht' },
      { img: 'assets/kaleos/porter-terracotta.png', cap: 'Terrakotta-Wand — Kampagnenmotiv Sommer' },
    ],
  },
  {
    label: 'Damenmode · Sommerkleid «Ascona»',
    href: 'https://campaignpilot-womens-fashion.genai-schnitzler.ch/',
    fact: '1 → 13 Bilder aus einem Produktfoto',
    src: 'https://campaignpilot-womens-fashion.genai-schnitzler.ch/media/src__D02_ascona_studio.jpg',
    out: [
      { img: 'https://campaignpilot-womens-fashion.genai-schnitzler.ch/media/M22__lifestyle__M22_D02_lakeside_hero.jpg', cap: 'Lago Maggiore — Hero-Motiv zur goldenen Stunde' },
      { img: 'https://campaignpilot-womens-fashion.genai-schnitzler.ch/media/M22__studio__M22_D02_pose_twirl.jpg', cap: 'Bewegung — zeigt Fall und Schwung des Kleids' },
    ],
  },
  {
    label: 'Herrenmode · Hemd «Lugano»',
    href: 'https://campaignpilot-mens-fashion.genai-schnitzler.ch/',
    fact: '1 → 13 Bilder aus einem Produktfoto',
    src: 'https://campaignpilot-mens-fashion.genai-schnitzler.ch/media/src__Mannino_Shirt_1__fulll_image.jpeg',
    out: [
      { img: 'https://campaignpilot-mens-fashion.genai-schnitzler.ch/media/M44__lifestyle__M44_F06_lakeside_promenade.jpg', cap: 'Seepromenade Lugano — Titelmotiv des Lookbooks' },
      { img: 'assets/lugano/studio-289cae03.png', cap: 'Studio — das Muster im Detail' },
    ],
  },
  {
    label: 'Accessoires · Tote «Alpen Chic»',
    href: 'https://campaignpilot-handbags.genai-schnitzler.ch/',
    fact: '1 → 12 Bilder aus einer Produktreferenz',
    src: 'https://campaignpilot-handbags.genai-schnitzler.ch/media/src__alpen-chic-tote_ref-front-left.jpeg',
    out: [
      { img: 'https://campaignpilot-handbags.genai-schnitzler.ch/media/bag-07.jpg', cap: 'Bergsee — Abendlicht auf dem Leder', ratio: '4 / 5' },
      { img: 'https://campaignpilot-handbags.genai-schnitzler.ch/media/bag-10.jpg', cap: 'Stadt am Morgen — Motiv für Shop und Social', ratio: '4 / 5' },
    ],
  },
  {
    label: 'E-Commerce · Polti Espressomaschine «Coffea»',
    href: 'https://campaignpilot-sortiment.genai-schnitzler.ch/',
    fact: '1 Webshop-Foto → Kampagnenmotive inkl. Headline & Claim',
    src: 'https://campaignpilot-sortiment.genai-schnitzler.ch/media/src__polti_webshop.jpg',
    out: [
      { img: 'https://campaignpilot-sortiment.genai-schnitzler.ch/media/polti-loft.png', cap: 'Feierabend über der Stadt — «Stil. Geschmack. Kompaktheit.»', ratio: '1 / 1' },
      { img: 'https://campaignpilot-sortiment.genai-schnitzler.ch/media/polti-crema.jpg', cap: 'Crema-Makro — dichte, feinporige Crema', ratio: '1 / 1' },
    ],
  },
  {
    label: 'E-Commerce · Razor «Dirt Rocket MX350»',
    href: 'https://campaignpilot-sortiment.genai-schnitzler.ch/',
    fact: '1 Webshop-Foto → Kampagnenmotive inkl. Headline & Claim',
    src: 'https://campaignpilot-sortiment.genai-schnitzler.ch/media/src__razor_webshop.jpg',
    out: [
      { img: 'https://campaignpilot-sortiment.genai-schnitzler.ch/media/razor-jump.jpg', cap: 'Sprung im Wald — «Dein Einstieg in die Motocross-Welt.»', ratio: '1 / 1' },
      { img: 'https://campaignpilot-sortiment.genai-schnitzler.ch/media/razor-uphill.png', cap: 'Bergauf im Gegenlicht — «Leise, schnell und robust.»', ratio: '1 / 1' },
    ],
  },
  {
    label: 'Reisen · KOOR Reisekoffer «Manila»',
    href: 'https://campaignpilot-luggage.genai-schnitzler.ch/',
    fact: '1 Koffer → 12 Kampagnenmotive + 4 Funktionsgrafiken',
    src: 'assets/furber/manila-quelle-34.png',
    out: [
      { img: 'https://campaignpilot-luggage.genai-schnitzler.ch/media/campaign__1649116_5.jpeg', cap: 'Am Gate — Kampagnenmotiv für die Reisesaison', ratio: '4 / 3' },
      { img: 'assets/furber/manila-street.jpg', cap: 'Masszeichnung für das Shop-Listing', ratio: '2592 / 1632', bg: '#fff' },
    ],
  },
  {
    label: 'Reisen · KOOR Hartschalenkoffer',
    href: null,
    fact: '1 Produktfoto → Kampagnenbild + Feature-Grafik (Kundenprojekt)',
    src: 'assets/furber/koor-koffer-quelle-34.png',
    out: [
      { img: 'assets/furber/koor-koffer-lobby.jpg', cap: 'Hotel-Lobby — Ankunft', ratio: '2400 / 1792' },
      { img: 'assets/furber/koor-koffer-features-43.png', cap: 'Feature-Grafik für das Shop-Listing', ratio: '2400 / 1792', bg: '#fff' },
    ],
  },
  {
    label: 'Haushalt & E-Commerce · FURBER. Turmventilator',
    href: null,
    fact: '1 Lagerfoto → Kampagnenbild + Masszeichnung (Kundenprojekt)',
    src: 'assets/furber/turmventilator-quelle.jpg',
    out: [
      { img: 'assets/furber/turmventilator-lifestyle.jpg', cap: 'Wohnzimmer — Kampagnenbild im Sommerlicht' },
      { img: 'assets/furber/turmventilator-masszeichnung-34.png', cap: 'Masszeichnung für das Shop-Listing', bg: '#fff' },
    ],
  },
  {
    label: 'Fitness · KOOR Hanteln-Set',
    href: null,
    fact: '1 Produktfoto → Listing-Grafiken für den Shop (Kundenprojekt)',
    src: 'assets/furber/koor-hanteln-quelle-34.png',
    out: [
      { img: 'assets/furber/koor-hanteln-homegym.jpg', cap: 'Listing-Grafik — Home-Gym mit USP-Badges', ratio: '2400 / 1792', bg: '#fff' },
      { img: 'assets/furber/koor-hanteln-listing.jpg', cap: 'Listing-Grafik — Set-Übersicht mit Headline', ratio: '2400 / 1792', bg: '#fff' },
    ],
  },
  {
    label: 'Elektronik · onit Ladegerät',
    href: null,
    fact: '1 Produktfoto → Kampagnenbild + Hero-Grafik (Kundenprojekt)',
    src: 'assets/furber/onit-quelle-34.png',
    out: [
      { img: 'assets/furber/onit-desk.jpg', cap: 'Am Schreibtisch — Laden im Alltag', ratio: '2336 / 1744' },
      { img: 'assets/furber/onit-hero.jpg', cap: 'Hero-Grafik für das Shop-Listing', ratio: '2336 / 1744', bg: '#fff' },
    ],
  },
];

function ShowcaseRow({ c }) {
  return (
    <div style={{ display: 'grid', gap: 16 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
        <div style={{ fontSize: '.98rem', fontWeight: 600, color: 'var(--ink)' }}>{c.label}</div>
        <div style={{ fontSize: '.82rem', color: 'var(--muted)' }}>{c.fact}</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: c.cols || '1fr auto 3.2fr', gap: 'var(--gap-grid)', alignItems: 'stretch' }}>
        <figure style={{ margin: 0, background: 'var(--panel)', border: '1px solid var(--line)' }}>
          <div style={{ aspectRatio: c.srcRatio || '3 / 4', overflow: 'hidden' }}>
            <img src={c.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          <figcaption style={{ fontSize: '.72rem', fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--gold-d)', padding: '8px 12px' }}>Die Quelle — reales Produktfoto</figcaption>
        </figure>
        <div style={{ display: 'flex', alignItems: 'center', color: 'var(--gold)', fontSize: '1.4rem', fontWeight: 600 }}>→</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--gap-grid)', alignContent: 'start' }}>
          {c.out.map((o, i) => (
            <figure key={i} className="gsn-tile" style={{ margin: 0, background: 'var(--abyss)', cursor: 'default' }}>
              <div style={{ aspectRatio: o.ratio || '3 / 4', overflow: 'hidden', background: o.bg || 'var(--abyss)' }}>
                <img className="gsn-tile-img" src={o.img} alt="" style={{ width: '100%', height: '100%', objectFit: o.fit || 'cover', display: 'block', transition: 'transform var(--dur) var(--ease)' }} />
              </div>
              <figcaption style={{ color: 'var(--on-dark-2)', fontSize: 'var(--fs-caption)', padding: '8px 12px' }}>{o.cap}</figcaption>
            </figure>
          ))}
          <div style={{ gridColumn: '1 / -1', fontSize: '.72rem', fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--gold-d)' }}>Das Ergebnis — KI-generiert</div>
        </div>
      </div>
      {c.href && <div><Cta href={c.href}>Lookbook live ansehen »</Cta></div>}
    </div>
  );
}

// Homepage strip: eyewear + Herrenmode + KOOR «Manila» lookbook cases.
// To bring a case back: remove `hidden: true` from it in gsnCases above.
const gsnVisibleCases = gsnCases.filter(c => !c.hidden);
const gsnHomeCases = [gsnCases[0], gsnCases[2], gsnCases[6]];

function Showcase({ onNavigate }) {
  return (
    <div style={{ display: 'grid', gap: 48 }}>
      <style>{`.gsn-tile:hover .gsn-tile-img{transform:scale(1.04)} @media (hover:none){.gsn-tile:hover .gsn-tile-img{transform:none}}`}</style>
      {gsnHomeCases.map((c, i) => <ShowcaseRow key={i} c={c} />)}
      <div onClick={e => { e.preventDefault(); onNavigate && onNavigate('cases'); }}>
        <Cta href="#cases">Alle Cases ansehen »</Cta>
      </div>
    </div>
  );
}

function Cases() {
  return (
    <main style={{ fontFamily: 'var(--font)' }}>
      <IntroSection eyebrow="Cases" title={<span>Echte Produkte. <b>Echte Resultate.</b></span>}>
        <p style={{ margin: 0 }}>Von Eyewear über Mode bis E-Commerce: Jede Kampagne unten entstand aus einem realen Produktfoto — KI-generiert, QA-geprüft, teils als Lookbook live publiziert. Das Produkt bleibt dabei pixeltreu das Produkt.</p>
      </IntroSection>
      <WhiteSection>
        <div style={{ display: 'grid', gap: 48 }}>
          <style>{`.gsn-tile:hover .gsn-tile-img{transform:scale(1.04)} @media (hover:none){.gsn-tile:hover .gsn-tile-img{transform:none}}`}</style>
          {gsnVisibleCases.map((c, i) => <ShowcaseRow key={i} c={c} />)}
        </div>
      </WhiteSection>
      <CloseBand
        eyebrow="Ihr Produkt"
        title={<span>Senden Sie uns ein Foto — <b>wir zeigen Ihnen den Rest.</b></span>}
        ctaLabel="15 Minuten buchen »"
        ctaHref="https://calendly.com/hubert-genai-schnitzler/15-min-beratung"
      />
    </main>
  );
}

Object.assign(window, { Showcase, Cases });