const NS = () => window.ZelgerOsteopathieDesignSystem_4d713d;
const Ic = ({ n, s = 26 }) => <i data-lucide={n} style={{ width: s, height: s }}></i>;

function SectionHead({ kicker, title, intro }) {
  return (
    <div style={{ maxWidth: '640px', margin: '0 auto', textAlign: 'center' }}>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-sm)', fontWeight: 500, letterSpacing: 'var(--tracking-wordmark)', textTransform: 'uppercase', color: 'var(--accent)' }}>{kicker}</span>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(1.7rem, 5.2vw, 2.25rem)', letterSpacing: 'var(--tracking-tight)', color: 'var(--text-strong)', margin: '14px 0 0', lineHeight: 1.15 }}>{title}</h2>
      {intro && <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-md)', lineHeight: 1.7, color: 'var(--text-muted)', margin: '18px 0 0' }}>{intro}</p>}
    </div>
  );
}

function Schwerpunkte() {
  const { ServiceCard } = NS();
  const items = [
    ['mic', 'Stimme & Atmung', 'Mit gezielten Techniken Verspannungen lösen und stimmlich wie physiologisch dein volles Potenzial entfalten.'],
    ['baby', 'Babys & Kinder', 'Sanfte Hilfe ab der Geburt. Bei Koliken, Stillproblemen oder Schluckstörungen begleite ich Babys achtsam für ihre bestmögliche Entwicklung.'],
    ['flower-2', 'Frauengesundheit', 'Der Körper einer Frau leistet Großartiges. Ich unterstütze ihn für mehr hormonelle Ausgeglichenheit, Wohlbefinden und innere Stärke.'],
    ['activity', 'Rücken, Kopf & Kiefer', 'Ich lindere nicht nur die Symptome. Ich spüre die Ursache auf und packe sie an der Wurzel.'],
  ];
  return (
    <section style={{ padding: 'clamp(56px, 9vw, 96px) clamp(20px, 5vw, 40px)', background: 'var(--bg-page)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <SectionHead kicker="Schwerpunkte" title="Behandlungsfelder meiner Praxis" intro="Osteopathie sieht den Menschen als Ganzes. Sie verbindet Anatomie, Physiologie und aktiviert die Selbstregulation deines Körpers." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '22px', marginTop: 'clamp(36px, 6vw, 56px)' }}>
          {items.map(([icon, title, text]) => (
            <ServiceCard key={title} icon={<Ic n={icon} />} title={title}>{text}</ServiceCard>
          ))}
        </div>
      </div>
    </section>
  );
}

function Ablauf() {
  const steps = [
    ['silvia-gespraech.jpg', 'messages-square', 'Ausführliches Gespräch', 'Welche Beschwerden, Vorerkrankungen oder früheren Verletzungen gibt es? Je besser ich Bescheid weiß, umso gezielter behandle ich.'],
    ['behandlung-ruecken.jpg', 'search', 'Untersuchung & Befund', 'Ich taste Spannungen und Bewegungseinschränkungen ab. So finden wir das Rädchen im Uhrwerk, das gerade hakt.'],
    ['behandlung-cranial.jpg', 'hand', 'Sanfte Behandlung', 'Mit sanften, aber wirkungsvollen Techniken unterstütze ich die natürliche Selbstregulation deines Körpers.'],
  ];
  return (
    <section style={{ padding: 'clamp(56px, 9vw, 96px) clamp(20px, 5vw, 40px)', background: 'var(--bg-sunk)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <SectionHead kicker="So läuft es ab" title="Wie eine Behandlung abläuft" intro="Unser Körper funktioniert wie ein fein abgestimmtes Uhrwerk. Schon kleinste Blockaden können das ganze System stören. Gemeinsam gehen wir der Ursache auf den Grund." />
        <div style={{ maxWidth: '880px', margin: 'clamp(32px, 5vw, 48px) auto 0' }}>
          <VideoFeature src="../../assets/osteopathie-erklaert.mp4" poster="../../assets/behandlung-cranial.jpg" />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '28px', marginTop: 'clamp(36px, 6vw, 56px)' }}>
          {steps.map(([img, icon, title, text], i) => (
            <div key={title} style={{ position: 'relative' }}>
              <div style={{ position: 'relative', aspectRatio: '4/3', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-md)', marginBottom: '20px' }}>
                <img src={`../../assets/${img}`} alt={title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                <span style={{ position: 'absolute', top: '14px', left: '14px', width: '44px', height: '44px', borderRadius: 'var(--radius-pill)', background: 'var(--warm-0)', boxShadow: 'var(--shadow-md)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent)' }}><Ic n={icon} s={20} /></span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: '12px', marginBottom: '8px' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-xl)', fontWeight: 300, color: 'var(--brand-orange-soft)' }}>{`0${i + 1}`}</span>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--text-lg)', color: 'var(--text-strong)', margin: 0 }}>{title}</h3>
              </div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 1.7, color: 'var(--text-muted)', margin: 0 }}>{text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Zitat() {
  return (
    <section style={{ position: 'relative', minHeight: 'clamp(380px, 60vw, 460px)', display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
      <img src="../../assets/behandlung-massage.jpg" alt="Behandlung in der Praxis" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(28,24,21,0.82) 0%, rgba(28,24,21,0.55) 60%, rgba(28,24,21,0.2) 100%)' }}></div>
      <div style={{ position: 'relative', maxWidth: 'var(--container)', margin: '0 auto', padding: '0 clamp(20px, 5vw, 40px)', width: '100%' }}>
        <p style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(1.5rem, 5vw, 2.25rem)', lineHeight: 1.3, color: 'var(--warm-50)', maxWidth: '560px', margin: 0 }}>
          „Hier ist der Ort, an dem dein Körper zur Ruhe kommt und du dich rundum wohlfühlen kannst.”
        </p>
        <span style={{ display: 'block', marginTop: '20px', fontFamily: 'var(--font-display)', fontSize: 'var(--text-sm)', letterSpacing: 'var(--tracking-wordmark)', textTransform: 'uppercase', color: 'var(--brand-orange-soft)' }}>Silvia Zelger</span>
      </div>
    </section>
  );
}

function UeberMich() {
  const { Badge } = NS();
  const isMobile = window.useIsMobile(860);
  return (
    <section style={{ padding: 'clamp(56px, 9vw, 96px) clamp(20px, 5vw, 40px)', background: 'var(--bg-page)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '0.9fr 1.1fr', gap: isMobile ? '32px' : '56px', alignItems: 'center' }}>
        <div style={{ aspectRatio: isMobile ? '4/3' : '1/1', borderRadius: 'var(--radius-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)' }}>
          <img src="../../assets/silvia-portrait.jpg" alt="Silvia Zelger" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        </div>
        <div>
          <Badge tone="sage">Über mich</Badge>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(1.7rem, 5.2vw, 2.25rem)', letterSpacing: 'var(--tracking-tight)', color: 'var(--text-strong)', margin: '18px 0 0', lineHeight: 1.15 }}>Ich bin Silvia.</h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-md)', lineHeight: 1.75, color: 'var(--text-muted)', margin: '20px 0 0' }}>
            Heilpraktikerin, Sängerin und Mutter von Zwillingen. Osteopathie ist für mich etwas ganz Besonderes, weil sie den Menschen als Ganzes sieht. Mein Ziel ist es, nicht nur Symptome zu lindern, sondern die Ursache aufzuspüren und sie an der Wurzel zu packen.
          </p>
        </div>
      </div>
    </section>
  );
}