/* TransformationPage.jsx — /transformation: Individuelle Umsetzung */

/* ── Intro ── */
const TransformationIntro = () => (
  <section className="section aurora grain-light" data-screen-label="TransformIntro">
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 'clamp(40px, 6vw, 120px)' }} className="pp-grid">
        <div>
          <div className="eyebrow eyebrow-row"><span className="eyebrow-dot" /> Individuelle Umsetzung</div>
        </div>
        <div>
          <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, maxWidth: '22ch', textWrap: 'balance' }}>
            Wenn das Audit klar ist, setzen wir <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>um.</em>
          </h2>
          <p style={{ marginTop: 36, fontSize: 18, lineHeight: 1.55, color: 'var(--fg-2)', maxWidth: '58ch' }}>
            Keine Pilotprojekte, die in der Schublade verschwinden. Keine Abhängigkeit von einem einzelnen Tool-Anbieter. Sondern Lösungen, die in Ihre bestehende Infrastruktur passen und mit Ihrem Unternehmen wachsen.
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ── 4 Leistungsbausteine ── */
const TransformServices = () => {
  const items = [
    {
      n: '01',
      title: 'KI-Agenten',
      body: 'Individuelle KI-Assistenten für Ihre wiederkehrenden Aufgaben, von der Angebotserstellung über Kundenkommunikation bis zur internen Recherche. Trainiert auf Ihren Daten, Ihrer Sprache, Ihren Prozessen.',
      icon: <window.Icon.Bot size={28} />,
    },
    {
      n: '02',
      title: 'Prozess­automatisierung',
      body: 'Manuelle, fehleranfällige Abläufe werden zu zuverlässigen Workflows. Datenübergaben zwischen Systemen, Freigabeprozesse, Reporting: automatisiert, auditierbar, dokumentiert.',
      icon: <window.Icon.Cycle size={28} />,
    },
    {
      n: '03',
      title: 'Individuelle KI-Anwendungen',
      body: 'Wenn Standard-Tools nicht reichen: maßgeschneiderte Software mit KI im Kern. Zugeschnitten auf Ihre Branche, Ihre Rechte- und Rollen­logik, Ihre Compliance-Anforderungen.',
      icon: <window.Icon.Build size={28} />,
    },
    {
      n: '04',
      title: 'Schulung & Enablement',
      body: 'Ihre Mitarbeiter werden befähigt, die neuen Werkzeuge selbstständig zu nutzen und weiterzuentwickeln. Keine Abhängigkeit, kein Blackbox-Effekt. Wissen bleibt im Haus.',
      icon: <window.Icon.Users size={28} />,
    },
  ];
  return (
    <section className="section bg-soft" data-screen-label="TransformServices">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 'clamp(56px, 7vw, 96px)' }}>
          <div className="eyebrow eyebrow-row" style={{ marginBottom: 28 }}>
            <span className="eyebrow-dot" /> Was wir umsetzen
          </div>
          <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' }}>
            Vier Bausteine. <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>Individuell kombiniert.</em>
          </h2>
        </div>
        <div className="ts-grid">
          {items.map((it, i) => (
            <article key={it.n} className="ts-card r-up lift" style={{ transitionDelay: (80 + i*100) + 'ms' }}>
              <div className="ts-icon" aria-hidden>{it.icon}</div>
              <h3 style={{ fontSize: 28, fontWeight: 500, lineHeight: 1.15, letterSpacing: '-0.015em', margin: '0 0 20px', color: 'var(--fg-1)' }}>{it.title}</h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0, maxWidth: '40ch' }}>{it.body}</p>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        .ts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-hairline); border: 1px solid var(--border-hairline); }
        .ts-card { background: #fff; padding: clamp(40px, 4vw, 72px); min-height: 280px; }
        .ts-icon {
          color: var(--color-accent);
          margin-bottom: 28px;
          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%);
        }
        @media (max-width: 880px) { .ts-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
};

/* ── Prozess ── */
const TransformProcess = () => {
  const phases = [
    { p: 'Phase 1', title: 'Feindesign', body: 'Aus der Audit-Roadmap wird ein detailliertes Lösungskonzept: Architektur, Tech-Stack, Integrationspunkte, Meilensteine. Transparent und auditfähig.' },
    { p: 'Phase 2', title: 'Implementierung', body: 'Wir bauen in kurzen Iterationen. Sie sehen jede Woche Fortschritt, nicht erst nach drei Monaten. Feedback-Schleifen sind eingebaut.' },
    { p: 'Phase 3', title: 'Rollout & Enablement', body: 'Einführung im Team, dokumentiert. Keine Tool-Abhängigkeit, weil Ihre Mitarbeiter die neuen Werkzeuge selbst bedienen und weiterentwickeln können.' },
    { p: 'Phase 4', title: 'Betrieb & Wartung', body: 'Wir bleiben ansprechbar: Weiterentwicklung, neue Use-Cases, Anpassung an geänderte Prozesse. Kein Vendor-Lock-in, sondern partnerschaftliche Betreuung.' },
  ];
  return (
    <section className="section" data-screen-label="TransformProcess" 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 style={{ maxWidth: 720, marginBottom: 'clamp(56px, 7vw, 96px)' }}>
          <div className="eyebrow eyebrow-row" style={{ marginBottom: 28 }}><span className="eyebrow-dot" /> Unser Ablauf</div>
          <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' }}>
            Vier Phasen. <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>Nachvollziehbar.</em>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--border-hairline)', border: '1px solid var(--border-hairline)' }} className="tp-grid">
          {phases.map((ph, i) => (
            <article key={ph.p} className="r-up lift" style={{ background: '#fff', padding: 'clamp(32px, 3.5vw, 56px)', minHeight: 240, transitionDelay: (80 + i*100) + 'ms' }}>
              <div style={{ display: 'flex', gap: 16, alignItems: 'baseline', marginBottom: 28 }}>
                <span className="eyebrow" style={{ color: 'var(--fg-3)' }}>{ph.p}</span>
              </div>
              <h3 style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 40, fontWeight: 400, lineHeight: 1.05, letterSpacing: '-0.02em', margin: '0 0 20px', color: 'var(--fg-1)' }}>{ph.title}</h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0, maxWidth: '46ch' }}>{ph.body}</p>
            </article>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 880px){ .tp-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
};

/* ── Tech Prinzipien ── */
const TransformPrinciples = () => {
  const principles = [
    { t: 'Kein Vendor-Lock-in', b: 'Offene Schnittstellen und dokumentierte Architekturen. Sie sind nicht auf uns angewiesen.' },
    { t: 'DSGVO & Datenschutz', b: 'Daten bleiben, wo sie hingehören. Hosting in Deutschland oder On-Premises, je nach Anforderung.' },
    { t: 'Dokumentation', b: 'Jede Lösung kommt mit verständlicher Dokumentation. Ihr Team kann selbst weiterbauen.' },
    { t: 'Auditierbar', b: 'KI-Entscheidungen sind nachvollziehbar protokolliert. Für Ihre Compliance und Ihre Kunden.' },
  ];
  return (
    <section className="section bg-ink-grad aurora aurora-dark grain" data-screen-label="TransformPrinciples">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 'clamp(56px, 7vw, 96px)' }}>
          <div className="eyebrow eyebrow-row" style={{ marginBottom: 28, color: 'rgba(255,255,255,0.78)' }}><span className="eyebrow-dot" style={{ background: 'rgba(255,255,255,0.78)' }} /> Unsere Prinzipien</div>
          <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, color: '#fff', textWrap: 'balance' }}>
            Technik, die <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>bei Ihnen bleibt.</em>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 48 }} className="prin-grid">
          {principles.map((p, i) => (
            <div key={p.t} className="r-up" style={{ transitionDelay: (80 + i*100) + 'ms' }}>
              <h3 style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.015em', margin: '0 0 14px', color: '#fff' }}>{p.t}</h3>
              <p style={{ fontSize: 16, lineHeight: 1.65, color: 'rgba(255,255,255,0.88)', margin: 0, maxWidth: '42ch' }}>{p.b}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 720px){ .prin-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
};

Object.assign(window, { TransformationIntro, TransformServices, TransformProcess, TransformPrinciples });
