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

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>
  ),
};

const PainPoints = () => (
  <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' }}>
    <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" /> The challenge
          </div>
          <div style={{ fontSize: 13, color: 'var(--fg-3)', letterSpacing: '0.02em', lineHeight: 1.5, maxWidth: '24ch' }}>
            Most companies only notice when it's too late. Or too expensive.
          </div>
        </div>
        <div>
          <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, maxWidth: '20ch', textWrap: 'balance' }}>
            Companies lose time and money to processes that <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>no one questions.</em>
          </h2>
          <p style={{ marginTop: 36, fontSize: 18, lineHeight: 1.55, color: 'var(--fg-2)', maxWidth: '54ch' }}>
            A tool purchased. An experiment started. Someone hired for "AI." Nothing sticks, because the measures never connect to the real problems.
          </p>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 880px) {
        .pp-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
      }
    `}</style>
  </section>
);

const CawiWay = () => {
  const steps = [
    { label: 'Step One', title: 'Analysis', body: 'We go through your business department by department and find where time is lost.', icon: <Icon.Search /> },
    { label: 'Step Two', title: 'Solution', body: 'We show which of these tasks AI can automate or eliminate. Concrete, tailored to your business.', icon: <Icon.Spark /> },
    { label: 'Step Three', title: 'Roadmap', body: 'You receive a roadmap with priorities, costs and expected outcomes. Actionable.', 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" /> Our approach
          </div>
          <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' }}>
            We don't start with tools. We start <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>with the 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>
  );
};

const Stats = () => {
  const stats = [
    { n: '5+',     l: 'Years in business' },
    { n: '28',     l: 'Days from analysis to roadmap' },
    { n: '20+',    l: 'Companies actively supported' },
    { n: '70 %',   l: 'Typical efficiency gain in affected processes' },
  ];
  return (
    <section className="section bg-stats-ink" id="ergebnisse" data-screen-label="Stats" style={{ position: 'relative', overflow: 'hidden' }}>
      <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)' }} /> By the numbers
          </div>
          <h2 style={{ fontSize: 'var(--fs-h1)', fontWeight: 500, lineHeight: 1.1, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance', color: '#fff' }}>
            Measurable results for owner-led businesses.
          </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>
  );
};

const Services = () => {
  const services = [
    {
      eyebrow: 'Service One',
      title: 'The AI Audit',
      body: 'We analyze your business systematically and deliver a roadmap with prioritized measures. In 14 to 28 days you know where AI can be sensibly deployed.',
      cta: { label: 'More on the AI Audit', href: 'ki-audit.html' },
      icon: <Icon.Search size={32} />,
    },
    {
      eyebrow: 'Service Two',
      title: 'Custom Implementation',
      body: 'Based on the audit, we implement the prioritized measures. AI agents, process automation, individual AI applications — fitted to your infrastructure.',
      cta: { label: 'More on implementation', 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" /> What we do
          </div>
          <h2 style={{ fontSize: 'var(--fs-display-m)', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' }}>
            Two <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>services.</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>
  );
};

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 }}>
          Trusted by
        </div>
      </div>
      <div className="marquee" aria-label="Client logos">
        <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>
  );
};

const About = () => (
  <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, Founder of 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">Founder, Cawi Media</span>
          </div>
        </div>
        <div>
          <div className="eyebrow eyebrow-row" style={{ marginBottom: 28 }}>
            <span className="eyebrow-dot" /> About Cawi Media
          </div>
          <h2 style={{ fontSize: 'var(--fs-h1)', fontWeight: 500, lineHeight: 1.12, letterSpacing: '-0.02em', margin: 0, textWrap: 'balance' }}>
            It starts with us understanding <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>the business</em> behind it all.
          </h2>
          <div style={{ marginTop: 40, maxWidth: '52ch' }}>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', margin: '0 0 20px' }}>
              Cawi Media started as a digital agency. Over the years, we've worked with companies across very different industries: tax consulting, real estate, manufacturing, healthcare.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 }}>
              In recent years we've seen exactly there how the demand for AI kept growing. We wanted to meet that demand. Today we accompany owner-led mid-market companies from initial analysis through ongoing operation.
            </p>
          </div>
          <div style={{ marginTop: 40 }}>
            <a href="ueber-uns.html" className="link-arrow">
              More about 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>
);

const CTABand = ({ variant = 'home' }) => {
  const V = {
    home: {
      title: <>Where can AI move your business <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>forward?</em></>,
      sub: 'A 15-minute call. We look together at whether and how AI can be sensibly used in your business.',
      cta: 'Book a free initial call',
    },
    audit: {
      title: <>Find out where AI <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>actually helps</em> your business.</>,
      sub: 'A 15-minute call. No commitment.',
      cta: 'Request the AI Audit',
    },
    transformation: {
      title: <>Already have an AI Audit? Then let's discuss <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>implementation.</em></>,
      sub: 'A 15-minute call. No commitment.',
      cta: 'Discuss your project',
    },
    about: {
      title: <>Let's get to <em style={{ fontFamily: 'var(--font-serif)', fontWeight: 400 }}>know each other.</em></>,
      sub: 'A 15-minute call. No commitment.',
      cta: 'Book a free initial call',
    },
  };
  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>
      <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>
      <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>
  );
};

const Footer = () => (
  <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">
        <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, Germany
          </div>
        </div>
        <div>
          <div className="footer-label">Navigation</div>
          <ul className="footer-list">
            <li><a href="ki-audit.html">AI Audit</a></li>
            <li><a href="transformation.html">Transformation</a></li>
            <li><a href="ueber-uns.html">About</a></li>
            <li><a href="kontakt.html">Contact</a></li>
          </ul>
        </div>
        <div>
          <div className="footer-label">Contact</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">Imprint</a>
          <a href="datenschutz.html">Privacy</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 });
