// Nav + Hero
const { useState, useEffect } = React;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
  ['Praxis', '#about'],
  ['Therapie', '#services'],
  ['Ablauf', '#process'],
  ['Team', '#team'],
  ['Preise', '#pricing'],
  ['Kontakt', '#contact']];


  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <a href="#top" className="nav-logo">
        <span className="mark"></span>
        <span>Andorfer<span style={{ color: 'var(--ink-muted)', fontWeight: 400 }}> · Logopädie</span></span>
      </a>
      <div className="nav-links">
        {links.map(([label, href]) =>
        <a key={href} href={href}>{label}</a>
        )}
      </div>
      <div className="nav-cta">
        <a href="#booking" className="btn btn-primary">Termin buchen</a>
      </div>
    </nav>);

}

function Waveform() {
  const heights = [22, 36, 18, 44, 28, 50, 32, 24, 40, 18, 36, 26, 42, 30, 20, 38, 24, 46, 30, 22];
  return (
    <div className="waveform" aria-hidden="true">
      {heights.map((h, i) =>
      <span
        key={i}
        className="bar"
        style={{ '--h': h + 'px', animationDelay: i * 0.08 + 's' }} />

      )}
    </div>);

}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow">
              <span className="pulse"></span>
              <span>Praxis für Logopädie · Freiburg-Wiehre</span>
            </div>
            <h1>
              Worte finden,<br />
              Stimme <span className="accent">entfalten</span>,<br />
              gehört werden.
            </h1>
            <p className="hero-lead">
              Logopädische Therapie für Kinder, Jugendliche und Erwachsene — herzlich,
              evidenzbasiert und auf Ihren Alltag zugeschnitten. Seit 2014 in der Wiehre.
            </p>
            <div className="hero-cta">
              <a href="#booking" className="btn btn-primary">
                Erstgespräch vereinbaren
                <span aria-hidden="true">→</span>
              </a>
              <a href="#services" className="btn btn-ghost">Therapieangebot</a>
            </div>
            <div className="hero-meta">
              <div className="hero-meta-item">
                <div className="num">12+</div>
                <div className="label">Jahre Praxis­erfahrung</div>
              </div>
              <div className="hero-meta-item">
                <div className="num">2.400</div>
                <div className="label">Begleitete Patient·innen</div>
              </div>
              <div className="hero-meta-item">
                <div className="num">4&nbsp;Std.</div>
                <div className="label">Ø Wartezeit auf Termin</div>
              </div>
            </div>
          </div>
          <div className="hero-visual">
            <div className="placeholder" data-label="Therapeutin · Sprechstunde"></div>
            <Waveform />
            <div className="floating-card floating-card-1">
              <div className="dot">★</div>
              <div>
                <div style={{ fontWeight: 500 }}>4,9 / 5</div>
                <div style={{ fontSize: 11, color: 'var(--ink-muted)' }}>178 Bewertungen</div>
              </div>
            </div>
            <div className="floating-card floating-card-2">
              <div className="dot" style={{ background: 'var(--peach)', color: 'var(--ink)' }}>✓</div>
              <div>
                <div style={{ fontWeight: 500 }}>Alle Kassen</div>
                <div style={{ fontSize: 11, color: 'var(--ink-muted)' }}>Rezept einreichen</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Nav, Hero });