// Contact2.jsx — FAQ accordion + brutalist contact form + footer.

const FAQ = [
  { q: 'Was kostet so ein Event?', a: 'Pauschal kann man das nicht sagen — Ton für eine Hochzeit mit 50 Gästen ist eine andere Liga als ein Festival mit 500. Sag uns kurz was du planst, du bekommst innerhalb von 48 h ein faires Angebot.' },
  { q: 'Bis wann sollte ich anfragen?', a: 'Je früher, desto besser — Festival- und Hochzeits-Saison ist eng. Wir machen aber auch kurzfristig viel möglich, also frag einfach.' },
  { q: 'Welche Region deckt ihr ab?', a: 'Hauptsächlich Rheinhessen, Rheinland-Pfalz und das Rhein-Main-Gebiet. Größere Buchungen fahren wir auch deutschlandweit.' },
  { q: 'Kann ich Technik auch ohne euch mieten?', a: 'Klar — vieles aus dem Mietpark verleihen wir auch zur Selbstabholung an Profis. Sag Bescheid was du brauchst.' },
  { q: 'Macht ihr auch Lichtdesign für Theater / Tanz?', a: 'Ja, Fabian macht das. Schreib uns, was du vorhast.' },
  { q: 'Habt ihr eine Versicherung?', a: 'Ja, Betriebs- und Veranstalterhaftpflicht. Bescheinigungen auf Anfrage.' },
];

function Contact2() {
  window.useReveal();
  const [openFaq, setOpenFaq] = React.useState(0);
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', kind: '', date: '', guests: '', location: '', message: '' });
  const [sent, setSent] = React.useState(false);

  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });

  const onSubmit = (e) => {
    e.preventDefault();
    // Build mailto link with all data
    const body = encodeURIComponent(
      `Hallo NF-Audio,\n\n` +
      `Anlass: ${form.kind}\n` +
      `Datum: ${form.date}\n` +
      `Gäste: ${form.guests}\n` +
      `Location: ${form.location}\n\n` +
      `Nachricht:\n${form.message}\n\n` +
      `Kontakt:\n${form.name}\n${form.email}\n${form.phone}`
    );
    window.location.href = `mailto:info@nf-audio.de?subject=Event-Anfrage: ${encodeURIComponent(form.kind || 'Veranstaltung')}&body=${body}`.replace('info@', 'info@');
    setSent(true);
  };

  return (
    <React.Fragment>
      {/* ===== FAQ ===== */}
      <section id="faq" style={{
        background: 'var(--noir)',
        paddingTop: 'clamp(80px, 14vh, 160px)',
        paddingBottom: 'clamp(80px, 14vh, 160px)' }}>
        <div className="container">
          <SectionEyebrow num="05" label="Häufige Fragen" />

          <div className="reveal" style={{ marginBottom: 'clamp(48px, 8vh, 96px)' }}>
            <h2 className="display" style={{ fontSize: 'var(--t-display)', margin: 0, color: 'var(--paper)' }}>
              Antworten,<br/>
              <span style={{ color: 'var(--neon)' }}>kurz</span> und ehrlich.
            </h2>
          </div>

          <div style={{ borderTop: '1px solid rgba(242,240,234,0.15)' }}>
            {FAQ.map((item, i) => (
              <div key={i} className="reveal" style={{ borderBottom: '1px solid rgba(242,240,234,0.15)' }}>
                <button
                  data-hover
                  onClick={() => setOpenFaq(openFaq === i ? -1 : i)}
                  style={{
                    width: '100%',
                    padding: '28px 0',
                    display: 'grid',
                    gridTemplateColumns: 'auto minmax(0, 1fr) auto',
                    alignItems: 'center',
                    gap: 24,
                    textAlign: 'left',
                    color: 'var(--paper)' }}>
                  <span className="mono" style={{ fontSize: 13, color: 'var(--neon)', letterSpacing: '0.16em', fontWeight: 600 }}>
                    {String(i + 1).padStart(2, '0')}
                  </span>
                  <span className="display" style={{ fontSize: 'clamp(20px, 2.2vw, 30px)', letterSpacing: '-0.02em' }}>{item.q}</span>
                  <span style={{
                    width: 36, height: 36,
                    border: '1px solid var(--paper)',
                    borderRadius: 999,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    transition: 'transform 0.3s, background 0.3s, border-color 0.3s',
                    transform: openFaq === i ? 'rotate(45deg)' : 'rotate(0)',
                    background: openFaq === i ? 'var(--neon)' : 'transparent',
                    borderColor: openFaq === i ? 'var(--neon)' : 'var(--paper)',
                    color: openFaq === i ? 'var(--noir)' : 'var(--paper)',
                    flexShrink: 0 }}>
                    <span style={{ fontSize: 20, lineHeight: 1, fontWeight: 200 }}>+</span>
                  </span>
                </button>
                <div style={{
                  display: 'grid',
                  gridTemplateRows: openFaq === i ? '1fr' : '0fr',
                  transition: 'grid-template-rows 0.4s cubic-bezier(0.2, 0.7, 0.2, 1)' }}>
                  <div style={{ overflow: 'hidden' }}>
                    <div style={{
                      paddingLeft: 56,
                      paddingBottom: 28,
                      fontSize: 17, lineHeight: 1.55, color: 'var(--ink-soft)',
                      maxWidth: 720 }}>
                      {item.a}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== CONTACT FORM ===== */}
      <section id="kontakt" style={{
        background: 'var(--paper)',
        color: 'var(--noir)',
        paddingTop: 'clamp(80px, 14vh, 160px)',
        paddingBottom: 'clamp(80px, 14vh, 160px)' }}>
        <div className="container">
          <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginBottom: 28 }}>
            <span className="mono" style={{ fontSize: 13, color: 'var(--noir)', fontWeight: 600, letterSpacing: '0.12em' }}>// 06</span>
            <span style={{ height: 1, flex: 1, background: 'rgba(10,10,10,0.18)' }}></span>
            <span className="eyebrow" style={{ color: 'var(--noir)' }}>Anfragen</span>
          </div>

          <h2 className="reveal display" style={{
            fontSize: 'var(--t-display)', margin: '0 0 clamp(40px, 8vh, 80px)',
            color: 'var(--noir)' }}>
            Erzähl uns von<br/>
            deinem <span style={{ color: 'var(--blue)' }}>Event</span>.
          </h2>

          {sent ? (
            <div className="reveal" style={{
              padding: 'clamp(40px, 8vw, 80px)',
              border: '1px solid var(--noir)',
              textAlign: 'center' }}>
              <div className="display" style={{ fontSize: 'clamp(36px, 5vw, 64px)', color: 'var(--noir)', marginBottom: 16 }}>Danke!</div>
              <p style={{ fontSize: 18, color: 'var(--noir)', marginBottom: 24 }}>
                Deine Anfrage liegt in unserer Mailbox — wir melden uns innerhalb von 48 h.
              </p>
              <button className="btn" onClick={() => setSent(false)} style={{ borderColor: 'var(--noir)', color: 'var(--noir)' }}>
                <span>Neue Anfrage</span>
              </button>
            </div>
          ) : (
            <form onSubmit={onSubmit} className="reveal" style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(2, 1fr)',
              gap: 0,
              borderTop: '1px solid var(--noir)',
              borderLeft: '1px solid var(--noir)' }}>
              {[
                { name: 'name', label: 'Dein Name', type: 'text', span: 1, required: true },
                { name: 'email', label: 'E-Mail', type: 'email', span: 1, required: true },
                { name: 'phone', label: 'Telefon', type: 'tel', span: 1 },
                { name: 'kind', label: 'Anlass (Hochzeit, Festival, …)', type: 'text', span: 1 },
                { name: 'date', label: 'Wann?', type: 'text', placeholder: 'z. B. 14. Sept. 2026', span: 1 },
                { name: 'guests', label: 'Gäste / Personen?', type: 'text', span: 1 },
                { name: 'location', label: 'Wo? (Ort / Location)', type: 'text', span: 2 },
                { name: 'message', label: 'Was schwebt dir vor?', type: 'textarea', span: 2 },
              ].map(field => (
                <label key={field.name} style={{
                  gridColumn: `span ${field.span}`,
                  borderRight: '1px solid var(--noir)',
                  borderBottom: '1px solid var(--noir)',
                  padding: '22px 24px 18px',
                  display: 'flex', flexDirection: 'column', gap: 8,
                  background: 'var(--paper)',
                  transition: 'background 0.2s' }}
                onFocus={e => e.currentTarget.style.background = 'rgba(214,255,31,0.15)'}
                onBlur={e => e.currentTarget.style.background = 'var(--paper)'}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--noir)', letterSpacing: '0.16em', fontWeight: 600, textTransform: 'uppercase' }}>
                    {field.label}{field.required && <span style={{ color: 'var(--blue)' }}> *</span>}
                  </span>
                  {field.type === 'textarea' ? (
                    <textarea
                      required={field.required}
                      value={form[field.name]}
                      onChange={e => setForm({ ...form, [field.name]: e.target.value })}
                      placeholder={field.placeholder}
                      rows={4}
                      style={{
                        background: 'transparent', border: 0, outline: 0,
                        fontFamily: 'Barlow, sans-serif', fontSize: 18,
                        color: 'var(--noir)', resize: 'vertical',
                        padding: 0 }}
                    />
                  ) : (
                    <input
                      type={field.type}
                      required={field.required}
                      value={form[field.name]}
                      onChange={e => setForm({ ...form, [field.name]: e.target.value })}
                      placeholder={field.placeholder}
                      style={{
                        background: 'transparent', border: 0, outline: 0,
                        fontFamily: 'Barlow, sans-serif', fontSize: 18,
                        color: 'var(--noir)', padding: 0 }}
                    />
                  )}
                </label>
              ))}
              <div style={{
                gridColumn: 'span 2',
                borderRight: '1px solid var(--noir)',
                borderBottom: '1px solid var(--noir)',
                padding: '24px',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap',
                background: 'var(--noir)' }}>
                <p style={{ fontSize: 14, color: 'var(--paper)', margin: 0, maxWidth: 480 }}>
                  Antwort innerhalb von 48 Stunden — meistens schneller. Kein Spam, kein Newsletter.
                </p>
                <button type="submit" data-hover className="btn btn-fill" style={{ fontSize: 13 }}>
                  <span>Anfrage senden</span>
                  <span className="arrow">→</span>
                </button>
              </div>
            </form>
          )}

          {/* Direct contact lines */}
          <div className="reveal" style={{
            marginTop: 'clamp(60px, 10vh, 120px)',
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
            gap: 32,
            paddingTop: 32,
            borderTop: '1px solid var(--noir)' }}>
            <div>
              <div className="eyebrow" style={{ color: 'var(--noir)', marginBottom: 8 }}>Schreib uns</div>
              <a href="mailto:info@nf-audio.de" data-hover className="display" style={{ fontSize: 'clamp(20px, 2vw, 28px)', color: 'var(--noir)', textTransform: 'none', letterSpacing: '-0.02em' }}>
                info@nf-audio.de
              </a>
            </div>
            <div>
              <div className="eyebrow" style={{ color: 'var(--noir)', marginBottom: 8 }}>Ruf an</div>
              <a href="tel:017788376500" data-hover className="display" style={{ fontSize: 'clamp(20px, 2vw, 28px)', color: 'var(--noir)', textTransform: 'none', letterSpacing: '-0.02em', display: 'block' }}>
                0177 88 37 650
              </a>
              <a href="tel:015156317804" data-hover className="display" style={{ fontSize: 'clamp(20px, 2vw, 28px)', color: 'var(--noir)', textTransform: 'none', letterSpacing: '-0.02em', display: 'block' }}>
                01515 631 78 04
              </a>
            </div>
            <div>
              <div className="eyebrow" style={{ color: 'var(--noir)', marginBottom: 8 }}>Komm vorbei</div>
              <div className="display" style={{ fontSize: 'clamp(20px, 2vw, 28px)', color: 'var(--noir)', textTransform: 'none', letterSpacing: '-0.02em' }}>
                Grabenstr. 36<br/>55437 Ockenheim
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 4 }}>nach Absprache</div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== BIG NOIR FOOTER ===== */}
      <footer style={{ background: 'var(--noir)', paddingTop: 'clamp(60px, 10vh, 120px)', paddingBottom: 'clamp(40px, 6vh, 80px)' }}>
        <div className="container">
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
            gap: 40,
            marginBottom: 60 }}>
            <div>
              <img src={(window.__resources && window.__resources.logo) || "assets/logo-nf-audio.png"} alt="NF-Audio" style={{ height: 32, marginBottom: 16 }} />
              <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-soft)', margin: 0, maxWidth: 280 }}>
                NF-Audio Veranstaltungstechnik — Ton, Licht und Bühne für dein Event in Rheinhessen und darüber hinaus.
              </p>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Sitemap</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 14 }}>
                <li><a data-hover href="#leistungen">Leistungen</a></li>
                <li><a data-hover href="#technik">Technik</a></li>
                <li><a data-hover href="katalog.html">Mietkatalog</a></li>
                <li><a data-hover href="#team">Team</a></li>
                <li><a data-hover href="#kontakt">Kontakt</a></li>
              </ul>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Kontakt</div>
              <div style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--paper)' }}>
                Grabenstr. 36<br/>
                55437 Ockenheim<br/>
                0177 88 37 650<br/>
                info@nf-audio.de
              </div>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Impressum</div>
              <div style={{ fontSize: 13, lineHeight: 1.7, color: 'var(--ink-soft)' }}>
                NF-Audio Veranstaltungstechnik<br/>
                Inh. Nils Hassemer<br/>
                StNr 08/2/531/0079/7<br/>
                USt-IdNr DE322600871<br/>
                Bild­nach­weise: christian-hattemer.de, DOMTOM, Fabian Scheele
              </div>
            </div>
          </div>

          <div style={{
            paddingTop: 32,
            borderTop: '1px solid rgba(242,240,234,0.15)',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap',
            fontSize: 12, color: 'var(--ink-soft)' }}>
            <div className="mono" style={{ letterSpacing: '0.12em' }}>© 2026 NF-AUDIO · OCKENHEIM, DE</div>
            <a href="katalog-admin.html" className="mono" style={{ letterSpacing: '0.12em', color: 'var(--ink-soft)', textDecoration: 'none', opacity: 0.7 }}>KATALOG BEARBEITEN</a>
          </div>
        </div>
      </footer>
    </React.Fragment>
  );
}
window.Contact2 = Contact2;