// Team, Testimonials, Gallery
const TEAM = [
  {
    name: 'Maja Andorfer',
    role: 'Praxisinhaberin · Logopädin',
    tags: ['Stimme', 'Aphasie', 'LSVT LOUD'],
  },
  {
    name: 'Lukas Wehrle',
    role: 'Logopäde M.Sc.',
    tags: ['Kinder', 'LRS', 'PROMPT'],
  },
  {
    name: 'Felicitas Brun',
    role: 'Logopädin',
    tags: ['Stottern', 'Poltern', 'KIDS'],
  },
  {
    name: 'Anouk Häberle',
    role: 'Logopädin · Sprachtherap.',
    tags: ['Dysphagie', 'Neurologie'],
  },
];

function Team() {
  return (
    <section id="team">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Das Team</span>
            <h2>Vier Stimmen, ein Anspruch.</h2>
          </div>
          <p className="lead">
            Gemeinsame Fortbildung, gemeinsames Qualitätsmanagement, gemeinsame Haltung —
            aber jede·r mit eigenem Schwerpunkt, damit Sie genau die richtige Begleitung finden.
          </p>
        </div>
        <div className="team-grid">
          {TEAM.map((m) => (
            <div className="team-member" key={m.name}>
              <div className="placeholder team-photo" data-label={`Foto ${m.name.split(' ')[0]}`}></div>
              <div className="team-name">{m.name}</div>
              <div className="team-role">{m.role}</div>
              <div className="team-tags">
                {m.tags.map((t) => <span className="tag" key={t}>{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const TESTIMONIALS = [
  {
    q: 'Nach dem Schlaganfall meines Mannes hat Frau Andorfer ihm und uns geholfen, wieder zueinander zu finden — über das Sprechen hinaus.',
    name: 'Renate K.',
    rel: 'Angehörige · Aphasie-Therapie',
  },
  {
    q: 'Unsere Tochter (5) hat sich vom ersten Tag an ernst genommen gefühlt. Heute spricht sie ein Jahr nach Therapiebeginn klar und selbstbewusst.',
    name: 'Familie M.',
    rel: 'Eltern · Aussprachestörung',
  },
  {
    q: 'Als Lehrer war meine Stimme mein wichtigstes Werkzeug. Nach drei Monaten Stimmtherapie unterrichte ich wieder ohne Heiserkeit am Freitagabend.',
    name: 'Jonas R.',
    rel: 'Patient · Stimmtherapie',
  },
];

function Testimonials() {
  return (
    <section className="testimonials">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Stimmen</span>
            <h2>Was Patient·innen über uns sagen.</h2>
          </div>
          <p className="lead">
            Drei von 178 Bewertungen. Sie alle erzählen davon, dass Therapie nicht
            nur Technik ist — sondern Beziehung, Geduld und manchmal ein bisschen Mut.
          </p>
        </div>
        <div className="testimonial-grid">
          {TESTIMONIALS.map((t, i) => (
            <div className="testimonial" key={i}>
              <div className="testimonial-quote">{t.q}"</div>
              <div className="testimonial-meta">
                <div className="testimonial-avatar">{t.name[0]}</div>
                <div>
                  <div className="testimonial-name">{t.name}</div>
                  <div className="testimonial-rel">{t.rel}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const GALLERY = [
  { cls: 'g1', label: 'Empfangsbereich' },
  { cls: 'g2', label: 'Therapieraum 1' },
  { cls: 'g3', label: 'Wartebereich' },
  { cls: 'g4', label: 'Spielecke' },
  { cls: 'g5', label: 'Therapieraum 2' },
  { cls: 'g6', label: 'Materialwand' },
  { cls: 'g7', label: 'Außenansicht' },
];

function Gallery() {
  return (
    <section id="gallery" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Die Praxis</span>
            <h2>Ein Ort, an dem man aufatmen kann.</h2>
          </div>
          <p className="lead">
            Drei Therapieräume, ein offener Empfang, viel Tageslicht. Barrierefrei
            erreichbar, mit Wickeltisch, Spielecke und Kaffee für Begleitpersonen.
          </p>
        </div>
        <div className="gallery-grid">
          {GALLERY.map((g) => (
            <div key={g.cls} className={`placeholder gallery-item ${g.cls}`} data-label={g.label}></div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Team, Testimonials, Gallery });