// CampaignPilot — product page, rewritten from uploads/CampaignPilot-website-spec.md (Sie-form).
const { CloseBand, SectionHeading, ReasonBlock, StatBar, Cta } = window.GenAISchnitzlerDesignSystem_ce4f9c;

function SpecRow({ k, v }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 24, padding: '14px 0', borderTop: '1px solid var(--line)' }}>
      <div style={{ fontSize: 'var(--fs-reason-key)', fontWeight: 700, letterSpacing: 'var(--ls-reason-key)', textTransform: 'uppercase', color: 'var(--gold-d)', paddingTop: 3 }}>{k}</div>
      <div style={{ fontSize: '.98rem', lineHeight: 1.6, color: 'var(--text-body)' }}>{v}</div>
    </div>
  );
}

const cpProblems = [
  ['Kosten', 'Studio, Models, Location-Scout, Reisen, Muster, Retusche — fünfstellig, bevor ein einziger Post live ist.'],
  ['Tempo', 'Wochen vom Briefing zu den Assets. Die Saison ist schneller als das Shooting.'],
  ['Konsistenz', 'Dasselbe Produkt über viele Szenen, Models und Orte gleich aussehen zu lassen ist ein ständiger Kampf.'],
  ['Produkttreue', 'Generische KI-Tools erfinden Details — ein falsches Scharnier, eine falsche Farbe, ein halluziniertes Logo: ein Dealbreaker.'],
  ['Skalierung', 'Eine ganze Kollektion, jede Saison neu, über jeden Kanal — daran ersticken Inhouse-Teams und Agenturen.'],
  ['Reichweite', 'Ihr Produkt am Matterhorn, an der Amalfiküste und auf einem Pariser Dach? Drei Reisen, die nie stattfinden.'],
];

const cpQa = [
  'Frame-Fidelity-Check — Form, Farbe, Material, Signatur-Details und Proportion gegen das reale Produkt geprüft. Falsche oder erfundene Details werden abgelehnt, nicht geliefert.',
  'Keine Halluzination — das Produkt wird nie per Text „herbeibeschrieben"; die realen Referenzen tragen es zu 100 %. Darum driftet nichts in „fast, aber nicht Ihr Produkt".',
  'Keine erfundene Hardware, keine Fremdfarbe — warmes Acetat wird nie zu falschem „Gold", kein Logo, das nicht auf dem echten Produkt ist.',
  'Kein Retail-Clutter — Aufkleber, Etiketten und Preisschilder werden entfernt.',
  'Korrekter Sitz — das Produkt sitzt in echter Grösse am Gesicht oder Körper, nie geschrumpft oder vergrössert.',
  'Reject-→-Refire-Loop — was den Check nicht besteht, wird neu generiert, bis es passt. Sie geben frei, bevor etwas final ist.',
];

function CampaignPilot({ onNavigate }) {
  return (
    <main style={{ fontFamily: 'var(--font)' }}>
      <IntroSection eyebrow="CampaignPilot" title={<span>Eine komplette Kampagne — aus <b>einem realen Produktfoto.</b></span>}>
        <p style={{ margin: 0 }}>In Stunden statt Wochen, zu einem Bruchteil der Studiokosten — und das Produkt sieht exakt aus wie das Produkt. Sie geben uns ein reales Produktfoto. Sie bekommen eine komplette, markentreue Kampagne — Studio-Heroes, Lifestyle, Makro, Panels, Bewegtbild und ein Live-Lookbook — und CampaignPilot <b>publiziert sie direkt in Ihre Kanäle</b>. Produktfoto rein, publizierte Kampagne raus.</p>
      </IntroSection>

      <WhiteSection>
        <div style={{ display: 'grid', gap: 30 }}>
          <SectionHeading number="01" title="Das Problem, das wir lösen" />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '26px 40px' }}>
            {cpProblems.map(([t, x], i) => (
              <div key={i} style={{ borderTop: '1px solid var(--gold)', paddingTop: 12 }}>
                <div style={{ fontSize: '.98rem', fontWeight: 600, color: 'var(--ink)' }}>{t}</div>
                <p style={{ margin: '6px 0 0', fontSize: '.92rem', lineHeight: 1.55, color: 'var(--text-body)' }}>{x}</p>
              </div>
            ))}
          </div>
          <p style={{ margin: 0, maxWidth: 680, fontSize: '1.02rem', fontWeight: 300, lineHeight: 1.6, color: 'var(--ink)' }}>CampaignPilot löst alle sechs — ohne dass Sie die Kontrolle darüber abgeben, wie Ihr Produkt aussieht.</p>
        </div>
      </WhiteSection>

      <WhiteSection>
        <div style={{ display: 'grid', gap: 30 }}>
          <SectionHeading number="02" title="Was CampaignPilot macht" />
          <div style={{ maxWidth: 760 }}>
            <SpecRow k="Produkt-Intelligenz" v="Bevor irgendetwas generiert wird, entsteht aus Ihren realen Fotos eine bildgestützte Produkt-Spezifikation: exakte Form, gesampelte Farben, Materialien, Signatur-Details, korrekte Proportionen. Nichts wird geraten — diese Spezifikation ist der Vertrag, an dem jedes Asset gemessen wird." />
            <SpecRow k="Produkttreue Generierung" v="Ihre realen Referenzen tragen jedes Bild — das Produkt wird pixeltreu mitgeführt, nicht neu erfunden: Studio-Heroes und Packshots, Still-Life und Flat-Lay, Lifestyle mit echten Personas in Stadt, Küste und Resort, Makro-Details, Paare und Gruppen, Panels (Triptychon, Diptychon, Carousel) in nativen Social-Formaten, dazu Bewegtbild für Reels, Stories und Feed." />
            <SpecRow k="Jede Szene, jede Stadt" v="Zermatt gegen die Riviera oder einen Pariser Balkon tauschen — ohne Flugticket, Bewilligung oder Wetterrisiko. Das Produkt bleibt über jede Location identisch." />
            <SpecRow k="Lookbooks, automatisch live" v="Ein eigenständiges Web-Lookbook in Ihren Markenfarben — Hero, nummerierte Sektionen, die Begründung hinter jedem Bild, Offline-QR — automatisch gebaut und live auf Ihrer eigenen Subdomain publiziert. Sie geben einem Einkäufer einen Link, kein PDF." />
            <SpecRow k="Vom Einzelstück zur Kollektion" v="Dieselbe Engine skaliert vom einzelnen Produktfoto bis zum ganzen Sortiment — ein kohärenter Look über die gesamte Linie." />
            <SpecRow k="Publiziert, nicht nur produziert" v="CampaignPilot schliesst die letzte Meile automatisch: Freigegebene Assets werden terminiert und direkt in Instagram, Facebook und LinkedIn publiziert, das Lookbook geht live. Keine Export-Queue, kein manuelles Scheduling, keine Übergabelücke." />
          </div>
        </div>
      </WhiteSection>

      <WhiteSection>
        <div style={{ display: 'grid', gap: 30 }}>
          <SectionHeading number="03" title="Qualität ist ein Gate, keine Hoffnung" />
          <p style={{ margin: 0, maxWidth: 680, fontSize: '1.02rem', lineHeight: 1.65, color: 'var(--text-body)' }}>Jedes Asset durchläuft eine strukturierte Qualitätsprüfung, bevor es geliefert wird:</p>
          <div style={{ background: 'var(--panel)', borderLeft: 'var(--reason-border) solid var(--gold)', padding: '24px 28px', display: 'grid', gap: 14 }}>
            {cpQa.map((q, i) => (
              <p key={i} style={{ margin: 0, fontSize: '.94rem', lineHeight: 1.55, color: 'var(--text-reason)' }}>{q}</p>
            ))}
          </div>
          <p style={{ margin: 0, maxWidth: 680, fontSize: '1.02rem', fontWeight: 300, lineHeight: 1.6, color: 'var(--ink)' }}>Das Resultat: Kampagnenbilder, die Sie mit demselben Vertrauen auf die Produktseite und auf ein Plakat bringen.</p>
        </div>
      </WhiteSection>

      <WhiteSection>
        <div style={{ display: 'grid', gap: 30 }}>
          <SectionHeading number="04" title="Was von selbst läuft" />
          <div style={{ maxWidth: 760 }}>
            <SpecRow k="Ein lebendes Regelwerk" v="Jede Marken- und Handwerksregel — Produkttreue, Sitz, Bildaufbau, «das Produkt ist der Held», Panel-Komposition — wird bei jedem Lauf automatisch durchgesetzt. Einmal richtig definiert, gilt sie für immer." />
            <SpecRow k="Konsistente Struktur" v="Assets werden nach fester Konvention benannt und abgelegt — Stills, Panels, Bewegtbild und Lookbooks je an ihrem Platz. Eine Kampagne ist organisiert, sobald sie gebaut ist." />
            <SpecRow k="Kostentransparenz" v="Jede einzelne Generierung wird in ein revisionssicheres Kosten-Journal geschrieben — die exakten Produktionskosten pro Asset, Zeile für Zeile vergleichbar mit klassischer Produktion." />
            <SpecRow k="Auto-Publishing" v="Freigegebene Assets werden automatisch terminiert und in Ihre Social-Kanäle publiziert; Lookbooks gehen automatisch live — die letzte Meile, die sonst eine Marketing-Woche frisst, läuft von selbst." />
            <SpecRow k="Human-in-the-Loop" v="Die Automation macht die schwere Arbeit — das letzte Wort haben Sie. Nichts wird ohne Ihre Freigabe publiziert." />
          </div>
        </div>
      </WhiteSection>

      <WhiteSection>
        <div style={{ display: 'grid', gap: 30 }}>
          <SectionHeading number="05" title="Die Zahlen" />
          <div style={{ maxWidth: 860 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr 1fr', gap: 24, padding: '10px 0', borderTop: '1px solid var(--ink)' }}>
              <div></div>
              <div style={{ fontSize: 'var(--fs-reason-key)', fontWeight: 700, letterSpacing: 'var(--ls-reason-key)', textTransform: 'uppercase', color: 'var(--muted)' }}>Klassische Produktion</div>
              <div style={{ fontSize: 'var(--fs-reason-key)', fontWeight: 700, letterSpacing: 'var(--ls-reason-key)', textTransform: 'uppercase', color: 'var(--gold-d)' }}>CampaignPilot</div>
            </div>
            {[
              ['Zeit', 'Wochen', 'Stunden'],
              ['Kosten', 'Fünfstellig pro Shooting', 'Ein Bruchteil — kein Studio, keine Crew, keine Reisen'],
              ['Aus einem Produkt', 'Ein Shooting, ein Look', 'Eine komplette Multi-Szenen-Kampagne'],
              ['Locations', 'Wohin Sie reisen können', 'Überall — ohne Reise, Bewilligung, Wetter'],
              ['Produkttreue', 'Abhängig vom Shooting', 'An das reale Produkt gebunden, QA-geprüft'],
              ['Skalierung', 'Linear mit dem Budget', 'Eine Engine, die ganze Kollektion'],
              ['Go-live', 'Manueller Export, Upload, Scheduling', 'Auto-publiziert, terminiert, Lookbook live'],
            ].map(([k, a, b], i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '180px 1fr 1fr', gap: 24, padding: '12px 0', borderTop: '1px solid var(--line)' }}>
                <div style={{ fontSize: '.92rem', fontWeight: 600, color: 'var(--ink)' }}>{k}</div>
                <div style={{ fontSize: '.94rem', lineHeight: 1.5, color: 'var(--muted)' }}>{a}</div>
                <div style={{ fontSize: '.94rem', lineHeight: 1.5, color: 'var(--text-body)' }}>{b}</div>
              </div>
            ))}
          </div>
        </div>
      </WhiteSection>

      <WhiteSection>
        <div style={{ display: 'grid', gap: 30 }}>
          <SectionHeading number="06" title="Bewährt am realen Produkt" />
          <p style={{ margin: 0, maxWidth: 680, fontSize: '1.02rem', lineHeight: 1.65, color: 'var(--text-body)' }}>CampaignPilot wurde an echter Eyewear gebaut und gehärtet — unabhängige Optiker-Sortimente, wo jede Fassung eigenständig ist und jedes Detail zählt. Wenn es für Eyewear hält — den härtesten Treue-Fall überhaupt — hält es für Ihr Produkt.</p>
          <div style={{ display: 'grid', gap: 12 }}>
            <Cta href="https://campaignpilot-eyewear.genai-schnitzler.ch/">Sonnenbrillen · Kaleos «Porter» — 13 Motive + Film »</Cta>
            <Cta href="https://campaignpilot-womens-fashion.genai-schnitzler.ch/">Damenmode · Sommerkleid «Ascona» »</Cta>
            <Cta href="https://campaignpilot-mens-fashion.genai-schnitzler.ch/">Herrenmode · Hemd «Lugano» »</Cta>
          </div>
        </div>
      </WhiteSection>

      <WhiteSection>
        <div style={{ display: 'grid', gap: 30 }}>
          <SectionHeading number="07" title="So kommen Sie zu CampaignPilot" />
          <div style={{ maxWidth: 760 }}>
            <SpecRow k="Zum Start" v={<span>Im <b>GenAI Abo light</b> (CHF 590.– / Monat) produzieren und publizieren wir für Sie — und trainieren CampaignPilot dabei auf Ihre Marke: Bildwelt, Modelle, Tonalität.</span>} />
            <SpecRow k="Übernahme" v={<span>Nach ein paar Monaten übernehmen Sie den trainierten Agenten — <b>einmalig CHF 9'900.–</b>, danach Support und Updates nach Bedarf.</span>} />
            <SpecRow k="Betrieb" v="Läuft als WebApp oder als Agent auf einem Ihrer Rechner. Gebrieft wird ausschliesslich in natürlicher Sprache. Strategie, Marke und Kontrolle bleiben bei Ihnen." />
          </div>
          <div onClick={e => { e.preventDefault(); onNavigate && onNavigate('preise'); }}><Cta href="#preise">Zu den Preisen »</Cta></div>
        </div>
      </WhiteSection>

      <CloseBand
        eyebrow="In einem Satz"
        title={<span>Das Produkt gehört Ihnen. Wir machen aus einem Foto eine Saison Kampagne — produziert und <b>publiziert.</b></span>}
        ctaLabel="Senden Sie uns ein Foto — wir zeigen Ihnen den Rest »"
        ctaHref="https://calendly.com/hubert-genai-schnitzler/15-min-beratung"
      >
        <ContactForm />
      </CloseBand>
    </main>
  );
}

Object.assign(window, { CampaignPilot });