// ----- Beispiele-Gallery, Content-Angles, Features, Revision-DeepDive, MarketingTeam, Pricing -----

// ===== Beispiele-Gallery =====
//
// Sechs gerenderte Beispiele aus dem adaconda-Output, abgelegt in
// public/examples/. Drei Posts (statische <img>), drei Reels (autoplay-
// loop-muted <video> mit JPG als Poster).
//
// Reel-Playback: Browser zeigt den ``poster=`` solange das ``src=``-MP4
// noch nicht geladen ist oder fehlt. Sobald die MP4-Datei unter dem
// erwarteten Pfad liegt, übernimmt autoplay (muted+playsInline +
// preload=auto). Drei MP4-Files Peter braucht für vollen Reel-Playback:
//
//   examples/demo-reel-1.mp4
//   examples/demo-reel-3.mp4
//   examples/demo-reel-2.mp4

function OutputsGallery() {
  // Video-only: drei echte Reels. Bild-Posts sind bewusst raus — Video ist das Produkt.
  const tiles = [
    { kind: "reel", niche: "Elektriker",   caption: "E-Check am Verteiler",          image: "examples/demo-reel-1.jpg",  video: "examples/demo-reel-1.mp4" },
    { kind: "reel", niche: "Bäckerei",     caption: "Frisch aus dem Ofen",           image: "examples/demo-reel-3.jpg",   video: "examples/demo-reel-3.mp4" },
    { kind: "reel", niche: "Tischlerei",   caption: "Werkstatt-Atmosphäre",          image: "examples/demo-reel-2.jpg",  video: "examples/demo-reel-2.mp4" },
  ];

  return (
    <section className="section-pad" id="beispiele" style={{background:"var(--bg-2)"}}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Was rauskommt</span>
          <h2>Werbevideos, die nach euch aussehen.</h2>
          <p>Cinematische Reels mit deinen Markenfarben, deinem Logo und Title-Card — Caption in deiner Sprache, Hashtags fürs DACH-Publikum, ruhiger Schnitt oder mit Tempo, wenn's passt. Schöne KI-Videos, ohne dass du je etwas schneiden musst.</p>
        </div>
        {/* Drei echte Reel-Renderings → 2 Spalten auf Mobile, 3 Spalten ab Tablet. */}
        <div className="gallery" style={{gridTemplateColumns: "repeat(2, 1fr)"}}>
          <style>{`
            @media (min-width: 720px) { #beispiele .gallery { grid-template-columns: repeat(3, 1fr) !important; } }
          `}</style>
          {tiles.map((t, i) => (
            <div className="tile" key={i} style={{background: "#111"}}>
              {t.kind === "reel" ? (
                <video
                  className="tile-media"
                  src={t.video}
                  poster={t.image}
                  autoPlay
                  muted
                  loop
                  playsInline
                  preload="auto"
                />
              ) : (
                <img
                  className="tile-media"
                  src={t.image}
                  alt={t.caption}
                  loading="lazy"
                />
              )}
              <span className={`tile-badge ${t.kind === "reel" ? "reel" : ""}`}>
                {t.kind === "reel" ? "▶ Reel" : "Post"}
              </span>
              <div className="tile-overlay">
                <div className="caption">{t.caption}</div>
                <div className="niche">{t.niche}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Sale-Promo-Demo =====
//
// Sitzt direkt unter der Beispiele-Galerie und zeigt den „konkreter
// Wunsch wird respektiert"-Flow als zweite Chat-Demo. Der Hero-Chat
// macht den „keine Idee nötig"-Punkt; diese Sektion zeigt das andere
// Extrem: du hast eine Aktion mit harten Zahlen (30% Rabatt auf
// Wallboxen), adaconda baut das Reel mit genau diesen Zahlen — Richard
// plant das werbung-Reel mit Promo-Anchor, Anna lässt die Prozent
// durch den Claims-Scrub indem ``mandatory_facts`` in ``proof``
// gemergt werden.

function SalePromoDemo() {
  return (
    <section className="section-pad" id="sale-promo">
      <div className="container">
        <div className="hero-grid" style={{alignItems:"center"}}>
          <div>
            <span className="eyebrow">Konkreter Wunsch</span>
            <h2 className="display" style={{fontSize:"clamp(36px, 5vw, 56px)", margin:"16px 0 20px", letterSpacing:"-0.03em"}}>
              Hast du eine <span className="accent-mark">Aktion?</span><br/>
              Sag's mit Zahlen.
            </h2>
            <p className="hero-sub" style={{maxWidth: 520}}>
              30% auf Wallboxen, Tag der offenen Tür am Samstag, kostenloser
              E-Check im März — sag uns die Eckdaten in einem Satz auf
              WhatsApp, wir übernehmen deine Zahlen 1:1 in den Post. Caption,
              Hashtags und Posting-Empfehlung kommen direkt mit.
            </p>
            <ul style={{listStyle:"none", padding:0, margin:"24px 0 0", display:"flex", flexDirection:"column", gap:10}}>
              <li style={{display:"flex", alignItems:"center", gap:10, color:"var(--ink-2)", fontSize:15}}>
                <Icon.Check style={{width:18, height:18, color:"var(--accent)"}}/>
                Promo-Zahlen werden 1:1 übernommen
              </li>
              <li style={{display:"flex", alignItems:"center", gap:10, color:"var(--ink-2)", fontSize:15}}>
                <Icon.Check style={{width:18, height:18, color:"var(--accent)"}}/>
                CTA + Sticker passend zur Aktion
              </li>
              <li style={{display:"flex", alignItems:"center", gap:10, color:"var(--ink-2)", fontSize:15}}>
                <Icon.Check style={{width:18, height:18, color:"var(--accent)"}}/>
                Caption-Tonalität bleibt in deiner Sprache
              </li>
              <li style={{display:"flex", alignItems:"center", gap:10, color:"var(--ink-2)", fontSize:15}}>
                <Icon.Check style={{width:18, height:18, color:"var(--accent)"}}/>
                Text-Änderung danach gratis, falls du noch tunen willst
              </li>
            </ul>
          </div>
          <SalePromoChatDemo/>
        </div>
      </div>
    </section>
  );
}

// ===== Content-Angles =====
//
// Zeigt die 16 deterministischen Content-Angles, die Basti durchwürfelt, wenn
// der Kunde nur „Video" ohne Wunsch schickt. Spiegelt
// app/services/content_library.CONTENT_ANGLES wider (17. Eintrag „vorstellung"
// ist nur fürs Onboarding-Sample und wird hier nicht gelistet — würde Endkunden
// verwirren). Wenn du die Liste in content_library.py anpasst, halt diese
// Sektion im selben Commit aktuell.

function ContentAngles() {
  const groups = [
    {
      label: "Aktion & Saison",
      angles: [
        { name: "Werbung & Aktion",      sub: "Zeitlich begrenztes Angebot, neue Leistung, Jubiläum." },
        { name: "Saison",                sub: "Was diese Jahreszeit bei euch grade wichtig macht." },
      ],
    },
    {
      label: "Wissen vermitteln",
      angles: [
        { name: "Profi-Tipp",            sub: "Eine konkrete Empfehlung aus eurem Alltag." },
        { name: "Mythos vs Fakt",        sub: "Gängige Irrtümer aus eurem Fach richtigstellen." },
        { name: "Vergleich",             sub: "Zwei Materialien, Verfahren oder Leistungen gegenübergestellt." },
        { name: "Häufig gefragt (FAQ)",  sub: "Eine Frage, die ihr oft hört — beantwortet." },
        { name: "Lernpost",              sub: "Eine Mini-Lektion aus eurem Fachgebiet." },
        { name: "Material-Spotlight",    sub: "Was steckt im Werkstoff? Worauf kommt's an?" },
      ],
    },
    {
      label: "Vertrauen aufbauen",
      angles: [
        { name: "Projekt-Spotlight",     sub: "Ein fertiges Projekt zeigen — frisch fertig." },
        { name: "Behind the Scenes",     sub: "Werkstatt, Team, Arbeitsweise im Alltag." },
        { name: "So arbeiten wir",       sub: "Euer Ablauf in nachvollziehbaren Schritten." },
        { name: "Unser Team",            sub: "Wer steht hinter dem Betrieb." },
        { name: "Warum wir",             sub: "Was euch von der Konkurrenz unterscheidet." },
        { name: "Kennst du das?",        sub: "Pain Point ansprechen, den ihr lösen könnt." },
        { name: "Kundenstimme",          sub: "Was Kund:innen über euch sagen." },
        { name: "Unser Versprechen",     sub: "Was bei euch garantiert dabei ist." },
      ],
    },
  ];
  return (
    <section className="section-pad" id="angles">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Reel-Themen</span>
          <h2>16 Reel-Ideen, die wir für dich rotieren.</h2>
          <p>
            Keine Idee? Schick einfach <em>Video</em> ohne Wunsch — wir wählen aus diesen 16 Themen
            das nächste passende Reel aus. Mit Memory: was du in den letzten Wochen schon hattest, kommt
            erst wieder, wenn die anderen durch sind.
          </p>
        </div>
        {groups.map((g) => (
          <div key={g.label} style={{marginTop: 48}}>
            <div style={{marginBottom: 18, fontFamily:"var(--font-mono)", fontSize:12, fontWeight:500, letterSpacing:"0.06em", textTransform:"uppercase", color:"var(--ink)"}}>
              {g.label}
            </div>
            <div className="angles-grid">
              {g.angles.map((a) => (
                <div className="angle-card" key={a.name}>
                  <div className="angle-name">{a.name}</div>
                  <div className="angle-sub">{a.sub}</div>
                </div>
              ))}
            </div>
          </div>
        ))}
        <p style={{marginTop: 56, fontSize: 14, color: "var(--ink-3)", textAlign: "center"}}>
          Du willst was Bestimmtes? Schreib einfach <em>Video: dein Wunsch</em> — wir orientieren uns daran.
        </p>
      </div>
    </section>
  );
}

// ===== Features =====

function Features() {
  const items = [
    { icon: <Icon.Chat/>, title: "Ein Satz reicht", body: "„Post: Wallbox-Aktion 50%“ — und der Rest ist unser Job. Per Text oder Foto auf WhatsApp." },
    { icon: <Icon.Pen/>, title: "Caption in deinem Stil", body: "Wir bauen dein Markenprofil aus deiner Website auf \u2014 Sprache, Farben, Branche. Keine KI-Floskeln, deine Tonalit\u00e4t." },
    { icon: <Icon.Hashtag/>, title: "Hashtags die ziehen", body: "Lokal + Branche + Nische. Aktuell fürs DACH-Publikum, automatisch zur Caption passend." },
    { icon: <Icon.Calendar/>, title: "Posting-Empfehlung", body: "Zu jedem Asset bekommst du Format und Posting-Zeitpunkt mitgeliefert. Du postest, wenn's passt." },
    { icon: <Icon.Repeat/>, title: "Text \u00e4ndern \u2014 unbegrenzt.", body: "Hinweis nachschieben, anderen Wortlaut, Rabatt-Z\u00e4hler aktualisieren? Tipp einfach den neuen Text. Wir tauschen nur die Overlay-Schrift aus, das Video bleibt gleich \u2014 gratis und ohne Quota-Abzug." },
    { icon: <Icon.Shield/>, title: "Du behältst die Kontrolle", body: "Wir posten nichts automatisch. Du gibst jedes Asset frei und postest selbst. Daten in der EU, DSGVO-konform." },
  ];
  return (
    <section className="section-pad" id="features">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Was adaconda kann</span>
          <h2>Klein im Aufwand. Groß im Output.</h2>
          <p>Wir bauen alles, was du für dein Instagram brauchst — du musst nur kurz Bescheid geben.</p>
        </div>
        <div className="feature-grid">
          {items.map((f, i) => (
            <div className="feature" key={i}>
              <div className="feature-icon">{f.icon}</div>
              <h3>{f.title}</h3>
              <p>{f.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Text-Ändern Deep-Dive =====
//
// Eigene Sektion für DAS UX-Argument: „Text ändern" kostet weder Geld noch
// einen Quota-Slot. Spiegelt rerender_video_overlay_only in
// app/services/content_workflow.py wider — der Bot reused den raw-Kling-Clip
// aus dem R2-Cache und tauscht nur die FFmpeg/Hyperframes-Overlay-Layer.
// Drei Spalten links: was passiert technisch (warum gratis), die
// RevisionChatDemo rechts, eine Stats-Karte mit der harten Zahl.

function RevisionDeepDive() {
  return (
    <section className="section-pad" id="text-aendern">
      <div className="container">
        <div className="hero-grid" style={{alignItems:"center"}}>
          <div>
            <span className="eyebrow">Gratis Feature</span>
            <h2 className="display" style={{fontSize:"clamp(36px, 5vw, 56px)", margin:"16px 0 20px", letterSpacing:"-0.03em"}}>
              Text vergessen?<br/>
              <span className="accent-mark">Text ändern.</span> Unbegrenzt.
            </h2>
            <p className="hero-sub" style={{maxWidth: 520}}>
              Bei jedem fertigen Reel bekommst du den Button <em>Text ändern</em>. Tipp den neuen
              Wortlaut, das Video bleibt — wir komponieren nur den Overlay neu. Kein Quota-Abzug,
              keine 4-Minuten-Wartezeit, kein neuer KI-Render. So oft du willst.
            </p>
            <ul style={{listStyle:"none", padding:0, margin:"28px 0 0", display:"flex", flexDirection:"column", gap:14}}>
              <li style={{display:"flex", alignItems:"flex-start", gap:12, color:"var(--ink-2)", fontSize:15}}>
                <Icon.Check style={{width:18, height:18, color:"var(--accent)", flexShrink:0, marginTop:3}}/>
                <span><b>Video bleibt.</b> Wir cachen die rohen Aufnahmen und tauschen nur die Überschrift, den CTA-Text und die Schlüsselworte aus.</span>
              </li>
              <li style={{display:"flex", alignItems:"flex-start", gap:12, color:"var(--ink-2)", fontSize:15}}>
                <Icon.Check style={{width:18, height:18, color:"var(--accent)", flexShrink:0, marginTop:3}}/>
                <span><b>Kein Quota-Slot.</b> 20 Reels im Monat heißt 20 neue Reels — Text-Änderungen kommen oben drauf, gratis.</span>
              </li>
              <li style={{display:"flex", alignItems:"flex-start", gap:12, color:"var(--ink-2)", fontSize:15}}>
                <Icon.Check style={{width:18, height:18, color:"var(--accent)", flexShrink:0, marginTop:3}}/>
                <span><b>Sekundenschnell.</b> Statt 3-5 Min Neu-Render ist die neue Version in 5-15 Sekunden im Chat.</span>
              </li>
            </ul>
          </div>
          <RevisionChatDemo/>
        </div>
      </div>
    </section>
  );
}

// ===== So arbeitet adaconda (Benefit-Block) =====

function MarketingTeam() {
  // Benefit-orientierter "So arbeitet adaconda"-Block — bewusst OHNE
  // interne Agenten-Namen oder Modellnamen (Kunden interessiert der
  // Nutzen, nicht die Architektur). Reuse der feature-grid (responsiv).
  const items = [
    { icon: <Icon.Sparkle/>, title: "Versteht deine Marke",        body: "Liest deine Website, erkennt Branche, Tonalität und Markenfarben — und behält sie in jedem Reel bei." },
    { icon: <Icon.Video/>,   title: "Plant & dreht jedes Reel",    body: "Konzept, cinematische Szene, Texte im Bild und End-Card mit deinem Logo — fertig in Minuten." },
    { icon: <Icon.Pen/>,     title: "Schreibt Caption & Hashtags", body: "In deiner Sprache, mit Posting-Empfehlung — keine generischen Floskeln." },
    { icon: <Icon.Shield/>,  title: "Prüft auf Qualität",          body: "Klarer Fokus pro Reel, keine riskanten Versprechen — und alles erst auf deine Freigabe." },
  ];
  return (
    <section className="section-pad" id="so-arbeitet-adaconda">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow">So arbeitet adaconda</span>
          <h2>Ein ganzes Marketing-Team. Ohne Agentur-Preise.</h2>
          <p>Recherche, Konzept, Schnitt und Text laufen automatisch im Hintergrund — du gibst nur frei. Kein Tool zum Lernen, kein Fachchinesisch.</p>
        </div>
        <div className="feature-grid">
          {items.map((it) => (
            <div className="feature" key={it.title}>
              <div className="feature-icon">{it.icon}</div>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Pricing =====

function Pricing() {
  return (
    <section className="section-pad" id="pricing" style={{background:"var(--bg-2)"}}>
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow">Preise</span>
          <h2>Drei Tarife. Klare Sache.</h2>
          <p>Monatlich kündbar. Keine Setup-Kosten. Klare Tarife — kein Kleingedrucktes.</p>
        </div>
        <div className="price-grid">
          <div className="plan">
            <div>
              <div className="plan-name">Werkstatt</div>
              <div className="plan-tagline">Für den Solo-Betrieb, der regelmäßig Reels posten will.</div>
            </div>
            <div className="plan-price">
              <span className="plan-price-amount">89&nbsp;€</span>
              <span className="plan-price-unit">/ Monat</span>
            </div>
            <hr/>
            <ul className="plan-features">
              <li className="plan-feature"><Icon.Check/> 8 Kampagnen-Reels pro Monat</li>
              <li className="plan-feature"><Icon.Check/> Caption + Hashtags + Posting-Empfehlung</li>
              <li className="plan-feature"><Icon.Check/> Text-Änderung unbegrenzt &amp; gratis (Video bleibt)</li>
              <li className="plan-feature"><Icon.Check/> Lieferung in Minuten — KI generiert sofort</li>
              <li className="plan-feature"><Icon.Check/> Monatlich kündbar</li>
            </ul>
            <a href="https://buy.stripe.com/6oU4gy3Yg5wV9Fc2GF1kA00" className="btn btn-ghost btn-lg" rel="noopener">Werkstatt starten</a>
          </div>

          <div className="plan featured">
            <span className="plan-badge">Beliebt</span>
            <div>
              <div className="plan-name" style={{color:"var(--accent)"}}>Meister</div>
              <div className="plan-tagline">Für Betriebe, die richtig sichtbar werden wollen.</div>
            </div>
            <div className="plan-price">
              <span className="plan-price-amount">149&nbsp;€</span>
              <span className="plan-price-unit">/ Monat</span>
            </div>
            <hr/>
            <ul className="plan-features">
              <li className="plan-feature"><Icon.Check/> 20 Kampagnen-Reels pro Monat</li>
              <li className="plan-feature"><Icon.Check/> Caption + Hashtags + Posting-Empfehlung</li>
              <li className="plan-feature"><Icon.Check/> Text-Änderung unbegrenzt &amp; gratis (Video bleibt)</li>
              <li className="plan-feature"><Icon.Check/> Lieferung in Minuten — KI generiert sofort</li>
              <li className="plan-feature"><Icon.Check/> Monats-Themenplan auf Wunsch</li>
              <li className="plan-feature"><Icon.Check/> Monatlich kündbar</li>
            </ul>
            <a href="https://buy.stripe.com/7sY4gyeCU8J72cKepn1kA01" className="btn btn-accent btn-lg" rel="noopener">Meister starten</a>
          </div>

          <div className="plan">
            <div>
              <div className="plan-name">Individuell</div>
              <div className="plan-tagline">Für mehrere Standorte, höheres Volumen oder eigene Anforderungen.</div>
            </div>
            <div className="plan-price">
              <span className="plan-price-amount" style={{fontSize:32}}>auf Anfrage</span>
            </div>
            <hr/>
            <ul className="plan-features">
              <li className="plan-feature"><Icon.Check/> Volumen frei skalierbar — Reels nach Bedarf</li>
              <li className="plan-feature"><Icon.Check/> Mehrere Standorte / Marken pro Account</li>
              <li className="plan-feature"><Icon.Check/> Eigener Themenplan + Kampagnen-Begleitung</li>
              <li className="plan-feature"><Icon.Check/> Dedizierter Ansprechpartner</li>
              <li className="plan-feature"><Icon.Check/> SLA + AV-Vertrag nach Wunsch</li>
            </ul>
            <a href={window.waLink("Hi adaconda — ich brauche einen individuellen Tarif")} className="btn btn-ghost btn-lg">Individuell anfragen</a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.OutputsGallery = OutputsGallery;
window.SalePromoDemo = SalePromoDemo;
window.ContentAngles = ContentAngles;
window.Features = Features;
window.RevisionDeepDive = RevisionDeepDive;
window.MarketingTeam = MarketingTeam;
window.Pricing = Pricing;