// Homepage — conversion narrative: start managed (GenAI Abo) → take over (CampaignPilot inhouse).
const { HeroBand, CloseBand, SectionHeading, ReasonBlock, ImageGrid, Cta } = window.GenAISchnitzlerDesignSystem_ce4f9c;

function PfadPanel({ number, title, price, priceNote, text, ctaLabel, ctaTarget = 'preise', onNavigate }) {
  return (
    <div style={{ borderTop: '1px solid var(--gold)', paddingTop: 22, display: 'grid', gap: 14, alignContent: 'start' }}>
      <div style={{ fontSize: 'var(--fs-reason-key)', fontWeight: 700, letterSpacing: 'var(--ls-reason-key)', textTransform: 'uppercase', color: 'var(--gold-d)' }}>{number}</div>
      <h4 style={{ margin: 0, fontSize: '1.3rem', fontWeight: 600, color: 'var(--ink)' }}>{title}</h4>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
        <span style={{ fontSize: '1.5rem', fontWeight: 600, color: 'var(--ink)', whiteSpace: 'nowrap' }}>{price}</span>
        <span style={{ fontSize: '.88rem', color: 'var(--muted)' }}>{priceNote}</span>
      </div>
      <p style={{ margin: 0, fontSize: '.96rem', lineHeight: 1.6, color: 'var(--text-body)' }}>{text}</p>
      <div><Cta href="#" onClickCapture={e => { if (onNavigate) { e.preventDefault(); onNavigate(ctaTarget); } }}>{ctaLabel}</Cta></div>
    </div>
  );
}

function Homepage({ onNavigate }) {
  return (
    <main style={{ fontFamily: 'var(--font)' }}>
      <HeroBand
        eyebrow="KI-Bildproduktion für Schweizer Marken"
        title={<span>Kampagnenbilder auf Studio-Niveau — <b>ohne Shooting.</b></span>}
        refLine="GENAI ABO · CAMPAIGNPILOT · FÜR MARKEN MIT EIGENEM SHOP ODER LADEN"
        media="https://campaignpilot-womens-fashion.genai-schnitzler.ch/media/M22__lifestyle__M22_D02_lakeside_hero.jpg"
        mediaCaption="KI-generiert aus einem realen Produktfoto — Lookbook «Ascona», live"
        lede="Starten Sie ohne Aufwand: Mit dem GenAI Abo produzieren und publizieren wir Ihre Kampagnen — fotorealistisch, markentreu, direkt in Ihre Kanäle. Und wenn Sie bereit sind, übernehmen Sie CampaignPilot: Produktfoto rein, publizierte Kampagne raus."
        stats={[
          { value: 'Stunden', label: 'statt Wochen' },
          { value: '~1/10', label: 'der Kosten eines Shootings' },
          { value: '100 %', label: 'markentreu, kein Stock-Look' },
          { value: 'CHF 590', label: 'Einstieg pro Monat' },
        ]}
      >
        <div style={{ marginTop: 32 }}>
          <Cta href="https://calendly.com/hubert-genai-schnitzler/15-min-beratung" onDark button>15 Minuten, live an Ihrem Produkt »</Cta>
        </div>
      </HeroBand>

      <IntroSection eyebrow="Der Weg" title={<span>Erst managed. Dann Ihre <b>eigene Produktion.</b></span>}>
        <p style={{ margin: 0 }}>GenAI Schnitzler macht Schweizer Marken unabhängig in der Bildproduktion — in zwei Schritten. Zum Start übernehmen wir alles: Produktion und Publishing, regelmässig in Ihre Kanäle, in Ihrer Bildsprache.</p>
        <p style={{ margin: 0 }}>Im Hintergrund trainiere ich dabei CampaignPilot — einen KI-Agenten — auf Ihre Marke. Nach ein paar Monaten können Sie ihn übernehmen und die Produktion selbst fahren. Gebrieft wird ausschliesslich in natürlicher Sprache: kein Prompting, kein Tool-Chaos. Strategie, Marke und Kontrolle bleiben bei Ihnen.</p>
      </IntroSection>

      <WhiteSection>
        <div style={{ display: 'grid', gap: 30 }}>
          <SectionHeading number="01" title="Vom Produktfoto zur Kampagne — live" />
          <ReasonBlock
            warum="Ob Fashion, Eyewear, Autogewerbe oder Immobilien: Produkte wirken am stärksten im richtigen Kontext — und der Beweis ist öffentlich. Jedes Lookbook unten ist eine echte, live gestellte Kampagne."
            zielgruppe="Schweizer Marken, Online-Shops und Händler, die wöchentlich starke Inhalte veröffentlichen wollen — ohne eigenes Studio, ohne Produktionsaufwand."
            technik="Aus einem realen Produktfoto entstehen 13 konsistente Motive plus Film — wiederkehrende Modelle, dieselbe Bildwelt über jede Serie, bei 100 % Zoom geprüft."
          />
          <Showcase onNavigate={onNavigate} />
        </div>
      </WhiteSection>

      <WhiteSection>
        <div style={{ display: 'grid', gap: 30 }}>
          <SectionHeading number="02" title="So produzieren Sie — heute und morgen" />
          <div style={{ maxWidth: 680, fontSize: '1.02rem', lineHeight: 1.65, color: 'var(--text-body)', display: 'grid', gap: 14 }}>
            <p style={{ margin: 0 }}>Heute: Sie stimmen mit uns Bildserien oder Videos ab — wir produzieren, liefern in jedem Format bis 4K — Bild und Video, schreiben die Captions für LinkedIn, Instagram und Facebook und publizieren zeitoptimiert in Ihre Kanäle. Auch der Sound ist KI-generiert: Soundtracks, exklusiv für Ihre Marke komponiert — lizenzfrei, ohne Stock-Musik.</p>
            <p style={{ margin: 0 }}>Morgen: Sie briefen CampaignPilot selbst, wie einen Creative Director, in normalen Worten. Der Agent übernimmt Produktion, Formate, Logoplatzierung, Qualitätskontrolle und Videoschnitt — als WebApp oder auf einem Ihrer Rechner.</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--gap-grid)' }}>
            <ImageGrid variant="g1" ratio="16 / 9" images={[
              { src: 'assets/placeholders/briefing-chat.png', caption: 'Briefing in normaler Sprache — kein Prompting' },
            ]} />
            <KaleosGrid />
          </div>
        </div>
      </WhiteSection>

      <WhiteSection>
        <div style={{ display: 'grid', gap: 36 }}>
          <SectionHeading number="03" title="Zwei Wege, ein System" />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 44 }}>
            <PfadPanel
              number="Zum Start"
              title="GenAI Abo light"
              price="CHF 590.–" priceNote="/ Monat"
              text="Produktion und Publishing übernehmen wir — Bildserien oder Videos in Ihrer Bildsprache, regelmässig in Ihre Kanäle. Ideal für laufenden Social-Content, kleine Kampagnen und regelmässige Produktkommunikation."
              ctaLabel="Zum GenAI Abo »" onNavigate={onNavigate}
            />
            <PfadPanel
              number="Später optional"
              title="CampaignPilot inhouse"
              price="CHF 9’900.–" priceNote="einmalig · danach Support und Updates nach Bedarf"
              text="Im Abo auf Ihre Marke trainiert, übernehmen Sie CampaignPilot und fahren die Produktion selbst — Produktfoto rein, publizierte Kampagne raus: produziert, QA-geprüft, terminiert und automatisch in Ihre Kanäle publiziert. Zum Vergleich: ein einziges klassisches Shooting kostet CHF 15–30’000."
              ctaLabel="Zu CampaignPilot »" ctaTarget="campaignpilot" onNavigate={onNavigate}
            />
          </div>
        </div>
      </WhiteSection>

      <WhiteSection tight>
        <div style={{ borderTop: '1px solid var(--line)', paddingTop: 32 }}>
          <div style={{ fontSize: 'var(--fs-eyebrow)', fontWeight: 600, letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--gold)', marginBottom: 24 }}>Kunden</div>
          <div style={{ display: 'flex', gap: 44, flexWrap: 'wrap', alignItems: 'baseline' }}>
            {['VIOBIT', 'CITYOPTIC', 'SOLIDMADE', 'FURBER.', 'GOODSON'].map(k => (
              <span key={k} style={{ fontSize: '.9rem', fontWeight: 600, letterSpacing: '.2em', color: 'var(--muted)' }}>{k}</span>
            ))}
          </div>
        </div>
      </WhiteSection>

      <CloseBand
        eyebrow="Ihr Start"
        title={<span>Starten Sie managed — und behalten Sie die Option, es später ganz <b>selbst zu machen.</b></span>}
        valueProps={[
          { title: 'Ohne Aufwand starten', text: 'GenAI Abo light ab CHF 590.– / Monat — wir produzieren und publizieren, Sie bleiben sichtbar.' },
          { title: 'Unabhängig werden', text: 'CampaignPilot, auf Ihre Marke trainiert, übernehmen Sie einmalig für CHF 9’900.–.' },
        ]}
        ctaLabel="15 Minuten, live an Ihrem Produkt »"
        ctaHref="https://calendly.com/hubert-genai-schnitzler/15-min-beratung"
      >
        <p style={{ margin: '36px 0 0', fontSize: '.94rem', color: 'var(--on-dark-2)' }}>
          Ich melde mich innerhalb von 24 Stunden. Direkt: hubert@genai-schnitzler.ch · +41 79 583 28 80
        </p>
        <ContactForm />
      </CloseBand>
    </main>
  );
}

Object.assign(window, { Homepage });