/* KiAuditPage.jsx — /ki-audit landing page
   Sections: AuditProblem, AuditProcess (3-phase timeline),
   AuditDeliverables, AuditFunding (table), AuditFAQ (accordion). */

/* ─────────── Audit Problem ─────────── */
const AuditProblem = () => (
  <section className="section-sm aurora grain-light" data-screen-label="AuditProblem" style={{ paddingTop: 'clamp(72px, 8vw, 128px)', paddingBottom: 'clamp(72px, 8vw, 128px)' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 'clamp(40px, 6vw, 120px)', alignItems: 'start' }} className="pp-grid">
        <div>
          <div className="eyebrow eyebrow-row" style={{ marginBottom: 24 }}>
            <span className="eyebrow-dot" /> Ausgangslage
          </div>
        </div>
        <div>
          <p style={{ fontSize: 'clamp(22px, 2vw, 28px)', lineHeight: 1.45, color: 'var(--fg-1)', margin: 0, maxWidth: '40ch', textWrap: 'balance', letterSpacing: '-0.01em' }}>
            Viele Unternehmen haben erste KI-Experimente hinter sich. Was fehlt, ist ein systematischer Überblick, klare Prioritäten und ein Partner, der nicht nur analysiert, sondern auch umsetzt.
          </p>
        </div>
      </div>
    </div>
    <style>{`@media (max-width: 880px) { .pp-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
  </section>
);

/* ─────────── Audit Process — 3-phase timeline ─────────── */
const AuditProcess = () => {
  const phases = [
    {
      num: '01',
      label: 'Phase Eins',
      weeks: 'Woche 1 bis 2',
      title: 'Problem identifizieren',
      body: 'Kickoff-Gespräch und IST-Analyse. Abteilung für Abteilung dokumentieren wir, wo Zeit und Geld verloren gehen. Der Großteil läuft remote, ergänzt durch ein bis zwei Tage vor Ort.',
      icon: <window.Icon.Search size={28} />,
    },
    {
      num: '02',
      label: 'Phase Zwei',
      weeks: 'Woche 2 bis 3',
      title: 'Lösungen priorisieren',
      body: 'Aus der Analyse entwickeln wir konkrete Use Cases. Jede Maßnahme bewerten wir nach Aufwand, Nutzen und Umsetzbarkeit.',
      icon: <window.Icon.Spark size={28} />,
    },
    {
      num: '03',
      label: 'Phase Drei',
      weeks: 'Woche 3 bis 4',
      title: 'Roadmap',
      body: 'Sie bekommen eine fertige Roadmap: was wird implementiert, in welcher Reihenfolge, mit welchen Kosten und welchem erwarteten Nutzen. Inklusive Entscheidungsvorlage für Geschäftsführung oder Beirat.',
      icon: <window.Icon.Compass size={28} />,
    },
  ];

  return (
    <section className="section bg-soft" data-screen-label="AuditProcess">
      <div className="container">
        <div style={{ maxWidth: 820, marginBottom: 'clamp(56px, 7vw, 96px)' }}>
          <div className="eyebrow eyebrow-row" style={{ marginBottom: 28 }}>
            <span className="eyebrow-dot" /> Der Prozess
          </div>
          <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' }}>
            Vom Problem zur Roadmap in <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>14 bis 28 Tagen.</em>
          </h2>
        </div>

        <div className="timeline">
          {phases.map((p, i) => (
            <article key={p.num} className="timeline-phase r-up lift" style={{ transitionDelay: (80 + i*120) + 'ms' }}>
              <div className="timeline-icon" aria-hidden>{p.icon}</div>
              <header className="timeline-meta">
                <span style={{ fontSize: 12, fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>
                  {p.label}
                </span>
                <span style={{ flex: 1, height: 1, background: 'var(--border-hairline)', margin: '0 8px' }} />
                <span className="timeline-weeks" style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)', letterSpacing: '0.02em', whiteSpace: 'nowrap' }}>
                  {p.weeks}
                </span>
              </header>
              <h3 style={{
                fontFamily: 'var(--font-serif)',
                fontSize: 'clamp(32px, 3vw, 44px)',
                fontWeight: 400, fontStyle: 'italic',
                lineHeight: 1.05, letterSpacing: '-0.02em',
                margin: '24px 0 20px', color: 'var(--fg-1)'
              }}>
                {p.title}
              </h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0, maxWidth: '48ch' }}>
                {p.body}
              </p>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        .timeline {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1px;
          background: var(--border-hairline);
          border: 1px solid var(--border-hairline);
        }
        .timeline-phase {
          background: #fff;
          padding: clamp(32px, 3vw, 56px);
          min-height: 360px;
          display: flex;
          flex-direction: column;
        }
        .timeline-icon {
          color: var(--color-accent);
          margin-bottom: 32px;
          width: 56px; height: 56px;
          border: 1px solid var(--border-hairline);
          border-radius: 999px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, rgba(21,84,168,0.05) 0%, transparent 60%);
        }
        .timeline-meta {
          display: flex;
          align-items: center;
          gap: 16px;
        }
        .timeline-num {
          font-family: var(--font-mono);
          font-size: 12px;
          color: var(--color-accent);
        }
        @media (max-width: 880px) { .timeline { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
};

/* ─────────── Audit Deliverables ─────────── */
const AuditDeliverables = () => {
  const items = [
    'IST-Analyse Ihrer KI-Reife und Prozesslandschaft',
    'Priorisierte Liste der identifizierten Use Cases',
    'Implementierungs-Roadmap für die nächsten 12 Monate',
    'Kosten-Nutzen-Einschätzung je Maßnahme',
    'Entscheidungsvorlage für die Geschäftsführung',
  ];

  return (
    <section className="section" data-screen-label="AuditDeliverables" style={{ position: 'relative', background: '#fff' }}>
      {/* Subtle accent line at top */}
      <div aria-hidden style={{ position: 'absolute', top: 0, left: 'var(--gutter)', right: 'var(--gutter)', height: 1, background: 'linear-gradient(90deg, transparent, rgba(21,84,168,0.18), transparent)' }} />
      <div className="container">
        <div className="deliv-grid">
          <div>
            <div className="eyebrow eyebrow-row" style={{ marginBottom: 28 }}>
              <span className="eyebrow-dot" /> Was Sie bekommen
            </div>
            <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' }}>
              Kein Bericht. Eine <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>Entscheidungs­grundlage.</em>
            </h2>
          </div>
          <ul className="deliv-list">
            {items.map((text, i) => (
              <li key={i} className="deliv-item r-up" style={{ transitionDelay: (80 + i*80) + 'ms' }}>
                <span className="deliv-bullet" aria-hidden />
                <span className="deliv-text">{text}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
      <style>{`
        .deliv-grid {
          display: grid;
          grid-template-columns: 1fr 1.2fr;
          gap: clamp(40px, 6vw, 96px);
          align-items: start;
        }
        .deliv-list { list-style: none; padding: 0; margin: 0; }
        .deliv-item {
          display: grid;
          grid-template-columns: 32px 1fr;
          gap: 24px;
          align-items: baseline;
          padding: 24px 0;
          border-top: 1px solid var(--border-hairline);
        }
        .deliv-item:last-child { border-bottom: 1px solid var(--border-hairline); }
        .deliv-bullet {
          width: 8px; height: 8px; border-radius: 999px;
          background: var(--color-accent);
          margin-top: 12px;
          justify-self: end;
        }
        .deliv-text {
          font-size: clamp(17px, 1.4vw, 20px);
          line-height: 1.4;
          color: var(--fg-1);
          letter-spacing: -0.005em;
        }
        @media (max-width: 880px) {
          .deliv-grid { grid-template-columns: 1fr; }
          .deliv-item { grid-template-columns: 24px 1fr; gap: 16px; }
        }
      `}</style>
    </section>
  );
};

/* ─────────── Audit Funding Table ─────────── */
const AuditFunding = () => {
  const rows = [
    { land: 'Hessen', program: 'DIGI-Zuschuss HE', quote: 'bis 50 %' },
    { land: 'Nordrhein-Westfalen', program: 'MID-Invest', quote: 'bis 50 %' },
    { land: 'Bayern', program: 'Digitalbonus Bayern', quote: 'bis 50 %' },
    { land: 'Niedersachsen', program: 'nIFP', quote: 'bis 50 %' },
    { land: 'Berlin und Sachsen', program: 'BAFA Digital Jetzt', quote: 'bis 50 %' },
    { land: 'Bundesweit', program: 'BAFA Unternehmensberatung', quote: 'bis 80 %' },
  ];

  return (
    <section className="section bg-warm-grad grain-light" data-screen-label="AuditFunding">
      <div className="container">
        <div style={{ maxWidth: 820, marginBottom: 'clamp(48px, 6vw, 80px)' }}>
          <div className="eyebrow eyebrow-row" style={{ marginBottom: 28 }}>
            <span className="eyebrow-dot" /> Fördermittel
          </div>
          <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' }}>
            Das KI-Audit ist in vielen Bundesländern <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>förder­fähig.</em>
          </h2>
          <p style={{ marginTop: 24, fontSize: 18, lineHeight: 1.55, color: 'var(--fg-2)', maxWidth: '56ch' }}>
            Abhängig von Ihrem Standort können bis zu 80 Prozent der Beratungs­kosten durch Förderprogramme gedeckt werden.
          </p>
        </div>

        <div className="funding-table">
          <div className="funding-row funding-head">
            <div>Bundesland</div>
            <div>Programm</div>
            <div style={{ textAlign: 'right' }}>Förderquote</div>
          </div>
          {rows.map((r, i) => (
            <div key={i} className="funding-row">
              <div style={{ fontWeight: 500, color: 'var(--fg-1)' }}>{r.land}</div>
              <div style={{ color: 'var(--fg-2)' }}>{r.program}</div>
              <div style={{ textAlign: 'right', fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--fg-1)', fontWeight: 500 }}>
                {r.quote}
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 32, padding: '20px 24px', border: '1px solid var(--border-hairline)', background: 'var(--bg-1)', display: 'flex', gap: 16, alignItems: 'flex-start' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--color-accent)', letterSpacing: '0.08em', marginTop: 2 }}>HINWEIS</span>
          <span style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--fg-2)' }}>
            Der Förder­antrag muss vor der Vertrags­unterzeichnung gestellt werden. Wir unter­stützen Sie dabei.
          </span>
        </div>
      </div>
      <style>{`
        .funding-table {
          border-top: 1px solid var(--border-strong);
          border-bottom: 1px solid var(--border-strong);
        }
        .funding-row {
          display: grid;
          grid-template-columns: 1.2fr 2fr 1fr;
          gap: 24px;
          padding: 20px 0;
          border-bottom: 1px solid var(--border-hairline);
          font-size: 16px;
        }
        .funding-row:last-child { border-bottom: none; }
        .funding-head {
          font-size: 12px;
          font-weight: 500;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--fg-3);
          padding: 16px 0;
        }
        .funding-row-hl { display: none; }
        @media (max-width: 720px) {
          .funding-row { grid-template-columns: 1fr auto; }
          .funding-row > div:nth-child(2) { grid-column: 1 / -1; font-size: 14px; color: var(--fg-3) !important; }
        }
      `}</style>
    </section>
  );
};

/* ─────────── Audit FAQ Accordion ─────────── */
const AuditFAQ = () => {
  const items = [
    {
      q: 'Was kostet das KI-Audit?',
      a: 'Preisinformationen erhalten Sie im persönlichen Erstgespräch. Die Konditionen hängen von Unternehmens­größe und Scope ab. Häufig ist ein erheblicher Teil durch Fördermittel abgedeckt.',
    },
    {
      q: 'Müssen wir dafür vor Ort sein?',
      a: 'Der größte Teil des Audits läuft remote. Wir planen ein bis zwei Tage vor Ort ein, abgestimmt auf Ihren Standort und Ihr Team.',
    },
    {
      q: 'Für wen ist das KI-Audit geeignet?',
      a: 'Für inhaber­geführte Unternehmen mit 15 bis 180 Mitarbeitern, die KI-Potenziale strukturiert angehen möchten.',
    },
    {
      q: 'Was passiert nach dem Audit?',
      a: 'Sie entscheiden. Die Roadmap gehört Ihnen. Viele Kunden beauftragen uns anschließend mit der Umsetzung einzelner Maßnahmen, Voraussetzung ist das nicht.',
    },
    {
      q: 'Wie schnell geht es los?',
      a: 'Nach dem Erstgespräch starten wir in der Regel innerhalb von ein bis zwei Wochen.',
    },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section className="section" data-screen-label="AuditFAQ" style={{ position: 'relative', background: '#fff' }}>
      <div aria-hidden style={{ position: 'absolute', top: 0, left: 'var(--gutter)', right: 'var(--gutter)', height: 1, background: 'linear-gradient(90deg, transparent, rgba(21,84,168,0.18), transparent)' }} />
      <div className="container">
        <div className="faq-grid">
          <div>
            <div className="eyebrow eyebrow-row" style={{ marginBottom: 28 }}>
              <span className="eyebrow-dot" /> Häufige Fragen
            </div>
            <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' }}>
              Was Geschäfts­führer <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>wissen wollen.</em>
            </h2>
          </div>
          <div className="faq-list">
            {items.map((it, i) => {
              const isOpen = open === i;
              return (
                <div key={i} className="faq-item">
                  <button
                    className="faq-q"
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    aria-expanded={isOpen}
                  >
                    <span style={{ flex: 1 }}>{it.q}</span>
                    <span className={'faq-chevron' + (isOpen ? ' is-open' : '')} aria-hidden>+</span>
                  </button>
                  {isOpen && (
                    <div className="faq-a">
                      {it.a}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <style>{`
        .faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
        .faq-list { border-top: 1px solid var(--border-strong); }
        .faq-item { border-bottom: 1px solid var(--border-hairline); }
        .faq-q {
          display: flex; align-items: center; width: 100%;
          padding: 28px 0;
          background: none; border: 0; cursor: pointer;
          font-family: var(--font-sans);
          font-size: clamp(17px, 1.4vw, 21px);
          font-weight: 500;
          color: var(--fg-1);
          text-align: left;
          letter-spacing: -0.01em;
        }
        .faq-q:hover { opacity: 0.72; }
        .faq-chevron {
          font-size: 22px;
          color: var(--fg-3);
          font-weight: 300;
          transition: transform 260ms var(--ease-out);
          margin-left: 20px;
        }
        .faq-chevron.is-open { transform: rotate(45deg); color: var(--color-accent); }
        .faq-a {
          padding: 0 0 28px 0;
          font-size: 16px;
          line-height: 1.6;
          color: var(--fg-2);
          max-width: 60ch;
        }
        @media (max-width: 880px) {
          .faq-grid { grid-template-columns: 1fr; }
          .faq-a { padding-left: 0; padding-right: 0; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { AuditProblem, AuditProcess, AuditDeliverables, AuditFunding, AuditFAQ });
