// sections.jsx — section components
const { useEffect, useRef } = React;

function Nav({ onBook }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', h);
    return () => window.removeEventListener('scroll', h);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <a href="#top" className="nav-logo" style={{ color: 'var(--white)' }}>
          <LogoMark size={40}/>
          <Logo style={{ height: 24 }}/>
        </a>
        <div className="nav-links">
          <a className="nav-link" href="#services">Services</a>
          <a className="nav-link" href="#team">Team</a>
          <a className="nav-link" href="#gallery">Galerie</a>
          <a className="nav-link" href="#laser">Laser</a>
          <a className="nav-link" href="#kontakt">Kontakt</a>
        </div>
        <button className="btn btn-primary" onClick={onBook}>Termin buchen {Ic.arrow}</button>
      </div>
    </nav>
  );
}

function Hero({ onBook }) {
  return (
    <section className="hero" id="top">
      <div className="hero-bg"/>
      <div className="hero-grid"/>
      <div className="container hero-inner">
        <div>
          <span className="eyebrow">Seit 2011 · Wuppertal Elberfeld</span>
          <h1>
            Schnitte<br/>
            mit <span className="script">Charakter</span>
          </h1>
          <p className="lede">
            Wir kombinieren klassisches Barbier-Handwerk mit modernen Schnitten. Heiße Tücher. Scharfe Klingen. Kein Kompromiss.
          </p>
          <div className="hero-ctas">
            <button className="btn btn-primary" onClick={onBook}>Termin buchen {Ic.arrow}</button>
            <a className="btn" href="#services">Preisliste ansehen</a>
          </div>
          <div className="hero-meta">
            <div className="hero-meta-item">
              <div className="k">Meister</div>
              <div className="v">04</div>
            </div>
            <div className="hero-meta-item">
              <div className="k">Services</div>
              <div className="v">12</div>
            </div>
            <div className="hero-meta-item">
              <div className="k">Bewertung</div>
              <div className="v">4.9<span style={{fontSize: 16, color: 'var(--gold)', marginLeft: 6}}>★</span></div>
            </div>
            <div className="hero-meta-item">
              <div className="k">Kunden</div>
              <div className="v">12k+</div>
            </div>
          </div>
        </div>
        <div className="hero-visual">
          <div className="hero-card hero-card-1">
            <div className="hero-card-img"/>
            <div className="overlay">
              <h3>Handwerk seit 2011</h3>
              <p>Kipdorf 52 · Wuppertal</p>
            </div>
          </div>
          <div className="hero-card hero-card-3">
            <div className="big">14<span style={{fontSize: 24}}>+</span></div>
            <div className="sm">Jahre Erfahrung</div>
          </div>
          <div className="hero-card hero-card-2">
            <div>
              <div className="label"><span className="dot"/>Jetzt geöffnet</div>
              <div className="title">Heute bis 19:00</div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 20 }}>
              <div>
                <div style={{ fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '0.15em', textTransform: 'uppercase' }}>Nächster Slot</div>
                <div className="display" style={{ fontSize: 28, color: 'var(--gold)', marginTop: 4 }}>14:30</div>
              </div>
              <button className="btn btn-primary" style={{ padding: '10px 16px', fontSize: 11 }} onClick={onBook}>Sichern</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const items = ['Hot Towel Shave', 'Skin Fade', 'Classic Cut', 'Beard Sculpt', 'Kids Cut', 'Steam Facial'];
  const loop = [...items, ...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {loop.map((x, i) => (
          <div className="marquee-item" key={i}>
            <span>{x}</span>
            <span className="star">✦</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Services({ onBook }) {
  return (
    <section className="section" id="services">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="label">— Preisliste</span>
            <h2>Services <span className="script">&</span> Preise</h2>
          </div>
          <p>Alle Preise inklusive Beratung, Kopfmassage und einem Espresso. Transparente Preise — keine Überraschungen.</p>
        </div>
        <div className="services-list">
          {SERVICES.map((s, i) => (
            <div key={s.id} className="service-row reveal" onClick={onBook}>
              <span className="service-num">{String(i+1).padStart(2,'0')}</span>
              <div>
                <div className="service-name">
                  {s.name}
                  {s.popular && <span style={{ marginLeft: 12, fontSize: 10, letterSpacing: '0.2em', color: 'var(--gold)', border: '1px solid var(--gold-lo)', padding: '3px 8px', verticalAlign: 'middle' }}>POPULÄR</span>}
                </div>
                <div className="service-desc">{s.desc}</div>
              </div>
              <div className="service-duration">{s.dur} · {s.cat}</div>
              <div className="service-meta">
                <div className="service-price">{s.price}€</div>
                <div className="service-book">{Ic.arrow}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Team() {
  return (
    <section className="section" id="team" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="label">— Das Team</span>
            <h2>Meister <span className="script">deines</span> Schnitts</h2>
          </div>
          <p>Vier Barbiere, ein Anspruch: dir den besten Schnitt deines Lebens zu verpassen.</p>
        </div>
        <div className="team-grid">
          {BARBERS.map((b, i) => (
            <div key={b.id} className="barber-card reveal">
              <div className="barber-img" style={{ backgroundImage: `url(${b.img})` }}/>
              <div className="barber-overlay"/>
              <div className="barber-num">N°{String(i+1).padStart(2,'0')}</div>
              <div className="barber-info">
                <div className="role">{b.role}</div>
                <div className="name">{b.name}</div>
                <div className="tags">
                  {b.tags.map(t => <span className="tag" key={t}>{t}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Gallery() {
  const cls = ['g1','g2','g3','g4','g5','g6','g7'];
  return (
    <section className="section" id="gallery">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="label">— Portfolio</span>
            <h2>Unsere <span className="script">Arbeit</span></h2>
          </div>
          <p>Jeder Schnitt ist ein Unikat. Hier ein Einblick in die letzten Wochen im Shop.</p>
        </div>
        <div className="gallery">
          {GALLERY.map((src, i) => (
            <div key={i} className={`gallery-item ${cls[i]}`} style={{ backgroundImage: `url(${src})` }}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function BookingSection({ bookingRef }) {
  return (
    <section className="section" id="booking" ref={bookingRef} style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="label">— Terminbuchung</span>
            <h2>Termin <span className="script">sichern</span></h2>
          </div>
          <p>In 4 Schritten zum perfekten Schnitt. Keine Anmeldung nötig — direkt buchen.</p>
        </div>
        <Booking/>
      </div>
    </section>
  );
}

function Testimonials() {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="label">— Stimmen</span>
            <h2>4.9 auf <span className="script">Google</span></h2>
          </div>
          <p>Über 800 Bewertungen. Hier ein Auszug von Stammkunden.</p>
        </div>
        <div className="tm-grid">
          {TESTIMONIALS.map((t, i) => (
            <div key={i} className="tm-card reveal">
              <div className="tm-quote">“</div>
              <p className="tm-text">{t.text}</p>
              <div className="tm-meta">
                <div className="tm-avatar" style={{ background: `hsl(${i*60+20} 20% 25%)` }}/>
                <div className="tm-name">{t.name}<small>{t.meta}</small></div>
                <div className="tm-stars">{'★'.repeat(t.stars)}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const today = new Date().getDay();
  return (
    <section className="section" id="kontakt" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="label">— Besuch uns</span>
            <h2>Mitten in <span className="script">Elberfeld</span></h2>
          </div>
          <p>Kipdorf 52, direkt in der Fußgängerzone. Bushaltestelle Alter Markt 2 Minuten entfernt.</p>
        </div>
        <div className="contact-grid">
          <div>
            <div className="contact-block">
              <div className="contact-icon">{Ic.pin}</div>
              <div>
                <div className="label">Adresse</div>
                <div className="val">Kipdorf 52</div>
                <div className="sub">42103 Wuppertal · Elberfeld</div>
              </div>
            </div>
            <div className="contact-block">
              <div className="contact-icon">{Ic.phone}</div>
              <div>
                <div className="label">Telefon</div>
                <div className="val">0202 / 515 53 333</div>
                <div className="sub">Erreichbar zu Öffnungszeiten</div>
              </div>
            </div>
            <a className="contact-block" href={buildWhatsAppUrl('Hallo House Des Barbers, ich habe eine Frage:')} target="_blank" rel="noopener">
              <div className="contact-icon">{Ic.wa}</div>
              <div>
                <div className="label">WhatsApp</div>
                <div className="val">Direkt chatten</div>
                <div className="sub">Schnelle Antwort innerhalb 1h</div>
              </div>
            </a>
          </div>
          <div>
            <div className="label" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--ink-mute)', textTransform: 'uppercase', marginBottom: 20 }}>Öffnungszeiten</div>
            <div className="hours-grid">
              {HOURS.map(h => (
                <div key={h.day} className={`hours-row ${h.closed ? 'closed' : ''} ${h.idx === today ? 'today' : ''}`}>
                  <span className="d">{h.day}</span>
                  <span className="h">{h.h}</span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 32, padding: 24, background: 'var(--bg-3)', border: '1px solid var(--line)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#2ecc71', boxShadow: '0 0 10px #2ecc71' }}/>
                <span style={{ fontSize: 11, letterSpacing: '0.2em', color: '#2ecc71', textTransform: 'uppercase' }}>Jetzt geöffnet</span>
              </div>
              <div className="display" style={{ fontSize: 32, color: 'var(--white)', marginTop: 8 }}>Nächster freier Termin: 14:30</div>
              <div style={{ color: 'var(--ink-dim)', fontSize: 13, marginTop: 4 }}>Heute bei Mehmet A. · Haarschnitt</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <Logo style={{ height: 36, color: 'var(--white)' }}/>
            <p>Klassisches Barbier-Handwerk trifft modernes Design. Seit 2011 schneiden wir die beste Ecke Wuppertals.</p>
            <div className="socials">
              <a className="social" href="#" aria-label="Instagram">{Ic.ig}</a>
              <a className="social" href="#" aria-label="Facebook">{Ic.fb}</a>
              <a className="social" href={buildWhatsAppUrl('Hallo House Des Barbers!')} target="_blank" rel="noopener" aria-label="WhatsApp">{Ic.wa}</a>
            </div>
          </div>
          <div className="footer-col">
            <h5>Shop</h5>
            <ul>
              <li><a href="#services">Services</a></li>
              <li><a href="#team">Team</a></li>
              <li><a href="#gallery">Galerie</a></li>
              <li><a href="#booking">Buchung</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Rechtliches</h5>
            <ul>
              <li><a href="#">Impressum</a></li>
              <li><a href="#">Datenschutz</a></li>
              <li><a href="#">AGB</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Kontakt</h5>
            <ul>
              <li>Kipdorf 52</li>
              <li>42103 Wuppertal</li>
              <li>0202 / 515 53 333</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 House Des Barbers. Alle Rechte vorbehalten.</span>
          <span className="mono">Made with ✂ in Wuppertal</span>
        </div>
      </div>
    </footer>
  );
}

function Laser({ onBook }) {
  const laserServices = SERVICES.filter(s => s.cat === 'Laser');
  return (
    <section className="section laser" id="laser">
      <div className="container laser-inner">
        <div>
          <span className="label" style={{ fontSize: 11, letterSpacing: '0.25em', color: 'var(--gold)', textTransform: 'uppercase', marginBottom: 16, display: 'block' }}>— Neu im Shop</span>
          <h2 className="display" style={{ fontSize: 'clamp(44px, 6vw, 88px)', lineHeight: 0.95, color: 'var(--white)' }}>
            Laser <span className="script" style={{ fontFamily: 'Allura', textTransform: 'none', color: 'var(--gold)', fontSize: '1em' }}>Haar­entfernung</span>
          </h2>
          <p style={{ color: 'var(--ink-dim)', marginTop: 20, maxWidth: 480, lineHeight: 1.6 }}>
            Dauerhaft glatte Haut mit medizinischem Diodenlaser. Geeignet für alle Hauttypen, inklusive Hautanalyse und persönlicher Beratung. Durchgeführt von zertifizierten Fachkräften.
          </p>

          <div className="laser-feats">
            <div className="laser-feat">
              <div className="num">–95%</div>
              <div className="lbl">Haarreduktion</div>
              <p>Nach 6–8 Sitzungen im Durchschnitt.</p>
            </div>
            <div className="laser-feat">
              <div className="num">808<span style={{ fontSize: 14 }}>nm</span></div>
              <div className="lbl">Diodenlaser</div>
              <p>Medizinische Klasse IV, FDA-geprüft.</p>
            </div>
            <div className="laser-feat">
              <div className="num">I–VI</div>
              <div className="lbl">Hauttypen</div>
              <p>Für alle Fitzpatrick-Stufen geeignet.</p>
            </div>
            <div className="laser-feat">
              <div className="num">–4°C</div>
              <div className="lbl">Kühlkopf</div>
              <p>Nahezu schmerzfrei dank aktiver Kühlung.</p>
            </div>
          </div>

          <div className="laser-prices">
            {laserServices.map(s => (
              <div key={s.id} className="laser-price" onClick={onBook}>
                <div>
                  <div style={{ color: 'var(--white)', fontSize: 13 }}>{s.name.replace('Laser · ', '')}</div>
                  <div style={{ fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 2 }}>{s.dur}</div>
                </div>
                <div className="p">{s.price}€</div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="btn btn-primary" onClick={onBook}>Beratung buchen {Ic.arrow}</button>
            <a className="btn" href="#services">Alle Services</a>
          </div>
        </div>

        <div>
          <div className="laser-viz" style={{ background: '#06060a' }}>
            {/* Real photo base */}
            <div style={{
              position: 'absolute', inset: 0, zIndex: 0,
              backgroundImage: `url('https://images.unsplash.com/photo-1503951914875-452162b0f3f1?w=1200&auto=format&fit=crop&q=80')`,
              backgroundSize: 'cover',
              backgroundPosition: '60% 45%',
              filter: 'grayscale(0.9) contrast(1.15) brightness(0.45)',
            }}/>
            {/* Gold tint overlay */}
            <div style={{
              position: 'absolute', inset: 0, zIndex: 1,
              background: 'linear-gradient(180deg, rgba(6,6,10,0.2) 0%, rgba(6,6,10,0.55) 50%, rgba(6,6,10,0.95) 100%), radial-gradient(ellipse 70% 50% at 50% 45%, rgba(232,199,138,0.18), transparent 70%)',
              mixBlendMode: 'normal',
            }}/>

            <div className="laser-grid-lines" style={{ zIndex: 2, opacity: 0.4 }}/>
            <div className="laser-badge" style={{ zIndex: 4 }}>● Live · Diodenlaser 808nm</div>

            {/* Top-right HUD */}
            <div style={{ position: 'absolute', top: 20, right: 20, zIndex: 4, textAlign: 'right' }}>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.15em' }}>PULSE</div>
              <div className="display" style={{ fontSize: 22, color: 'var(--gold)', letterSpacing: '0.04em', lineHeight: 1 }}>18J/cm²</div>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.15em', marginTop: 10 }}>TEMP</div>
              <div className="display" style={{ fontSize: 22, color: '#fff', letterSpacing: '0.04em', lineHeight: 1 }}>−4°C</div>
            </div>

            {/* Corner frame marks + tech overlay */}
            <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', zIndex: 3, pointerEvents: 'none' }} viewBox="0 0 400 500" fill="none" preserveAspectRatio="none">
              <g stroke="rgba(232,199,138,0.75)" strokeWidth="1.2" strokeLinecap="square">
                <path d="M 14 60 L 14 14 L 60 14"/>
                <path d="M 386 60 L 386 14 L 340 14"/>
                <path d="M 14 440 L 14 486 L 60 486"/>
                <path d="M 386 440 L 386 486 L 340 486"/>
              </g>

              {/* Crosshair */}
              <g stroke="rgba(232,199,138,0.25)" strokeWidth="0.5" strokeDasharray="2 4">
                <line x1="0" y1="250" x2="400" y2="250"/>
                <line x1="200" y1="0" x2="200" y2="500"/>
              </g>

              {/* Treatment zone outline — beard area */}
              <g>
                <ellipse cx="200" cy="330" rx="110" ry="75"
                  stroke="rgba(232,199,138,0.9)" strokeWidth="1.2" strokeDasharray="4 4" fill="none">
                  <animate attributeName="stroke-dashoffset" values="0;16" dur="1.2s" repeatCount="indefinite"/>
                </ellipse>
                <ellipse cx="200" cy="330" rx="110" ry="75" stroke="rgba(232,199,138,0.15)" strokeWidth="18" fill="none"/>
              </g>

              {/* Callout */}
              <g>
                <line x1="310" y1="310" x2="360" y2="270" stroke="rgba(232,199,138,0.9)" strokeWidth="0.8"/>
                <line x1="360" y1="270" x2="390" y2="270" stroke="rgba(232,199,138,0.9)" strokeWidth="0.8"/>
                <circle cx="310" cy="310" r="3" fill="rgba(232,199,138,1)"/>
                <circle cx="310" cy="310" r="8" fill="none" stroke="rgba(232,199,138,0.5)" strokeWidth="0.6">
                  <animate attributeName="r" values="8;14;8" dur="1.8s" repeatCount="indefinite"/>
                  <animate attributeName="opacity" values="0.7;0;0.7" dur="1.8s" repeatCount="indefinite"/>
                </circle>
                <text x="390" y="266" fill="rgba(232,199,138,1)" fontFamily="JetBrains Mono" fontSize="9" letterSpacing="1.5" textAnchor="end">ZONE A</text>
                <text x="390" y="278" fill="rgba(255,255,255,0.6)" fontFamily="JetBrains Mono" fontSize="7" letterSpacing="1" textAnchor="end">BARTKONTUR</text>
              </g>

              {/* Secondary callout */}
              <g>
                <line x1="120" y1="290" x2="60" y2="240" stroke="rgba(232,199,138,0.9)" strokeWidth="0.8"/>
                <line x1="60" y1="240" x2="20" y2="240" stroke="rgba(232,199,138,0.9)" strokeWidth="0.8"/>
                <circle cx="120" cy="290" r="3" fill="rgba(232,199,138,1)"/>
                <text x="20" y="236" fill="rgba(232,199,138,1)" fontFamily="JetBrains Mono" fontSize="9" letterSpacing="1.5">ZONE B</text>
                <text x="20" y="248" fill="rgba(255,255,255,0.6)" fontFamily="JetBrains Mono" fontSize="7" letterSpacing="1">WANGEN</text>
              </g>

              {/* Tick marks along perimeter */}
              <g stroke="rgba(232,199,138,0.4)" strokeWidth="0.8">
                {Array.from({length: 12}).map((_, i) => (
                  <line key={i} x1={30 + i * 30} y1="495" x2={30 + i * 30} y2={i % 3 === 0 ? 485 : 490}/>
                ))}
              </g>
            </svg>

            {/* Laser impact glow — clustered in beard zone */}
            {[
              { top: '62%', left: '48%', d: 0 },
              { top: '66%', left: '56%', d: 0.3 },
              { top: '60%', left: '42%', d: 0.6 },
              { top: '70%', left: '52%', d: 0.9 },
              { top: '64%', left: '60%', d: 1.2 },
              { top: '68%', left: '44%', d: 1.5 },
            ].map((p, i) => (
              <div key={i} style={{
                position: 'absolute', top: p.top, left: p.left,
                width: 18, height: 18, marginLeft: -9, marginTop: -9, zIndex: 3,
                borderRadius: '50%',
                background: 'radial-gradient(circle, rgba(255,230,180,0.95), rgba(232,199,138,0.4) 30%, transparent 70%)',
                animation: `dotpulse 1.8s ease-in-out ${p.d}s infinite`,
              }}/>
            ))}

            {/* Scanning beam */}
            <div className="laser-beam" style={{ zIndex: 3 }}/>

            {/* Bottom HUD */}
            <div style={{ position: 'absolute', left: 20, bottom: 20, right: 20, zIndex: 4, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
              <div>
                <div style={{ fontSize: 10, color: 'var(--gold)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>Session 01 · 00:24</div>
                <div className="display" style={{ fontSize: 24, color: '#fff', marginTop: 4, letterSpacing: '0.02em' }}>Bartkontur</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.15em' }}>PULSE/S</div>
                <div className="display" style={{ fontSize: 24, color: 'var(--gold)', lineHeight: 1 }}>6.0</div>
              </div>
            </div>
          </div>
                      <div style={{ marginTop: 20, padding: 20, background: 'rgba(255,255,255,0.02)', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 16 }}>
            <div style={{ width: 44, height: 44, border: '1px solid var(--gold-lo)', display: 'grid', placeItems: 'center', color: 'var(--gold)', flexShrink: 0 }}>✓</div>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--ink-mute)', textTransform: 'uppercase' }}>Unverbindliche Erstberatung</div>
              <div style={{ color: 'var(--white)', fontSize: 14, marginTop: 4 }}>20 Min Hautanalyse & Testpuls — <span style={{ color: 'var(--gold)' }}>kostenlos</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Marquee, Services, Team, Gallery, BookingSection, Testimonials, Contact, Footer, Laser });