// Pricing, Location, FAQ
const { useState: useStateFaq } = React;

function Pricing() {
  return (
    <section id="pricing">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Kosten & Kassen</span>
            <h2>Mit Rezept ist alles inklusive.</h2>
          </div>
          <p className="lead">
            Logopädische Therapie ist eine Heilmittelleistung — mit ärztlicher Verordnung
            übernehmen alle gesetzlichen und privaten Kassen die Kosten. Selbstzahler·innen
            sind willkommen.
          </p>
        </div>
        <div className="pricing-row">
          <div className="price-card">
            <span className="price-tag">Mit Rezept</span>
            <div className="price-amount">0 €<span className="period"> · für Sie</span></div>
            <div className="price-detail">
              Gesetzliche Versicherte zahlen lediglich 10 % Rezeptgebühr +
              10 € Verordnungsgebühr (befreit, falls Sie eine Befreiung haben).
            </div>
            <div className="price-feats">
              <div className="price-feat"><span className="check">✓</span><span>Diagnostik & Therapie 45 Min.</span></div>
              <div className="price-feat"><span className="check">✓</span><span>Schriftlicher Befund</span></div>
              <div className="price-feat"><span className="check">✓</span><span>Eltern- und Angehörigengespräch</span></div>
              <div className="price-feat"><span className="check">✓</span><span>Hausbesuch (auf Verordnung)</span></div>
            </div>
          </div>
          <div className="price-card featured">
            <span className="price-tag">Selbstzahler</span>
            <div className="price-amount">68 €<span className="period"> / 45 Min.</span></div>
            <div className="price-detail">
              Für Coaching-Anfragen, Stimmtraining für Sprechberufe, Transgender-Stimme
              oder ohne ärztliche Verordnung.
            </div>
            <div className="price-feats">
              <div className="price-feat"><span className="check">✓</span><span>Erstgespräch 30 Min. · 35 €</span></div>
              <div className="price-feat"><span className="check">✓</span><span>10er-Karte · 620 €</span></div>
              <div className="price-feat"><span className="check">✓</span><span>Online-Termine möglich</span></div>
              <div className="price-feat"><span className="check">✓</span><span>Kostenlose Absage bis 24 Std.</span></div>
            </div>
          </div>
        </div>
        <div className="insurance-strip">
          <div>
            <div className="eyebrow" style={{ marginBottom: 6 }}>Wir rechnen ab mit</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 18 }}>Allen gesetzlichen & privaten Kassen</div>
          </div>
          <div className="insurance-logos">
            {['AOK', 'TK', 'Barmer', 'DAK', 'IKK', 'BKK', 'Beihilfe'].map((n) =>
              <div className="ins-logo" key={n}>{n}</div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function MapBg() {
  // Stylized abstract street map
  return (
    <svg viewBox="0 0 600 480" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs>
        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(0,0,0,0.04)" strokeWidth="1"/>
        </pattern>
      </defs>
      <rect width="600" height="480" fill="var(--bg-soft)"/>
      <rect width="600" height="480" fill="url(#grid)"/>
      {/* River (Dreisam) */}
      <path d="M -20 360 Q 150 320 300 350 T 620 330" fill="none" stroke="var(--sage-soft)" strokeWidth="22" strokeLinecap="round"/>
      <path d="M -20 360 Q 150 320 300 350 T 620 330" fill="none" stroke="var(--sage)" strokeWidth="2" strokeDasharray="2 6" opacity="0.4"/>
      {/* Streets */}
      <path d="M 0 120 L 600 140" stroke="rgba(0,0,0,0.08)" strokeWidth="14"/>
      <path d="M 0 220 L 600 240" stroke="rgba(0,0,0,0.08)" strokeWidth="10"/>
      <path d="M 180 0 L 200 480" stroke="rgba(0,0,0,0.08)" strokeWidth="10"/>
      <path d="M 380 0 L 400 480" stroke="rgba(0,0,0,0.08)" strokeWidth="14"/>
      <path d="M 520 0 L 540 480" stroke="rgba(0,0,0,0.08)" strokeWidth="8"/>
      <path d="M 0 60 L 600 75" stroke="rgba(0,0,0,0.05)" strokeWidth="6"/>
      <path d="M 60 0 L 70 480" stroke="rgba(0,0,0,0.05)" strokeWidth="6"/>
      <path d="M 280 0 L 290 480" stroke="rgba(0,0,0,0.05)" strokeWidth="6"/>
      {/* Park */}
      <rect x="430" y="150" width="80" height="60" rx="8" fill="var(--sage-soft)" opacity="0.7"/>
      <text x="450" y="185" fontFamily="var(--font-mono)" fontSize="9" fill="var(--sage-deep)" letterSpacing="1">PARK</text>
      {/* Building blocks */}
      <rect x="220" y="160" width="140" height="50" rx="4" fill="rgba(0,0,0,0.03)"/>
      <rect x="80" y="260" width="90" height="50" rx="4" fill="rgba(0,0,0,0.03)"/>
      <rect x="420" y="280" width="100" height="40" rx="4" fill="rgba(0,0,0,0.03)"/>
      {/* Labels */}
      <text x="220" y="100" fontFamily="var(--font-mono)" fontSize="9" fill="rgba(0,0,0,0.35)" letterSpacing="1">GÜNTERSTALSTR.</text>
      <text x="20" y="200" fontFamily="var(--font-mono)" fontSize="9" fill="rgba(0,0,0,0.35)" letterSpacing="1">URACHSTR.</text>
      <text x="480" y="450" fontFamily="var(--font-mono)" fontSize="9" fill="rgba(0,0,0,0.35)" letterSpacing="1">SCHWARZWALDSTR.</text>
    </svg>
  );
}

function Location() {
  return (
    <section id="location" style={{ background: 'var(--bg-soft)' }}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Standort</span>
            <h2>Mitten in der Wiehre.</h2>
          </div>
          <p className="lead">
            Drei Minuten zu Fuß von der Stadtbahnhaltestelle Lorettostraße,
            zwei Tiefgaragen­plätze für Patient·innen, barrierefreier Zugang
            mit Aufzug.
          </p>
        </div>
        <div className="location-grid">
          <div className="location-info">
            <div className="info-row">
              <div className="info-label">Adresse</div>
              <div className="info-value">
                Praxis Andorfer<br />
                Günterstalstraße 47<br />
                79102 Freiburg-Wiehre
              </div>
            </div>
            <div className="info-row">
              <div className="info-label">Telefon</div>
              <div className="info-value">0761 / 38 41 920</div>
            </div>
            <div className="info-row">
              <div className="info-label">E-Mail</div>
              <div className="info-value">praxis@andorfer-logo.de</div>
            </div>
            <div className="info-row">
              <div className="info-label">Sprechzeiten</div>
              <div className="hours-grid" style={{ marginTop: 8 }}>
                <div className="hours-day">Mo–Do</div><div className="hours-time">08:00 – 19:00</div>
                <div className="hours-day">Freitag</div><div className="hours-time">08:00 – 14:00</div>
                <div className="hours-day">Samstag</div><div className="hours-time">nach Vereinbarung</div>
                <div className="hours-day">Sonntag</div><div className="hours-time">geschlossen</div>
              </div>
            </div>
            <a href="#booking" className="btn btn-sage" style={{ alignSelf: 'flex-start' }}>
              Termin online buchen →
            </a>
          </div>
          <div className="map">
            <MapBg />
            <div className="map-pin">
              <div className="pin-bubble">Günterstalstr. 47</div>
              <div className="pin-dot"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const FAQS = [
  {
    q: 'Brauche ich ein Rezept?',
    a: 'Für die Übernahme der Kosten durch die Krankenkasse ja — eine Heilmittelverordnung von Ihrer Hausärzt·in, Kinderärzt·in, HNO oder Neurolog·in. Für Selbstzahler-Anliegen (Coaching, Stimmtraining) brauchen Sie nichts mitbringen außer dem Wunsch.',
  },
  {
    q: 'Wie lange dauert eine Therapie?',
    a: 'Das hängt stark vom Anliegen ab. Eine Sigmatismus-Therapie beim Kind kann nach 10 Sitzungen abgeschlossen sein, eine Aphasie-Therapie nach Schlaganfall begleitet manchmal über Jahre. Wir besprechen die Prognose nach der Diagnostik realistisch und ehrlich.',
  },
  {
    q: 'Gibt es eine Wartezeit?',
    a: 'Aktuell ca. 4–6 Wochen für Erwachsene, 2–4 Wochen für dringende Kinder­anliegen. Akute Stimmstörungen und post-akute Aphasie nehmen wir innerhalb einer Woche auf — rufen Sie einfach an.',
  },
  {
    q: 'Kann ich Online-Therapie machen?',
    a: 'Ja, viele Inhalte funktionieren per Video sehr gut — vor allem Stimmtherapie, Aphasie-Folgetermine und LRS-Coaching. Mit Rezept ist Videotherapie seit 2021 anerkannt. Wir verwenden eine deutsche, DSGVO-konforme Plattform.',
  },
  {
    q: 'Was, wenn mein Kind nicht mitmachen will?',
    a: 'Dann hat es vermutlich gute Gründe. Wir nehmen uns Zeit, eine Beziehung aufzubauen, bevor wir „arbeiten". Manchmal ist die erste Stunde nur Spielen — und das ist auch Therapie.',
  },
  {
    q: 'Wie sieht es mit Datenschutz aus?',
    a: 'Wir arbeiten nach DSGVO und der Berufsordnung für Logopäd·innen. Befunde werden verschlüsselt gespeichert, an Ärzt·innen nur mit Ihrer schriftlichen Einwilligung weitergegeben. Eine Datenschutzerklärung liegt am Empfang aus.',
  },
];

function FAQ() {
  const [open, setOpen] = useStateFaq(0);
  return (
    <section id="faq">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Häufige Fragen</span>
            <h2>Bevor Sie anrufen.</h2>
          </div>
          <p className="lead">
            Sechs Fragen, die uns am häufigsten gestellt werden. Sollte Ihre Frage
            nicht dabei sein — schreiben Sie uns einfach. Wir antworten innerhalb eines Werktags.
          </p>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq-toggle">+</span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">
                  <p>{f.a}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pricing, Location, FAQ });