/* ─── EsbartNav — loaded via shared/components/Nav.jsx ───────────────────── */
const EsbartNav = window.EsbartNav;



/* ═══════════════════════════════════════════════════════════════════════════
   ESBART — Shared <Footer> component
   Props:
     t — merged i18n dict (uses keys: footBrand, footCol1Title..footCol4Title,
         footCol1..footCol4 arrays of {label, href}, footAddrLines, footContact,
         footSupporters, legalRights, legalLinks)

   Exports: window.EsbartFooter
   ═══════════════════════════════════════════════════════════════════════════ */

const EsbartFooter = window.EsbartFooter; /* unified shared footer */

window.EsbartFooter = EsbartFooter;


/* ─── Tweaks — loaded via shared/components/TweaksPanel.jsx ─── */
const EsbartTweaksPanel = window.EsbartTweaksPanel;


/* ═══════════════════════════════════════════════════════════════════════════
   HOME — Page-specific React components & app.
   Uses shared system: EsbartNav, EsbartFooter, EsbartTweaksPanel, EsbartI18n.
   ═══════════════════════════════════════════════════════════════════════════ */

const { useState, useEffect } = React;

// ─── EDITMODE tweaks (picked up by shared TweaksPanel) ──────────────────────
const ESBART_TWEAKS = /*EDITMODE-BEGIN*/{
  "accentHue": 350,
  "typeScale": 1,
  "showHashtag": true,
  "heroVariant": "ornament"
}/*EDITMODE-END*/;
window.ESBART_TWEAKS = ESBART_TWEAKS;

// ─── Page-specific strings (merged with shared common) ──────────────────────
const HOME_STRINGS = {
  ca: {
    pageTitle: "Esbart Català de Dansaires — Tradició i dansa des de 1908",
    heroEyebrow: "Fundació 1908 · Barcelona",
    heroT1: "Esbart Català",
    heroT2: "de Dansaires",
    kineticWords: [
      "TRADICIÓ", "DANSA", "1908", "CATALUNYA", "CULTURA",
      "CERCAVILA", "PATRIMONI", "MÚSICA", "ESBART", "COSTUMS",
      "BALLAR", "REPERTORI", "MESTRES", "RECERCA", "DIVULGACIÓ"
    ],
    heroTag: "Ballant la tradició catalana des de fa més d'un segle. Investiguem, preservem i compartim el patrimoni immaterial d'un poble.",
    heroCta: "Vine a ballar",
    heroCta2: "Descobreix l'entitat",
    stat1: "Anys ballant", stat2: "Socis actius", stat3: "Danses al repertori",
    tickerItems: ["Cos de Dansa", "MercèDansa", "Centre de Documentació", "Cavallets Cotoners", "Premi Rafel Tudó", "Ballem a l'aula", "Esbart infantil"],
    eventsEyebrow: "Agenda",
    eventsTitle: ["Pròxims", " esdeveniments"],
    eventsSub: "Actuacions, cercaviles, tallers i moments per ballar junts. Apunta't al que més t'encaixi.",
    eventsCta: "Agenda completa",
    whoEyebrow: "Qui som",
    whoTitle: ["Un segle ballant la ", "tradició."],
    whoP1: "L'Esbart Català de Dansaires és una entitat dedicada a la investigació, compilació, conservació i divulgació de la dansa i els costums tradicionals catalans amb el màxim rigor històric i etnocientífic.",
    whoP2: "Fundada l'any 1908, portem més de cent anys preservant el patrimoni immaterial de Catalunya.",
    whoActs: [
      "Espectacles i mostres de dansa tradicional",
      "Centre de Documentació · Arxiu i Biblioteca",
      "Cursos i tallers de formació",
      "Premi Rafel Tudó per a estudis de dansa",
      "Publicacions i investigacions",
      "Exposicions i materials divulgatius"
    ],
    whoCta: "La nostra història",
    danceEyebrow: "Vine a ballar",
    danceTitle: ["Obre les portes a ", "la dansa catalana."],
    danceSub: "Grups per a totes les edats. Sense experiència prèvia. Primera sessió gratuïta.",
    adults: "Cos de Dansa", adultsSub: "Adults · Sense límit d'edat", adultsDays: "Dimarts i Divendres", adultsTime: "20:30 — 22:30h", adultsNote: "Experiència no requerida",
    youth: "Grup Juvenils", youthSub: "Joves", youthDays: "Divendres", youthTime: "18:30 — 20:00h", youthNote: "Calendari escolar",
    kids: "Secció Infantil", kidsSub: "A partir de 4 anys", kidsDays: "Divendres", kidsTime: "18:30 — 20:00h", kidsNote: "Ambient familiar",
    where: "On ballem", whereAddr: "La Casa dels Entremesos · Plaça de les Beates, 2, Barcelona",
    danceCta: "Reserva una prova",
    dansesRefEyebrow: "Patrimoni viu",
    dansesRefTitle: ["Danses ballades ", "i recuperades"],
    dansesRefSub: "Un registre extens de danses catalanes ballades al llarg de la nostra història, junt amb les que l'Esbart ha reconstruït i tornat a la vida.",
    dansesRefCta: "Explora el repertori de danses",
    newsEyebrow: "Actualitat",
    newsTitle: ["Notícies", " i novetats"],
    newsSub: "Llegiu l'últim del nostre dia a dia: programació, recerca, trobades i estrenes.",
    newsCta: "Totes les notícies",
    patriTitle1: ["Fes-te ", "soci"],
    patriP1: "Forma part d'una comunitat centenària. Participa als assaigs, accedeix a l'arxiu, rep les novetats i ajuda'ns a preservar el patrimoni de la dansa.",
    patriCta1: "Informació i inscripció",
    patriTitle2: ["Centre de ", "Documentació"],
    patriP2: "Arxiu Aureli Capmany, fons fotogràfic, fonoteca i biblioteca especialitzada en dansa tradicional catalana. Consulta amb cita prèvia.",
    patriCta2: "Consulta el catàleg",
  },
  es: {
    pageTitle: "Esbart Català de Dansaires — Tradición y danza desde 1908",
    heroEyebrow: "Fundación 1908 · Barcelona",
    heroT1: "Esbart Català", heroT2: "de Dansaires",
    kineticWords: [
      "TRADICIÓN", "DANZA", "1908", "CATALUÑA", "CULTURA",
      "CERCAVILA", "PATRIMONIO", "MÚSICA", "ESBART", "COSTUMBRES",
      "BAILAR", "REPERTORIO", "MAESTROS", "INVESTIGACIÓN", "DIVULGACIÓN"
    ],
    heroTag: "Bailando la tradición catalana desde hace más de un siglo. Investigamos, preservamos y compartimos el patrimonio inmaterial de un pueblo.",
    heroCta: "Ven a bailar", heroCta2: "Descubre la entidad",
    stat1: "Años bailando", stat2: "Socios activos", stat3: "Danzas en repertorio",
    tickerItems: ["Cuerpo de Danza", "MercèDansa", "Centro de Documentación", "Cavallets Cotoners", "Premio Rafel Tudó", "Bailamos en el aula", "Esbart infantil"],
    eventsEyebrow: "Agenda",
    eventsTitle: ["Próximos", " eventos"],
    eventsSub: "Actuaciones, cercaviles, talleres y momentos para bailar juntos. Apúntate al que más te encaje.",
    eventsCta: "Agenda completa",
    whoEyebrow: "Quiénes somos",
    whoTitle: ["Un siglo bailando ", "la tradición."],
    whoP1: "El Esbart Català de Dansaires es una entidad dedicada a la investigación, recopilación, conservación y divulgación de la danza y las costumbres tradicionales catalanas con el máximo rigor histórico y etnocientífico.",
    whoP2: "Fundada en 1908, llevamos más de cien años preservando el patrimonio inmaterial de Catalunya.",
    whoActs: [
      "Espectáculos y muestras de danza tradicional",
      "Centro de Documentación · Archivo y Biblioteca",
      "Cursos y talleres de formación",
      "Premio Rafel Tudó para estudios de danza",
      "Publicaciones e investigaciones",
      "Exposiciones y materiales divulgativos"
    ],
    whoCta: "Nuestra historia",
    danceEyebrow: "Ven a bailar",
    danceTitle: ["Abre las puertas a ", "la danza catalana."],
    danceSub: "Grupos para todas las edades. Sin experiencia previa. Primera sesión gratuita.",
    adults: "Cuerpo de Danza", adultsSub: "Adultos · Sin límite de edad", adultsDays: "Martes y Viernes", adultsTime: "20:30 — 22:30h", adultsNote: "Sin experiencia previa",
    youth: "Grupo Juvenil", youthSub: "Jóvenes", youthDays: "Viernes", youthTime: "18:30 — 20:00h", youthNote: "Calendario escolar",
    kids: "Sección Infantil", kidsSub: "A partir de 4 años", kidsDays: "Viernes", kidsTime: "18:30 — 20:00h", kidsNote: "Ambiente familiar",
    where: "Dónde bailamos", whereAddr: "La Casa dels Entremesos · Plaça de les Beates, 2, Barcelona",
    danceCta: "Reserva una prueba",
    dansesRefEyebrow: "Patrimonio vivo",
    dansesRefTitle: ["Danzas bailadas ", "y recuperadas"],
    dansesRefSub: "Un registro extenso de danzas catalanas bailadas a lo largo de nuestra historia, junto con las que el Esbart ha reconstruido y devuelto a la vida.",
    dansesRefCta: "Explora el repertorio de danzas",
    newsEyebrow: "Actualidad",
    newsTitle: ["Noticias", " y novedades"],
    newsSub: "Lee lo último de nuestro día a día: programación, investigación, encuentros y estrenos.",
    newsCta: "Todas las noticias",
    patriTitle1: ["Hazte ", "socio"],
    patriP1: "Forma parte de una comunidad centenaria. Participa en los ensayos, accede al archivo, recibe las novedades y ayúdanos a preservar el patrimonio de la danza.",
    patriCta1: "Información e inscripción",
    patriTitle2: ["Centro de ", "Documentación"],
    patriP2: "Archivo Aureli Capmany, fondo fotográfico, fonoteca y biblioteca especializada en danza tradicional catalana. Consulta con cita previa.",
    patriCta2: "Consulta el catálogo",
  },
  en: {
    pageTitle: "Esbart Català de Dansaires — Tradition and dance since 1908",
    heroEyebrow: "Founded 1908 · Barcelona",
    heroT1: "Esbart Català", heroT2: "de Dansaires",
    kineticWords: [
      "TRADITION", "DANCE", "1908", "CATALONIA", "CULTURE",
      "CERCAVILA", "HERITAGE", "MUSIC", "ESBART", "CUSTOMS",
      "DANCING", "REPERTOIRE", "MASTERS", "RESEARCH", "OUTREACH"
    ],
    heroTag: "Dancing Catalan tradition for over a century. We research, preserve and share the intangible heritage of a people.",
    heroCta: "Come dance with us", heroCta2: "About the organisation",
    stat1: "Years dancing", stat2: "Active members", stat3: "Dances in repertoire",
    tickerItems: ["Cos de Dansa", "MercèDansa", "Archive & Library", "Cavallets Cotoners", "Rafel Tudó Award", "Dance in schools", "Children's section"],
    eventsEyebrow: "Agenda",
    eventsTitle: ["Upcoming", " events"],
    eventsSub: "Performances, parades, workshops and moments to dance together. Join the one that fits you.",
    eventsCta: "Full calendar",
    whoEyebrow: "About us",
    whoTitle: ["A century dancing ", "tradition."],
    whoP1: "Esbart Català de Dansaires is an organisation dedicated to the research, compilation, preservation and dissemination of Catalan traditional dance and customs, with the utmost historical and ethnoscientific rigour.",
    whoP2: "Founded in 1908, we have spent over a hundred years safeguarding Catalonia's intangible heritage.",
    whoActs: [
      "Traditional dance performances and showcases",
      "Documentation Centre · Archive & Library",
      "Training courses and workshops",
      "Rafel Tudó Award for dance research",
      "Publications and investigations",
      "Exhibitions and educational materials"
    ],
    whoCta: "Our story",
    danceEyebrow: "Come dance",
    danceTitle: ["Open the door to ", "Catalan dance."],
    danceSub: "Groups for all ages. No previous experience needed. First session free.",
    adults: "Main Company", adultsSub: "Adults · No age limit", adultsDays: "Tuesdays & Fridays", adultsTime: "20:30 — 22:30", adultsNote: "No experience required",
    youth: "Youth Group", youthSub: "Teenagers", youthDays: "Fridays", youthTime: "18:30 — 20:00", youthNote: "School calendar",
    kids: "Children's Section", kidsSub: "From age 4", kidsDays: "Fridays", kidsTime: "18:30 — 20:00", kidsNote: "Family environment",
    where: "Where we dance", whereAddr: "La Casa dels Entremesos · Plaça de les Beates, 2, Barcelona",
    danceCta: "Book a trial",
    dansesRefEyebrow: "Living heritage",
    dansesRefTitle: ["Danced ", "& recovered dances"],
    dansesRefSub: "An extensive record of Catalan dances performed throughout our history, together with those the Esbart has reconstructed and brought back to life.",
    dansesRefCta: "Explore the dance repertoire",
    newsEyebrow: "Latest",
    newsTitle: ["News", " & updates"],
    newsSub: "Read what's happening: programming, research, gatherings and premieres.",
    newsCta: "All news",
    patriTitle1: ["Become a ", "member"],
    patriP1: "Join a century-old community. Attend rehearsals, access the archive, receive updates and help us preserve dance heritage.",
    patriCta1: "Info & sign up",
    patriTitle2: ["Documentation ", "Centre"],
    patriP2: "Aureli Capmany archive, photographic fonds, phonoteca and specialised library on Catalan traditional dance. Visits by appointment.",
    patriCta2: "Browse the catalogue",
  }
};

// ─── News data (per-lang) ────────────────────────────────────────────────────
const HOME_NEWS = {
  ca: [
    {date:"18 OCT 2025", tag:"Actualitat", title:"Moviments socials i veïnals als barris de Ciutat Vella, 1970-1983", excerpt:"Organitzem una taula rodona dins el cicle de conferències Barcelona: construcció democràtica i moviment veïnal.", big:true},
    {date:"15 OCT 2025", tag:"Espectacle", title:"Danses Vives al Centre Catòlic de Sants", excerpt:"Darrera sessió de 2025 d'aquest espectacle itinerant, diumenge 19 d'octubre a les 18h."},
    {date:"10 OCT 2025", tag:"Activitat", title:"Comencem el Ball del Divendres, amb canvi d'horari", excerpt:"L'activitat setmanal torna a partir del 17 d'octubre, amb nou horari de 19 a 20h."},
    {date:"04 SET 2025", tag:"Exposició", title:"Exposició «Cavallets… endavant!»", excerpt:"Fins al 5 d'octubre a la Sala d'actes de La Casa dels Entremesos."}
  ],
  es: [
    {date:"18 OCT 2025", tag:"Actualidad", title:"Movimientos sociales y vecinales en los barrios de Ciutat Vella, 1970-1983", excerpt:"Organizamos una mesa redonda dentro del ciclo Barcelona: construcción democrática y movimiento vecinal.", big:true},
    {date:"15 OCT 2025", tag:"Espectáculo", title:"Danses Vives en el Centre Catòlic de Sants", excerpt:"Última sesión de 2025 de este espectáculo itinerante, domingo 19 de octubre a las 18h."},
    {date:"10 OCT 2025", tag:"Actividad", title:"Empezamos el Ball del Divendres con nuevo horario", excerpt:"La actividad semanal vuelve desde el 17 de octubre, con nuevo horario de 19 a 20h."},
    {date:"04 SEP 2025", tag:"Exposición", title:"Exposición «Cavallets… endavant!»", excerpt:"Hasta el 5 de octubre en la Sala de actos de La Casa dels Entremesos."}
  ],
  en: [
    {date:"18 OCT 2025", tag:"News", title:"Social and neighbourhood movements in Ciutat Vella, 1970-1983", excerpt:"We're hosting a roundtable in the series Barcelona: democratic construction and neighbourhood movement.", big:true},
    {date:"15 OCT 2025", tag:"Performance", title:"Danses Vives at Centre Catòlic de Sants", excerpt:"Final 2025 session of this travelling show, Sunday Oct 19 at 6pm."},
    {date:"10 OCT 2025", tag:"Classes", title:"Ball del Divendres returns with new schedule", excerpt:"Weekly sessions return Oct 17, now 7 to 8 pm."},
    {date:"04 SEP 2025", tag:"Exhibition", title:"Exhibition «Cavallets… endavant!»", excerpt:"Until Oct 5 at La Casa dels Entremesos hall."}
  ]
};

// ─── Kinetic word positions (used by Hero) ───────────────────────────────────
const KINETIC_WORD_POSITIONS = [
  { top: 8,  left: 7 },
  { top: 8,  left: 22 },
  { top: 8,  left: 38 },
  { top: 8,  right: 22, hideMobile: true },
  { top: 8,  right: 8 },
  { top: 14, left: 12, hideMobile: true },
  { top: 14, left: 40 },
  { top: 14, right: 10 },
  { top: 22, left: 6 },
  { top: 22, right: 7, hideMobile: true },
  { top: 82, left: 8 },
  { top: 82, right: 32, hideMobile: true },
  { top: 82, right: 9 },
  { top: 88, left: 18 },
  { top: 88, right: 18, hideMobile: true }
];

// ─── Hero (kinetic v2) ───────────────────────────────────────────────────────
function HomeHero({ t }) {
  return (
    <header className="hero kinetic" id="inici">
      <div className="hero-bg"></div>
      <div className="hero-ornament"></div>
      <div className="hero-grain"></div>

      <div className="hero-hashtag">#SOMDELCATALA</div>

      <div className="k-texture" aria-hidden="true">
        {(t.kineticWords || []).map((text, i) => {
          const pos = KINETIC_WORD_POSITIONS[i];
          if (!pos) return null;
          const style = {
            top: pos.top + '%',
            ...(pos.left != null ? { left: pos.left + '%' } : {}),
            ...(pos.right != null ? { right: pos.right + '%' } : {}),
          };
          return (
            <span key={i} className={`k-word ${pos.hideMobile ? 'hide-mobile' : ''}`} style={style} data-text={text}>
              {text}
            </span>
          );
        })}
      </div>

      <div className="k-type" id="k-type" aria-hidden="true">
        <div className="k-type-line odd">ESBART · ESBART · ESBART</div>
        <div className="k-type-line even">CATALÀ · CATALÀ · CATALÀ</div>
        <div className="k-type-line odd">DANSAIRES · DANSAIRES</div>
        <div className="k-type-line even">ESBART · ESBART · ESBART</div>
        <div className="k-type-line odd">CATALÀ · CATALÀ · CATALÀ</div>
        <div className="k-type-line even">DANSAIRES · DANSAIRES</div>
      </div>

      <div className="wrap hero-inner-kinetic">
        <div className="k-stage">
          <div className="k-eyebrow" id="k-eyebrow">{t.heroEyebrow}</div>
          <h1 className="k-title" id="k-title">
            <span className="k-row" data-word="ESBART">ESBART</span>
            <span className="k-row" data-word="CATALÀ">CATALÀ</span>
            <span className="k-row italic" data-word="DE DANSAIRES">DE DANSAIRES</span>
          </h1>
          <p className="k-tag" id="k-tag">{t.heroTag}</p>
          <div className="k-meta" id="k-meta">
            <a href="#vine" className="btn light">{t.heroCta} →</a>
            <a href="#sobre" className="btn outline-light">{t.heroCta2}</a>
            <div className="k-stats">
              <div><b>118</b><span>{t.stat1}</span></div>
              <div><b>120+</b><span>{t.stat2}</span></div>
              <div><b>80+</b><span>{t.stat3}</span></div>
            </div>
          </div>
        </div>
      </div>

      <div className="hero-scroll">{t.scroll}</div>
    </header>
  );
}

// ─── Ticker ──────────────────────────────────────────────────────────────────
function HomeTicker({ items }) {
  const row = [...items, ...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {row.map((x, i) => <span key={i}>{x}</span>)}
      </div>
    </div>
  );
}

// ─── Events ──────────────────────────────────────────────────────────────────
// LIVE since F1: the home highlights are the next events from /agenda. The
// #site-data JSON keeps being the eternal fallback (INT-1). The API sends ISO
// dates; the map() below renders them in the seed's display format per
// language (single date → "Setembre · 2026"; range → "Oct → Jun").
const EV_MONTHS = {
  ca: ["Gener","Febrer","Març","Abril","Maig","Juny","Juliol","Agost","Setembre","Octubre","Novembre","Desembre"],
  es: ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
  en: ["January","February","March","April","May","June","July","August","September","October","November","December"],
};
const HOME_EVENTS_SEED = JSON.parse(document.getElementById('site-data').textContent).events;
function eventDateParts(e, lang) {
  const months = EV_MONTHS[lang] || EV_MONTHS.ca;
  const m = (iso) => months[Number(iso.slice(5, 7)) - 1];
  const my = e.end && e.end.slice(0, 7) !== e.iso.slice(0, 7)
    ? `${m(e.iso).slice(0, 3)} → ${m(e.end).slice(0, 3)}`
    : `${m(e.iso)} · ${e.iso.slice(0, 4)}`;
  return { d: String(Number(e.iso.slice(8, 10))), my };
}
function HomeEvents({ t, lang }) {
  const { items: data } = window.EsbartData.useCollection(
    `agenda?lang=${lang}&size=3`,
    HOME_EVENTS_SEED,
    { map: (j) => j.items.map((e) => ({
        ...eventDateParts(e, lang),
        title: e.title, place: e.place, time: e.time, tag: e.tag, featured: e.featured,
      })) }
  );
  return (
    <section className="events" id="activitats">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="eyebrow reveal">{t.eventsEyebrow}</div>
            <h2 className="reveal d1" style={{marginTop:16}}>{t.eventsTitle[0]}<em>{t.eventsTitle[1]}</em></h2>
          </div>
          <div className="sub reveal d2">
            {t.eventsSub}
            <div style={{marginTop:22}}><a href="Activitats.html#agenda" className="btn ghost">{t.eventsCta}</a></div>
          </div>
        </div>
        <div className={`events-grid reveal${data.length < 3 ? ` events-grid--${data.length}` : ""}`}>
          {data.map((e, i) => (
            <div key={i} className={`event ${e.featured ? 'featured' : ''}`}>
              <span className="tag">{e.tag}</span>
              <div>
                <div className="date">
                  <span className="d">{e.d}</span>
                  <span className="my">{e.my}</span>
                </div>
                <h3>{e.title}</h3>
                <div className="meta">
                  {e.place && <span>📍 {e.place}</span>}
                  {e.time && <span>🕐 {e.time}</span>}
                </div>
              </div>
              <span className="arrow">→</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Gallery ─────────────────────────────────────────────────────────────────
function HomeGallery() {
  const items = [
    {img:"assets/g-sardana.jpg", cap:"Balls de plaça"},
    {img:"assets/g-circle.jpg", cap:"Cos de Dansa"},
    {img:"assets/g-couple.jpg", cap:"Tradició"},
    {img:"assets/g-yellow.jpg", cap:"Repertori"},
    {img:"assets/g-court.jpg", cap:"Danses de cort"},
    {img:"assets/g-couple2.jpg", cap:"Ballada"},
    {img:"assets/g-capes.jpg", cap:"Indumentària"},
    {img:"assets/g-night.jpg", cap:"Cercavila nocturna"}
  ];
  const row = [...items, ...items];
  return (
    <section className="gallery">
      <div className="marquee-row">
        {row.map((it, i) => (
          <div key={i} className="gallery-item">
            <div style={{position:'absolute', inset:0, backgroundImage:`url(${it.img})`, backgroundSize:'cover', backgroundPosition:'center'}}></div>
            <div className="cap">{it.cap}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── Who ─────────────────────────────────────────────────────────────────────
function HomeWho({ t }) {
  return (
    <section className="who" id="sobre">
      <div className="wrap who-inner">
        <div>
          <div className="eyebrow reveal" style={{color:'var(--gold-soft)'}}>{t.whoEyebrow}</div>
          <h2 className="reveal d1" style={{marginTop:20}}>
            {t.whoTitle[0]}<em>{t.whoTitle[1]}</em>
          </h2>
          <p className="reveal d2">{t.whoP1}</p>
          <p className="reveal d2">{t.whoP2}</p>
          <div className="who-activities reveal d3">
            {t.whoActs.map((a, i) => (
              <div key={i} className="item">
                <span className="num">{String(i+1).padStart(2,'0')}</span>
                <span className="t">{a}</span>
              </div>
            ))}
          </div>
          <div style={{marginTop:40}} className="reveal d4">
            <a href="Sobre-lEsbart.html" className="btn">{t.whoCta} →</a>
          </div>
        </div>
        <div className="who-media reveal d2">
          <div className="frame one"><div className="frame-img"></div></div>
          <div className="frame two"><div className="frame-img"></div></div>
        </div>
      </div>
    </section>
  );
}

// ─── Dance ───────────────────────────────────────────────────────────────────
function HomeDance({ t }) {
  const cards = [
    { num:"01", kind:"Adults", title:t.adults, sub:t.adultsSub, days:t.adultsDays, time:t.adultsTime, note:t.adultsNote },
    { num:"02", kind:"Joves", title:t.youth, sub:t.youthSub, days:t.youthDays, time:t.youthTime, note:t.youthNote },
    { num:"03", kind:"Infants", title:t.kids, sub:t.kidsSub, days:t.kidsDays, time:t.kidsTime, note:t.kidsNote }
  ];
  return (
    <section className="dance" id="vine">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="eyebrow reveal">{t.danceEyebrow}</div>
            <h2 className="reveal d1" style={{marginTop:16}}>{t.danceTitle[0]}<em>{t.danceTitle[1]}</em></h2>
          </div>
          <div className="sub reveal d2">{t.danceSub}</div>
        </div>

        <div className="dance-grid">
          {cards.map((c, i) => (
            <div key={i} className={`dance-card reveal d${i+1}`}>
              <div className="num">
                <span>{c.num} / 03</span>
                <b>{c.kind}</b>
              </div>
              <h3>{c.title}</h3>
              <div className="sub">{c.sub}</div>
              <div className="days">{c.days}</div>
              <div className="time">{c.time}</div>
              <div className="note">{c.note}</div>
            </div>
          ))}
        </div>

        <div className="dance-cta reveal">
          <div className="addr">
            <small>{t.where}</small>
            {t.whereAddr}
          </div>
          <a href="Vine-a-ballar.html" className="btn light">{t.danceCta} →</a>
        </div>
      </div>
    </section>
  );
}

// ─── Danses del patrimoni (referència al repertori de Patrimoni) ─────────────
function HomeDansesRef({ t }) {
  return (
    <section className="danses-ref" id="danses">
      <div className="wrap">
        <div className="danses-ref__inner">
          <div>
            <div className="eyebrow eyebrow-white reveal">{t.dansesRefEyebrow}</div>
            <h2 className="reveal d1" style={{marginTop:16}}>{t.dansesRefTitle[0]}<em>{t.dansesRefTitle[1]}</em></h2>
            <p className="reveal d2">{t.dansesRefSub}</p>
          </div>
          <div className="reveal d3"><a href="Patrimoni.html#repertori" className="btn light">{t.dansesRefCta} →</a></div>
        </div>
      </div>
    </section>
  );
}

// ─── News ────────────────────────────────────────────────────────────────────
function HomeNews({ t, lang }) {
  const items = HOME_NEWS[lang] || HOME_NEWS.ca;
  return (
    <section className="news" id="noticies">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="eyebrow reveal">{t.newsEyebrow}</div>
            <h2 className="reveal d1" style={{marginTop:16}}>{t.newsTitle[0]}<em>{t.newsTitle[1]}</em></h2>
          </div>
          <div className="sub reveal d2">
            {t.newsSub}
            <div style={{marginTop:22}}><a href="Noticies.html" className="btn ghost">{t.newsCta}</a></div>
          </div>
        </div>

        <div className="news-grid reveal">
          <div className="news-card big">
            <div className="ph" style={{position:'absolute', inset:0, backgroundImage:'url(assets/news-big.jpg)', backgroundSize:'cover', backgroundPosition:'center'}}></div>
            <div className="overlay"></div>
            <div className="content">
              <div className="tag">{items[0].tag}</div>
              <div className="date-small">{items[0].date}</div>
              <h3>{items[0].title}</h3>
              <p>{items[0].excerpt}</p>
              <span className="read">{t.read}</span>
            </div>
          </div>
          {items.slice(1).map((n, i) => (
            <div key={i} className="news-card">
              <div>
                <div className="tag">{n.tag}</div>
                <div className="date-small">{n.date}</div>
                <h3>{n.title}</h3>
                <p>{n.excerpt}</p>
              </div>
              <span className="read">{t.read}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Patrimoni split ─────────────────────────────────────────────────────────
function HomePatrimoni({ t }) {
  return (
    <section className="patrimoni" id="participa">
      <div className="cols">
        <div className="col left">
          <div className="eyebrow eyebrow-white reveal">Fes-te soci</div>
          <h2 className="reveal d1" style={{marginTop:20}}>{t.patriTitle1[0]}<em>{t.patriTitle1[1]}</em></h2>
          <p className="reveal d2">{t.patriP1}</p>
          <div className="reveal d3"><a href="Participa.html#soci" className="btn light">{t.patriCta1} →</a></div>
        </div>
        <div className="col right" id="patrimoni">
          <div className="eyebrow reveal">Arxiu · Biblioteca</div>
          <h2 className="reveal d1" style={{marginTop:20}}>{t.patriTitle2[0]}<em>{t.patriTitle2[1]}</em></h2>
          <p className="reveal d2">{t.patriP2}</p>
          <div className="reveal d3"><a href="Patrimoni.html#centre" className="btn ghost">{t.patriCta2} →</a></div>
        </div>
      </div>
    </section>
  );
}

/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  TEMPORAL · TOGGLE A/B D'ORDRE DE SECCIONS — ESBORRAR AQUEST BLOC SENCER   ║
   ║                                                                            ║
   ║  Permet a la Junta comparar els dos ordres de la Home sense entrar a      ║
   ║  Entrebastidors. Quan es decideixi la versió final:                       ║
   ║    1. Esborrar aquest bloc (fins a «FI DEL BLOC TEMPORAL»).               ║
   ║    2. A App(), substituir <HomeBody .../> per la llista fixa de           ║
   ║       seccions en l'ordre guanyador (vegeu HOME_AB just a sota).          ║
   ║    3. Esborrar el bloc «TOGGLE A/B TEMPORAL» al final de home.css.        ║
   ║                                                                            ║
   ║  A = ordre actual · B = proposta de la reunió de Junta (2026-07-10):      ║
   ║      pes a apuntar-se a ballar i a les danses.                            ║
   ║  B inclou també la secció «danses» (HomeDansesRef, referència al          ║
   ║  repertori de Patrimoni) — petició de la Junta del 2026-07-11.            ║
   ║  Si guanya A, esborrar també HomeDansesRef, les cadenes dansesRef* i      ║
   ║  el bloc CSS .danses-ref de home.css.                                     ║
   ║  Es pot enllaçar directament amb ?v=A o ?v=B; la tria es desa a           ║
   ║  localStorage per continuar navegant amb la mateixa versió.               ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */
const HOME_AB = {
  A: ["events", "gallery", "who", "dance", "news", "patrimoni"],
  B: ["dance", "danses", "gallery", "who", "events", "news", "patrimoni"],
};
const HOME_AB_TXT = {
  ca: { tag: "Prova temporal", label: "Ordre de la pàgina", a: "A · actual", b: "B · proposta" },
  es: { tag: "Prueba temporal", label: "Orden de la página", a: "A · actual", b: "B · propuesta" },
  en: { tag: "Temporary trial", label: "Page order", a: "A · current", b: "B · proposal" },
};
function HomeBody({ t, lang }) {
  const [ver, setVer] = useState(() => {
    const q = new URLSearchParams(location.search).get("v");
    if (q === "A" || q === "B") return q;
    return localStorage.getItem("ecd-home-ab") === "A" ? "A" : "B";
  });
  const pick = (v) => {
    setVer(v);
    try { localStorage.setItem("ecd-home-ab", v); } catch (e) {}
  };
  const txt = HOME_AB_TXT[lang] || HOME_AB_TXT.ca;
  const sections = {
    events:    <HomeEvents key="events" t={t} lang={lang} />,
    gallery:   <HomeGallery key="gallery" />,
    who:       <HomeWho key="who" t={t} />,
    dance:     <HomeDance key="dance" t={t} />,
    danses:    <HomeDansesRef key="danses" t={t} />,
    news:      <HomeNews key="news" t={t} lang={lang} />,
    patrimoni: <HomePatrimoni key="patrimoni" t={t} />,
  };
  return (
    <>
      {HOME_AB[ver].map((id) => sections[id])}
      <div className="ab-toggle" role="group" aria-label={txt.tag + " — " + txt.label}>
        <span className="ab-toggle__tag">{txt.tag}</span>
        <span className="ab-toggle__label">{txt.label}</span>
        <div className="ab-toggle__btns">
          <button type="button" className={ver === "A" ? "is-on" : ""} onClick={() => pick("A")}>{txt.a}</button>
          <button type="button" className={ver === "B" ? "is-on" : ""} onClick={() => pick("B")}>{txt.b}</button>
        </div>
      </div>
    </>
  );
}
/* ╚═══ FI DEL BLOC TEMPORAL ═══╝ */

// ─── App ─────────────────────────────────────────────────────────────────────
function App() {
  const { lang, setLang, t } = window.EsbartI18n.useI18n(HOME_STRINGS);
  const tweaks = window.EsbartTweaks.useTweaks();
  const [heroMode, setHeroMode] = useState(true);

  useEffect(() => { if (t.pageTitle) document.title = t.pageTitle; }, [lang, t]);

  useEffect(() => {
    const onScroll = () => setHeroMode(window.scrollY < window.innerHeight - 80);
    onScroll();
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <>
      <EsbartNav lang={lang} setLang={setLang} t={t} heroMode={heroMode} current="inici" />
      <main id="main-content" tabIndex={-1}>
        <HomeHero t={t} />
        <HomeTicker items={t.tickerItems} />
        {/* TEMPORAL: HomeBody encapsula l'ordre A/B — en decidir, tornar a la
            llista fixa de seccions (instruccions al bloc TEMPORAL de dalt). */}
        <HomeBody t={t} lang={lang} />
      </main>
      <EsbartFooter t={t} />
      <EsbartTweaksPanel {...tweaks} />
    </>
  );
}

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