// Blast Events — Contatti page
const { useEffect, useState } = React;
const { TR, Nav, MobileMenu, Footer,
  useCursor, useReveal, useNavScroll, submitContactForm } = window;

const ADDRESS_LINE1 = 'Via Sigi Lechner, 28';
const ADDRESS_LINE2 = '32100 Belluno (BL) · Italia';
const MAPS_QUERY = 'Via+Sigi+Lechner+28+Belluno';
const PHONE_1 = '+39 340 262 2355';
const PHONE_1_TEL = '+393402622355';
const PHONE_2 = '+39 349 118 6039';
const PHONE_2_TEL = '+393491186039';
// WhatsApp sul primo numero — confermare con il cliente quale ha WhatsApp
const WHATSAPP_NUMBER = '393402622355';
const WHATSAPP_HREF = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent('Ciao Blast Events, vorrei informazioni su un evento.')}`;

// ============ Page Hero ============
function ContattiHero() {
  return (
    <section className="page-hero wrap" id="top">
      <div className="ph-top">
        <div className="mono">(CONTATTI) · GET IN TOUCH</div>
        <div className="mono">BL · BELLUNO · IT</div>
        <div className="mono">EST. 2019</div>
      </div>

      <div className="ph-lockup reveal has-title">
        <h1 className="ph-h1">
          <TR>Contatta</TR>
          <TR>il team<span className="acc">.</span></TR>
        </h1>
        <p className="ph-sub">
          Raccontaci il tuo evento. Rispondiamo entro 24h, da lunedì a venerdì. Per richieste urgenti, scrivici direttamente via email.
        </p>
      </div>

      <div className="ph-bottom">
        <div className="scroll"><span className="arr" /><span>scroll · form</span></div>
        <div></div>
        <div></div>
      </div>
    </section>);

}

// ============ Contact form + info ============
function ContactForm() {
  const [sent, setSent] = useState(false);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState(false);
  return (
    <form onSubmit={async (e) => {
      e.preventDefault();
      // Honeypot: bots fill hidden fields. Real users leave them empty.
      if (e.target.elements.website && e.target.elements.website.value) return;
      setErr(false); setBusy(true);
      try {
        const ok = await submitContactForm(e.target);
        if (ok) { setSent(true); e.target.reset(); } else { setErr(true); }
      } catch (_) { setErr(true); }
      setBusy(false);
    }}>
      {/* Honeypot — hidden from humans, attractive to bots */}
      <div style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, overflow: 'hidden' }} aria-hidden="true">
        <label htmlFor="cf-website">Sito web</label>
        <input type="text" id="cf-website" name="website" tabIndex={-1} autoComplete="off" />
      </div>

      <div className="field">
        <label htmlFor="cf-name">Nome e cognome <span className="req">*</span></label>
        <input type="text" id="cf-name" name="name" autoComplete="name" placeholder="Mario Rossi" required data-comment-anchor="6060dfab5e-input-54-52" />
      </div>
      <div className="field-row">
        <div className="field">
          <label htmlFor="cf-email">Email <span className="req">*</span></label>
          <input type="email" id="cf-email" name="email" autoComplete="email" placeholder="mario@email.it" required />
        </div>
        <div className="field">
          <label htmlFor="cf-phone">Telefono</label>
          <input type="tel" id="cf-phone" name="phone" autoComplete="tel" placeholder="+39 333 0000000" />
        </div>
      </div>
      <div className="field">
        <label htmlFor="cf-type">Tipo evento</label>
        <input type="text" id="cf-type" name="event_type" placeholder="Live, matrimonio, festival, aziendale..." />
      </div>
      <div className="field">
        <label htmlFor="cf-msg">Descrizione <span className="req">*</span></label>
        <textarea id="cf-msg" name="message" placeholder="Tipo di evento, location, data prevista, esigenze tecniche..." required minLength={20}></textarea>
      </div>

      <div className="field consent">
        <label htmlFor="cf-privacy" style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13, lineHeight: 1.45, cursor: 'pointer' }}>
          <input type="checkbox" id="cf-privacy" name="privacy" required style={{ marginTop: 3, accentColor: 'var(--accent)' }} />
          <span>Ho letto l'<a href="https://www.iubenda.com/privacy-policy/59618259" target="_blank" rel="noopener noreferrer">informativa privacy</a> e acconsento al trattamento dei dati per rispondere alla mia richiesta. <span className="req">*</span></span>
        </label>
      </div>

      <button className="btn primary" type="submit" disabled={busy || sent}>
        <span className="dot" /> {sent ? 'Messaggio inviato' : busy ? 'Invio...' : 'Invia richiesta'}
      </button>
      {err && <p style={{ marginTop: 14, fontSize: 13, color: 'var(--accent)' }}>Invio non riuscito. Riprova o scrivici a info@blasteventservice.com.</p>}
      <p style={{ marginTop: 18, fontSize: 12, color: 'var(--fg-dim)', fontFamily: 'var(--mono)', letterSpacing: '.06em' }}>RISPONDIAMO ENTRO 24H · LUN–VEN</p>
    </form>);

}

function ContactSection() {
  return (
    <section id="form" className="contact-page wrap">
      <div className="section-head reveal has-title">
        <div>
          <div className="section-kicker">(01) Richiesta</div>
          <h2>
            <TR>Scrivici.</TR>
          </h2>
        </div>
        <div className="kicker">
          Più dettagli ci dai, più precisa sarà la nostra risposta. Niente è troppo presto.
        </div>
      </div>

      <div className="contact-page-grid">
        <div className="reveal">
          <ContactForm />
        </div>

        <div className="reveal">
          <div className="info-block">
            <div className="row">
              <span className="k">Telefono</span>
              <span className="v big">
                <a href={`tel:${PHONE_1_TEL}`}>{PHONE_1}</a>
                <small><a href={`tel:${PHONE_2_TEL}`}>{PHONE_2}</a></small>
              </span>
            </div>
            <div className="row">
              <span className="k">WhatsApp</span>
              <span className="v big">
                <a href={WHATSAPP_HREF} target="_blank" rel="noopener noreferrer">Scrivici su WhatsApp →</a>
              </span>
            </div>
            <div className="row">
              <span className="k">Email</span>
              <span className="v big"><a href="mailto:info@blasteventservice.com">info@blasteventservice.com</a></span>
            </div>
            <div className="row">
              <span className="k">Sede</span>
              <span className="v">
                {ADDRESS_LINE1}
                <small>{ADDRESS_LINE2}</small>
              </span>
            </div>
            <div className="row">
              <span className="k">Orari</span>
              <span className="v">Lun–Ven · 09:00–18:00<small>Sabato e domenica su appuntamento</small></span>
            </div>
            <div className="row">
              <span className="k">Categoria</span>
              <span className="v">Event Planner · Service Audio & Luci</span>
            </div>
            <div className="row">
              <span className="k">Social</span>
              <span className="v">
                <div className="social-links">
                  <a href="#">Facebook</a>
                  <a href="#">Instagram</a>
                </div>
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============ Maps band ============
function MapsBand() {
  const mapsSrc = `https://www.google.com/maps?q=${MAPS_QUERY}&output=embed&z=16`;
  const directionsHref = `https://www.google.com/maps/dir/?api=1&destination=${MAPS_QUERY}`;
  return (
    <section id="mappa" className="maps-band">
      <div className="maps-head reveal has-title">
        <div>
          <div className="section-kicker">(02) Dove siamo</div>
          <h2><TR>Vienici a trovare.</TR></h2>
        </div>
      </div>

      <div className="maps-wrap">
        <div className="maps-overlay">
          <div className="label">● Sede operativa</div>
          <div className="addr">
            {ADDRESS_LINE1}
            <small>{ADDRESS_LINE2}</small>
          </div>
          <div className="links">
            <a href={directionsHref} target="_blank" rel="noopener noreferrer">Indicazioni →</a>
            <a href={`https://www.google.com/maps/search/?api=1&query=${MAPS_QUERY}`} target="_blank" rel="noopener noreferrer">Apri in Maps</a>
          </div>
        </div>
        <iframe
          title="Mappa sede Blast Events"
          src={mapsSrc}
          allowFullScreen=""
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade" />
        
      </div>
    </section>);

}

// ============ FAQ ============
const FAQ_SLOTS = [
{ n: '01' },
{ n: '02' },
{ n: '03' },
{ n: '04' },
{ n: '05' },
{ n: '06' }];


function FaqSlot({ n }) {
  return (
    <div className="faq-slot reveal">
      <div className="fs-num">[{n}]</div>
      <div className="fs-body">
        <div className="fs-q">
          <span className="placeholder">domanda_{n}</span> <span className="placeholder ita">pending</span>
        </div>
        <div className="fs-stripes" aria-hidden>
          <svg viewBox="0 0 400 40" preserveAspectRatio="none">
            <defs>
              <pattern id={`fs-pat-${n}`} width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(38)">
                <rect width="5" height="5" fill="#0d0d0d" />
                <line x1="0" y1="0" x2="0" y2="5" stroke="#1f1f1f" strokeWidth="2" />
              </pattern>
            </defs>
            <rect width="400" height="40" fill={`url(#fs-pat-${n})`} />
          </svg>
        </div>
      </div>
      <div className="fs-tag">// pending</div>
    </div>);

}

function FaqSection() {
  return (
    <section id="faq" className="faq wrap">
      <div className="section-head reveal has-title">
        <div>
          <div className="section-kicker">(03) Domande frequenti</div>
          <h2>
            <TR>Domande</TR>
            <TR>frequenti.</TR>
          </h2>
        </div>
      </div>
      <div className="faq-list">
        {FAQ_SLOTS.map((f) => <FaqSlot key={f.n} n={f.n} />)}
      </div>
    </section>);

}

// ============ Root ============
function ContattiApp({ tweaks }) {
  useCursor();
  useReveal();
  useNavScroll();
  const [menu, setMenu] = useState(false);

  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--accent', tweaks.accent);
    r.setProperty('--display', tweaks.display);
    r.setProperty('--density', tweaks.density);
    if (tweaks.theme === 'light') {
      r.setProperty('--bg', '#f4f1ea');r.setProperty('--bg-2', '#ebe7dd');
      r.setProperty('--fg', '#0a0a0a');r.setProperty('--fg-dim', '#666');
      r.setProperty('--line', '#dcd6c8');r.setProperty('--line-2', '#c8c1b0');
      r.setProperty('--accent-ink', '#f4f1ea');
    } else {
      r.setProperty('--bg', '#000');r.setProperty('--bg-2', '#0a0a0a');
      r.setProperty('--fg', '#ffffff');r.setProperty('--fg-dim', '#8a8a8a');
      r.setProperty('--line', '#1a1a1a');r.setProperty('--line-2', '#2a2a2a');
      r.setProperty('--accent-ink', '#000');
    }
  }, [tweaks]);

  return (
    <>
      <Nav onMenu={() => setMenu(true)} />
      <MobileMenu open={menu} onClose={() => setMenu(false)} />
      <ContattiHero />
      <ContactSection />
      <MapsBand />
      <FaqSection />
      <Footer />
    </>);

}

window.ContattiApp = ContattiApp;