/* eslint-disable */
// Destination hub renderer — adapted from public/en/europe/italy/src/italy-app.jsx
// All chrome copy and section content come from window.PETRA_DATA.
// Italy-specific stylized SVG boot map intentionally omitted (Italy only).
// CSS class names are kept as `.it-*` so the copied italy.css applies verbatim.

const D = window.PETRA_DATA || {};
const CHROME = D.chrome || {};
const HERO = CHROME.hero || {};
const ANCHOR = CHROME.anchor || { items: [] };
const INTRO = CHROME.intro || {};
const SIGNOFF = CHROME.signoff || {};

const HAS = {
  macros:        Array.isArray(D.macros)        && D.macros.length > 0,
  regions:       Array.isArray(D.regions)       && D.regions.length > 0,
  drives:        Array.isArray(D.drives)        && D.drives.length > 0,
  cities:        Array.isArray(D.cities)        && D.cities.length > 0,
  trains:        Array.isArray(D.trains)        && D.trains.length > 0,
  months:        Array.isArray(D.months)        && D.months.length > 0,
  food:          Array.isArray(D.food)          && D.food.length > 0,
  festivals:     Array.isArray(D.festivals)     && D.festivals.length > 0,
  phrases:       Array.isArray(D.phrases)       && D.phrases.length > 0,
  neighborhoods: Array.isArray(D.neighborhoods) && D.neighborhoods.length > 0,
  faq:           Array.isArray(D.faq)           && D.faq.length > 0,
};

const { useState: useStateDH, useEffect: useEffectDH } = React;

/* -------- HERO -------- */
const DhHero = () => (
  <section className="it-hero">
    <div className="it-hero-bg" />
    <div className="it-hero-collage">
      {(HERO.frames || []).slice(0, 3).map((f, i) => (
        <div
          key={i}
          className={`frame f${i+1}`}
          data-cap={f.cap || ''}
          style={{ backgroundImage: `url(${f.img})` }}
        />
      ))}
    </div>

    <div className="it-hero-inner">
      <div className="it-hero-trail">
        {(HERO.kicker || '').split('·').map((part, i, arr) => (
          <React.Fragment key={i}>
            <span className={i === arr.length - 1 ? 'crumb' : ''}>{part.trim()}</span>
            {i < arr.length - 1 && <span className="sep">·</span>}
          </React.Fragment>
        ))}
      </div>
      <h1>
        {(HERO.h1Lines || []).map((line, i, arr) => (
          <React.Fragment key={i}>
            {i === arr.length - 1 ? <em>{line}</em> : <>{line}<br/></>}
          </React.Fragment>
        ))}
        <span className="ru">{HERO.issueLabel}</span>
      </h1>

      <div className="it-hero-grid">
        <p className="it-hero-lede">
          {HERO.lede}
          {HERO.stats && <><br/><strong>{HERO.stats}</strong></>}
        </p>
        <div className="it-hero-meta">
          {(HERO.metaRows || []).map((r, i) => (
            <div className="row" key={i}>
              <span>{r.k}</span>
              <b>{r.v}</b>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* -------- ANCHOR BAR -------- */
const DhAnchor = () => (
  <nav className="it-anchor">
    <div className="it-anchor-inner">
      <span className="lbl">{ANCHOR.label || ''}</span>
      {(ANCHOR.items || []).map((a, i) => (
        <a key={i} href={`#${a.id}`}>{a.label}</a>
      ))}
    </div>
  </nav>
);

/* -------- INTRO -------- */
const DhIntro = () => (
  <section id="intro" className="it-sec it-intro">
    <div className="container">
      <div className="it-intro-grid">
        <p className="it-intro-lead">{INTRO.lead}</p>
        <aside className="it-intro-side">
          <p>{INTRO.side}</p>
          <div className="credit">{INTRO.credit}</div>
        </aside>
      </div>
    </div>
  </section>
);

/* -------- MACROS -------- */
const DhMacros = ({ macro, setMacro }) => {
  if (!HAS.macros) return null;
  // Inject "all" pseudo-macro at the front
  const all = { id: 'all', name: 'All', tint: D.macros[0].tint, blurb: '' };
  const list = [all, ...D.macros];
  return (
    <section id="macros" className="it-macros">
      <div className="it-macros-inner">
        <div className="it-macros-head">
          <div className="lbl">§ 01 · Zones</div>
          <div className="hint">↓</div>
        </div>
        <div className="it-macros-grid">
          {list.map((m) => (
            <button
              key={m.id}
              className="it-macro-btn"
              aria-pressed={macro === m.id}
              onClick={() => setMacro(m.id)}
              style={{ '--macro-tint': m.tint }}
            >
              <span className="chip" />
              <span className="name">{m.name}</span>
              <span className="blurb">{m.blurb || ''}</span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
};

/* -------- REGIONS -------- */
const DhRegions = ({ macro }) => {
  if (!HAS.regions) return null;
  const macros = HAS.macros ? D.macros : [{ id: 'all', name: 'All', tint: '#888' }];
  return (
    <section id="regions" className="it-sec it-regions">
      <div className="container">
        <div className="it-sec-head">
          <div>
            <div className="it-sec-num">§ 02 · Regions</div>
          </div>
        </div>
        {macros.map((m) => {
          const rows = D.regions.filter(r => macro === 'all' || macro === m.id ? r.macro === m.id : false);
          if (!rows.length) return null;
          return (
            <div key={m.id} className="it-region-row">
              <div className="it-region-row-head">
                <h3>{m.name}</h3>
                {m.blurb && <p>{m.blurb}</p>}
              </div>
              <div className="it-region-track">
                {rows.map(r => (
                  <article key={r.id} className="it-region-card" style={{ '--hue': r.hue }}>
                    <header>
                      <h4>{r.name}</h4>
                      <span>{r.capital}</span>
                    </header>
                    <p className="known">{r.knownFor}</p>
                    <p className="sig">{r.signature}</p>
                    <footer>
                      <span>{r.area ? `${r.area.toLocaleString()} km²` : ''}</span>
                      <span>{r.pop ? `${r.pop} M` : ''}</span>
                      <span>{r.best || ''}</span>
                    </footer>
                  </article>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
};

/* -------- DRIVES -------- */
const DhDrives = ({ macro }) => {
  if (!HAS.drives) return null;
  const list = D.drives.filter(d => {
    if (macro === 'all' || !HAS.macros) return true;
    const region = (D.regions || []).find(r => r.id === d.regionId);
    return !region || region.macro === macro;
  });
  return (
    <section id="drives" className="it-sec it-drives">
      <div className="container">
        <div className="it-sec-head">
          <div className="it-sec-num">§ 03 · Great drives</div>
        </div>
        <div className="it-drives-list">
          {list.map((d) => (
            <article key={d.id} className="it-drive-card">
              <div className="it-drive-head">
                <span className="num">{d.num}</span>
                <h3>{d.name} <em>{d.nameEm}</em></h3>
                <span className="region">{d.region}</span>
              </div>
              <div className="it-drive-meta">
                <div><span>From</span><b>{d.from}</b></div>
                <div><span>To</span><b>{d.to}</b></div>
                <div><span>km</span><b>{d.km}</b></div>
                <div><span>hrs</span><b>{d.hours}</b></div>
                <div><span>Season</span><b>{d.season}</b></div>
              </div>
              <p className="blurb">{d.blurb}</p>
              <div className="surface"><span>Road</span> <em>{d.surface}</em></div>
              <div className="car"><span>Car</span> <em>{d.car}</em></div>
              {Array.isArray(d.stops) && (
                <div className="stops">
                  {d.stops.map((s, i) => (
                    <span key={i} className="stop">{s}</span>
                  ))}
                </div>
              )}
              {d.tip && <div className="tip">★ {d.tip}</div>}
              {Array.isArray(d.profile) && d.profile.length > 0 && (
                <svg className="profile" viewBox={`0 0 ${d.profile.length * 20} 80`} preserveAspectRatio="none">
                  <polyline
                    points={d.profile.map((y, i) => `${i*20},${80 - (y / Math.max(...d.profile)) * 70}`).join(' ')}
                    fill="none" stroke="currentColor" strokeWidth="1.5"
                  />
                </svg>
              )}
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

/* -------- CITIES -------- */
const DhCities = () => {
  if (!HAS.cities) return null;
  return (
    <section id="cities" className="it-sec it-cities">
      <div className="container">
        <div className="it-sec-head">
          <div className="it-sec-num">§ 04 · Cities</div>
        </div>
        <div className="it-cities-grid">
          {D.cities.map((c, i) => (
            <article key={i} className="it-city-card">
              {c.img && (
                <div className="img" style={{ backgroundImage: `url(${c.img})` }} />
              )}
              <div className="body">
                <h3>{c.name}</h3>
                <div className="meta">
                  <span>{c.region}</span>
                  <span>·</span>
                  <span>{c.days}</span>
                </div>
                <p className="mood">{c.mood}</p>
                <p className="quote">"{c.quote}"</p>
                <div className="best">Best · {c.best}</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

/* -------- TRAINS -------- */
const DhTrains = () => {
  if (!HAS.trains) return null;
  return (
    <section id="trains" className="it-sec it-trains">
      <div className="container">
        <div className="it-sec-head">
          <div className="it-sec-num">§ 05 · Trains</div>
        </div>
        <table className="it-trains-table">
          <thead>
            <tr>
              <th>Route</th>
              <th>Time</th>
              <th>Operator</th>
              <th>Note</th>
            </tr>
          </thead>
          <tbody>
            {D.trains.map((t, i) => (
              <tr key={i}>
                <td><b>{t.route}</b></td>
                <td>{t.time}</td>
                <td>{t.op}</td>
                <td>{t.note}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
};

/* -------- WHEN -------- */
const DhWhen = ({ season }) => {
  if (!HAS.months) return null;
  return (
    <section id="when" className="it-sec it-when">
      <div className="container">
        <div className="it-sec-head">
          <div className="it-sec-num">§ 06 · When to go</div>
        </div>
        <div className="it-months">
          {D.months.map((m, i) => (
            <div key={i} className={`it-month ${season && (i+1) <= 6 ? 'is-n' : 'is-s'}`}>
              <div className="m">{m.m}</div>
              <div className="n">{m.n}</div>
              <div className="s">{m.s}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* -------- FOOD -------- */
const DhFood = () => {
  if (!HAS.food) return null;
  return (
    <section id="food" className="it-sec it-food">
      <div className="container">
        <div className="it-sec-head">
          <div className="it-sec-num">§ 07 · Food</div>
        </div>
        <div className="it-food-bento">
          {D.food.map((f, i) => (
            <div key={i} className={`it-food-card span-${f.span || 1}`}>
              <div className="emoji">{f.emoji}</div>
              <h4>{f.dish}</h4>
              <div className="where">{f.where}</div>
              <p>{f.note}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* -------- FESTIVALS -------- */
const DhFestivals = () => {
  if (!HAS.festivals) return null;
  return (
    <section id="festivals" className="it-sec it-festivals">
      <div className="container">
        <div className="it-sec-head">
          <div className="it-sec-num">§ 08 · Festivals</div>
        </div>
        <div className="it-festivals-list">
          {D.festivals.map((f, i) => (
            <article key={i} className="it-festival-card">
              <div className="num">{f.num}</div>
              <h4>{f.name}</h4>
              <div className="meta">
                <span>{f.where}</span>
                <span>·</span>
                <span>{f.when}</span>
              </div>
              <p>{f.text}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

/* -------- LANGUAGE -------- */
const DhLanguage = () => {
  if (!HAS.phrases) return null;
  return (
    <section id="language" className="it-sec it-language">
      <div className="container">
        <div className="it-sec-head">
          <div className="it-sec-num">§ 09 · Language</div>
        </div>
        <ul className="it-phrases">
          {D.phrases.map((p, i) => (
            <li key={i}>
              <span className="lc">{p.lc}</span>
              <span className="tr">{p.tr}</span>
              <span className="note">{p.note}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

/* -------- NEIGHBORHOODS -------- */
const DhNeighborhoods = () => {
  if (!HAS.neighborhoods) return null;
  return (
    <section id="neighborhoods" className="it-sec it-neighborhoods">
      <div className="container">
        <div className="it-sec-head">
          <div className="it-sec-num">§ 10 · Neighborhoods</div>
        </div>
        <div className="it-nbhds-grid">
          {D.neighborhoods.map((n, i) => (
            <article key={i} className="it-nbhd-card">
              <div className="num">{n.num}</div>
              <h4>{n.name} <em>{n.nameEm}</em></h4>
              <div className="city">{n.city}</div>
              <p>{n.text}</p>
              {n.why && <div className="why">★ {n.why}</div>}
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

/* -------- FAQ -------- */
const DhFaq = () => {
  if (!HAS.faq) return null;
  return (
    <section id="faq" className="it-sec it-faq">
      <div className="container">
        <div className="it-sec-head">
          <div className="it-sec-num">§ 11 · FAQ</div>
        </div>
        <div className="it-faq-list">
          {D.faq.map((f, i) => (
            <details key={i} className="it-faq-item">
              <summary>{f.q}</summary>
              <p>{f.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
};

/* -------- SIGNOFF -------- */
const DhSignoff = () => (
  <section className="it-sec it-signoff">
    <div className="container">
      {SIGNOFF.h2 && <h2>{SIGNOFF.h2}</h2>}
      {SIGNOFF.body && <p>{SIGNOFF.body}</p>}
      {SIGNOFF.credit && <div className="credit">{SIGNOFF.credit}</div>}
    </div>
  </section>
);

/* -------- TWEAKS PANEL -------- */
const DhTweaks = ({ macro, setMacro, season, setSeason, traveler, setTraveler }) => (
  <div className="it-tweaks">
    {HAS.macros && (
      <div className="row">
        <span>Zone</span>
        <select value={macro} onChange={e => setMacro(e.target.value)}>
          <option value="all">All</option>
          {D.macros.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
        </select>
      </div>
    )}
    <div className="row">
      <span>Season</span>
      <select value={season} onChange={e => setSeason(e.target.value)}>
        <option value="all">All</option>
        <option value="n">North/Zone 1</option>
        <option value="s">South/Zone 2</option>
      </select>
    </div>
  </div>
);

/* -------- APP -------- */
const DhApp = () => {
  const TWEAK_DEFAULTS = { macro: 'all', season: 'all', traveler: 'any' };
  const [tweaks, setTweak] = (typeof useTweaks !== 'undefined') ? useTweaks(TWEAK_DEFAULTS) : (() => {
    const [v, sv] = useStateDH(TWEAK_DEFAULTS);
    return [v, (k, val) => sv({ ...v, [k]: val })];
  })();
  const setKey = (k) => (v) => setTweak(k, v);

  useEffectDH(() => {
    document.body.setAttribute('data-macro', tweaks.macro || 'all');
  }, [tweaks.macro]);

  return (
    <>
      {typeof Nav !== 'undefined' && <Nav />}
      <DhHero />
      <DhAnchor />
      <DhIntro />
      <DhMacros macro={tweaks.macro} setMacro={setKey('macro')} />
      <DhRegions macro={tweaks.macro} />
      <DhDrives macro={tweaks.macro} />
      <DhCities />
      <DhTrains />
      <DhWhen season={tweaks.season} />
      <DhFood />
      <DhFestivals />
      <DhLanguage />
      <DhNeighborhoods />
      <DhFaq />
      <DhSignoff />
      {typeof Footer !== 'undefined' && <Footer />}
      <DhTweaks
        macro={tweaks.macro} setMacro={setKey('macro')}
        season={tweaks.season} setSeason={setKey('season')}
        traveler={tweaks.traveler} setTraveler={setKey('traveler')}
      />
    </>
  );
};

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