// Preise und Pakete — new strategy: start managed (Abo light), later take over (CampaignPilot inhouse).
const { CloseBand, SectionHeading, Cta } = window.GenAISchnitzlerDesignSystem_ce4f9c;

function PaketPanel({ number, kicker, title, price, priceNote, lede, idealFuer, leistungTitel, leistung, closing, ctaLabel, ctaHref }) {
  return (
    <div style={{ display: 'grid', gap: 26 }}>
      <div>
        <div style={{ fontSize: 'var(--fs-reason-key)', fontWeight: 700, letterSpacing: 'var(--ls-reason-key)', textTransform: 'uppercase', color: 'var(--gold-d)', marginBottom: 10 }}>{kicker}</div>
        <SectionHeading number={number} title={title} />
      </div>
      <p style={{ margin: 0, maxWidth: 680, fontSize: '1.02rem', lineHeight: 1.65, color: 'var(--text-body)' }}>{lede}</p>
      <div style={{
        background: 'var(--panel)', borderLeft: 'var(--reason-border) solid var(--gold)',
        padding: '24px 28px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28,
      }}>
        <div>
          <div style={{ fontSize: 'var(--fs-reason-key)', fontWeight: 700, letterSpacing: 'var(--ls-reason-key)', textTransform: 'uppercase', color: 'var(--gold-d)', marginBottom: 8 }}>Ideal für</div>
          <p style={{ margin: 0, fontSize: '.94rem', lineHeight: 1.55, color: 'var(--text-reason)' }}>{idealFuer}</p>
        </div>
        <div>
          <div style={{ fontSize: 'var(--fs-reason-key)', fontWeight: 700, letterSpacing: 'var(--ls-reason-key)', textTransform: 'uppercase', color: 'var(--gold-d)', marginBottom: 8 }}>{leistungTitel || 'Enthalten'}</div>
          <ul style={{ margin: 0, paddingLeft: 18, fontSize: '.94rem', lineHeight: 1.6, color: 'var(--text-reason)' }}>
            {leistung.map((l, i) => <li key={i}>{l}</li>)}
          </ul>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, borderTop: '1px solid var(--line)', paddingTop: 20, flexWrap: 'wrap' }}>
        <span style={{ fontSize: '1.6rem', fontWeight: 600, color: 'var(--ink)', whiteSpace: 'nowrap' }}>{price}</span>
        <span style={{ fontSize: '.9rem', color: 'var(--muted)' }}>{priceNote}</span>
      </div>
      <p style={{ margin: 0, maxWidth: 680, fontSize: '.96rem', fontWeight: 300, lineHeight: 1.6, color: 'var(--muted)' }}>{closing}</p>
      {ctaLabel && <div><Cta href={ctaHref || 'https://calendly.com/hubert-genai-schnitzler/15-min-beratung'} button>{ctaLabel}</Cta></div>}
    </div>
  );
}

function Preise() {
  return (
    <main style={{ fontFamily: 'var(--font)' }}>
      <IntroSection eyebrow="Preise und Pakete" title={<span>Starten Sie managed. Übernehmen Sie, <b>wenn Sie bereit sind.</b></span>}>
        <p style={{ margin: 0 }}>Ein Weg, zwei Schritte: Zum Start produzieren und publizieren wir für Sie — im GenAI Abo light. Im Hintergrund trainiere ich CampaignPilot auf Ihre Marke. Später übernehmen Sie ihn optional und fahren die Produktion selbst. So starten Sie ohne Aufwand und behalten die Option, unabhängig zu werden.</p>
        <p style={{ margin: 0 }}>Zur Einordnung: Ein einziges klassisches Kampagnen-Shooting kostet CHF 15–30’000 — pro Kampagne, mit Wochen Vorlauf.</p>
      </IntroSection>

      <WhiteSection>
        <PaketPanel
          kicker="Zum Start"
          number="01"
          title="GenAI Abo light"
          lede="Für Marken, die regelmässig starke Inhalte veröffentlichen wollen — ohne eigenes Studio, ohne Produktionsaufwand. Produktion und Publishing übernehmen wir. Der Einstieg ins System: kein Setup, keine Mindestlaufzeit-Hürde, kündbar nach Absprache."
          idealFuer="Laufenden Social-Content, kleine Kampagnen und regelmässige Produktkommunikation."
          leistung={[
            'Bildserien oder Videos nach Absprache, in Ihrer Bildsprache — fotorealistisch, kein Stock-Look',
            'Wiederkehrende Modelle und eine konsistente Bildwelt über jede Serie',
            'Ausspielung in jedes Format, bis 4K — Bild und Video',
            'Captions für LinkedIn, Instagram und Facebook',
            'Zeitoptimiertes Publishing in Ihre Kanäle nach Absprache',
          ]}
          price="CHF 590.–"
          priceNote="/ Monat"
          closing="Ideal, wenn Sie konstant sichtbar bleiben und wöchentlich mehrere starke Inhalte veröffentlichen möchten."
          ctaLabel="Jetzt mit dem Abo starten »"
        />
      </WhiteSection>

      <WhiteSection>
        <PaketPanel
          kicker="Später optional"
          number="02"
          title="CampaignPilot inhouse"
          lede="Im Rahmen des Abos trainiere ich CampaignPilot — einen KI-Agenten — auf Ihre Marke. Nach ein paar Monaten übernehmen Sie ihn und fahren die Produktion selbst. Gebrieft wird ausschliesslich in natürlicher Sprache — kein node-basierter Workflow, kein Prompting. Die Übernahme setzt die Abo-Phase voraus: erst durch sie ist der Agent auf Ihre Bildwelt, Modelle und Tonalität trainiert."
          idealFuer="Marken, die die Bildproduktion dauerhaft ins Haus holen wollen — mit voller Kontrolle über Strategie, Marke und Output."
          leistungTitel="So läuft es"
          leistung={[
            'Training auf Ihre Marke während der Abo-Phase — Bildwelt, Modelle, Tonalität',
            'Briefing wie an einen Creative Director, in normalen Worten',
            'Läuft als WebApp oder als Agent auf einem Ihrer Rechner',
            'Danach Support und Updates nach Bedarf',
          ]}
          price="CHF 9’900.–"
          priceNote="einmalig · danach Support und Updates nach Bedarf"
          closing="So starten Sie ohne Aufwand managed — und behalten die Option, es später ganz selbst zu machen."
          ctaLabel="CampaignPilot live sehen »"
        />
      </WhiteSection>

      <CloseBand
        eyebrow="Nächster Schritt"
        title={<span>Unsicher, welcher Weg <b>passt?</b></span>}
        ctaLabel="15 Minuten, live an Ihrem Produkt »"
        ctaHref="https://calendly.com/hubert-genai-schnitzler/15-min-beratung"
      >
        <ContactForm />
      </CloseBand>
    </main>
  );
}

Object.assign(window, { Preise });