// 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 — weiches Abendlicht' },
      { img: 'https://campaignpilot-eyewear.genai-schnitzler.ch/media/campaign__kaleos-porter_campaign-woman-poolside_v1.jpg', cap: 'Am Pool — Sommerkampagne' },
    ],
  },
  {
    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 — goldene Stunde' },
      { img: 'https://campaignpilot-womens-fashion.genai-schnitzler.ch/media/M22__studio__M22_D02_pose_twirl.jpg', cap: 'Bewegung — der Rock nimmt Schwung' },
    ],
  },
  {
    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' },
      { img: 'https://campaignpilot-mens-fashion.genai-schnitzler.ch/media/M44__lifestyle__M44_F06_aperitivo_evening.jpg', cap: 'Aperitivo — der Abend am Lago' },
    ],
  },
  {
    label: 'Reisen · FURBER. 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 — Blick aufs Rollfeld', ratio: '4 / 3' },
      { img: 'https://campaignpilot-luggage.genai-schnitzler.ch/media/campaign__1649116_11.jpeg', cap: 'Einkaufsstrasse — über das Pflaster', ratio: '4 / 3' },
    ],
  },
  {
    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 — sommerliches Licht' },
      { img: 'assets/furber/turmventilator-masszeichnung-34.png', cap: 'Masszeichnung für das Shop-Listing', bg: '#fff' },
    ],
  },
  {
    label: 'Fitness · FURBER. 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: 'Reisen · FURBER. 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: 'Elektronik · FURBER. .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 1.6fr 1.6fr', 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>
        {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} · KI-generiert</figcaption>
          </figure>
        ))}
      </div>
      {c.href && <div><Cta href={c.href}>Lookbook live ansehen »</Cta></div>}
    </div>
  );
}

// Homepage strip: the two strongest lookbook cases + the Turmventilator client case.
const gsnHomeCases = [
  gsnCases[0],
  gsnCases[1],
  { ...gsnCases[4], label: 'Kundenprojekt · FURBER. Turmventilator' },
];

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>
          {gsnCases.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 });