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

// ============ Page Hero ============
function AboutHero() {
  return (
    <section className="page-hero wrap" id="top" data-comment-anchor="4749dd83f3-section-9-5">
      <div className="ph-top">
        <div className="mono">(ABOUT) · CHI SIAMO</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>Chi</TR>
          <TR>siamo<span className="acc">.</span></TR>
        </h1>
        <p className="ph-sub">Storia, persone, filosofia. Dietro ogni evento c'è una squadra. Questa è la nostra.</p>
      </div>

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

}

// ============ Story (chapters) ============
const CHAPTERS = [
{
  year: '2019',
  title: 'Le origini.',
  body: [
  <span key="p1">Blast Events nasce nella <strong>provincia di Belluno</strong> con un'idea precisa. Proporre un <em>nuovo format di eventi</em>, capace di unire intrattenimento, qualità e attenzione ai dettagli.</span>,
  <span key="p2">Fin dall'inizio il focus è creare <strong>esperienze coinvolgenti</strong>, costruite su misura per il territorio e per il pubblico, curando ogni aspetto organizzativo e creativo.</span>]

},
{
  year: '2025',
  title: 'La svolta tecnica.',
  body: [
  <span key="p1">Negli anni abbiamo evoluto le competenze, ampliando il raggio d'azione e consolidando un <em>know-how tecnico sempre più solido</em>.</span>,
  <span key="p2">Con il 2025 un passo avanti importante. Ci specializziamo nel <strong>service audio e luci</strong>, diventando parte integrante di ciò che sta dietro ogni evento. La struttura tecnica, l'atmosfera, la resa scenica.</span>]

},
{
  year: 'Oggi',
  title: 'Assistenza completa.',
  body: [
  <span key="p1">Un servizio che parte dall'<strong>ideazione</strong> e arriva fino alla <strong>realizzazione</strong>, includendo la progettazione di <em>palchi completamente personalizzati</em> in base alle esigenze del cliente.</span>,
  <span key="p2">Ogni progetto viene studiato con attenzione, combinando <strong>funzionalità, estetica e sicurezza</strong>.</span>]

}];


function Story() {
  return (
    <section id="story" className="story wrap">
      <div className="section-head reveal has-title">
        <div>
          <div className="section-kicker">(01) La storia</div>
          <h2>
            <TR>Sette anni,</TR>
            <TR>una rotta.</TR>
          </h2>
        </div>
        <div style={{ alignSelf: 'end', maxWidth: 320 }}>
          <PulseLine />
        </div>
      </div>

      <div className="chapters">
        {CHAPTERS.map((c, i) =>
        <article key={c.year} className="chapter reveal">
            <div className="ch-year">{c.year}</div>
            <div className="ch-body">
              <div className="ch-index mono">[CAP·0{i + 1}]</div>
              <h3 className="ch-title">{c.title}</h3>
              {c.body.map((p, j) => <p key={j} className="ch-text">{p}</p>)}
            </div>
          </article>
        )}
      </div>
    </section>);

}

// ============ Philosophy ============
const PILLARS = [
{ n: '01', word: 'Passione', tag: 'CORE VALUE' },
{ n: '02', word: 'Affidabilità', tag: 'CORE VALUE' },
{ n: '03', word: 'Innovazione', tag: 'CORE VALUE', accent: true }];


function Philosophy() {
  return (
    <section id="philosophy" className="philo wrap">
      <div className="section-head reveal has-title">
        <div>
          <div className="section-kicker">(02) Filosofia</div>
          <h2>
            <TR>Il nostro</TR>
            <TR>codice.</TR>
          </h2>
        </div>
      </div>

      <div className="philo-words">
        {PILLARS.map((p) =>
        <div key={p.n} className="philo-word reveal">
            <span className="philo-num">[{p.n}]</span>
            <span className="philo-text">
              {p.accent ? <span className="acc">{p.word}</span> : p.word}
            </span>
            <span className="philo-tag">{p.tag}</span>
          </div>
        )}
      </div>
    </section>);

}

// ============ Team ============
const TEAM = [
{ n: '01', first: 'Manuel', last: 'Dal Pont', role: 'Audio & Lighting' },
{ n: '02', first: 'Lorenzo', last: 'De Moliner', role: 'Ledwall & Lighting' }];


function TeamRow({ p }) {
  return (
    <div className="team-row reveal">
      <div className="tr-index">[{p.n}]</div>
      <div className="tr-name">{p.first} <span className="tr-last">{p.last}</span></div>
      <div className="tr-role">{p.role}</div>
      <div className="tr-dot"><span className="dot" /></div>
    </div>);

}

function Team() {
  return (
    <section id="team" className="team wrap">
      <div className="section-head reveal has-title">
        <div>
          <div className="section-kicker">(03) Il team</div>
          <h2>
            <TR>Le persone</TR>
            <TR>dietro.</TR>
          </h2>
        </div>
      </div>

      <div className="team-roster">
        {TEAM.map((p) => <TeamRow key={p.n} p={p} />)}
      </div>
    </section>);

}

// ============ CTA — back to home contact ============
function CTA() {
  return (
    <section id="cta" className="about-cta wrap reveal has-title" data-comment-anchor="b3aa506c8d-section-198-5">
      <div className="section-kicker">(04) Prossimo capitolo</div>
      <h2 className="bigword">
        <TR>Lavoriamo</TR>
        <TR>insieme<span className="acc">.</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 AboutApp({ tweaks }) {
  useCursor();
  useReveal();
  useNavScroll();
  const [menu, setMenu] = useState(false);

  // Apply tweaks (same shape as home)
  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)} />
      <AboutHero />
      <Story />
      <Philosophy />
      <Team />
      <CTA />
      <Footer />
    </>);

}

window.AboutApp = AboutApp;