import React, { useState } from 'react';
import { trackEvent } from '../../utils/tracking.js';

const visualTemplates = [
  {
    title: 'BEWERTEMICH Intent Route Matrix',
    intent: 'Heatmap-Ansicht für starke Suchintentionen mit klarer Upload-Route.',
    copy: 'Optimiert für Hero- und Ad-Varianten, die Besucher direkt von Longtail-Intent zu Upload führen.',
    status: 'Neu via gpt-image-template-agent',
    source: 'local:bewertemich-intent-route-matrix',
    language: 'Deutsch',
    aspect: '16:9',
    prompt:
      'Create a high-conversion landing hero for bewertemich.de focused auf SEO-Intent-Routen.\n\nScene: 16:9 hero mockup, neutral SaaS aesthetic, mobile+desktop split composition.\nLayout:\n- Top ribbon with trust chips: "A/B-Vergleich", "Invite-first", "DSGVO-freundlich".\n- Left: bold headline "Suchintention gefunden, direkt testen".\n- Left-bottom: three compact cards for intents "profilbild-bewerten", "bewerbungsfoto-bewerten", "linkedin-profilbild-optimieren".\n- Right: 3-step funnel ladder with labels "Upload", "Einladen", "Stimmen" and conversion percentages.\n- Middle strip: mini trend sparkline (mock values: 120, 145, 160, 190, 215, 233) and three tiny bar chips.\n- Bottom-right: CTA buttons "Jetzt Profilbild testen" and "Landingpage öffnen".\n- Keep it clean, data-forwarded, no photos of people, no purple gradient, no logos.'
  },
  {
    title: 'BEWERTEMICH Intent Traffic Heatmap',
    intent: 'Präzise Route-Sicht auf Intentionen, Klickraten und nächsten Schritt im Upload-Funnel.',
    copy: 'Neuester Hero-Prompt für direkte Besucherlenkung von der Suche in klare Conversion-Stufen.',
    status: 'Neu via gpt-image-template-agent',
    source: 'local:bewertemich-intent-traffic-heatmap',
    language: 'Deutsch',
    aspect: '16:9',
    prompt:
      'Create a conversion-optimized homepage hero for bewertemich.de in 16:9 ratio, neutral SaaS look, with explicit click-path focus from intent to upload.\nScene concept:\n- Top hero line: "Suchintention erkannt. Nächster Schritt klar."\n- Center-left: three large intent cards for "profilbild-bewerten", "bewerbungsfoto-bewerten", "linkedin-profilbild-optimieren" each with trust chips: CTR, Mobile, Stimmenpotenzial.\n- Center-right: interactive-looking funnel lane with stages: Query → Upload → Invite → Stimmen → Ergebnis.\n- Add a live-style metrics strip:\n  - Besucher heute, Invite-Klicks, Stimmen in 24h, Conversion\n  - numbers should look realistic and upward-trending.\n- Bottom: two strong CTA chips: "Jetzt Profilbild testen" and "Landingpage öffnen".\n- Right rail: 3 tiny comparison tiles with slugs and a winner highlight.\n- Visual style: clean editorial data graphics, rounded cards, thin lines, no people, no stock photos, no logos, no purple palette, warm blue + deep slate + emerald accents.\n- Make text fully readable in 16:9 and mobile crop.'
  },
  {
    title: 'BEWERTEMICH Social Proof Matrix',
    intent: 'Social-Proof-Funnel mit Zahlen, Vergleichsspalten und Mini-Charts für SEO-Kanäle.',
    copy: 'Marktnahe Darstellung von Stimmenvolumen und Conversion im 16:9-Format.',
    status: 'Local Template',
    source: 'local:bewertemich-seo-social-proof-matrix',
    language: 'Deutsch',
    aspect: '16:9',
    prompt:
`Create a premium social-proof marketing visual for a German profile feedback platform. Scene: 16:9 web hero, split-screen layout, left panel for headline and trust badges, right panel for data matrix and small mini-charts.

Composition:
- Header row with brand chip and subtitle: "Bewerten. Entscheiden. Konvertieren."
- Two large metric cards: "Neue aktive Stimmen" and "Durchschnittliche Conversion" with clear number blocks.
- Middle area with 3 comparison tiles labeled for SEO slugs: "profilbild-fuer-linkedin", "bewerbungsfoto-bewerten", "facebook-profilbild-testen".
- Include a compact row of 4 proof chips: "5 Stimmen Minimum", "A/B-Vergleich", "Invite-First", "Datenschutz".
- Right side: horizontal conversion funnel with three states: Uploads, Einladungen, Upload-Abschluss.
- Lower right: miniature sparkline and stacked bars showing upload vs related clicks over 7 days.
- Add clear CTA button: "Jetzt Profilbild testen".`,
  },
  {
    title: 'Bewertemich SEO Kampagnenvisual',
    intent: 'Kampagnenhero mit Live-Funnel und intent-basierten Landing-Tiles.',
    copy: 'Konvertiert organischen Traffic über klare Stufen in Upload + Invite + Stimme.',
    status: 'Local Template',
    source: 'local:bewertemich-seo-kampagnenvisual',
    language: 'Deutsch',
    aspect: '16:9',
    prompt:
`Create a bold social-proof marketing hero for a German image-feedback platform named bewertemich.de.
Scene: desktop web campaign graphic, 16:9 ratio, non-photo, vector+3D UI styling.
Layout:
- Top bar with small brand mark and menu labels: „So funktioniert es“, „Vorlagen“, „Erfolgsgrafiken“, „Jetzt testen“.
- Main headline block on the left with text: "Echtes Foto-Feedback in Minuten" and subcopy: "Verwandeln Sie Besucher in aktive Rater – mit klarer Upload-Funnel-Logik, Invite-First und aussagekräftigem Ranking.".
- Right side shows an isometric growth funnel in UI cards with three stages: Upload, Invite, Vote.
- Add a sticky metric strip with three cards: "Neue Uploads", "Aktive Stimmen", "SEO-Landing-Views" and large percentages.`,
  },
  {
    title: 'SEO Growth Dashboard Visual',
    intent: 'Analytische Übersichts-Karte für Besucherquellen, Klicks und Conversion-Rate.',
    copy: 'Perfekt für Fortschrittskommunikation im Bereich SEO-Growth, ideal für den Admin- oder About-Bereich.',
    status: 'Local Template',
    source: 'local:seo-growth-dashboard-visual',
    language: 'Deutsch',
    aspect: '16:9',
    prompt:
`Create a bold dark analytics dashboard hero panel for German SEO growth monitoring, featuring a conversion funnel card set and landing-page performance bars.
Scene composition includes:
- Header with title: "SEO-Wachstums-Dashboard"
- Three metric cards: Besuchs-View, Upload-Klicks, Related-Klicks with large numbers
- Horizontal bar chart showing top 6 landing-seiten by Klick-Rate
- A growth sparkline line in the bottom right
- CTA badge: "Heute +18%".
- Overall feel: trustworthy, conversion-focused, campaign-control ready.`,
  },
  {
    title: 'Bewertemich Traffic Hub Hero',
    intent: 'Neue Traffic-Zielseiten-Routen mit klarer CTA und KPI-Strip auf der Startseite.',
    copy: 'Hero-Visual, das Suchabsicht, Schrittfolge und Chart-Layer in einem Layout bündelt.',
    status: 'Neu via gpt-image-template-agent',
    source: 'local:bewertemich-traffic-hub-hero',
    language: 'Deutsch/English',
    aspect: '16:9',
    prompt:
`Create a high-conversion 16:9 hero visual for a German web platform named bewertemich.de.
Scene: modern SaaS-style landing hero with data-forwarded storytelling.
- Left block: badge row with labels "Bewerten. Entscheiden. Konvertieren." and 3 compact trust chips: "Invite-first", "A/B-Vergleich", "Datenschutz".
- Center headline: "Mehr echte Stimmen – mehr Uploads – mehr Entscheidungen in Minuten".
- Bottom: stacked mini charts (sparkline + bars) and CTA button "Jetzt Profilbild testen".`,
  },
  {
    title: 'Bewertemich Audience Intent Path',
    intent: 'Intent-Cluster (Karriere, Dating, Bewerbung) mit klarem Übergang in die Funnel-Logik.',
    copy: 'Für Hero- und Ads-Varianten, die je nach Suchintention differenzieren.',
    status: 'Neu via gpt-image-template-agent',
    source: 'local:bewertemich-audience-intent-path',
    language: 'Deutsch',
    aspect: '16:9',
    prompt:
`Create a conversion-first SaaS marketing visual for a German profile-feedback platform.
Format: 16:9 website hero mockup.
- Left top: brand chip "BEWERTEMICH.DE" and headline row: "Dein Foto, deine Nische, dein Vorteil".
- Center headline: "Wer sucht, klickt, lädt hoch – und entscheidet sofort.".
- Three audience tabs for Karriere, Dating, Bewerbungsbild-Update with CTR chips.
- Right section: 3-step funnel strip Upload · Invite-Link · Stimme.`,
  },
  {
    title: 'Bewertemich Social Proof Loop',
    intent: 'Mobile-konforme Storyline mit DSGVO-Signal und zwei starken CTAs.',
    copy: 'Social-Post/Ad-Format für Retargeting auf mobilen Kanälen mit direktem Upload-Flow.',
    status: 'Neu via gpt-image-template-agent',
    source: 'local:bewertemich-social-proof-loop',
    language: 'Deutsch',
    aspect: '9:16',
    prompt:
`Design a mobile-first social proof visual for a German landing page in the style of a high-converting ad.
Canvas: 1080x1920.
- Top badge: "Echte Stimmen, echte Entscheidungen".
- A 3-step path in compact cards: "Foto hochladen" → "Invite teilen" → "Stimmen sammeln".
- Trust indicators: "DSGVO-konform", "Keine Registrierung nötig".
- CTA area with buttons: "Jetzt testen" and "Landingpage öffnen".`,
  },
  {
    title: 'Bewertemich Conversion Funnel Hero',
    intent: 'Von Suchintention zum Upload, inklusive KPI-Strip und Trust-Elementen.',
    copy: 'Neue Hero-Idee für starke Besucherlenkung auf „Ich will jetzt testen“.',
    status: 'Neu via gpt-image-template-agent',
    source: 'local:bewertemich-conversion-funnel-hero',
    language: 'Deutsch',
    aspect: '16:9',
    prompt:
`Create a 16:9 mobile-and-desktop friendly hero concept for a German profile photo feedback platform.
Style: high-conversion SaaS landing hero, clean vector + glassmorphism, no people, no photo-realistic faces.
Layout:
- Top-left: brand pill "bewertemich.de" and small nav hints with 3 items.
- Main headline block: "Suchintention → Upload → Einladung → Stimme" in bold.
- Under headline: three horizontal progression cards for intent examples, quick upload and 5-voices threshold.
- Right side: compact dashboard mock with three KPI cards (Visibility, Invite-Clicks, Conversion).
- Add trust strip: "Keine Registrierung nötig", "DSGVO-freundlich", "A/B Vergleiche im Standard".
- Final CTA area with chips: "Jetzt testen" and "Landingpage öffnen".`,
  },
  {
    title: 'Bewertemich FAQ Conversion Card',
    intent: 'Einwandauflösung durch mobile Conversion-Karten mit mini FAQs und CTA.',
    copy: 'Mobile Karte, die häufige Fragen direkt im Werbe-Funnel beantwortet.',
    status: 'Neu via gpt-image-template-agent',
    source: 'local:bewertemich-faq-conversion-card',
    language: 'Deutsch',
    aspect: '9:16',
    prompt:
`Create a mobile-first card deck in 1080x1920 for a German image feedback funnel.
Style: editorial marketing graphic with rounded cards and strong typography.
Composition:
- Top strip with badge: "Bewertung in 3 Schritten" and subtitle "Ohne langes Warten".
- Center card "Problem erkennen" with short copy about ungeklärte Profilbild-Wahl.
- Center card "Lösung testen" with upload path and Invite-first iconography.
- Center card "Entscheiden" with comparison meter and A/B badge.
- Side rail with social proof chips: "12.000+ Stimmen", "5 Stimmen Mindestgrenze", "A/B-Standard".
- Bottom section with mini FAQ snippets.
- Include two CTA buttons near bottom: "Jetzt Upload starten" and "Landingseite öffnen".`,
  },
  {
    title: 'Bewertemich Visitor Ticker Hero',
    intent: 'Live-Metriken, Routen und Trust-Infos für eine direkte Besucherlenkung.',
    copy: 'Ein Hero im 16:9-Format mit KPI-Ticker, Intentionstrack und klarer CTA-Kaskade.',
    status: 'Neu via gpt-image-template-agent',
    source: 'local:bewertemich-visitor-ticker-hero',
    language: 'Deutsch',
    aspect: '16:9',
    prompt:
      'Create a German conversion-first landing hero visual for bewertemich.de in 16:9 ratio.\\n' +
      'Scene style: clean UI dashboard + editorial poster, no photos of people.\\n' +
      'Layout:\\n' +
      '- Top row: brand chip "BEWERTEMICH.DE" and a trust ribbon: "Keine Registrierung nötig • DSGVO-freundlich • 5 Stimmen Mindestgrenze".\\n' +
      '- Middle left: clear one-line hero: "In 90 Sekunden von Suchbegriff zu klarem Bild-Entscheid".\\n' +
      '- Middle right: three stacked metric cards labeled: "Neue Uploads heute", "aktive Stimmen", "Upload -> Stimme Rate" with plausible numbers.\\n' +
      '- Bottom section: three traffic route chips with labels: profilbild-bewerten, bewerbungsfoto-bewerten, linkedin-profilbild-optimieren.\\n' +
      '- Add CTA pair: "Jetzt testen" and "Landingpage öffnen".\\n' +
      '- Visual tone: trustworthy, bright neutral background, blue-slate accents, emerald highlight, no purple, no logos.',
  },
  {
    title: 'Bewertemich Intent Speed Navigator',
    intent: 'Schneller Weg vom Suchbegriff zum Upload in einem lesbaren Entscheidungs-Flow.',
    copy: 'Mobile/desktop Hybrid mit 3-Schritt-Funnel und Klickpfaden für Zielgruppen.',
    status: 'Neu via gpt-image-template-agent',
    source: 'local:bewertemich-intent-speed-navigator',
    language: 'Deutsch',
    aspect: '16:9',
    prompt:
      'Create a mobile/desktop hybrid ad concept for German users: "Schneller Treffer im Profilbild-Feedback".\\n' +
      'Canvas: 16:9 with right-side mobile mock stack.\\n' +
      'Elements:\\n' +
      '- Horizontal journey at top: "Suchintention" -> "Upload" -> "Invite" -> "Stimme".\\n' +
      '- Center: three mini cards for intent buckets Career, Dating, Social with realistic CTR chips.\\n' +
      '- Right rail: mini review stream with star badges and short micro-quotes.\\n' +
      '- Add countdown chip: "Ø erste Antwort in 3:04 Minuten".\\n' +
      '- Add two CTA buttons in one row: "Jetzt starten" and "Mehr Intentionen".\\n' +
      '- Use vector-based modern SaaS art direction, rounded borders, thin lines, no people, no photo realism, no purple-heavy gradients.',
  }
];

const cardTone = [
  'from-slate-900/90 to-slate-800/70',
  'from-emerald-900/80 to-emerald-800/65',
  'from-blue-900/80 to-blue-800/65',
  'from-slate-800/90 to-slate-700/70',
  'from-cyan-900/80 to-cyan-800/65',
  'from-amber-900/80 to-amber-800/65',
  'from-teal-900/80 to-teal-800/65',
  'from-zinc-900/80 to-zinc-800/65',
];

const previewLength = 8;

export const SeoVisualPlaybook = () => {
  const [copiedSource, setCopiedSource] = useState('');
  const [copyError, setCopyError] = useState('');

  const copyTemplate = async (template) => {
    if (!template?.prompt) return;

    try {
      if (typeof navigator !== 'undefined' && navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
        await navigator.clipboard.writeText(template.prompt);
      } else {
        const textarea = document.createElement('textarea');
        textarea.value = template.prompt;
        textarea.setAttribute('readonly', '');
        textarea.style.position = 'fixed';
        textarea.style.left = '-9999px';
        document.body.appendChild(textarea);
        textarea.focus();
        textarea.select();
        document.execCommand('copy');
        textarea.remove();
      }
      await trackEvent('seo_visual_prompt_copy', {
        source: 'home',
        surface: 'seo_visual_playbook',
        meta: { template: template.source }
      }, {
        transport: 'beacon'
      });

      setCopiedSource(template.source);
      setCopyError('');
      window.setTimeout(() => {
        setCopiedSource('');
      }, 1200);
    } catch {
      setCopyError('Copy fehlgeschlagen. Bitte manuell markieren.');
      window.setTimeout(() => {
        setCopyError('');
      }, 1200);
    }
  };

  return (
    <section className="mt-8">
      <div className="rounded-2xl border border-slate-200 bg-white p-4 md:p-6">
        <div className="flex flex-wrap items-center justify-between gap-3">
          <div>
            <div className="inline-flex rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">Neue Visualisierungs-Runde</div>
            <h2 className="mt-3 text-xl font-bold">Conversion-Visuals für Besucherlenkung und Upload-Drive</h2>
            <p className="mt-1 text-sm text-gray-600">Prompt-Templates aus dem Local-Katalog für KI-Bildgenerierung inkl. Copy-to-Clipboard, direkt für neue Hero- und Ad-Varianten.</p>
          </div>
          <a href="/admin/content?tab=seo" className="btn btn-sm btn-primary" aria-label="SEO-Admin öffnen">SEO-Admin öffnen</a>
        </div>

        <div className="mt-4 grid gap-3 lg:grid-cols-2 xl:grid-cols-3">
          {visualTemplates.map((template, index) => (
            <article
              key={template.source}
              className="group relative overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow"
            >
              <div className={`h-28 rounded-t-xl bg-gradient-to-br ${cardTone[index % cardTone.length]} p-4 text-white`}>
                <p className="inline-flex rounded-full bg-white/15 px-2 py-1 text-xs font-semibold">Template #{index + 1}</p>
                <h3 className="mt-3 text-sm font-bold leading-snug">{template.title}</h3>
              </div>
              <div className="space-y-3 border-t border-slate-100 p-4">
                <p className="text-sm font-semibold text-slate-800">{template.intent}</p>
                <p className="text-sm text-gray-600">{template.copy}</p>
                <p className="rounded-lg bg-slate-50 border border-slate-100 p-2 text-xs text-slate-700">{template.prompt.split('\n').slice(0, previewLength).join('\n')}</p>
                <div className="flex items-center justify-between text-xs text-gray-500">
                  <span className="inline-flex rounded-full bg-slate-100 px-2 py-1">{template.language}</span>
                  <span className="inline-flex rounded-full bg-slate-100 px-2 py-1">{template.aspect}</span>
                  <span className="inline-flex rounded-full bg-slate-100 px-2 py-1">{template.status}</span>
                </div>
                <button
                  type="button"
                  className="btn btn-outline btn-sm w-full"
                  onClick={() => copyTemplate(template)}
                  aria-label={`Prompt kopieren ${template.title}`}
                >
                  {copiedSource === template.source ? 'Prompt kopiert' : 'Prompt kopieren'}
                </button>
              </div>
            </article>
          ))}
        </div>

        {copyError ? (
          <div className="mt-4 rounded-xl border border-warning bg-warning/10 px-4 py-2 text-xs text-warning-content">{copyError}</div>
        ) : null}
      </div>
    </section>
  );
};