const { useState, useEffect } = React;

const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "marqueeSpeed": 40,
  "showProgramma": false,
  "showMenu": false,
  "showPrices": false,
  "showMappa": false
}/*EDITMODE-END*/;

const PROGRAM = [
  {
    day: 1,
    dayName: "Lunedì",
    date: "01",
    month: "giugno",
    act: "DeeRadio",
    genre: "Cover Band a 360^ con medley tutti da ballare.",
    desc: "Una notte tra le hit che hanno fatto ballare intere generazioni.",
    tagline: "Si parte con i grandi successi che hanno fatto storia.",
    time: "22:00",
    place: "Giardini Pubblici di Cipresso",
    status: null,
  },
  {
    day: 2,
    dayName: "Martedì",
    date: "02",
    month: "giugno",
    act: "Blascoband",
    genre: "Tributo · Vasco Rossi",
    desc: "Una scaletta tutta dedicata al rocker di Zocca, dai brani storici alle ultime hit. Birra alla spina e cori da stadio garantiti.",
    tagline: "Il rock di Vasco riempie la piazza, sera numero due.",
    time: "21:30",
    place: "Giardini Pubblici di Cipresso",
    status: null,
  },
  {
    day: 3,
    dayName: "Mercoledì",
    date: "03",
    month: "giugno",
    act: "Teatro di Colle",
    genre: "Teatro · Compagnia locale",
    desc: "La compagnia teatrale del paese porta in scena una commedia in dialetto. Una serata diversa, più intima, da vivere tutti insieme.",
    tagline: "Una pausa dal ritmo, fra risate e applausi.",
    time: "21:00",
    place: "Giardini Pubblici di Cipresso",
    status: null,
  },
  {
    day: 4,
    dayName: "Giovedì",
    date: "04",
    month: "giugno",
    act: "Atmosfera Blu",
    genre: "Liscio · Ballo di gruppo",
    desc: "",
    tagline: "",
    time: "21:30",
    place: "Giardini Pubblici di Cipresso",
    status: null,
  },
  {
    day: 5,
    dayName: "Venerdì",
    date: "05",
    month: "giugno",
    act: "Rollover",
    altAct: "Armando Bros",
    genre: "Live DJ Set",
    desc: "",
    tagline: "",
    time: "21:30",
    place: "Giardini Pubblici di Cipresso",
    status: null,
  },
  {
    day: 6,
    dayName: "Sabato",
    date: "06",
    month: "giugno",
    act: "88 Folli",
    genre: "Live · Anni '80 in chiave folle",
    desc: "Sabato sera con la band che reinterpreta gli anni '80 con energia, costumi e show. Pista da ballo aperta fino a tardi.",
    tagline: "La sera più attesa: spettacolo, costumi e musica fino a notte.",
    time: "22:00",
    place: "Giardini Pubblici di Cipresso",
    status: null,
  },
  {
    day: 7,
    dayName: "Domenica",
    date: "07",
    month: "giugno",
    act: "Orchestra Meraviglia",
    genre: "Liscio · Ballo di gruppo",
    desc: "Si chiude in tradizione con il liscio dal vivo: una grande orchestra per accompagnare l'ultima serata con balli di gruppo e pista aperta a tutti.",
    tagline: "Gran finale all'insegna del ballo e della tradizione.",
    time: "21:00",
    place: "Giardini Pubblici di Cipresso",
    status: null,
  },
];

const MENU = {
  antipasti: [
    { name: "Antipastone Cipresso 2.0", desc: "Prosciutto crudo, capocollo, salame nostrano, formaggio misto pecorino, tris di crostini ai carciofi e pomodorini, salsa tartufata, melone, fiore di zucca fritto*, frittata di zucchine", price: "11,00" },
    { name: "Tortino di patate, crema di pecorino e tris di bruschette", desc: "Tortino di patate*, formaggio, noci, pane a fette, salsa carciofi, pomodorini e salsa tartufata", price: "7,00" },
    { name: "Coratina di agnello con torta al testo", desc: "Coratella d'agnello* servita con torta al testo", price: "8,00" },
    { name: "Panzanella", desc: "Pane raffermo, pomodorini, insalata, cipolla fresca, cetrioli, carote", price: "4,00" },
  ],
  primi: [
    { name: "Penne alla norcina", desc: "Pasta di semola, salsiccia fresca, panna", price: "8,00" },
    { name: "Strangozzi all'arrabbiata", desc: "Pasta fresca acqua e farina, pomodoro, peperoncino", price: "7,50" },
    { name: "Zuppa ceci e porcini con maltagliati", desc: "Ceci, funghi porcini, maltagliati all'uovo", price: "7,50" },
    { name: "Penne in bianco", desc: "Pasta di semola, olio evo, parmigiano", price: "3,00" },
  ],
  secondi: [
    { name: "Grigliata mista di maiale alla brace", desc: "Grigliata mista di maiale cotta alla brace con contorno*", price: "11,00" },
    { name: "Agnello scottadito alla brace", desc: "Agnello scottadito cotto alla brace con contorno*", price: "13,00" },
    { name: "Braciola di maiale con torta", desc: "Braciola di maiale cotta alla brace servita con torta al testo", price: "7,00" },
    { name: "Bistecca di vitello da 300gr", desc: "Bistecca di vitello, spezie e aromi varie", price: "16,00" },
  ],
  contorni: [
    { name: "Verdura saltata", desc: "", price: "4,00" },
    { name: "Patate fritte*", desc: "", price: "4,50" },
    { name: "Patate arrosto*", desc: "", price: "4,00" },
    { name: "Insalata mix", desc: "", price: "3,00" },
  ],
  torte: [
    { name: "Torta erba e salsiccia", desc: "", price: "6,00" },
    { name: "Torta salsiccia", desc: "", price: "5,50" },
    { name: "Torta prosciutto crudo", desc: "", price: "5,50" },
    { name: "Torta prosciutto e pecorino", desc: "", price: "6,00" },
    { name: "Torta erba e pecorino", desc: "", price: "5,00" },
    { name: "Torta stracchino e rucola", desc: "", price: "4,00" },
    { name: "Torta intera vuota (6 porzioni)", desc: "", price: "7,00" },
    { name: "Torta vuota", desc: "", price: "1,50" },
  ],
  dolci: [
    { name: "Maritozzo* Primavera", desc: "Maritozzo bianco, farcito con crema di pistacchio e panna", price: "4,50" },
    { name: "Tart* Cipresso 2.0", desc: "Tartelletta di frolla, curd al lampone e meringa soffice", price: "4,00" },
    { name: "Cheesecake* Fragole", desc: "", price: "4,00" },
    { name: "Cheesecake* Caramello Salato", desc: "", price: "4,00" },
    { name: "Zuppa Inglese", desc: "", price: "5,00" },
    { name: "Tiramisù", desc: "", price: "5,00" },
    { name: "Crostata classica alla Nutella", desc: "", price: "3,50" },
    { name: "Tozzetti con Vin Santo", desc: "", price: "4,00" },
  ],
};

const SPECIALI = {
  note: "Disponibili solo nei giorni indicati",
  primi: [
    { giorni: "01–02 giu", name: "Risotto asparagi, funghi e ricotta salata", desc: "Riso Arborio, asparagi*, funghi*, basilico, limone, ricotta salata, olio evo", price: "8,50" },
    { giorni: "03–04 giu", name: "Polenta col sugo de na'volta", desc: "Polenta di mais con ragù e salsiccia", price: "7,50" },
    { giorni: "05–07 giu", name: "Tagliatelle al sugo di cacciagione", desc: "Tagliatelle all'uovo con sugo di capriolo e cinghiale", price: "11,00" },
  ],
  secondi: [
    { giorni: "01–03 giu", name: "Stinco di maiale con patate arrosto", desc: "Stinco di maiale*, patate arrosto*, spezie varie", price: "11,00" },
    { giorni: "04–05 giu", name: "Spezzatino di cinghiale con olive e cipolle borettane + torta", desc: "Polpa cinghiale, odori misti, bacche di ginepro, olive nere denocciolate", price: "12,00" },
    { giorni: "06–07 giu", name: "Capocollo laccato al miele e finocchietto con erba saltata", desc: "Capocollo di suino, pancetta, miele, odori e spezie varie, lardo battuto", price: "10,00" },
  ],
};

function Topbar() {
  const [open, setOpen] = useState(false);
  const close = () => setOpen(false);
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <a className="topbar-brand" href="#top" onClick={close}>
          <img src="assets/logo-cipresso.png" alt="Cipresso 2.0" />
          <div>
            <div className="b-name">Cipresso</div>
            <div className="b-sub">2.0 A.P.S.</div>
          </div>
        </a>
        <nav className={`topbar-nav ${open ? 'is-open' : ''}`}>
          <a href="#programma" onClick={close}>Programma</a>
          <a href="#cucina" onClick={close}>Cucina</a>
          <a href="#mappa" onClick={close}>Mappa</a>
          <a href="#info" onClick={close}>Info</a>
          <a href="#contatti" onClick={close}>Contatti</a>
        </nav>
        <button className="topbar-cta" onClick={() => { close(); document.querySelector('#programma')?.scrollIntoView({behavior: 'smooth'}); }}>
          Programma
        </button>
        <button
          className={`topbar-burger ${open ? 'is-open' : ''}`}
          aria-label="Apri menu"
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
        >
          <span /><span /><span />
        </button>
      </div>
    </header>
  );
}

function PetalSVG({ className }) {
  return (
    <svg className={className} viewBox="0 0 60 60" aria-hidden="true">
      <g>
        <ellipse cx="30" cy="20" rx="8" ry="14" fill="#F49FB6" transform="rotate(0 30 30)" />
        <ellipse cx="30" cy="20" rx="8" ry="14" fill="#F5C842" transform="rotate(72 30 30)" />
        <ellipse cx="30" cy="20" rx="8" ry="14" fill="#3FC3B6" transform="rotate(144 30 30)" />
        <ellipse cx="30" cy="20" rx="8" ry="14" fill="#F39A3A" transform="rotate(216 30 30)" />
        <ellipse cx="30" cy="20" rx="8" ry="14" fill="#E6007E" transform="rotate(288 30 30)" />
        <circle cx="30" cy="30" r="6" fill="#0E6E3E" />
      </g>
    </svg>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-blobs">
        <div className="blob b1" />
        <div className="blob b2" />
        <div className="blob b3" />
        <div className="blob b4" />
        <div className="blob b5" />
        <div className="blob b-hatch hatch" />
      </div>
      <PetalSVG className="petal p1" />
      <PetalSVG className="petal p2" />
      <PetalSVG className="petal p3" />

      <div className="hero-inner">
        <div className="hero-text">
          <div className="hero-eyebrow">
            <span className="dot" />
            Cipresso 2.0 A.P.S. · 48ª Edizione · 2026
          </div>

          <h1 className="hero-title">
            <span className="festa">Festa</span>
            <span className="della">della</span>
            <span className="primavera">primavera</span>
            <span className="twozero">2.0</span>
          </h1>

          <div className="hero-pipe-row">
            <span className="item-icon">🍝</span>
            <span>cibo</span>
            <span className="pipe">|</span>
            <span className="item-icon">🎵</span>
            <span>musica</span>
            <span className="pipe">|</span>
            <span className="item-icon">🎭</span>
            <span>intrattenimento</span>
          </div>

          <div className="hero-dates">
            <span className="dnum">01–07</span>
            <span className="dmonth">giugno</span>
            <span className="dplace">a <span>Cipresso</span></span>
          </div>

          <div className="hero-buttons">
            <a className="btn btn-primary" href="#programma">Vedi il programma →</a>
            <a className="btn btn-secondary" href="#cucina">Menù cucina</a>
          </div>
        </div>

        <div className="hero-art">
          <div className="ring r1" />
          <div className="ring r2" />
          <img src="assets/logo-cipresso.png" alt="Logo Cipresso 2.0 A.P.S. — Festa della Primavera" />
        </div>
      </div>
    </section>
  );
}

function Marquee({ speed }) {
  const items = ["DeeRadio", "Blascoband", "Teatro di Colle", "Atmosfera Blu", "Rollover", "88 Folli", "Orchestra Meraviglia"];
  const seq = (
    <span>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {it}
          <span className="dot" />
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee">
      <div className="marquee-track" style={{ animationDuration: speed + 's' }}>
        {seq}{seq}{seq}
      </div>
    </div>
  );
}

function DayCard({ day }) {
  return (
    <div className="day-card">
      <div className="day-card-left">
        <div className="day-date-block">
          <div className="day-name">{day.dayName}</div>
          <div className="day-num">{day.date}</div>
          <div className="day-month">{day.month} 2026</div>
        </div>
        <div className="day-tagline">{day.tagline}</div>
      </div>
      <div className="day-card-right">
        <div className="day-headliner">Sul palco · Giorno {day.day} di 7</div>
        {day.status && <div className="day-status">{day.status}</div>}
        <h3 className="day-act">
          {day.altAct ? <>{day.act} <em>oppure</em> {day.altAct}</> : day.act}
        </h3>
        <div className="day-genre">{day.genre}</div>
        <p className="day-desc">{day.desc}</p>
        <div className="day-meta">
          <div className="day-meta-item">
            <div className="label">Inizio</div>
            <div className="value">{day.time}</div>
          </div>
          <div className="day-meta-item">
            <div className="label">Luogo</div>
            <div className="value">{day.place}</div>
          </div>
          <div className="day-meta-item">
            <div className="label">Ingresso</div>
            <div className="value">Libero</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Programma() {
  const [active, setActive] = useState(0);
  return (
    <section className="block" id="programma">
      <div className="section-head">
        <div className="section-kicker">una settimana</div>
        <h2 className="section-title-big">di <em>festa</em></h2>
        <div className="section-sub">7 serate · 7 ospiti · ingresso libero</div>
      </div>

      <div className="day-tabs">
        {PROGRAM.map((d, i) => (
          <button
            key={d.day}
            className={"day-tab" + (active === i ? " active" : "")}
            onClick={() => setActive(i)}
          >
            <span className="num">{d.date}</span>
            <span className="name">{d.dayName.slice(0, 3)} · giu</span>
          </button>
        ))}
      </div>

      <DayCard day={PROGRAM[active]} />

      <div className="full-list">
        <h3>tutti gli appuntamenti</h3>
        {PROGRAM.map((d) => (
          <div className="list-row" key={d.day} onClick={() => { setActive(d.day - 1); document.querySelector('#programma')?.scrollIntoView({behavior:'smooth'}); }}>
            <div className="lr-date">{d.date}/06</div>
            <div className="lr-act">{d.act}{d.altAct && <span style={{color:'var(--ink-soft)', fontSize:'16px', fontWeight:600}}> / {d.altAct}</span>}</div>
            <div className="lr-genre">{d.genre}</div>
            <div className="lr-time">h. {d.time}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function MenuSection({ showPrices = true }) {
  const cats = [
    { key: "antipasti", title: "Gli Antipasti" },
    { key: "primi", title: "I Primi fissi" },
    { key: "secondi", title: "I Secondi fissi" },
    { key: "contorni", title: "I Contorni" },
    { key: "torte", title: "Torte al Testo" },
    { key: "dolci", title: "I Dolci" },
  ];
  return (
    <section className="cucina-wrap" id="cucina">
      <div className="cucina-inner">
        <div className="section-head">
          <div className="section-kicker">in cucina</div>
          <h2 className="section-title-big">il <em>menù</em></h2>
          <div className="section-sub">tutte le sere dalle 19:00</div>
        </div>

        <div className="menu-grid">
          {cats.map(c => (
            <div className="menu-cat" key={c.key}>
              <h4>{c.title}</h4>
              {MENU[c.key].map((it, i) => (
                <div key={i}>
                  <div className="menu-item">
                    <span className="name">{it.name}</span>
                    {showPrices && <span className="leader" />}
                    {showPrices && <span className="price">€&nbsp;{it.price}</span>}
                  </div>
                  {it.desc && <div className="desc">{it.desc}</div>}
                </div>
              ))}
            </div>
          ))}
        </div>

        <div className="cucina-coperto">
          ★ Coperto 0,50 € a persona
        </div>

        <div className="cucina-foot">
          <div className="cucina-foot-item">
            <div className="label">Apertura</div>
            <div className="value">19:00 — <em>23:00</em></div>
          </div>
          <div className="cucina-foot-item">
            <div className="label">Prenotazioni gruppi</div>
            <div className="value"><em>info@festadellaprimavera.it</em></div>
          </div>
          <div className="cucina-foot-item">
            <div className="label">Pagamento</div>
            <div className="value">Contanti · <em>Pos</em></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SpecialiSection({ showPrices = true }) {
  return (
    <section className="speciali-wrap" id="speciali">
      <div className="speciali-inner">
        <div className="spec-badge">✦ Solo nei giorni indicati ✦</div>
        <div className="section-head" style={{marginBottom:'40px'}}>
          <div className="section-kicker">ogni sera qualcosa di diverso</div>
          <h2 className="section-title-big">i <em>piatti speciali</em></h2>
          <div className="section-sub">disponibili solo nei giorni indicati · fino ad esaurimento</div>
        </div>
        <div className="spec-grid">
          <div className="spec-col">
            <h4 className="spec-cat-title">Primi speciali</h4>
            {SPECIALI.primi.map((it, i) => (
              <div className="spec-item" key={i}>
                <div className="spec-giorni">{it.giorni}</div>
                <div className="spec-body">
                  <div className="spec-name">{it.name}</div>
                  <div className="spec-desc">{it.desc}</div>
                </div>
                {showPrices && <div className="spec-price">€&nbsp;{it.price}</div>}
              </div>
            ))}
          </div>
          <div className="spec-col">
            <h4 className="spec-cat-title">Secondi speciali</h4>
            {SPECIALI.secondi.map((it, i) => (
              <div className="spec-item" key={i}>
                <div className="spec-giorni">{it.giorni}</div>
                <div className="spec-body">
                  <div className="spec-name">{it.name}</div>
                  <div className="spec-desc">{it.desc}</div>
                </div>
                {showPrices && <div className="spec-price">€&nbsp;{it.price}</div>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Mappa() {
  return (
    <section className="mappa-wrap" id="mappa">
      <div className="section-head">
        <div className="section-kicker">come arrivare</div>
        <h2 className="section-title-big">la <em>mappa</em></h2>
        <div className="section-sub">Giardini Pubblici di Cipresso · Bastia Umbra</div>
      </div>
      <div className="mappa-card">
        <div className="mappa-info">
          <div className="lbl">Dove siamo</div>
          <h3>Giardini <em>Pubblici</em></h3>
          <p className="addr">Cipresso, Bastia Umbra (PG)<br/>Umbria, Italia</p>
          <div className="btn-row">
            <a className="btn btn-primary" href="https://www.google.com/maps/dir/?api=1&destination=43.06596443356536%2C12.512378494405018" target="_blank" rel="noopener">Indicazioni →</a>
            <a className="btn btn-secondary" href="https://www.google.com/maps/search/?api=1&query=43.06596443356536%2C12.512378494405018" target="_blank" rel="noopener">Apri in Maps</a>
          </div>
        </div>
        <iframe
          className="mappa-iframe"
          src="https://www.openstreetmap.org/export/embed.html?bbox=12.5074%2C43.0630%2C12.5174%2C43.0690&layer=mapnik&marker=43.06596443356536%2C12.512378494405018"
          title="Mappa Giardini Pubblici di Cipresso, Bastia Umbra"
          loading="lazy"
        />
      </div>
    </section>
  );
}

function Info() {
  return (
    <section className="info-block" id="info">
      <div className="info-art">
        <div className="blob-bg" />
        <div className="blob-bg2" />
        <img src="assets/logo-cipresso.png" alt="Cipresso 2.0 A.P.S. — logo associazione" />
      </div>
      <div className="info">
        <h2>l'associazione <em>Cipresso 2.0</em></h2>
        <p>
          Un gruppo di volontari che ogni anno trasforma la piazza del paese in
          un luogo di incontro. La Festa della Primavera è il nostro appuntamento
          più importante: sette giorni per stare insieme, ballare, mangiare bene
          e sostenere le iniziative del territorio.
        </p>
        <ul className="info-list">
          <li><span className="k">Edizione</span><span className="v">la <em>quarantottesima</em> · 2026</span></li>
          <li><span className="k">Volontari</span><span className="v">oltre <em>40</em> persone</span></li>
          <li><span className="k">Ricavato</span><span className="v">a <em>iniziative</em> del paese</span></li>
          <li><span className="k">Diventa socio</span><span className="v">tessera <em>15 €</em></span></li>
        </ul>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot" id="contatti">
      <div className="foot-inner">
        <div className="foot-brand">
          <img src="assets/logo-cipresso.png" alt="Cipresso 2.0" />
          <p>Associazione di Promozione Sociale. Festa della Primavera, edizione 2026, dal 1 al 7 giugno ai Giardini Pubblici di Cipresso, Bastia Umbra.</p>
        </div>
        <div className="foot-col">
          <h5>Contatti</h5>
          <ul>
            <li>info@festadellaprimavera.it</li>
            <li>Giardini Pubblici di Cipresso<br/>Bastia Umbra (PG)</li>
          </ul>
        </div>
        <div className="foot-col">
          <h5>Seguici</h5>
          <ul>
            <li><a href="https://www.instagram.com/festadellaprimaveracipresso/" target="_blank" rel="noopener">Instagram</a></li>
            <li><a href="https://www.facebook.com/festadellaprimaveracipresso" target="_blank" rel="noopener">Facebook</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h5>Sostienici</h5>
          <ul>
            <li><a href="mailto:info@festadellaprimavera.it">Diventa socio</a></li>
            <li><a href="mailto:info@festadellaprimavera.it">Volontariato</a></li>
            <li><a href="mailto:info@festadellaprimavera.it">Sponsor</a></li>
          </ul>
        </div>
      </div>
      <div className="foot-bottom">
        <span>© 2026 Cipresso 2.0 A.P.S.</span>
        <span>C.F. 00000000000 · Privacy</span>
      </div>
    </footer>
  );
}

function App() {
  const [tweaks, setTweak] = window.useTweaks
    ? window.useTweaks(TWEAKS_DEFAULTS)
    : [TWEAKS_DEFAULTS, () => {}];

  const TP = window.TweaksPanel;
  const TS = window.TweakSection;
  const TT = window.TweakToggle;
  const TSL = window.TweakSlider;

  return (
    <>
      <Topbar />
      <Hero />
      <Marquee speed={tweaks.marqueeSpeed || 40} />
      {tweaks.showProgramma !== false && <Programma />}
      {tweaks.showMenu !== false && <MenuSection showPrices={tweaks.showPrices !== false} />}
      {tweaks.showMenu !== false && <SpecialiSection showPrices={tweaks.showPrices !== false} />}
      {tweaks.showMappa !== false && <Mappa />}
      <Info />
      <Footer />

      {TP && (
        <TP title="Tweaks">
          <TS title="Sezioni">
            <TT label="Mostra programma" checked={tweaks.showProgramma !== false} onChange={(v) => setTweak('showProgramma', v)} />
            <TT label="Mostra menù cucina" checked={tweaks.showMenu !== false} onChange={(v) => setTweak('showMenu', v)} />
            <TT label="Mostra mappa" checked={tweaks.showMappa !== false} onChange={(v) => setTweak('showMappa', v)} />
          </TS>
          <TS title="Dettagli">
            <TT label="Mostra prezzi" checked={tweaks.showPrices !== false} onChange={(v) => setTweak('showPrices', v)} />
            <TSL label="Velocità marquee (s)" min={15} max={80} step={5} value={tweaks.marqueeSpeed || 40} onChange={(v) => setTweak('marqueeSpeed', v)} />
          </TS>
        </TP>
      )}
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);