// About, Services, Process
const { useState: useStateSvc } = React;

function About() {
  return (
    <section className="about" id="about">
      <div className="container">
        <div className="about-grid">
          <div className="placeholder about-portrait" data-label="Portrait Maja Andorfer"></div>
          <div className="about-body">
            <span className="eyebrow">Über die Praxis</span>
            <h2>Sprache ist Beziehung. Therapie auch.</h2>
            <div className="about-quote">
              „Mir geht es nicht darum, Defizite zu korrigieren, sondern Menschen
              zu begleiten, bis sie sich wieder selbst hören mögen."
            </div>
            <p>
              Seit 2014 begleite ich Kinder, Jugendliche und Erwachsene mit Sprach-,
              Sprech-, Stimm- und Schluckstörungen. Die Praxis liegt im Herzen der
              Wiehre — barrierefrei, ruhig, mit drei lichtdurchfluteten Therapieräumen.
            </p>
            <p>
              Ich arbeite eng mit Hausärzt·innen, HNO, Pädaudiologie, Kitas und Schulen
              zusammen. Was zählt, ist nicht das Verfahren — sondern dass es zu Ihnen passt.
            </p>
            <div className="about-creds">
              <div className="cred">
                <div className="y">2008–2011</div>
                <div className="t">Studium Logopädie, Hochschule Fresenius</div>
              </div>
              <div className="cred">
                <div className="y">2014</div>
                <div className="t">Eröffnung Praxis Freiburg-Wiehre</div>
              </div>
              <div className="cred">
                <div className="y">Zertifizierungen</div>
                <div className="t">LSVT LOUD, PROMPT, NF!T</div>
              </div>
              <div className="cred">
                <div className="y">Lehrtätigkeit</div>
                <div className="t">Dozentin · Universitätsklinikum Freiburg</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const SERVICES = [
  {
    glyph: 'A',
    title: 'Aussprachestörungen',
    summary: 'Phonetische und phonologische Störungen bei Kindern — vom Lispeln bis zur verbalen Entwicklungsdyspraxie.',
    bullets: [
      'Artikulationstherapie (z.B. /s/, /sch/, /k/)',
      'Phonologische Prozessanalyse',
      'PROMPT-Methode bei VED',
      'Mundmotorisches Training',
    ],
  },
  {
    glyph: 'S',
    title: 'Sprachentwicklung',
    summary: 'Wortschatz, Grammatik und Sprachverständnis — für Late Talker bis Schulkind.',
    bullets: [
      'Late-Talker-Beratung (ab 24 Monaten)',
      'Kontextoptimierter Grammatikaufbau',
      'Wortschatzerweiterung',
      'Sprachverständnis & Erzählfähigkeit',
    ],
  },
  {
    glyph: 'L',
    title: 'Lese-Rechtschreib-Schwäche',
    summary: 'Diagnostik und Therapie bei LRS, auditiver Verarbeitung und schulischen Schreibproblemen.',
    bullets: [
      'Standardisierte LRS-Diagnostik',
      'Phonologische Bewusstheit',
      'Lesestrategien & Leseflüssigkeit',
      'Eltern- und Lehrercoaching',
    ],
  },
  {
    glyph: 'St',
    title: 'Stottern & Poltern',
    summary: 'Mit dem Sprechen Frieden schließen — für Kinder, Jugendliche und Erwachsene.',
    bullets: [
      'KIDS-Programm (Kinder)',
      'Stottermodifikation nach Van Riper',
      'Mini-KIDS für Kleinkinder',
      'Begleitung im Schul- und Berufsalltag',
    ],
  },
  {
    glyph: 'V',
    title: 'Stimmtherapie',
    summary: 'Bei Heiserkeit, Stimmlippenknötchen, funktionellen und psychogenen Stimmstörungen.',
    bullets: [
      'Akzentmethode nach Smith',
      'Lax Vox & Manuelle Stimmtherapie',
      'Sprechberufe (Lehrer·innen, Coaches)',
      'Transgender-Stimmcoaching',
    ],
  },
  {
    glyph: 'N',
    title: 'Neurologie & Aphasie',
    summary: 'Nach Schlaganfall, Schädel-Hirn-Trauma oder bei Parkinson — Wege zurück ins Sprechen finden.',
    bullets: [
      'Aphasie-Therapie (modellbasiert)',
      'Dysarthrie & LSVT LOUD bei Parkinson',
      'Sprechapraxie',
      'Angehörigenberatung',
    ],
  },
  {
    glyph: 'D',
    title: 'Dysphagie',
    summary: 'Schluckstörungen sicher diagnostizieren und behandeln — bei Erwachsenen und im Säuglingsalter.',
    bullets: [
      'FEES-Befundung (in Kooperation)',
      'Funktionelle Dysphagietherapie (FDT)',
      'Trachealkanülen-Management',
      'Beratung bei Demenz',
    ],
  },
  {
    glyph: 'H',
    title: 'Hausbesuche',
    summary: 'Wenn der Weg in die Praxis schwerfällt — Therapie zu Hause oder in der Pflegeeinrichtung.',
    bullets: [
      'In Freiburg & Umkreis 15 km',
      'Mit ärztlicher Verordnung',
      'Auch in Pflegeheimen',
      'Termine Mo–Fr',
    ],
  },
];

function Service({ s, i, open, onToggle }) {
  return (
    <div className={`service ${open ? 'open' : ''}`} onClick={onToggle}>
      <div className="service-num">{(i + 1).toString().padStart(2, '0')} / {SERVICES.length.toString().padStart(2, '0')}</div>
      <div className="service-icon">{s.glyph}</div>
      <h3>{s.title}</h3>
      <div className="service-summary">{s.summary}</div>
      <div className="service-detail">
        <div className="service-detail-inner">
          <ul>
            {s.bullets.map((b) => <li key={b}>{b}</li>)}
          </ul>
        </div>
      </div>
      <div className="service-expand">
        <span>{open ? 'Schließen' : 'Mehr erfahren'}</span>
        <span className="service-chev">↓</span>
      </div>
    </div>
  );
}

function Services() {
  const [openIdx, setOpenIdx] = useStateSvc(0);
  return (
    <section id="services">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Therapieangebot</span>
            <h2>Acht Schwerpunkte. Ein Anliegen: Sie.</h2>
          </div>
          <p className="lead">
            Vom ersten Wort bis zur Wiedergewinnung der Stimme nach einem Schlaganfall —
            jede Therapie wird individuell zusammengestellt, ärztlich verordnet und kassenfinanziert.
          </p>
        </div>
        <div className="services-grid">
          {SERVICES.map((s, i) => (
            <Service
              key={s.title}
              s={s}
              i={i}
              open={openIdx === i}
              onToggle={() => setOpenIdx(openIdx === i ? -1 : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

const STEPS = [
  {
    t: 'Verordnung',
    d: 'Ihr·e Ärzt·in stellt eine Heilmittelverordnung (Rezept) aus. Bringen Sie diese zum ersten Termin mit.',
  },
  {
    t: 'Anamnese',
    d: 'Wir sprechen ausführlich über Anliegen, Vorgeschichte und Ziele. 60 Minuten, ohne Druck.',
  },
  {
    t: 'Diagnostik',
    d: 'Standardisierte Tests und Beobachtung. Sie erhalten einen schriftlichen Befund für Ärzt·in und Schule.',
  },
  {
    t: 'Therapie',
    d: '1–2× wöchentlich, 45 Minuten. Mit klaren Zwischenzielen und enger Einbindung der Familie.',
  },
];

function Process() {
  return (
    <section className="process" id="process">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Der Ablauf</span>
            <h2 style={{ color: 'var(--bg)' }}>Vier Schritte. Kein Stress.</h2>
          </div>
          <p className="lead">
            Vom Rezept bis zum ersten Therapieerfolg — wir machen den Weg so geradlinig
            wie möglich. Sie müssen sich um nichts kümmern außer ums Sprechen.
          </p>
        </div>
        <div className="process-steps">
          {STEPS.map((s, i) => (
            <div className="step" key={s.t}>
              <div className="step-num">{i + 1}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About, Services, Process });