/* global React */
const { useState } = React;

// ────────────────────────────────────────────────────────────
// PAIN POINTS
// ────────────────────────────────────────────────────────────
function PainPoints() {
  const pains = [
    {
      n: '01',
      t: 'Leads bleiben liegen.',
      d: 'Du weißt nicht welche Kontakte heiß sind, welche kalt. Und wann du wen wieder anschreiben sollst.',
      cost: 'Verlorener Umsatz', val: '/Monat'
    },
    {
      n: '02',
      t: 'Marketing kostet Zeit die du nicht hast.',
      d: 'LinkedIn, E-Mails, Angebote. Alles bleibt liegen weil der Alltag auffrisst.',
      cost: 'Zeitverlust', val: '20h+/Monat'
    },
    {
      n: '03',
      t: 'Kein Budget für Mitarbeiter, aber die Arbeit wächst.',
      d: 'Du bräuchtest Unterstützung, aber einen Festangestellten kann und willst du dir nicht leisten.',
      cost: 'Festangestellter', val: '4.500€/Mon'
    },
  ];
  return (
    <section id="problem" className="kat-section">
      <div className="kat-section__head">
        <div>
          <div className="kat-eyebrow">02 / Problem</div>
          <h2 className="kat-section__title">Was dich<br/><span className="kat-section__title--outline">aufhält.</span></h2>
        </div>
        <p className="kat-section__intro">
          Als Selbstständiger hast du zu viel zu tun. Die Arbeit wächst,
          die Zeit bleibt gleich. <strong>Und ein Mitarbeiter ist keine Option.</strong>
        </p>
      </div>
      <div className="kat-pain">
        {pains.map(p => (
          <article key={p.n} className="kat-pain__cell">
            <div className="kat-pain__n">// {p.n}</div>
            <h3 className="kat-pain__t">{p.t}</h3>
            <p className="kat-pain__d">{p.d}</p>
            <div className="kat-pain__cost">
              <span>{p.cost}</span>
              <b>{p.val}</b>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// USE CASES (interactive tabs)
// ────────────────────────────────────────────────────────────
function UseCases() {
  const cases = [
    {
      key: 'leads',
      tab: 'Lead-Reaktivierung',
      title: 'Warme und kalte Leads. Automatisch sortiert.',
      body: 'Alte Kontakte und neue Anfragen werden automatisch priorisiert und mit Follow-up-Vorlagen versehen. Du weißt jeden Morgen wen du heute kontaktieren sollst. Punkt.',
      bullets: [
        'Warme und kalte Leads getrennt',
        'Automatische Follow-up-Vorlagen',
        'CRM-Anbindung inklusive',
        'Tägliche Priorisierung per Mail',
      ],
      chips: ['Lead-Management', 'CRM', 'Follow-up'],
      flow: [
        { l: 'IN',  t: 'Neuer Lead / alter Kontakt' },
        { l: '//',  t: 'KI scort und sortiert' },
        { l: '//',  t: 'Vorlage automatisch erstellt', accent: true },
        { l: 'OUT', t: 'Du kontaktierst die richtigen 3' },
      ],
    },
    {
      key: 'marketing',
      tab: 'Marketing-Automatisierung',
      title: 'Dein Marketing läuft. Auch wenn du keine Zeit hast.',
      body: 'LinkedIn-Posts, E-Mail-Vorlagen und Content-Ideen auf Knopfdruck. Dein Marketing läuft weiter wenn du gerade keinen Kopf dafür hast. Ohne Generic-Content.',
      bullets: [
        'LinkedIn-Posts in deiner Stimme',
        'E-Mail-Sequenzen ready-to-send',
        'Content-Ideen auf Vorrat',
        'Wiederverwendbare Templates',
      ],
      chips: ['LinkedIn', 'E-Mail', 'Content'],
      flow: [
        { l: 'IN',  t: 'Thema oder Anlass' },
        { l: '//',  t: 'KI schreibt in deiner Stimme', accent: true },
        { l: '//',  t: 'Du editierst in 2 Minuten' },
        { l: 'OUT', t: 'Post live / Mail raus' },
      ],
    },
    {
      key: 'docs',
      tab: 'Angebote und Dokumente',
      title: 'Angebote in Minuten. Nicht in Stunden.',
      body: 'Angebote, Briefings und Kundenkommunikation schneller fertig. Kein leeres Dokument mehr. Ein Briefing-Template plus dein System schreibt den Rest.',
      bullets: [
        'Angebot aus 3 Inputs',
        'Briefings auf Knopfdruck',
        'Vorlagen für Standard-Kommunikation',
        'Antworten in deinem Stil',
      ],
      chips: ['Angebote', 'Briefings', 'Vorlagen'],
      flow: [
        { l: 'IN',  t: 'Kundenanfrage' },
        { l: '//',  t: 'KI füllt Template' },
        { l: '//',  t: 'Du prüfst und passt an', accent: true },
        { l: 'OUT', t: 'Angebot raus / Deal näher' },
      ],
    },
    {
      key: 'meetings',
      tab: 'Meeting-Vorbereitung',
      title: 'Jedes Gespräch. Besser vorbereitet.',
      body: 'Zusammenfassungen, Agenden und Nachbereitungen automatisch erstellt. Du gehst nie wieder unvorbereitet in ein Gespräch. Und vergisst keine Action-Items mehr.',
      bullets: [
        'Briefing vor jedem Call',
        'Agenda und offene Punkte',
        'Nachbereitung automatisch',
        'Action-Items im CRM',
      ],
      chips: ['Calls', 'Notion', 'Nachbereitung'],
      flow: [
        { l: 'IN',  t: 'Termin im Kalender' },
        { l: '//',  t: 'KI fasst History zusammen', accent: true },
        { l: '//',  t: 'Briefing 1h vor Call' },
        { l: 'OUT', t: 'Du gehst vorbereitet rein' },
      ],
    },
  ];
  const [active, setActive] = useState(0);
  const c = cases[active];

  return (
    <section id="system" className="kat-section">
      <div className="kat-section__head">
        <div>
          <div className="kat-eyebrow">03 / Lösung</div>
          <h2 className="kat-section__title">Was ich <br/><span className="kat-section__title--outline">baue.</span></h2>
        </div>
        <p className="kat-section__intro">
          Ich richte dir ein KI-System ein das auf dein Business zugeschnitten ist.
          Kein generisches Tool zum selbst konfigurieren. Ich baue es, erkläre es dir
          und du nutzt es <strong>ab Tag 1</strong>.
        </p>
      </div>

      <div className="kat-uses">
        <div className="kat-uses__list" role="tablist">
          {cases.map((cc, i) => (
            <button key={cc.key}
              className={'kat-uses__tab' + (i === active ? ' is-active' : '')}
              onClick={() => setActive(i)}>
              <span className="kat-tab__n">// 0{i+1}</span>
              <span>{cc.tab}</span>
              <span className="kat-tab__chev">→</span>
            </button>
          ))}
        </div>
        <div className="kat-uses__panel">
          <div>
            <h3>{c.title}</h3>
            <p>{c.body}</p>
            <ul className="kat-uses__bullets">
              {c.bullets.map(b => <li key={b}><span>{b}</span></li>)}
            </ul>
            <div className="kat-chips">
              {c.chips.map((ch, i) => (
                <span key={ch} className={'kat-chip' + (i === 0 ? ' kat-chip--volt' : '')}>{ch}</span>
              ))}
            </div>
          </div>
          <div className="kat-uses__diagram">
            <div className="kat-uses__diagram-label">Wie das System läuft</div>
            <div className="kat-uses__flow">
              {c.flow.map((n, i) => (
                <React.Fragment key={i}>
                  <div className={'kat-uses__node' + (n.accent ? ' kat-uses__node--accent' : '')}>
                    <b>{n.l}</b>{n.t}
                  </div>
                  {i < c.flow.length - 1 && <div className="kat-uses__arrow">↓</div>}
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// PROCESS
// ────────────────────────────────────────────────────────────
function Process() {
  const steps = [
    { n: '01', t: 'Kostenloses Erstgespräch', d: 'Wir schauen gemeinsam wo in deinem Business die meiste Zeit verloren geht und welches System den größten Hebel hat.', time: '30 Min.', tag: 'Kostenlos' },
    { n: '02', t: 'Setup und Übergabe', d: 'Ich baue dein System, teste es und erkläre dir in einem 1h Walkthrough wie du es ab sofort nutzt.', time: '1 bis 2 Wochen', tag: 'Inklusive' },
    { n: '03', t: 'Du sparst Zeit', d: 'Das System läuft. Auf Wunsch bleibe ich monatlich als Ansprechpartner für Updates und Anpassungen.', time: 'Ab Tag 1', tag: 'Optional Betreuung' },
  ];
  return (
    <section id="prozess" className="kat-section">
      <div className="kat-section__head">
        <div>
          <div className="kat-eyebrow">04 / Prozess</div>
          <h2 className="kat-section__title">Drei Schritte.<br/><span className="kat-section__title--outline">Punkt.</span></h2>
        </div>
        <p className="kat-section__intro">
          Kein langer Onboarding-Prozess. Kein Discovery-Marathon.
          Drei klare Schritte vom Erstgespräch bis zum laufenden System.
        </p>
      </div>
      <div className="kat-process">
        {steps.map(s => (
          <div key={s.n} className="kat-process__row">
            <div className="kat-process__n">{s.n}</div>
            <div className="kat-process__title">{s.t}</div>
            <div className="kat-process__desc">{s.d}</div>
            <div className="kat-process__meta">
              <b>{s.time}</b>
              <span>{s.tag}</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.PainPoints = PainPoints;
window.UseCases = UseCases;
window.Process = Process;