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

// ============ Page Hero ============
function ServiziHero() {
  return (
    <section className="page-hero wrap" id="top">
      <div className="ph-top">
        <div className="mono">(SERVIZI) · COSA FACCIAMO</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>I nostri</TR>
          <TR>servizi<span className="acc">.</span></TR>
        </h1>
        <p className="ph-sub">
          Sei aree di intervento. Una sola squadra che coordina tutto, dall'idea al palco montato, dal primo soundcheck all'ultima nota.
        </p>
      </div>

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

}

// ============ Intro band ============
function Intro() {
  return (
    <section className="svc-intro wrap">
      <div className="grid">
        <div className="reveal has-title">
          <div className="section-kicker">(01) Approccio</div>
          <h2>
            <TR>Service tecnico,</TR>
            <TR>regia completa.</TR>
          </h2>
          <div style={{ marginTop: 32 }}><PulseLine /></div>
        </div>
        <div className="reveal">
          <p>Lavoriamo come <strong>partner tecnico unico</strong>. Niente coordinamento tra fornitori scollegati, niente passaggi di consegne persi. Una squadra sola, dal sopralluogo al teardown.</p>
          <p>Per ogni evento studiamo l'<strong>acustica della location</strong>, la <strong>resa scenica</strong>, il <strong>flow del pubblico</strong>. Il risultato non è una somma di attrezzature. È un'esperienza coerente.</p>
          <p style={{ color: 'var(--fg-dim)', fontSize: 14, fontFamily: 'var(--mono)', letterSpacing: '.06em', textTransform: 'uppercase', marginTop: 28 }}>
            Live · Festival · Corporate · Private · Tour Support
          </p>
        </div>
      </div>
    </section>);

}

// ============ Detailed Services ============
const SERVIZI_DETAIL = [
{
  n: '01',
  t: 'Service Audio',
  lede: "Suono pulito, intelligibile, dimensionato sull'ambiente e sul pubblico.",
  body: <>Sistemi <strong>line array</strong> di ultima generazione, mixing FOH e monitor digitali, in-ear monitoring per artisti. <strong>Sound design tarato sull'acustica del luogo</strong> con misurazioni preventive e tuning su site.</>,
  feats: ['Line array', 'Mix FOH digitale', 'In-ear monitor', 'Sound design']
},
{
  n: '02',
  t: 'Service Luci',
  lede: "Light design dinamico, programmato sullo show.",
  body: <>Light design, motion fixture e wash, gestione <strong>DMX/Art-Net</strong> in rete, programmazione su console <strong>grandMA</strong> e <strong>Avolites</strong>. Cue list sincronizzate con audio e video per uno show coerente dall'inizio alla fine.</>,
  feats: ['Moving heads', 'grandMA / Avolites', 'DMX · Art-Net', 'Cue programming']
},
{
  n: '03',
  t: 'Palchi Custom',
  lede: "Progettazione strutturale e scenografica chiavi in mano.",
  body: <>Palchi <strong>completamente personalizzati</strong> in base alle esigenze del cliente. Americane, truss, coperture climatiche, calcoli statici e <strong>certificazioni di sicurezza</strong> incluse. Layout scenico studiato per artisti, pubblico e regia.</>,
  feats: ['Layer truss', 'Coperture', 'Calcoli statici', 'Certificazioni']
},
{
  n: '04',
  t: 'Event Production',
  lede: "Ideazione, regia, coordinamento. Dall'idea al primo applauso.",
  body: <>Concept dell'evento, <strong>cronoprogramma</strong>, regia tecnica e artistica, coordinamento staff e fornitori, gestione SIAE e permessi. Una sola interfaccia per il cliente, una sola squadra a terra.</>,
  feats: ['Concept', 'Cronoprogramma', 'Coordinamento staff', 'SIAE & permessi']
},
{
  n: '05',
  t: 'Video & LED Wall',
  lede: "Schermi LED indoor/outdoor, regia multi-camera, content sync.",
  body: <>Pareti LED <strong>P3 / P4</strong> per indoor e outdoor, regia <strong>multi-camera</strong>, content design sincronizzato con il light show. Streaming live opzionale per eventi ibridi.</>,
  feats: ['LED Wall P3/P4', 'Regia multi-cam', 'Content design', 'Streaming']
},
{
  n: '06',
  t: 'Eventi Privati',
  lede: "Matrimoni, compleanni, aziendali. Rigore live, eleganza private.",
  body: <>Il rigore tecnico del live show applicato a <strong>matrimoni, compleanni, anniversari</strong> e celebrazioni aziendali. Allestimenti su misura, audio discreto ma potente, luci scenografiche che rispettano l'atmosfera.</>,
  feats: ['Matrimoni', 'Compleanni', 'Aziendali', 'Cerimonie']
}];


function ServiziDetailed() {
  return (
    <section id="servizi-list" className="svc-detailed wrap">
      <div className="section-head reveal has-title">
        <div>
          <div className="section-kicker">(02) Cosa offriamo</div>
          <h2>
            <TR>Sei aree,</TR>
            <TR>un solo team.</TR>
          </h2>
        </div>
        <div className="kicker">
          Ogni servizio è disponibile come stand-alone o integrato in un pacchetto completo.
        </div>
      </div>

      <div className="svc-detail-list">
        {SERVIZI_DETAIL.map((s) =>
        <article key={s.n} className="svc-detail reveal">
            <div className="num">[{s.n}]</div>
            <div className="head">
              <h3>{s.t}</h3>
              <p className="lede">{s.lede}</p>
            </div>
            <div className="body">
              <p>{s.body}</p>
              <div className="feats">
                {s.feats.map((f) => <span key={f}>{f}</span>)}
              </div>
            </div>
            <div className="arrow">→</div>
          </article>
        )}
      </div>
    </section>);

}

// ============ Process steps ============
const STEPS = [
{ n: '01', t: 'Brief', d: "Incontro, sopralluogo, ascolto. Capiamo evento, location, obiettivi e budget." },
{ n: '02', t: 'Progettazione', d: "Light design, sound design, layout palco. Render, schede tecniche, preventivo dettagliato." },
{ n: '03', t: 'Setup & Soundcheck', d: "Carico, montaggio, line check, prove. Tutto pronto prima che arrivi il pubblico." },
{ n: '04', t: 'Live', d: "Regia tecnica live, gestione imprevisti, monitoraggio continuo di audio, luci e palco. Il pubblico sente solo il risultato." },
{ n: '05', t: 'Smontaggio', d: "Teardown rapido e ordinato. Carico, restituzione della location come trovata, debrief con il cliente." }];


function Process() {
  return (
    <section id="processo" className="process wrap">
      <div className="section-head reveal has-title">
        <div>
          <div className="section-kicker">(03) Processo</div>
          <h2>
            <TR>Come</TR>
            <TR>lavoriamo.</TR>
          </h2>
        </div>
        <div className="kicker">
          Cinque tappe. Comunicazione chiara a ogni step.
        </div>
      </div>

      <div className="steps">
        {STEPS.map((s) =>
        <div key={s.n} className="step reveal">
            <div className="step-num">FASE · {s.n}</div>
            <div className="step-title">{s.t}</div>
            <div className="step-desc">{s.d}</div>
          </div>
        )}
      </div>
    </section>);

}

// ============ CTA ============
function CTA() {
  return (
    <section id="cta" className="about-cta wrap reveal has-title" data-comment-anchor="fb5dde7bea-section-187-5">
      <div className="section-kicker">(04) Prossimo step</div>
      <h2 className="bigword">
        <TR>Raccontaci</TR>
        <TR>il tuo<span className="acc"> evento.</span></TR>
      </h2>
      <div className="actions">
        <a className="btn primary" href="contatti.html">
          <span className="dot" /> Richiedi un preventivo
        </a>
        <a className="btn" href="portfolio.html">Vedi i lavori</a>
      </div>
    </section>);

}

// ============ Root ============
function ServiziApp({ 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)} />
      <ServiziHero />
      <Intro />
      <ServiziDetailed />
      <Process />
      <CTA />
      <Footer />
    </>);

}

window.ServiziApp = ServiziApp;