// Seiten der Onkelfinke Website (Wireframe v1)
const { Header, Footer, Marquee, WFNote, Section, Btn, PH, navigate } = window.UI;
const { ANLAESSE, BAUSTEINE, GALERIE, SAEULEN, PROZESS } = window.SITE_DATA;

// ============ HOME ============
function HomePage() {
  return (
    <>
      {/* HERO */}
      <section className="of-hero" style={{ minHeight: '92vh', padding: '40px 32px 80px', display: 'flex', flexDirection: 'column' }}>
        <div className="of-hero-grid" style={{ maxWidth: 1320, margin: '40px auto 0', width: '100%', flex: 1, display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <h1 className="serif of-hero-h1" style={{ fontSize: 'clamp(64px, 9vw, 128px)', lineHeight: 0.95, fontWeight: 500, margin: '32px 0 32px', letterSpacing: '-0.02em' }}>
              Du sagst was,<br/>
              <em style={{ fontWeight: 500 }}>wir machen.</em>
            </h1>
            <p className="serif of-hero-sub" style={{ fontSize: 22, lineHeight: 1.5, maxWidth: 560, marginBottom: 48, color: 'rgba(0,16,39,0.78)' }}>
              Hochzeit, Geburtstag, Firmenfeier — wir planen, kochen und servieren. Du musst nichts machen außer feiern.
            </p>
            <div className="of-hero-buttons" style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <Btn size="lg" onClick={() => navigate('/konfigurator')}>Fest in 5 Minuten planen</Btn>
              <Btn size="lg" variant="ghost" onClick={() => navigate('/kontakt')}>Direkt anfragen</Btn>
            </div>

            {/* Schnell-Pfade in Anlässe */}
            <div className="of-hero-anlass-section" style={{ marginTop: 80 }}>
              <div className="mono" style={{ color: 'var(--muted)', marginBottom: 16 }}>Oder direkt zu deinem Anlass:</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                {ANLAESSE.map(a => (
                  <a key={a.id} href={'#/anlaesse/' + a.id} style={{
                    display: 'inline-flex', alignItems: 'center', gap: 10,
                    border: '1px solid var(--line-strong)', borderRadius: 999, padding: '12px 20px',
                    background: 'transparent',
                  }}>
                    <span>{a.emoji}</span>
                    <span className="mono" style={{ fontSize: 11 }}>{a.label}</span>
                  </a>
                ))}
              </div>
            </div>
          </div>

          <div className="of-hero-side" style={{ display: 'grid', gridTemplateRows: '1.4fr 1fr', gap: 16, height: '70vh' }}>
            <PH label="Hero-Bild · Buffet / Festszene" h="100%" />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <PH label="Foodtruck-Detail" h="100%" />
              <PH label="Service-Detail" h="100%" />
            </div>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <Marquee items={['Hochzeiten', 'Geburtstage', 'Firmenfeiern', 'Foodtruck', 'Catering', 'Vollservice']} />

      {/* DREI SÄULEN */}
      <Section label="Was wir machen" title="Drei Säulen — ein Versprechen.">
        <div className="of-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {SAEULEN.map(s => (
            <article key={s.id} style={{ borderTop: '1px solid var(--navy)', paddingTop: 32 }}>
              <div className="mono" style={{ marginBottom: 24, color: 'var(--muted)' }}>— {s.num} —</div>
              <h3 className="serif" style={{ fontSize: 36, fontWeight: 500, margin: '0 0 16px', fontStyle: 'italic' }}>{s.titel}</h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'rgba(0,16,39,0.75)' }}>{s.desc}</p>
              <div style={{ marginTop: 24 }}>
                <a href="#/leistungen" className="mono" style={{ borderBottom: '1px solid var(--navy)', paddingBottom: 4 }}>Mehr erfahren →</a>
              </div>
            </article>
          ))}
        </div>
      </Section>

      {/* ANLASS-GRID */}
      <Section bg="var(--cream-2)" label="Für jeden Anlass" title="Sag uns, was du feierst.">
        <div className="of-grid-5" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
          {ANLAESSE.map(a => (
            <a key={a.id} href={'#/anlaesse/' + a.id} style={{
              border: '1px solid var(--navy)', borderRadius: 4, padding: 24,
              background: 'var(--cream)', minHeight: 280,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            }}>
              <div style={{ fontSize: 56 }}>{a.emoji}</div>
              <div>
                <h3 className="serif" style={{ fontSize: 24, fontWeight: 500, margin: '0 0 8px', fontStyle: 'italic' }}>{a.label}</h3>
                <p style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.5, margin: 0 }}>{a.desc}</p>
              </div>
              <div className="mono" style={{ fontSize: 10, marginTop: 24 }}>Pakete ansehen →</div>
            </a>
          ))}
        </div>
      </Section>

      {/* GALERIE-TEASER */}
      <Section label="Bilder sagen mehr" title="Aus echten Festen.">
        <div className="of-galerie-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gridTemplateRows: '240px 240px', gap: 12 }}>
          {GALERIE.slice(0, 6).map((g, i) => (
            <div key={g.id} style={{ gridColumn: i === 0 ? 'span 2' : 'span 1', gridRow: i === 0 ? 'span 2' : 'span 1' }}>
              <PH label={g.label} h="100%" />
            </div>
          ))}
        </div>
        <div style={{ marginTop: 32, textAlign: 'center' }}>
          <Btn variant="ghost" onClick={() => navigate('/galerie')}>Ganze Galerie ansehen</Btn>
        </div>
      </Section>

      {/* PROZESS */}
      <Section bg="var(--navy)" style={{ color: 'var(--cream)' }} label={<span style={{ color: 'rgba(244,237,224,0.5)' }}>So läuft's</span>} title={<span style={{ color: 'var(--cream)' }}>Vier Schritte zum entspannten Fest.</span>}>
        <div className="of-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
          {PROZESS.map(p => (
            <div key={p.num} style={{ borderTop: '1px solid rgba(244,237,224,0.3)', paddingTop: 24 }}>
              <div className="mono" style={{ opacity: 0.5, marginBottom: 16 }}>— {p.num} —</div>
              <h3 className="serif" style={{ fontSize: 28, fontWeight: 500, fontStyle: 'italic', margin: '0 0 12px' }}>{p.titel}</h3>
              <p style={{ opacity: 0.8, lineHeight: 1.6, fontSize: 14 }}>{p.desc}</p>
            </div>
          ))}
        </div>
      </Section>

      {/* CTA */}
      <Section bg="var(--cream-2)" py={140}>
        <div style={{ textAlign: 'center', maxWidth: 800, margin: '0 auto' }}>
          <h2 className="serif of-h2-xl" style={{ fontSize: 72, lineHeight: 1.05, fontWeight: 500, margin: '0 0 32px' }}>
            Lust auf <em>dein</em> Fest?
          </h2>
          <p style={{ fontSize: 18, color: 'var(--muted)', marginBottom: 40 }}>
            Stell dir online dein Wunschpaket zusammen — unverbindlich, kostenlos, in 5 Minuten.
          </p>
          <Btn size="lg" onClick={() => navigate('/konfigurator')}>Jetzt Fest planen</Btn>
        </div>
      </Section>
    </>
  );
}

// ============ ANLAESSE OVERVIEW ============
function AnlaesseOverview() {
  return (
    <>
      <Section py={80} label="Anlässe" title="Was darf's werden?">
        <p style={{ fontSize: 20, color: 'var(--muted)', maxWidth: 700, marginBottom: 64 }}>
          Klick dich rein — auf jeder Anlass-Seite zeigen wir Beispiel-Pakete, typische Abläufe und Bilder von echten Festen.
        </p>
        <div className="of-grid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          {ANLAESSE.map(a => (
            <a key={a.id} href={'#/anlaesse/' + a.id} style={{
              border: '1px solid var(--navy)', borderRadius: 4, overflow: 'hidden',
              display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 320,
              background: 'var(--paper)',
            }}>
              <div style={{ height: '100%', minHeight: 320, background: '#000', overflow: 'hidden' }}>
                <img src={'assets/photos/anlass-' + a.id + '.jpeg'} alt={a.label} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              </div>
              <div style={{ padding: 32, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <div>
                  <div style={{ fontSize: 40, marginBottom: 16 }}>{a.emoji}</div>
                  <h3 className="serif" style={{ fontSize: 36, fontWeight: 500, fontStyle: 'italic', margin: '0 0 12px' }}>{a.label}</h3>
                  <p style={{ color: 'var(--muted)', lineHeight: 1.5 }}>{a.desc}</p>
                </div>
                <div className="mono" style={{ fontSize: 11, marginTop: 24 }}>Mehr ansehen →</div>
              </div>
            </a>
          ))}
        </div>
      </Section>
    </>
  );
}

// ============ ANLASS DETAIL ============
function AnlassDetail({ id }) {
  const a = ANLAESSE.find(x => x.id === id) || ANLAESSE[0];
  const beispielPakete = [
    { name: 'Klein & fein', personen: '20-40', start: 1800, leistungen: ['Buffet', 'Soft-Getränke', 'Service 4h'] },
    { name: 'Klassisch',    personen: '60-100', start: 4800, leistungen: ['Mehrgang-Menü', 'All-Inclusive', 'Volles Team', 'DJ'] },
    { name: 'Volles Programm', personen: '100+', start: 9800, leistungen: ['Foodtruck + Buffet', 'Premium-Drinks', 'Vollservice', 'DJ + Photobooth'] },
  ];

  return (
    <>
      {/* Hero */}
      <section style={{ padding: '60px 32px 80px', borderBottom: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto' }}>
          <a href="#/anlaesse" className="mono" style={{ color: 'var(--muted)', marginBottom: 32, display: 'inline-block' }}>← Alle Anlässe</a>
          <div className="of-anlass-hero" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'end' }}>
            <div>
              <div style={{ fontSize: 64, marginBottom: 24 }}>{a.emoji}</div>
              <h1 className="serif of-anlass-hero-h1" style={{ fontSize: 'clamp(56px, 7vw, 96px)', lineHeight: 1, fontWeight: 500, margin: '0 0 24px' }}>
                <em>{a.label}</em>
              </h1>
              <p style={{ fontSize: 22, lineHeight: 1.5, maxWidth: 600, color: 'rgba(0,16,39,0.78)' }}>{a.desc}</p>
            </div>
            <div style={{ height: 400, borderRadius: 4, overflow: 'hidden', background: '#000' }}>
              <img src={'assets/photos/anlass-' + a.id + '.jpeg'} alt={a.label + ' Stimmungsbild'} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            </div>
          </div>
        </div>
      </section>

      {/* Beispiel-Pakete */}
      <Section label="Beispiel-Pakete" title="Drei typische Aufstellungen.">
        <p style={{ fontSize: 16, color: 'var(--muted)', marginBottom: 48, maxWidth: 700 }}>
          Sind nur Beispiele — im Konfigurator stellst du dir alles individuell zusammen.
        </p>
        <div className="of-grid-pakete" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {beispielPakete.map((p, i) => (
            <div key={i} style={{ border: '1px solid var(--navy)', padding: 32, borderRadius: 4, background: i === 1 ? 'var(--navy)' : 'transparent', color: i === 1 ? 'var(--cream)' : 'inherit' }}>
              <div className="mono" style={{ opacity: 0.6, marginBottom: 16 }}>{p.personen} Personen</div>
              <h3 className="serif" style={{ fontSize: 32, fontWeight: 500, fontStyle: 'italic', margin: '0 0 24px' }}>{p.name}</h3>
              <div style={{ fontSize: 14, lineHeight: 2, opacity: 0.85, marginBottom: 32 }}>
                {p.leistungen.map((l, j) => <div key={j}>· {l}</div>)}
              </div>
              <div style={{ borderTop: i === 1 ? '1px solid rgba(244,237,224,0.3)' : '1px solid var(--line)', paddingTop: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span className="mono" style={{ opacity: 0.6, fontSize: 10 }}>ab</span>
                <span className="serif" style={{ fontSize: 28, fontStyle: 'italic' }}>{p.start.toLocaleString('de-DE')} €</span>
              </div>
            </div>
          ))}
        </div>
      </Section>

      {/* Typischer Ablauf */}
      <Section bg="var(--cream-2)" label="Typischer Ablauf" title="So könnte's aussehen.">
        <div className="of-timeline-grid" style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 32 }}>
          {[
            { z: '14:00', t: 'Anlieferung & Aufbau', d: 'Wir kommen früh, du musst nichts tun.' },
            { z: '16:00', t: 'Trauung / Empfang', d: 'Sektempfang, kleine Häppchen.' },
            { z: '19:00', t: 'Dinner', d: 'Buffet oder Menü — nach Wunsch.' },
            { z: '21:00', t: 'Tanzfläche', d: 'Tanz, Reden, Musik.' },
            { z: '23:30', t: 'Mitternachtssnack', d: 'Burger, Pommes, Käseplatte.' },
            { z: '02:00', t: 'Abbau', d: 'Wir räumen alles weg. Du gehst ins Bett.' },
          ].map((item, i) => (
            <React.Fragment key={i}>
              <div className="mono" style={{ fontSize: 14, paddingTop: 4, borderTop: '1px solid var(--line)' }}>{item.z}</div>
              <div style={{ borderTop: '1px solid var(--line)', paddingTop: 4, paddingBottom: 24 }}>
                <div className="serif" style={{ fontSize: 22, fontStyle: 'italic', marginBottom: 4 }}>{item.t}</div>
                <div style={{ color: 'var(--muted)', fontSize: 14 }}>{item.d}</div>
              </div>
            </React.Fragment>
          ))}
        </div>
      </Section>

      {/* CTA */}
      <Section bg="var(--navy)" style={{ color: 'var(--cream)' }} py={120}>
        <div className="of-cta-final" style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 64, alignItems: 'center' }}>
          <h2 className="serif of-cta-final-h2" style={{ fontSize: 56, lineHeight: 1.1, fontWeight: 500, margin: 0 }}>
            Klingt gut? Stell dir <em>dein {a.label.toLowerCase()}</em>-Paket zusammen.
          </h2>
          <div>
            <Btn size="lg" variant="cream" onClick={() => navigate('/konfigurator?anlass=' + a.id)}>Jetzt konfigurieren</Btn>
            <div style={{ marginTop: 16 }}>
              <a href="#/kontakt" style={{ opacity: 0.7, borderBottom: '1px solid rgba(244,237,224,0.4)', paddingBottom: 2 }} className="mono">Lieber direkt anrufen →</a>
            </div>
          </div>
        </div>
      </Section>
    </>
  );
}

// ============ LEISTUNGEN ============
function LeistungenPage() {
  const cats = Object.entries(BAUSTEINE);
  return (
    <>
      <Section py={80} label="Leistungen" title="Alles aus einer Hand.">
        <p style={{ fontSize: 20, color: 'var(--muted)', maxWidth: 700, marginBottom: 80 }}>
          Buchbar einzeln oder als Komplettpaket. Im Konfigurator klickst du dir genau das, was du brauchst.
        </p>
        {cats.map(([key, cat], idx) => (
          <div key={key} style={{ marginBottom: 80, borderTop: '1px solid var(--navy)', paddingTop: 40 }}>
            <div className="of-leist-row" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64 }}>
              <div style={{ position: 'sticky', top: 100, alignSelf: 'start' }}>
                <div className="mono" style={{ color: 'var(--muted)', marginBottom: 16 }}>— 0{idx + 1} —</div>
                <h3 className="serif of-leist-h3" style={{ fontSize: 56, fontWeight: 500, fontStyle: 'italic', margin: '0 0 16px', lineHeight: 1 }}>{cat.title}</h3>
                <p style={{ color: 'var(--muted)', fontSize: 16 }}>{cat.subtitle}</p>
              </div>
              <div style={{ display: 'grid', gap: 12 }}>
                {cat.options.map(o => (
                  <div key={o.id} style={{ border: '1px solid var(--line-strong)', padding: 20, borderRadius: 4, display: 'grid', gridTemplateColumns: '1fr auto', gap: 16, alignItems: 'center', background: 'var(--paper)' }}>
                    <div>
                      <div className="serif" style={{ fontSize: 20, fontWeight: 500, marginBottom: 4 }}>{o.label}</div>
                      <div style={{ color: 'var(--muted)', fontSize: 14 }}>{o.desc}</div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      {o.price > 0 ? (
                        <>
                          <div className="serif" style={{ fontSize: 22, fontStyle: 'italic' }}>{o.price} €</div>
                          <div className="mono" style={{ fontSize: 9, color: 'var(--muted)' }}>{o.unit}</div>
                        </>
                      ) : (
                        <div className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>auf Anfrage</div>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        ))}

        <div style={{ textAlign: 'center', marginTop: 80 }}>
          <Btn size="lg" onClick={() => navigate('/konfigurator')}>Jetzt zusammenstellen</Btn>
        </div>
      </Section>
    </>
  );
}

// ============ GALERIE ============
function GaleriePage() {
  const [filter, setFilter] = React.useState('Alle');
  const cats = ['Alle', ...Array.from(new Set(GALERIE.map(g => g.kategorie)))];
  const items = filter === 'Alle' ? GALERIE : GALERIE.filter(g => g.kategorie === filter);
  return (
    <>
      <Section py={80} label="Galerie" title="Aus unseren Festen.">
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 48 }}>
          {cats.map(c => (
            <button key={c} onClick={() => setFilter(c)} className="mono" style={{
              padding: '10px 18px', borderRadius: 999, fontSize: 11,
              border: '1px solid ' + (filter === c ? 'var(--navy)' : 'var(--line-strong)'),
              background: filter === c ? 'var(--navy)' : 'transparent',
              color: filter === c ? 'var(--cream)' : 'var(--navy)',
              cursor: 'pointer',
            }}>{c}</button>
          ))}
        </div>
        <div className="of-galerie-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          {items.map((g, i) => (
            <div key={g.id} style={{ gridRow: i % 5 === 0 ? 'span 2' : 'span 1' }}>
              <PH label={g.label} h={i % 5 === 0 ? 480 : 280} />
            </div>
          ))}
        </div>
      </Section>
    </>
  );
}

// ============ ÜBER UNS ============
function UeberUnsPage() {
  return (
    <>
      <Section py={80} label="Über uns" title={<><em>Onkel</em> Finke<br/>kocht für dich.</>}>
        <div className="of-team-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div style={{ height: 520, borderRadius: 4, overflow: 'hidden', background: '#000' }}>
            <img src="assets/photos/team-portrait-sw.jpeg" alt="Onkel Finke" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
          </div>
          <div style={{ fontSize: 18, lineHeight: 1.7, color: 'rgba(0,16,39,0.85)' }}>
            <p>Wir sind ein kleines Team aus Hamburg, das seit Jahren Feste plant und bekocht. Angefangen haben wir mit einem Grill und ein paar Bierzeltgarnituren — heute übernehmen wir komplette Hochzeiten, Firmenfeiern und alles dazwischen.</p>
            <p>Unser Versprechen: <strong>Dein Tag, unser Handwerk.</strong> Keine versteckten Posten, kein Stress, kein Schnickschnack. Wir kochen ehrlich, servieren freundlich und räumen am Ende selber auf.</p>
            <Btn size="lg" style={{ marginTop: 24 }} onClick={() => navigate('/kontakt')}>Lass schnacken</Btn>
          </div>
        </div>
      </Section>

      <Section bg="var(--cream-2)" label="Werte" title="Was uns wichtig ist.">
        <div className="of-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {[
            { t: 'Ehrlich', d: 'Klare Preise, keine Überraschungen auf der Rechnung.' },
            { t: 'Regional', d: 'Zutaten von Bauern aus der Umgebung, wo immer möglich.' },
            { t: 'Persönlich', d: 'Du redest mit uns — nicht mit einem Callcenter.' },
          ].map((v, i) => (
            <div key={i} style={{ borderTop: '1px solid var(--navy)', paddingTop: 24 }}>
              <div className="mono" style={{ color: 'var(--muted)', marginBottom: 16 }}>— 0{i + 1} —</div>
              <h3 className="serif" style={{ fontSize: 36, fontWeight: 500, fontStyle: 'italic', margin: '0 0 12px' }}>{v.t}</h3>
              <p style={{ color: 'var(--muted)', fontSize: 16, lineHeight: 1.6 }}>{v.d}</p>
            </div>
          ))}
        </div>
      </Section>
    </>
  );
}

// ============ KONTAKT ============
function KontaktPage() {
  return (
    <>
      <Section py={80} label="Kontakt" title="Lass uns reden.">
        <div className="of-kontakt-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }}>
          <div>
            <div style={{ marginBottom: 40 }}>
              <div className="mono" style={{ color: 'var(--muted)', marginBottom: 8 }}>Telefon &amp; WhatsApp</div>
              <a href="tel:+4915205862058" className="serif" style={{ fontSize: 32, fontStyle: 'italic', color: 'inherit', textDecoration: 'none' }}>0152 058 620 58</a>
            </div>
            <div style={{ marginBottom: 40 }}>
              <div className="mono" style={{ color: 'var(--muted)', marginBottom: 8 }}>E-Mail</div>
              <a href="mailto:info@onkelfinke.de" className="serif" style={{ fontSize: 32, fontStyle: 'italic', color: 'inherit', textDecoration: 'none' }}>info@onkelfinke.de</a>
            </div>
            <div>
              <div className="mono" style={{ color: 'var(--muted)', marginBottom: 8 }}>Adresse</div>
              <div className="serif" style={{ fontSize: 22, lineHeight: 1.4 }}>Hauskoppelstieg 7<br/>22111 Hamburg</div>
            </div>
          </div>
          <div className="of-kontakt-card" style={{ background: 'var(--paper)', border: '1px solid var(--line-strong)', borderRadius: 4, padding: 40 }}>
            <h3 className="serif" style={{ fontSize: 32, fontWeight: 500, fontStyle: 'italic', margin: '0 0 24px' }}>Schnell-Anfrage</h3>
            <form onSubmit={(e) => {
              e.preventDefault();
              const fd = new FormData(e.target);
              const subject = `Anfrage: ${fd.get('anlass') || ''} — ${fd.get('name') || ''}`;
              const body = [
                `Name: ${fd.get('name') || ''}`,
                `E-Mail: ${fd.get('email') || ''}`,
                `Telefon: ${fd.get('telefon') || ''}`,
                `Anlass: ${fd.get('anlass') || ''}`,
                `Datum: ${fd.get('datum') || ''}`,
                `Personen: ${fd.get('personen') || ''}`,
                '',
                'Worum geht\'s?',
                fd.get('nachricht') || '',
                '',
                '— Gesendet über onkelfinke.de'
              ].join('\n');
              window.location.href = `mailto:info@onkelfinke.de?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
            }}>
              {[
                { name: 'name', label: 'Name', type: 'text', required: true },
                { name: 'email', label: 'E-Mail', type: 'email', required: true },
                { name: 'telefon', label: 'Telefon', type: 'tel' },
                { name: 'anlass', label: 'Anlass', type: 'text' },
                { name: 'datum', label: 'Datum (geplant)', type: 'date' },
                { name: 'personen', label: 'Personen', type: 'number' },
                { name: 'nachricht', label: 'Worum geht\'s?', type: 'textarea' },
              ].map((f) => (
                <div key={f.name} style={{ marginBottom: 16 }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', marginBottom: 4 }}>{f.label}</div>
                  {f.type === 'textarea'
                    ? <textarea name={f.name} rows={4} style={{ width: '100%', padding: 12, border: '1px solid var(--line-strong)', borderRadius: 4, background: 'var(--cream)', fontFamily: 'inherit', fontSize: 14, resize: 'vertical' }} />
                    : <input name={f.name} type={f.type} required={f.required} style={{ width: '100%', padding: '12px 14px', border: '1px solid var(--line-strong)', borderRadius: 4, background: 'var(--cream)', fontFamily: 'inherit', fontSize: 14, height: 48 }} />
                  }
                </div>
              ))}
              <Btn size="lg" type="submit" style={{ marginTop: 16, width: '100%', justifyContent: 'center' }}>Anfrage senden</Btn>
            </form>
            <div style={{ textAlign: 'center', marginTop: 24, color: 'var(--muted)', fontSize: 13 }}>
              oder direkt im <a href="#/konfigurator" style={{ borderBottom: '1px solid var(--navy)' }}>Konfigurator →</a>
            </div>
          </div>
        </div>
      </Section>
    </>
  );
}

// ============ NICHT GEFUNDEN ============
function NotFound() {
  return (
    <Section py={160}>
      <h1 className="serif" style={{ fontSize: 96, fontWeight: 500, fontStyle: 'italic' }}>Nicht da.</h1>
      <p style={{ fontSize: 18, color: 'var(--muted)', marginBottom: 32 }}>Die Seite haben wir leider nicht gefunden.</p>
      <Btn onClick={() => navigate('/')}>Zur Startseite</Btn>
    </Section>
  );
}

window.PAGES = { HomePage, AnlaesseOverview, AnlassDetail, LeistungenPage, GaleriePage, UeberUnsPage, KontaktPage, NotFound };
