// scenes-5-7.jsx — Beweis, Abgrenzung, CTA

// ────────────────────────────────────────────────────────────────────────
// SZENE 5 — BEWEIS / TEST-SET
// ────────────────────────────────────────────────────────────────────────
function Scene5Proof() {
  const { start, end } = SCENE.s5;
  const time = useTime();
  if (time < start - 0.5 || time > end + 0.5) return null;
  const localT = time - start;
  const fadeIn = Math.min(1, localT / 0.6);
  const fadeOut = Math.min(1, (end - time) / 0.8);
  const op = Math.min(fadeIn, fadeOut);

  const rows = [
    { l: 'Eskalations-Recall', s: 'Kritische Mails erkannt', v: 100, label: '100 %' },
    { l: 'Klassifikations-Genauigkeit', s: 'Korrekte Kategorie', v: 92.5, label: '92,5 %' },
    { l: 'Pool-Match-Rate', s: 'Standardantworten zugeordnet', v: 100, label: '100 %' },
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, background: C.n0, opacity: op }}>
      <SceneEyebrow start={start} end={end} num="05" label="Test-Set" />

      <div style={{ position: 'absolute', top: 130, left: 0, right: 0,
        textAlign: 'center', opacity: Math.min(1, localT / 0.6) }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: C.blue600,
          letterSpacing: '0.12em', textTransform: 'uppercase' }}>Beweis</div>
        <div style={{ fontSize: 48, fontWeight: 600, color: C.n800,
          marginTop: 12, letterSpacing: '-0.02em' }}>Test-Set: 40 Mandanten-Mails</div>
      </div>

      <div style={{ position: 'absolute', top: 320, left: 240, right: 240 }}>
        {rows.map((r, i) => {
          const t = Math.min(1, Math.max(0, (localT - 1.5 - i * 1.0) / 1.2));
          const barW = t * (r.v / 100);
          return (
            <div key={i} style={{
              padding: '32px 40px',
              borderTop: i === 0 ? `1px solid ${C.n200}` : 'none',
              borderBottom: `1px solid ${C.n200}`,
              display: 'grid', gridTemplateColumns: '1fr auto 280px',
              alignItems: 'center', gap: 40,
              opacity: Math.min(1, Math.max(0, (localT - 1 - i * 0.8) / 0.5)),
            }}>
              <div>
                <div style={{ fontSize: 24, fontWeight: 600, color: C.n800,
                  letterSpacing: '-0.01em' }}>{r.l}</div>
                <div style={{ fontSize: 14, color: C.n500, marginTop: 4 }}>{r.s}</div>
              </div>
              <div style={{ fontSize: 56, fontWeight: 600, color: C.blue600,
                fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em',
                width: 200, textAlign: 'right' }}>{r.label}</div>
              <div style={{ height: 4, background: C.n100, borderRadius: 2, position: 'relative' }}>
                <div style={{
                  position: 'absolute', left: 0, top: 0, bottom: 0,
                  width: `${barW * 100}%`, background: C.blue600, borderRadius: 2,
                  transition: 'width 200ms linear',
                }}/>
              </div>
            </div>
          );
        })}
      </div>

      <div style={{ position: 'absolute', bottom: 130, left: 240, right: 240,
        opacity: Math.min(1, Math.max(0, (localT - 5) / 0.8)) }}>
        <div style={{ fontSize: 12, color: C.n500, lineHeight: 1.6, textAlign: 'center' }}>
          Pseudonymisierung gemäß DSGVO Art. 32 vor jedem KI-Aufruf · spaCy NER + Regex · 100 % reversibel auf Test-Set
        </div>
      </div>

      <Caption start={start + 2}  end={start + 7}  text="Test-Set: 40 Mandanten-Mails." />
      <Caption start={start + 8}  end={start + 13} text="Kritische Mails vollständig erkannt." accent="vollständig erkannt" />
      <Caption start={start + 14} end={start + 18} text="Klassifikation 92,5 % korrekt." accent="92,5 %" />
      <Caption start={start + 19} end={start + 21} text="Standardfragen 100 % zugeordnet." />
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────
// SZENE 6 — ABGRENZUNG UND PREIS
// ────────────────────────────────────────────────────────────────────────
function Scene6Pricing() {
  const { start, end } = SCENE.s6;
  const time = useTime();
  if (time < start - 0.5 || time > end + 0.5) return null;
  const localT = time - start;
  const fadeIn = Math.min(1, localT / 0.6);
  const fadeOut = Math.min(1, (end - time) / 0.8);
  const op = Math.min(fadeIn, fadeOut);

  return (
    <div style={{ position: 'absolute', inset: 0, background: C.n50, opacity: op }}>
      <SceneEyebrow start={start} end={end} num="06" label="Abgrenzung" />

      <div style={{ position: 'absolute', top: 130, left: 0, right: 0, textAlign: 'center',
        opacity: Math.min(1, localT / 0.6) }}>
        <div style={{ fontSize: 48, fontWeight: 600, color: C.n800,
          letterSpacing: '-0.02em' }}>Drei Punkte zur Abgrenzung</div>
      </div>

      <div style={{ position: 'absolute', top: 280, left: 80, right: 80,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
        {[
          {
            head: 'Solo-Direktkontakt',
            body: <PaulCard/>,
            footer: 'Beratung, Lieferung, Support — eine Ansprechperson.',
            i: 0,
          },
          {
            head: 'Transparenter Preis',
            body: <PriceCard/>,
            footer: null,
            i: 1,
          },
          {
            head: 'Geld-zurück-Garantie',
            body: <GuaranteeCard/>,
            footer: 'Wenn nach 14 Tagen Halbzeit-Review keine messbare Zeitersparnis nachweisbar: vollständige Rückerstattung der Setup-Gebühr. Ohne Klauseln.',
            i: 2,
          },
        ].map((card, i) => {
          const t = Math.min(1, Math.max(0, (localT - 0.8 - i * 0.4) / 0.6));
          return (
            <div key={i} style={{
              background: C.n0, border: `1px solid ${C.n200}`, borderRadius: 12,
              padding: '32px 32px',
              minHeight: 580,
              opacity: t,
              transform: `translateY(${(1 - t) * 16}px)`,
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ fontSize: 11, fontWeight: 600, color: C.blue600,
                letterSpacing: '0.12em', textTransform: 'uppercase' }}>0{i+1}</div>
              <div style={{ fontSize: 26, fontWeight: 600, color: C.n800,
                marginTop: 10, letterSpacing: '-0.01em' }}>{card.head}</div>
              <div style={{ flex: 1, marginTop: 28 }}>{card.body}</div>
              {card.footer && (
                <div style={{ fontSize: 13, color: C.n600, lineHeight: 1.55,
                  marginTop: 24, paddingTop: 20, borderTop: `1px solid ${C.n200}` }}>
                  {card.footer}
                </div>
              )}
            </div>
          );
        })}
      </div>

      <Caption start={start + 2}  end={start + 7}  text="Klein und direkt gehalten — ein Ansprechpartner." />
      <Caption start={start + 8}  end={start + 13} text="Setup und laufender Betrieb — transparent." accent="transparent" />
      <Caption start={start + 14} end={start + 19} text="Ohne messbare Zeitersparnis: Setup-Gebühr wird erstattet." accent="erstattet" />
    </div>
  );
}

function PaulCard() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
      <div style={{
        width: 160, height: 160, borderRadius: '50%',
        border: `1px solid ${C.n200}`,
        overflow: 'hidden', background: C.n100,
      }}>
        <img src="assets/paul-wilke.png" alt="Paul Wilke"
          style={{ width: '100%', height: '100%', objectFit: 'cover',
            objectPosition: 'center 20%' }} />
      </div>
      <div style={{ textAlign: 'center' }}>
        <div style={{ fontSize: 18, fontWeight: 600, color: C.n800 }}>Paul Wilke</div>
        <div style={{ fontSize: 13, color: C.n500, marginTop: 4 }}>Hamburg · Inhaber</div>
      </div>
    </div>
  );
}

function PriceCard() {
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
        <div style={{ fontSize: 64, fontWeight: 600, color: C.blue600,
          letterSpacing: '-0.03em', fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>3.900</div>
        <div style={{ fontSize: 32, fontWeight: 600, color: C.n800 }}>€</div>
      </div>
      <div style={{ fontSize: 18, color: C.n700, marginTop: 8, fontWeight: 500 }}>+ 290 €/Monat</div>
      <div style={{ fontSize: 12, color: C.n500, marginTop: 14, lineHeight: 1.55 }}>
        Sprint Setup · 21 Tage<br/>
        Hypercare/Hosting/API ab Tag 51
      </div>
      <div style={{ height: 1, background: C.n200, margin: '20px 0' }}/>
      <div style={{ fontSize: 11, color: C.n500, fontWeight: 600,
        letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>
        Mail-Triage als Einstieg
      </div>
      <div style={{ fontSize: 13, color: C.n700 }}>1.950 € Setup + 190 €/Monat · 14 Tage</div>
    </div>
  );
}

function GuaranteeCard() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
      <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
        <path d="M40 12 C 56 12, 68 24, 68 40 C 68 56, 56 68, 40 68 C 28 68, 18 60, 14 50"
          stroke={C.green500} strokeWidth="2" fill="none" strokeLinecap="round"/>
        <polyline points="14,40 14,52 26,52" stroke={C.green500} strokeWidth="2"
          fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
      <div style={{ textAlign: 'center' }}>
        <div style={{ fontSize: 32, fontWeight: 600, color: C.green500,
          letterSpacing: '-0.02em' }}>14 Tage</div>
        <div style={{ fontSize: 13, color: C.n500, marginTop: 4 }}>Halbzeit-Review</div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────
// SZENE 7 — CTA / ABSCHLUSS
// ────────────────────────────────────────────────────────────────────────
function Scene7CTA() {
  const { start, end } = SCENE.s7;
  const time = useTime();
  if (time < start - 0.5 || time > end + 0.5) return null;
  const localT = time - start;
  const fadeIn = Math.min(1, localT / 0.8);
  const fadeOut = Math.min(1, (end - time) / 1.0);
  const op = Math.min(fadeIn, fadeOut);

  return (
    <div style={{ position: 'absolute', inset: 0, background: C.n0, opacity: op }}>
      <SceneEyebrow start={start} end={end} num="07" label="Erstgespräch" />

      <div style={{ position: 'absolute', top: 160, left: 0, right: 0, textAlign: 'center',
        opacity: Math.min(1, localT / 0.8) }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: C.blue600,
          letterSpacing: '0.16em', textTransform: 'uppercase' }}>Nächster Schritt</div>
        <div style={{ fontSize: 64, fontWeight: 600, color: C.n800,
          marginTop: 16, letterSpacing: '-0.02em' }}>Erstgespräch</div>
      </div>

      {/* Calendly-style 7-day grid */}
      <div style={{
        position: 'absolute', top: 380, left: '50%',
        transform: `translateX(-50%) translateY(${(1 - Math.min(1, Math.max(0, (localT - 1) / 0.6))) * 12}px)`,
        opacity: Math.min(1, Math.max(0, (localT - 1) / 0.8)),
        background: C.n50, border: `1px solid ${C.n200}`, borderRadius: 12,
        padding: '24px 32px', width: 760,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          marginBottom: 20 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: C.n800 }}>KW 18 · Hamburg</div>
          <div style={{ fontSize: 11, color: C.n500 }}>30 Minuten · Online oder Telefon</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 8 }}>
          {['Mo 28', 'Di 29', 'Mi 30', 'Do 01', 'Fr 02', 'Sa 03', 'So 04'].map((d, i) => {
            const dotIdx = [1, 3, 4]; // available days
            const isAvail = dotIdx.includes(i);
            const slotReveal = (slot) => Math.min(1, Math.max(0, (localT - 2 - slot * 0.4) / 0.4));
            return (
              <div key={i} style={{
                padding: '14px 0',
                background: C.n0, border: `1px solid ${C.n200}`, borderRadius: 8,
                textAlign: 'center',
                color: i >= 5 ? C.n400 : C.n800,
              }}>
                <div style={{ fontSize: 11, color: C.n500, fontWeight: 500 }}>{d.split(' ')[0]}</div>
                <div style={{ fontSize: 18, fontWeight: 600, marginTop: 4,
                  fontVariantNumeric: 'tabular-nums' }}>{d.split(' ')[1]}</div>
                <div style={{ marginTop: 12, height: 24,
                  display: 'flex', justifyContent: 'center', alignItems: 'center',
                  gap: 4 }}>
                  {isAvail && (
                    <div style={{
                      width: 10, height: 10, borderRadius: '50%',
                      background: C.blue600,
                      opacity: slotReveal(dotIdx.indexOf(i)),
                    }}/>
                  )}
                </div>
              </div>
            );
          })}
        </div>
        <div style={{ fontSize: 11, color: C.n500, textAlign: 'center', marginTop: 16 }}>
          <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%',
            background: C.blue600, marginRight: 6, verticalAlign: 'middle' }}/>
          drei verfügbare Slots
        </div>
      </div>

      <div style={{
        position: 'absolute', bottom: 240, left: 0, right: 0, textAlign: 'center',
        opacity: Math.min(1, Math.max(0, (localT - 4) / 0.8)),
      }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 18,
          color: C.blue600, fontWeight: 500, letterSpacing: '-0.005em',
        }}>calendly.com/paul-kanzleientlastung/30min</div>
        <div style={{ fontSize: 13, color: C.n500, marginTop: 14 }}>
          30 Minuten · keine Verkaufsanrufe · keine Folgemails ohne Ihre Zustimmung
        </div>
        <div style={{ fontSize: 14, color: C.n700, marginTop: 18,
          fontFamily: 'JetBrains Mono, monospace' }}>paul@kanzleientlastung.de</div>
      </div>

      <Caption start={start + 2}  end={start + 7}  text="Im Erstgespräch prüfen wir, ob der Ablauf zu Ihrer Kanzlei passt." />
      <Caption start={start + 8}  end={start + 12} text="30 Minuten. Ohne Verkaufsdruck." />
      <Caption start={start + 13} end={start + 15} text="Danach entscheiden Sie, ob ein Test sinnvoll ist." />
    </div>
  );
}

Object.assign(window, { Scene5Proof, Scene6Pricing, Scene7CTA,
  PaulCard, PriceCard, GuaranteeCard });