/* TransformationPage.jsx (EN) — /transformation */

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" /> Custom Implementation</div>
        </div>
        <div>
          <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, maxWidth: '22ch', textWrap: 'balance' }}>
            Once the audit is clear, we <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>implement.</em>
          </h2>
          <p style={{ marginTop: 36, fontSize: 18, lineHeight: 1.55, color: 'var(--fg-2)', maxWidth: '58ch' }}>
            No pilot projects that disappear in a drawer. No dependence on a single tool vendor. Solutions that fit into your existing infrastructure and grow with your business.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const TransformServices = () => {
  const items = [
    { n: '01', title: 'AI Agents', body: 'Custom AI assistants for your recurring tasks — from quote generation to customer communication and internal research. Trained on your data, your language, your processes.', icon: <window.Icon.Bot size={28} /> },
    { n: '02', title: 'Process Automation', body: 'Manual, error-prone workflows become reliable processes. Data hand-offs between systems, approval chains, reporting: automated, auditable, documented.', icon: <window.Icon.Cycle size={28} /> },
    { n: '03', title: 'Custom AI Applications', body: 'When standard tools are not enough: tailored software with AI at the core. Designed for your industry, your roles and permissions, your compliance requirements.', icon: <window.Icon.Build size={28} /> },
    { n: '04', title: 'Training & Enablement', body: 'Your team is enabled to use and extend the new tools independently. No dependency, no black-box effect. Knowledge stays in-house.', 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" /> What we implement
          </div>
          <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' }}>
            Four building blocks. <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>Combined individually.</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>
  );
};

const TransformProcess = () => {
  const phases = [
    { p: 'Phase 1', title: 'Detailed design', body: 'From the audit roadmap, we develop a detailed solution concept: architecture, tech stack, integration points, milestones. Transparent and audit-ready.' },
    { p: 'Phase 2', title: 'Implementation', body: 'We build in short iterations. You see progress every week, not after three months. Feedback loops are built in.' },
    { p: 'Phase 3', title: 'Rollout & enablement', body: 'Documented introduction in the team. No tool dependency, because your team can operate and extend the new tools themselves.' },
    { p: 'Phase 4', title: 'Operations & maintenance', body: 'We stay reachable: extension, new use cases, adaptation to changed processes. No vendor lock-in, but a partnership.' },
  ];
  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" /> Our process</div>
          <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' }}>
            Four phases. <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>Transparent.</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>
  );
};

const TransformPrinciples = () => {
  const principles = [
    { t: 'No vendor lock-in', b: 'Open interfaces and documented architectures. You are not dependent on us.' },
    { t: 'GDPR & data protection', b: 'Data stays where it belongs. Hosting in Germany or on-premise, depending on requirements.' },
    { t: 'Documentation', b: 'Every solution comes with clear documentation. Your team can keep building on it.' },
    { t: 'Auditable', b: 'AI decisions are logged transparently. For your compliance and your customers.' },
  ];
  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)' }} /> Our principles</div>
          <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, color: '#fff', textWrap: 'balance' }}>
            Technology that <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>stays with you.</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 });
