// Informational sections rendered from i18n tables.

const Nav = ({ lang, setLang, winState }) => {
  const t = T[lang];
  const state = (winState && winState.state) || 'loading';
  // Mentre carrega o si no hi ha info, mostrem el text per defecte però sense estil actiu
  let ctaText;
  if (state === 'before')         ctaText = lang === 'val' ? 'Encara no oberta' : 'Aún no abierta';
  else if (state === 'after')     ctaText = lang === 'val' ? 'Període tancat'    : 'Periodo cerrado';
  else if (state === 'no_config') ctaText = lang === 'val' ? 'No disponible'     : 'No disponible';
  else                            ctaText = t.nav.register + ' →';
  const ctaStyle = state !== 'open'
    ? { marginLeft: 8, background: 'var(--ink-mute, #888)', cursor: state === 'loading' ? 'wait' : 'help', opacity: state === 'loading' ? 0.6 : 1 }
    : { marginLeft: 8 };
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div className="brand">
          <div className="brand-crest">B</div>
          <div>
            <div>{lang === 'val' ? "Escola d'Estiu" : "Escuela de Verano"}</div>
            <div className="brand-sub">Benicarló · 2026</div>
          </div>
        </div>
        <div className="nav-links">
          <a href="#info">{t.nav.info}</a>
          <a href="#when">{t.nav.when}</a>
          <a href="#prices">{t.nav.prices}</a>
          <a href="#inscribe">{t.nav.inscribe}</a>
          <a href="#faq">{t.nav.faq}</a>
          <div className="lang-toggle" role="tablist" aria-label="Language">
            <button className={lang === 'val' ? 'active' : ''} onClick={() => setLang('val')}>VAL</button>
            <button className={lang === 'es' ? 'active' : ''} onClick={() => setLang('es')}>ES</button>
          </div>
          <a href="#inscribe" className="cta" style={ctaStyle}>{ctaText}</a>
        </div>
      </div>
    </nav>
  );
};

const Hero = ({ lang, winState }) => {
  const t = T[lang].hero;
  const state = (winState && winState.state) || 'loading';
  const fmtDate = (iso) => {
    if (!iso) return '';
    const d = new Date(iso);
    return d.toLocaleDateString(lang === 'val' ? 'ca-ES' : 'es-ES', { day: 'numeric', month: 'long' });
  };
  let ctaLabel = t.ctaPrimary + ' →';
  let ctaStyle = {};
  if (state === 'before') {
    ctaLabel = (lang === 'val' ? "S'obrirà el " : 'Abrirá el ') + fmtDate(winState && winState.start_at);
    ctaStyle = { background: 'var(--ink-mute, #888)' };
  } else if (state === 'after') {
    ctaLabel = lang === 'val' ? 'Període tancat' : 'Periodo cerrado';
    ctaStyle = { background: 'var(--ink-mute, #888)' };
  } else if (state === 'no_config') {
    ctaLabel = lang === 'val' ? 'No disponible' : 'No disponible';
    ctaStyle = { background: 'var(--ink-mute, #888)' };
  } else if (state === 'loading') {
    // Durant la càrrega: text per defecte amb opacitat reduïda
    ctaLabel = t.ctaPrimary + ' →';
    ctaStyle = { background: 'var(--ink-mute, #888)', opacity: 0.6, cursor: 'wait' };
  }
  return (
    <section className="hero" id="info">
      <div className="container hero-grid">
        <div>
          <div className="eyebrow"><span className="dot"/> {t.eyebrow}</div>
          <h1>
            <span>{t.title1}</span><br/>
            <span className="accent">{t.title2}</span><br/>
            <span className="underline">{t.title3}</span>
          </h1>
          <p className="lede">{t.lede}</p>
          <div className="hero-cta-row">
            <a href="#inscribe" className="cta" style={ctaStyle}>{ctaLabel}</a>
            <a href="#when" className="cta ghost">{t.ctaSecondary}</a>
          </div>
          <div className="hero-stats">
            <div className="hero-stat"><div className="num">{t.stat1Num}</div><div className="lbl">{t.stat1Lbl}</div></div>
            <div className="hero-stat"><div className="num">{t.stat2Num}</div><div className="lbl">{t.stat2Lbl}</div></div>
            <div className="hero-stat"><div className="num">{t.stat3Num}</div><div className="lbl">{t.stat3Lbl}</div></div>
          </div>
        </div>
        <div className="hero-illu">
          <HeroIllustration />
        </div>
      </div>
    </section>
  );
};

const Audience = ({ lang }) => {
  const t = T[lang].audience;
  const years = [
    { y: 2022, lvl: lang==='val'?'Inf. 3':'Inf. 3', hl: true },
    { y: 2021, lvl: lang==='val'?'Inf. 4':'Inf. 4', hl: true },
    { y: 2020, lvl: lang==='val'?'Inf. 5':'Inf. 5', hl: true },
    { y: 2019, lvl: lang==='val'?'1r':'1º', hl: true },
    { y: 2018, lvl: lang==='val'?'2n':'2º', hl: true },
    { y: 2017, lvl: lang==='val'?'3r':'3º', hl: true },
    { y: 2016, lvl: lang==='val'?'4t':'4º', hl: true },
    { y: 2015, lvl: lang==='val'?'5é':'5º', hl: true },
    { y: 2014, lvl: lang==='val'?'6é':'6º', hl: true },
  ];
  return (
    <section className="block alt">
      <div className="container">
        <div className="tag">{t.tag}</div>
        <h2 className="section-title">{t.title}</h2>
        <p className="section-sub">{t.body}</p>

        <div className="audience-card">
          <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: 12, fontSize: 13, color: 'var(--ink-mute)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase'}}>
            <span>{t.born}</span>
            <span>{t.level}</span>
          </div>
          <div className="age-chart">
            {years.map(y => (
              <div key={y.y} className={`age-chip ${y.hl ? 'highlight' : ''}`}>
                <div className="year">{y.y}</div>
                <div className="lvl">{y.lvl}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const Where = ({ lang }) => {
  const t = T[lang].where;
  return (
    <section className="block">
      <div className="container">
        <div className="tag">{t.tag}</div>
        <h2 className="section-title">{t.title}</h2>
        <p className="section-sub">{t.body}</p>
        <div className="loc-grid">
          <div className="loc-card">
            <div className="pin">📍</div>
            <div>
              <h3>{t.marques}</h3>
              <p>{t.marquesSub}</p>
              <span className="badge">🍽️ {t.canteen}</span>
            </div>
          </div>
          <div className="loc-card">
            <div className="pin">📍</div>
            <div>
              <h3>{t.catalan}</h3>
              <p>{t.catalanSub}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const When = ({ lang }) => {
  const t = T[lang].when;
  const turns = [
    { n: '01', title: t.t1, dates: t.t1d, places: t.t1p, lunch: t.t1lunch },
    { n: '02', title: t.t2, dates: t.t2d, places: t.t2p, lunch: t.t2lunch },
    { n: '03', title: t.t3, dates: t.t3d, places: t.t3p, lunch: t.t3lunch },
  ];
  // Days strip pattern: 10 days, no weekends
  const days = Array.from({length: 14}, (_, i) => ({ w: i === 5 || i === 6 || i === 12 || i === 13 }));
  return (
    <section className="block alt" id="when">
      <div className="container">
        <div className="tag">{t.tag}</div>
        <h2 className="section-title">{t.title}</h2>
        <p className="section-sub">{t.body} · <strong>{t.mondayFriday}.</strong></p>
        <div className="turns-grid">
          {turns.map(turn => (
            <div className="turn" key={turn.n}>
              <div className="num">{turn.n}</div>
              <h3>{turn.title}</h3>
              <div className="dates">{turn.dates}</div>
              <div className="days-strip">
                {days.map((d, i) => <div key={i} className={`day ${d.w ? 'weekend' : ''}`}/>)}
              </div>
              <div className="meta">
                {lang === 'val' ? '10 dies lectius · 2 setmanes' : '10 días lectivos · 2 semanas'}
              </div>
              <div className="places-box">
                <div className="places-row">
                  <span className="places-n">{turn.places}</span>
                  <span className="places-l">{t.placesLbl}</span>
                </div>
                <div className="places-row lunch">
                  <span className="places-n">{turn.lunch}</span>
                  <span className="places-l">{t.lunchPlacesLbl}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
        <p style={{fontSize: 13, color: 'var(--ink-mute)', marginTop: 18, textAlign: 'center'}}>
          ⓘ {t.placesNote}
        </p>
      </div>
    </section>
  );
};

const Schedule = ({ lang }) => {
  const t = T[lang].schedule;
  // Timeline bar: 9 - 15 => 6 hours total. Segments:
  // cangur 9-10 (1/6), matí 10-13 (3/6), menjador 13-15 (2/6)
  return (
    <section className="block">
      <div className="container">
        <div className="tag">{t.tag}</div>
        <h2 className="section-title">{t.title}</h2>
        <p className="section-sub">{t.body}</p>

        <div className="timeline-bar">
          <div className="timeline-seg" style={{left: '0%', width: '16.66%', background: 'var(--sea-500)'}}>9–10</div>
          <div className="timeline-seg" style={{left: '16.66%', width: '50%', background: 'var(--sun-600)', color: 'var(--sea-900)'}}>10–13 · {lang==='val'?'MATÍ':'MAÑANA'}</div>
          <div className="timeline-seg" style={{left: '66.66%', width: '33.33%', background: 'var(--coral-500)'}}>13–15 · {lang==='val'?'MENJADOR':'COMEDOR'}</div>
        </div>
        <div className="timeline-labels">
          <span>09:00</span><span>10:00</span><span>11:00</span><span>12:00</span><span>13:00</span><span>14:00</span><span>15:00</span>
        </div>

        <div className="schedule" style={{marginTop: 32}}>
          <div className="schedule-row cangur">
            <div className="time">{t.cangurTime}</div>
            <div className="label"><div className="icon">☀️</div>{t.cangur}</div>
            <div className="price">8,00 € <span style={{fontSize: 12, color: 'var(--ink-mute)', fontFamily: 'var(--font-body)'}}>/ {t.perTurn}</span></div>
          </div>
          <div className="schedule-row morning">
            <div className="time">{t.morningTime}</div>
            <div className="label"><div className="icon">🎨</div>{t.morning}</div>
            <div className="price">24,00 € <span style={{fontSize: 12, color: 'var(--ink-mute)', fontFamily: 'var(--font-body)'}}>/ {t.perTurn}</span></div>
          </div>
          <div className="schedule-row noon">
            <div className="time">{t.lunchTime}</div>
            <div className="label"><div className="icon">🍽️</div>{t.lunch}</div>
            <div className="price">46,50 € <span style={{fontSize: 12, color: 'var(--ink-mute)', fontFamily: 'var(--font-body)'}}>/ {t.perTurn}</span></div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Prices = ({ lang }) => {
  const t = T[lang].prices;
  return (
    <section className="block sand" id="prices">
      <div className="container">
        <div className="tag">{t.tag}</div>
        <h2 className="section-title">{t.title}</h2>
        <p className="section-sub">{t.body}</p>
        <div className="price-grid">
          <div className="price-card">
            <div className="name">{t.cangur}</div>
            <div className="slot">{t.cangurSlot}</div>
            <div className="amount">
              <span className="euros">8</span><span className="cents">,00 €</span>
            </div>
            <div className="per">{T[lang].schedule.perTurn}</div>
            <ul>{t.bullets.cangur.map((b,i) => <li key={i}>{b}</li>)}</ul>
          </div>
          <div className="price-card featured">
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
              <div className="name">{t.morning}</div>
              <span style={{background:'var(--coral-500)', color:'white', fontSize:11, fontWeight:800, padding:'3px 10px', borderRadius:999, letterSpacing:'0.06em', textTransform:'uppercase'}}>{t.mostPopular}</span>
            </div>
            <div className="slot">{t.morningSlot}</div>
            <div className="amount">
              <span className="euros">24</span><span className="cents">,00 €</span>
            </div>
            <div className="per">{T[lang].schedule.perTurn}</div>
            <ul>{t.bullets.morning.map((b,i) => <li key={i}>{b}</li>)}</ul>
          </div>
          <div className="price-card">
            <div className="name">{t.lunch}</div>
            <div className="slot">{t.lunchSlot}</div>
            <div className="amount">
              <span className="euros">46</span><span className="cents">,50 €</span>
            </div>
            <div className="per">{T[lang].schedule.perTurn}</div>
            <ul>{t.bullets.lunch.map((b,i) => <li key={i}>{b}</li>)}</ul>
          </div>
        </div>
        <div className="bonif">
          <div className="ic">👨‍👩‍👧‍👦</div>
          <div><strong>{lang==='val'?'Famílies nombroses':'Familias numerosas'}:</strong> {t.bonif}</div>
        </div>
      </div>
    </section>
  );
};

const HowTo = ({ lang }) => {
  const t = T[lang].how;
  return (
    <section className="block sea">
      <div className="container">
        <div className="tag">{t.tag}</div>
        <h2 className="section-title" style={{color:'white'}}>{t.title}</h2>
        <div className="steps-grid">
          <div className="step">
            <div className="step-n">01</div>
            <h3>{t.step1T}</h3>
            <p>{t.step1D}</p>
            <div className="when">🗓 {t.step1W}</div>
          </div>
          <div className="step">
            <div className="step-n">02</div>
            <h3>{t.step2T}</h3>
            <p>{t.step2D}</p>
            <div className="when">📍 {t.step2W}</div>
          </div>
          <div className="step">
            <div className="step-n">03</div>
            <h3>{t.step3T}</h3>
            <p>{t.step3D}</p>
            <div className="when">✉️ {t.step3W}</div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Enrol = ({ lang }) => {
  const t = T[lang].enrol;
  const tagColors = {
    0: 'sea', 1: 'sun', 2: 'coral', 3: 'sea',
  };
  return (
    <section className="block sand" id="enrol">
      <div className="container">
        <div className="tag">{t.tag}</div>
        <h2 className="section-title">{t.title}</h2>
        <p className="section-sub">{t.body}</p>

        <div className="enrol-timeline">
          {t.blocks.map((b, i) => (
            <div key={i} className={`enrol-step c-${tagColors[i]}`}>
              <div className="enrol-marker">
                <div className="dot" />
                <div className="line" />
              </div>
              <div className="enrol-card">
                <div className="enrol-when">
                  <span className="ic">🗓</span> {b.when}
                </div>
                <div className="enrol-head">
                  <h3>{b.title}</h3>
                  <span className="enrol-pill">{b.tag}</span>
                </div>
                <p>{b.body}</p>
                {b.email && (
                  <a href={`mailto:${b.email}`} className="enrol-mail">
                    ✉️ {b.email}
                  </a>
                )}
              </div>
            </div>
          ))}
        </div>

        <div className="enrol-warn">
          <div className="ic">⚠️</div>
          <div><strong>{lang==='val'?'Important':'Importante'}.</strong> {t.warn}</div>
        </div>
      </div>
    </section>
  );
};

const Faq = ({ lang }) => {
  const t = T[lang].faq;
  return (
    <section className="block alt" id="faq">
      <div className="container">
        <div className="tag">{t.tag}</div>
        <h2 className="section-title">{t.title}</h2>
        <div className="faq-list">
          {t.items.map((it, i) => (
            <details className="faq-item" key={i} open={i === 0}>
              <summary>
                <span>{it.q}</span>
                <span className="chev">+</span>
              </summary>
              <p>{it.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
};

const Footer = ({ lang }) => {
  const t = T[lang].footer;
  return (
    <footer className="ft">
      <div className="container">
        <div className="ft-grid">
          <div>
            <div className="brand" style={{marginBottom: 14, color: 'white'}}>
              <div className="brand-crest">B</div>
              <div>
                <div>{lang === 'val' ? "Escola d'Estiu" : "Escuela de Verano"}</div>
                <div className="brand-sub" style={{color:'var(--sun-400)'}}>Benicarló · 2026</div>
              </div>
            </div>
            <p style={{color:'color-mix(in oklab, white 70%, transparent)', maxWidth: 38}}>{t.dept}</p>
          </div>
          <div>
            <h4>{t.linksT}</h4>
            <div style={{display:'grid', gap: 6}}>
              <a href="#info">{T[lang].nav.info}</a>
              <a href="#when">{T[lang].nav.when}</a>
              <a href="#prices">{T[lang].nav.prices}</a>
              <a href="#inscribe">{T[lang].nav.inscribe}</a>
              <a href="#faq">{T[lang].nav.faq}</a>
            </div>
          </div>
          <div id="contact">
            <h4>{t.contactT}</h4>
            <div style={{display:'grid', gap: 6}}>
              <span>{t.addr}</span>
              <span>{t.phone}</span>
              <a href={`https://${t.web}`} target="_blank" rel="noreferrer">{t.web}</a>
            </div>
          </div>
        </div>
        <div className="ft-lopd">
          <h4>{t.lopdT}</h4>
          <p>{t.lopdBody}</p>
        </div>
        <div className="ft-bot">
          <span>{t.copy}</span>
          <span>Ajuntament de Benicarló · Educació</span>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Nav, Hero, Audience, Where, When, Schedule, Prices, HowTo, Enrol, Faq, Footer });