/* Sections.jsx — Pain points, Cawi Way, Stats, Logos, About, CTA, Footer */

/* ─────────── ICONS — minimal, 1px stroke, accent blue ─────────── */
const Icon = {
  Search: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <circle cx="10.5" cy="10.5" r="6.5" />
      <path d="M20 20l-4.5-4.5" />
    </svg>
  ),
  Build: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M4 7l8-4 8 4v10l-8 4-8-4V7z" />
      <path d="M4 7l8 4 8-4" />
      <path d="M12 11v10" />
    </svg>
  ),
  Compass: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <circle cx="12" cy="12" r="9" />
      <path d="M15.5 8.5l-2 5-5 2 2-5 5-2z" />
    </svg>
  ),
  Spark: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8" />
    </svg>
  ),
  Shield: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z" />
      <path d="M9 12l2 2 4-4" />
    </svg>
  ),
  Cycle: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M3 12a9 9 0 0 1 15-6.7L21 8" />
      <path d="M21 4v4h-4" />
      <path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
      <path d="M3 20v-4h4" />
    </svg>
  ),
  Doc: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
      <path d="M14 3v6h6" />
      <path d="M8 13h8M8 17h6" />
    </svg>
  ),
  Heart: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.7A4 4 0 0 1 19 10c0 5.5-7 10-7 10z" />
    </svg>
  ),
  Hammer: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M14 6l6 6-3 3-6-6 3-3z" />
      <path d="M11 9l-7 7 3 3 7-7" />
    </svg>
  ),
  Users: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <circle cx="9" cy="9" r="3" />
      <path d="M3 19c0-3.3 2.7-6 6-6s6 2.7 6 6" />
      <circle cx="17" cy="8" r="2.5" />
      <path d="M15 19c0-2.5 1.5-4.5 4-5" />
    </svg>
  ),
  Bot: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <rect x="4" y="7" width="16" height="13" rx="2" />
      <circle cx="9" cy="13" r="1" />
      <circle cx="15" cy="13" r="1" />
      <path d="M12 3v4M9 17h6" />
    </svg>
  ),
};

/* ─────────── PAIN POINT SECTION ─────────── */
const PainPoints = () => {
  return (
    <section className="section-sm" id="herausforderung" data-screen-label="PainPoints" style={{ paddingTop: 'clamp(72px, 8vw, 128px)', paddingBottom: 'clamp(72px, 8vw, 128px)', position: 'relative', overflow: 'hidden' }}>
      {/* 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 style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 'clamp(40px, 6vw, 120px)', alignItems: 'start' }} className="pp-grid">
          <div>
            <div className="eyebrow eyebrow-row" style={{ marginBottom: 48 }}>
              <span className="eyebrow-dot" /> Die Herausforderung
            </div>
            <div style={{ fontSize: 13, color: 'var(--fg-3)', letterSpacing: '0.02em', lineHeight: 1.5, maxWidth: '24ch' }}>
              Die meisten Unternehmen bemerken es erst, wenn es zu spät ist. Oder zu teuer.
            </div>
          </div>
          <div>
            <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, maxWidth: '20ch', textWrap: 'balance' }}>
              Unternehmen verlieren Zeit und Geld durch Prozesse, die <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>niemand hinterfragt.</em>
            </h2>
            <p style={{ marginTop: 36, fontSize: 18, lineHeight: 1.55, color: 'var(--fg-2)', maxWidth: '54ch' }}>
              Ein Tool gekauft. Ein Experiment gestartet. Jemanden für „KI" eingestellt. Nichts hält, weil die Maßnahmen nie an den echten Problemen andocken.
            </p>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .pp-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
};

/* ─────────── CAWI WAY — 3 STEPS ─────────── */
const CawiWay = () => {
  const steps = [
    {
      label: 'Schritt Eins',
      title: 'Analyse',
      body: 'Wir gehen Ihr Unternehmen Abteilung für Abteilung durch und finden, wo Zeit verloren geht.',
      icon: <Icon.Search />,
    },
    {
      label: 'Schritt Zwei',
      title: 'Lösung',
      body: 'Wir zeigen, welche dieser Aufgaben KI automatisieren oder eliminieren kann. Konkret, auf Ihr Unternehmen zugeschnitten.',
      icon: <Icon.Spark />,
    },
    {
      label: 'Schritt Drei',
      title: 'Roadmap',
      body: 'Sie bekommen eine Roadmap mit Prioritäten, Kosten und erwarteten Ergebnissen. Umsetzbar.',
      icon: <Icon.Compass />,
    },
  ];

  return (
    <section className="section bg-soft grain-light" id="ansatz" data-screen-label="CawiWay">
      <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 Ansatz
          </div>
          <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' }}>
            Wir starten nicht mit Tools. Wir starten <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>beim Problem.</em>
          </h2>
        </div>

        <div className="way-grid">
          {steps.map((s, i) => (
            <div key={s.title} className="way-card r-up lift" style={{ transitionDelay: (80 + i*120) + 'ms' }}>
              <div style={{ color: 'var(--color-accent)', marginBottom: 32 }}>{s.icon}</div>
              <div className="way-meta">
                <span className="eyebrow" style={{ color: 'var(--fg-3)' }}>{s.label}</span>
              </div>
              <h3 style={{
                fontFamily: 'var(--font-serif)',
                fontSize: 44, fontWeight: 400, fontStyle: 'italic',
                lineHeight: 1, letterSpacing: '-0.02em',
                margin: '24px 0 24px', color: 'var(--fg-1)'
              }}>
                {s.title}
              </h3>
              <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--fg-2)', margin: 0, maxWidth: '34ch' }}>
                {s.body}
              </p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .way-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-hairline); border: 1px solid var(--border-hairline); }
        .way-card { background: #fff; padding: clamp(32px, 3.5vw, 56px); min-height: 360px; display: flex; flex-direction: column; }
        .way-meta { display: flex; align-items: center; gap: 16px; }
        .way-num { font-family: var(--font-mono); font-size: 12px; color: var(--color-accent); }
        @media (max-width: 880px) { .way-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
};

/* ─────────── STATS — dunkler Ink-Block mit Glow ─────────── */
const Stats = () => {
  const stats = [
    { n: '5+',     l: 'Jahre am Markt' },
    { n: '28',     l: 'Tage von Analyse zu Roadmap' },
    { n: '20+',    l: 'Unternehmen aktiv betreut' },
    { n: '70 %',   l: 'Typische Entlastung in betroffenen Prozessen' },
  ];
  return (
    <section className="section bg-stats-ink" id="ergebnisse" data-screen-label="Stats" style={{ position: 'relative', overflow: 'hidden' }}>
      {/* Soft ornamental grid — barely visible, reads as texture */}
      <svg aria-hidden style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.04, zIndex: 0, pointerEvents: 'none' }}>
        <defs>
          <pattern id="statsGrid" width="80" height="80" patternUnits="userSpaceOnUse">
            <path d="M 80 0 L 0 0 0 80" fill="none" stroke="#fff" strokeWidth="1" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#statsGrid)" />
      </svg>
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 640, marginBottom: 'clamp(48px, 6vw, 80px)' }}>
          <div className="eyebrow eyebrow-row" style={{ marginBottom: 28, color: 'rgba(255,255,255,0.7)' }}>
            <span className="eyebrow-dot" style={{ background: 'rgba(255,255,255,0.6)' }} /> In Zahlen
          </div>
          <h2 style={{ fontSize: 'var(--fs-h1)', fontWeight: 500, lineHeight: 1.1, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance', color: '#fff' }}>
            Messbare Ergebnisse für inhaber­geführte Unternehmen.
          </h2>
        </div>
        <div className="stats-grid">
          {stats.map((s, i) => (
            <div key={i} className="stat r-up" style={{ transitionDelay: (80 + i*100) + 'ms' }}>
              <div className="stat-n">{s.n}</div>
              <div className="stat-l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,0.12); }
        .stat { padding: 48px 24px; border-right: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; align-items: center; text-align: center; }
        .stat:last-child { border-right: none; }
        .stat-n { font-family: var(--font-sans); font-size: clamp(56px, 6vw, 88px); font-weight: 400; letter-spacing: -0.04em; line-height: 1; color: #fff; margin-bottom: 20px; background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.78) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        .stat-l { font-size: 14px; line-height: 1.4; color: rgba(255,255,255,0.65); max-width: 22ch; }
        @media (max-width: 880px) {
          .stats-grid { grid-template-columns: repeat(2, 1fr); }
          .stat { padding: 36px 16px; }
          .stat-n { font-size: clamp(48px, 12vw, 72px); margin-bottom: 14px; }
          .stat:nth-child(2) { border-right: none; }
          .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.12); }
        }
        @media (max-width: 480px) {
          .stats-grid { grid-template-columns: 1fr; }
          .stat { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.12); padding: 32px 8px; }
          .stat:last-child { border-bottom: none; }
        }
      `}</style>
    </section>
  );
};

/* ─────────── SERVICES (zwei Leistungen) ─────────── */
const Services = () => {
  const services = [
    {
      eyebrow: 'Leistung Eins',
      title: 'Das KI-Audit',
      body: 'Wir analysieren Ihr Unternehmen systematisch und liefern eine Roadmap mit priorisierten Maßnahmen. In 14 bis 28 Tagen wissen Sie, wo KI bei Ihnen sinnvoll eingesetzt werden kann.',
      cta: { label: 'Mehr zum KI-Audit', href: 'ki-audit.html' },
      icon: <Icon.Search size={32} />,
    },
    {
      eyebrow: 'Leistung Zwei',
      title: 'Individuelle Umsetzung',
      body: 'Auf Basis des Audits setzen wir die priorisierten Maßnahmen um. KI-Agenten, Prozess­automatisierungen, individuelle KI-Anwendungen, passend zu Ihrer Infrastruktur.',
      cta: { label: 'Mehr zur Umsetzung', href: 'transformation.html' },
      icon: <Icon.Build size={32} />,
    },
  ];

  return (
    <section className="section" id="leistungen" data-screen-label="Services" style={{ position: 'relative', background: '#fff' }}>
      <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 machen
          </div>
          <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' }}>
            Zwei <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>Leistungen.</em>
          </h2>
        </div>

        <div className="services-grid">
          {services.map((s, i) => (
            <article key={s.title} className="service-card r-up lift" style={{ transitionDelay: (80 + i*120) + 'ms' }}>
              <div className="service-card-icon" aria-hidden>{s.icon}</div>
              <div className="eyebrow" style={{ color: 'var(--fg-3)', marginBottom: 24 }}>
                {s.eyebrow}
              </div>
              <h3 style={{
                fontSize: 'clamp(32px, 3.4vw, 48px)',
                fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em',
                margin: '0 0 24px', color: 'var(--fg-1)'
              }}>
                {s.title}
              </h3>
              <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', margin: '0 0 32px', maxWidth: '40ch', flex: 1 }}>
                {s.body}
              </p>
              <a href={s.cta.href} className="link-arrow">
                {s.cta.label} <span className="arrow" aria-hidden>→</span>
              </a>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        .services-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 1px;
          background: var(--border-hairline);
          border-top: 1px solid var(--border-hairline);
          border-bottom: 1px solid var(--border-hairline);
        }
        .service-card {
          background: #fff;
          padding: clamp(40px, 4vw, 72px) clamp(32px, 3vw, 56px);
          min-height: 420px;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          position: relative;
        }
        .service-card-icon {
          color: var(--color-accent);
          margin-bottom: 36px;
          width: 64px; height: 64px;
          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.04) 0%, transparent 60%);
        }
        @media (max-width: 880px) {
          .services-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
};

/* ─────────── CLIENT LOGOS — marquee ─────────── */
const ClientLogos = () => {
  const logos = [
    { name: 'Waldkraft',         src: 'assets/clients/strip/waldkraft-mono.png',       h: 34 },
    { name: 'Time Experts',      src: 'assets/clients/strip/time-experts.png',         h: 26 },
    { name: 'Dreyer Service',    src: 'assets/clients/strip/dreyer-service-mono.png',  h: 44 },
    { name: 'Kardiologicum',     src: 'assets/clients/strip/kardiologicum.png',        h: 50 },
    { name: 'Kessler & Pfaff',   src: 'assets/clients/strip/kessler-pfaff-mono.png',   h: 68 },
    { name: 'SKS',               src: 'assets/clients/strip/sks-services.png',         h: 54 },
    { name: 'P&M',               src: 'assets/clients/strip/pm-lohnsteuerhilfe.png',   h: 60 },
    { name: 'LIDE',              src: 'assets/clients/strip/lide.png',                 h: 60 },
  ];

  const loop = [...logos, ...logos];

  return (
    <section className="section-sm" data-screen-label="ClientLogos" style={{ borderTop: '1px solid var(--border-hairline)', paddingTop: 72, paddingBottom: 72, background: '#fff' }}>
      <div className="container">
        <div className="eyebrow" style={{ textAlign: 'center', marginBottom: 56 }}>
          Sie vertrauen auf Cawi-Media
        </div>
      </div>
      <div className="marquee" aria-label="Kundenlogos">
        <div className="marquee-track">
          {loop.map((l, i) => (
            <div key={i} className="marquee-item" title={l.name}>
              <img
                alt={l.name}
                src={l.src}
                style={{ height: l.h, width: 'auto', maxWidth: 220, objectFit: 'contain', opacity: 0.62 }}
              />
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .marquee {
          overflow: hidden;
          position: relative;
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
        }
        .marquee-track {
          display: flex;
          align-items: center;
          gap: clamp(48px, 6vw, 96px);
          width: max-content;
          animation: marquee-scroll 60s linear infinite;
          padding: 8px 0;
        }
        .marquee-item {
          flex: 0 0 auto;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          height: 96px;
          padding: 0 8px;
        }
        .marquee-item img {
          transition: opacity 220ms var(--ease-out);
        }
        .marquee:hover .marquee-track { animation-play-state: paused; }
        .marquee-item:hover img { opacity: 1 !important; }
        @keyframes marquee-scroll {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }
        @media (prefers-reduced-motion: reduce) {
          .marquee-track { animation: none; }
        }
      `}</style>
    </section>
  );
};

/* ─────────── ABOUT CARL ─────────── */
const About = () => {
  return (
    <section className="section bg-soft grain-light" id="ueber" data-screen-label="About">
      <div className="container">
        <div className="about-grid">
          <div className="about-photo r-left">
            <div className="about-photo-inner lift">
              <img
                alt="Carl Wiesemann, Gründer Cawi-Media"
                src="assets/photos/carl-portrait-2026.png"
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%' }}
              />
            </div>
            <div className="about-caption">
              <span className="about-caption-name">Carl Wiesemann</span>
              <span className="about-caption-role">Gründer, Cawi-Media</span>
            </div>
          </div>

          <div>
            <div className="eyebrow eyebrow-row" style={{ marginBottom: 28 }}>
              <span className="eyebrow-dot" /> Über Cawi-Media
            </div>
            <h2 style={{ fontSize: 'var(--fs-h1)', fontWeight: 500, lineHeight: 1.12, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' }}>
              Es beginnt damit, dass wir <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>das Unternehmen</em> dahinter verstehen.
            </h2>
            <div style={{ marginTop: 40, maxWidth: '52ch' }}>
              <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', margin: '0 0 20px' }}>
                Cawi-Media hat als Digital­agentur angefangen. Über die Jahre haben wir mit Unternehmen aus ganz verschiedenen Branchen gearbeitet: Steuer­beratung, Immobilien, Industrie, Gesundheit.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 }}>
                In den letzten Jahren haben wir gesehen, wie genau dort der Bedarf an KI immer größer wurde. Diesen Bedarf wollten wir decken. Heute begleiten wir inhaber­geführte Mittelstands­unternehmen von der ersten Analyse bis zum laufenden Betrieb.
              </p>
            </div>
            <div style={{ marginTop: 40 }}>
              <a href="ueber-uns.html" className="link-arrow">
                Mehr über Cawi-Media <span className="arrow" aria-hidden>→</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
        .about-photo { position: relative; }
        .about-photo-inner { aspect-ratio: 4 / 5; background: var(--bg-3); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(15,18,22,0.25); }
        .about-caption { margin-top: 20px; display: flex; flex-direction: column; gap: 2px; }
        .about-caption-name { font-size: 15px; font-weight: 500; color: var(--fg-1); }
        .about-caption-role { font-size: 13px; color: var(--fg-3); }
        @media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
};

/* ─────────── BIG CTA (Cawi-Blau, per Master-Brief) ─────────── */
const CTABand = ({ variant = 'home' }) => {
  const V = {
    home: {
      title: <>Wo bringt KI Ihr Unternehmen <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>voran?</em></>,
      sub: 'Eine Viertelstunde Telefonat. Wir schauen gemeinsam, ob und wie KI bei Ihnen sinnvoll eingesetzt werden kann.',
      cta: 'Kostenloses Erstgespräch buchen',
    },
    audit: {
      title: <>Herausfinden, wo KI bei Ihnen <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>wirklich hilft.</em></>,
      sub: 'Eine Viertelstunde Telefonat. Unverbindlich.',
      cta: 'KI-Audit anfragen',
    },
    transformation: {
      title: <>Haben Sie bereits ein KI-Audit? Dann sprechen wir über die <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>Umsetzung.</em></>,
      sub: 'Eine Viertelstunde Telefonat. Unverbindlich.',
      cta: 'Projekt besprechen',
    },
    about: {
      title: <>Lassen Sie uns <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>kennenlernen.</em></>,
      sub: 'Eine Viertelstunde Telefonat. Unverbindlich.',
      cta: 'Kostenloses Erstgespräch buchen',
    },
  };
  const v = V[variant] || V.home;
  return (
    <section className="section bg-ink-grad" id="kontakt" data-screen-label="CTA" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="container r-up" style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>
        <h2 className="cta-heading" style={{
          fontSize: 'var(--fs-display-l)',
          fontWeight: 500, lineHeight: 1.05, letterSpacing: '-0.025em',
          color: '#fff', margin: '0 auto', maxWidth: '18ch', textWrap: 'balance'
        }}>
          {v.title}
        </h2>
        <p style={{ marginTop: 32, fontSize: 18, lineHeight: 1.5, color: 'rgba(255,255,255,0.88)', maxWidth: '52ch', margin: '32px auto 0', textWrap: 'balance' }}>
          {v.sub}
        </p>
        <div style={{ marginTop: 48, display: 'flex', justifyContent: 'center', gap: 16, flexWrap: 'wrap' }}>
          <a href="kontakt.html" className="btn btn-white">
            {v.cta}
            <span className="arrow" aria-hidden>→</span>
          </a>
        </div>
      </div>

      {/* Soft radial glow — toned down + offset away from heading <em> */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none',
        background: 'radial-gradient(700px 380px at 50% 110%, rgba(21,84,168,0.22), transparent 70%), radial-gradient(500px 300px at 12% 18%, rgba(21,84,168,0.10), transparent 70%)',
      }} />
      <style>{`
        .cta-heading em { color: #fff !important; }
      `}</style>

      {/* Soft ornamental grid lines */}
      <svg aria-hidden style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.03, zIndex: 1 }}>
        <defs>
          <pattern id="ctaGrid" width="80" height="80" patternUnits="userSpaceOnUse">
            <path d="M 80 0 L 0 0 0 80" fill="none" stroke="#fff" strokeWidth="1" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#ctaGrid)" />
      </svg>
    </section>
  );
};

/* ─────────── FOOTER ─────────── */
const Footer = () => {
  return (
    <footer style={{ background: 'var(--color-ink)', color: 'rgba(255,255,255,0.72)', paddingTop: 96, paddingBottom: 40 }} data-screen-label="Footer">
      <div className="container">
        <div className="footer-grid">
          {/* Left: brand + address */}
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', marginBottom: 24 }}>
              <img src="assets/cawi-media-logo-white.png" alt="Cawi-Media" style={{ height: 30, width: 'auto' }} />
            </div>
            <div style={{ fontSize: 14, lineHeight: 1.65, color: 'rgba(255,255,255,0.6)' }}>
              Cawi-Media<br />
              St.-Wigbert-Straße 30<br />
              34560 Fritzlar, Hessen
            </div>
          </div>

          {/* Middle: navigation */}
          <div>
            <div className="footer-label">Navigation</div>
            <ul className="footer-list">
              <li><a href="ki-audit.html">KI-Audit</a></li>
              <li><a href="transformation.html">Transformation</a></li>
              <li><a href="ueber-uns.html">Über uns</a></li>
              <li><a href="kontakt.html">Kontakt</a></li>
            </ul>
          </div>

          {/* Right: contact */}
          <div>
            <div className="footer-label">Kontakt</div>
            <ul className="footer-list">
              <li><a href="mailto:info@cawi-media.de">info@cawi-media.de</a></li>
              <li><a href="tel:+4917681522326">+49 176 81522326</a></li>
              <li style={{ marginTop: 4 }}>
                <a href="https://www.linkedin.com/in/carl-wiesemann-56b026238/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" className="footer-social">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.99 0 1.78-.77 1.78-1.72V1.72C24 .77 23.21 0 22.22 0z"/>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </div>

        <hr style={{ height: 1, background: 'rgba(255,255,255,0.1)', border: 0, margin: '64px 0 24px' }} />

        <div className="footer-bottom">
          <span>© 2026 Cawi-Media</span>
          <div style={{ display: 'flex', gap: 28 }}>
            <a href="impressum.html">Impressum</a>
            <a href="datenschutz.html">Datenschutz</a>
          </div>
        </div>
      </div>
      <style>{`
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
        .footer-label { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 18px; }
        .footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
        .footer-list a { color: rgba(255,255,255,0.8); }
        .footer-list a:hover { color: #fff; opacity: 1; }
        .footer-social { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; color: rgba(255,255,255,0.72); transition: color 0.2s, border-color 0.2s, background 0.2s; }
        .footer-social:hover { color: #fff; border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
        .footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,255,255,0.55); }
        .footer-bottom a { color: rgba(255,255,255,0.7); }
        .footer-bottom a:hover { color: #fff; opacity: 1; }
        @media (max-width: 880px) {
          .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
          .footer-bottom { flex-direction: column; gap: 16px; align-items: flex-start; }
        }
      `}</style>
    </footer>
  );
};

Object.assign(window, { Icon, PainPoints, CawiWay, Stats, Services, ClientLogos, About, CTABand, Footer });
