/* eslint-disable */
// Italy landing — main app
const { useState: useStateIT, useEffect: useEffectIT, useRef: useRefIT } = React;

/* -------- HERO -------- */
const ItHero = () => (
  <section className="it-hero">
    <div className="it-hero-bg" />
    <div className="it-hero-collage">
      <div className="frame f1" data-cap="Procida · 40°N" style={{backgroundImage:'url(https://images.unsplash.com/photo-1530841377377-3ff06c0ca713?w=600&auto=format)'}} />
      <div className="frame f2" data-cap="Val d'Orcia · 43°N" style={{backgroundImage:'url(https://images.unsplash.com/photo-1543429776-2782fc8e1acd?w=700&auto=format)'}} />
      <div className="frame f3" data-cap="Dolomites · 46°N" style={{backgroundImage:'url(https://images.unsplash.com/photo-1493707553966-283afac8c358?w=600&auto=format)'}} />
    </div>

    <div className="it-hero-inner">
      <div className="it-hero-trail">
        <span>HowTo:Travel</span>
        <span className="sep">·</span>
        <span>Europe</span>
        <span className="sep">·</span>
        <span className="crumb">Italy</span>
      </div>
      <h1>The slow,<br/>sun-dropped<br/><em>republic of lunch.</em>
        <span className="ru">Issue Nº 14 · Country guide 01 · Updated April 2026</span>
      </h1>

      <div className="it-hero-grid">
        <p className="it-hero-lede">
          Italy is twenty regions pretending to be one country. The food changes every forty kilometres, the language changes every hill, and the appropriate hour for an aperitivo is the only constant.
          <strong>184 field guides · 20 regions · 7 cities · five great drives</strong>
        </p>
        <div className="it-hero-meta">
          <div className="row"><span>Currency</span><b>Euro · €</b></div>
          <div className="row"><span>Plug type</span><b>F / L · 230 V</b></div>
          <div className="row"><span>Visa for US/UK</span><b>ETIAS, 90 days</b></div>
          <div className="row"><span>Best for first-timers</span><b>Apr · May · Oct</b></div>
          <div className="row"><span>Language</span><b>Italian + 8 dialects</b></div>
        </div>
      </div>
    </div>
  </section>
);

/* -------- ANCHOR BAR -------- */
const ItAnchor = () => (
  <nav className="it-anchor">
    <div className="it-anchor-inner">
      <span className="lbl">In this guide</span>
      <a href="#intro">Letter</a>
      <a href="#macros">Four Italys</a>
      <a href="#regions">20 Regions</a>
      <a href="#boot">The boot</a>
      <a href="#drives">Great drives</a>
      <a href="#cities">Cities</a>
      <a href="#trains">Trains</a>
      <a href="#when">When to go</a>
      <a href="#food">Food</a>
      <a href="#festivals">Festivals</a>
      <a href="#language">Language</a>
      <a href="#neighborhoods">Neighborhoods</a>
      <a href="#faq">FAQ</a>
    </div>
  </nav>
);

/* -------- INTRO (compact, romantic) -------- */
const ItIntro = () => (
  <section id="intro" className="it-sec it-intro">
    <div className="container">
      <div className="it-intro-grid">
        <p className="it-intro-lead">
          Italy doesn't really exist. There is <em>Lombardia</em>, where lunch lasts forty minutes and a stranger at the next table will judge your tie. There is <em>Sicilia</em>, where lunch lasts four hours and a stranger at the next table will give you their cousin's number in Catania. They speak the same language and they're both right.
          The trick to Italy is to pick one of these countries — properly, slowly — and let it ruin you for the others.
        </p>
        <aside className="it-intro-side">
          <p>This is the version of Italy our 184 contributors actually use. It is built around <strong>regions, not cities</strong>; around <strong>drives, not flights</strong>; and around the steady, indefensible belief that lunch is a structural good.</p>
          <p>If you're here for one place, jump to the regions. If you're here for one trip, scroll to the drives. If you're here to argue about pasta, that's the food bento.</p>
          <div className="credit">— The editors · Roma · Aprile 2026</div>
        </aside>
      </div>
    </div>
  </section>
);

/* -------- MACRO PICKER (sets body data-macro for tinting) -------- */
const ItMacros = ({ macro, setMacro }) => (
  <section id="macros" className="it-macros">
    <div className="it-macros-inner">
      <div className="it-macros-head">
        <div className="lbl">§ 01 · The four Italys</div>
        <div className="hint">Tap to tint the page · ↓</div>
      </div>
      <div className="it-macros-grid">
        {IT_MACROS.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 || "All twenty regions, no filter."}</span>
          </button>
        ))}
      </div>
    </div>
  </section>
);

/* -------- 20 REGIONS — stacked by macro, horizontal scroll-snap rows -------- */
const ItRegions = ({ macro }) => {
  const macros = IT_MACROS.filter(m => m.id !== "all");
  return (
    <section id="regions" className="it-sec it-regions">
      <div className="container">
        <div className="it-sec-head">
          <div>
            <div className="it-sec-num">§ 02 · Le venti regioni</div>
            <h2>Twenty regions,<br/>twenty <em>grandmothers.</em></h2>
          </div>
          <p className="it-sec-blurb">
            A region is the right unit for Italy. Bigger than a city, smaller than a country, and perfectly shaped for a week of slow lunches. <em>Stacked by macro region — swipe each row to see all twenty.</em>
          </p>
        </div>

        <div className="it-regions-stack">
          {macros.map(m => {
            const rows = IT_REGIONS.filter(r => r.macro === m.id);
            const dim = macro !== "all" && macro !== m.id;
            return (
              <div key={m.id} className={"it-regions-row" + (dim ? " is-dim" : "")} style={{"--macro-tint": m.tint}}>
                <header className="it-regions-row-head">
                  <span className="chip" />
                  <span className="name"><em>{m.name}</em></span>
                  <span className="count">{rows.length} regions</span>
                  <span className="line" />
                  <span className="hint">swipe →</span>
                </header>
                <div className="it-regions-rail">
                  {rows.map((r, i) => {
                    const idx = IT_REGIONS.findIndex(rr => rr.id === r.id);
                    return (
                      <article
                        key={r.id}
                        className="it-region"
                        style={{"--region-hue": r.hue}}
                      >
                        <div className="num">No. {String(idx+1).padStart(2,"0")}</div>
                        <h3 className="name"><em>{r.name}</em></h3>
                        <div className="cap">Capital · {r.capital}</div>
                        <p className="known">{r.knownFor}</p>
                        <p className="signature">"{r.signature}"</p>
                        <div className="stats">
                          <span>Pop · <b>{r.pop}M</b></span>
                          <span>Best · <b>{r.best}</b></span>
                        </div>
                      </article>
                    );
                  })}
                  <div className="it-regions-rail-end">
                    <span>End of {m.name}</span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

/* -------- THE BOOT (stylised SVG map) --------
   Hand-drawn-ish boot with macro shading + city pins.
   Coordinates are stylised, not geographic.
*/
const BOOT_PATHS = {
  // Main mainland boot — extreme stylisation
  mainland: "M 220 70 Q 240 50 270 60 L 295 75 Q 310 78 322 90 L 340 110 Q 348 124 342 136 L 332 150 Q 320 158 322 172 L 332 200 Q 350 220 358 245 L 365 290 Q 360 320 348 348 L 330 396 Q 322 422 312 442 L 304 470 Q 292 488 282 506 L 274 525 Q 268 545 260 558 L 250 568 Q 240 562 234 552 L 226 535 Q 222 518 230 502 L 248 470 Q 258 448 260 422 L 254 392 Q 240 380 226 372 L 200 358 Q 184 350 178 332 L 174 308 Q 178 286 196 274 L 222 256 Q 232 240 230 220 L 222 196 Q 210 182 200 168 L 188 144 Q 184 124 196 108 L 210 88 Q 215 78 220 70 Z",
  // Sicily
  sicily: "M 165 565 L 215 555 Q 235 558 245 568 Q 247 580 235 588 L 200 595 Q 175 596 158 588 Q 148 580 152 572 Z",
  // Sardinia
  sardinia: "M 80 380 Q 100 372 112 385 L 120 425 Q 122 460 110 480 L 92 488 Q 78 480 75 460 L 70 420 Q 70 396 80 380 Z",
};

// rough centroids for tint mapping
const REGION_TINT_GROUPS = {
  north:  ["mainland-top"],
  center: ["mainland-mid"],
  south:  ["mainland-bottom"],
  isles:  ["sicily","sardinia"],
};

const BOOT_PINS = [
  { id: "mil", city: "Milano",   x: 230, y: 110, macro: "north" },
  { id: "ven", city: "Venezia",  x: 290, y: 115, macro: "north" },
  { id: "tor", city: "Torino",   x: 200, y: 125, macro: "north" },
  { id: "bol", city: "Bologna",  x: 255, y: 165, macro: "north" },
  { id: "fir", city: "Firenze",  x: 245, y: 200, macro: "center" },
  { id: "rom", city: "Roma",     x: 270, y: 270, macro: "center" },
  { id: "nap", city: "Napoli",   x: 305, y: 320, macro: "south" },
  { id: "bar", city: "Bari",     x: 360, y: 340, macro: "south" },
  { id: "lec", city: "Lecce",    x: 388, y: 388, macro: "south" },
  { id: "pal", city: "Palermo",  x: 195, y: 575, macro: "isles" },
  { id: "cag", city: "Cagliari", x: 95,  y: 478, macro: "isles" },
];

const ItBoot = ({ macro }) => {
  // tint mapping for boot regions
  const tintFor = (zone) => {
    if (macro === "all") return null;
    if (zone === "sicily" || zone === "sardinia") return macro === "isles";
    if (zone.startsWith("mainland")) {
      if (zone === "mainland-top" && macro === "north") return true;
      if (zone === "mainland-mid" && macro === "center") return true;
      if (zone === "mainland-bottom" && macro === "south") return true;
    }
    return false;
  };
  const macroObj = IT_MACROS.find(m => m.id === macro) || IT_MACROS[0];

  return (
    <section id="boot" className="it-boot" style={{"--macro-tint": macroObj.tint}}>
      <div className="it-boot-grid">
        <div className="it-boot-side">
          <div className="lbl">§ 03 · Lo stivale</div>
          <h3>The <em>boot,</em><br/>at a glance.</h3>
          <p>Italy from Milan to Lampedusa is roughly the same as London to the Sahara. Most of the time you spend in Italy you'll spend covering one inch of this map.</p>
          <p>Pick the macro region above to colour the boot. Pins mark the cities our editors actually fly into.</p>
          <div className="legend">
            {IT_MACROS.filter(m => m.id !== "all").map(m => (
              <div key={m.id} className="item">
                <span className="dot" style={{background: m.tint}} />
                <span>{m.name}</span>
              </div>
            ))}
          </div>
        </div>

        <svg className="it-boot-svg" viewBox="0 0 440 620" xmlns="http://www.w3.org/2000/svg">
          {/* mainland split into pseudo north/center/south by horizontal bands */}
          <defs>
            <clipPath id="band-north"><rect x="0" y="0" width="440" height="170" /></clipPath>
            <clipPath id="band-center"><rect x="0" y="170" width="440" height="120" /></clipPath>
            <clipPath id="band-south"><rect x="0" y="290" width="440" height="240" /></clipPath>
          </defs>

          {/* base mainland */}
          <path d={BOOT_PATHS.mainland} className="land" />

          {/* tint overlays per macro */}
          <path d={BOOT_PATHS.mainland} className={"land" + (tintFor("mainland-top") ? " is-active" : "")} clipPath="url(#band-north)" />
          <path d={BOOT_PATHS.mainland} className={"land" + (tintFor("mainland-mid") ? " is-active" : "")} clipPath="url(#band-center)" />
          <path d={BOOT_PATHS.mainland} className={"land" + (tintFor("mainland-bottom") ? " is-active" : "")} clipPath="url(#band-south)" />

          <path d={BOOT_PATHS.sicily} className={"land" + (tintFor("sicily") ? " is-active" : "")} />
          <path d={BOOT_PATHS.sardinia} className={"land" + (tintFor("sardinia") ? " is-active" : "")} />

          {/* dashed band lines (north / center / south) */}
          <line x1="160" y1="170" x2="380" y2="170" stroke="rgba(236,228,211,0.16)" strokeDasharray="3 4" strokeWidth="0.6" />
          <line x1="180" y1="290" x2="385" y2="290" stroke="rgba(236,228,211,0.16)" strokeDasharray="3 4" strokeWidth="0.6" />

          {/* band labels */}
          <text x="20" y="140" className="pin-label" fill="rgba(236,228,211,0.45)" fontSize="8" letterSpacing="2">IL · NORD</text>
          <text x="20" y="240" className="pin-label" fill="rgba(236,228,211,0.45)" fontSize="8" letterSpacing="2">IL · CENTRO</text>
          <text x="20" y="370" className="pin-label" fill="rgba(236,228,211,0.45)" fontSize="8" letterSpacing="2">IL · SUD</text>
          <text x="20" y="510" className="pin-label" fill="rgba(236,228,211,0.45)" fontSize="8" letterSpacing="2">LE · ISOLE</text>

          {/* pins */}
          {BOOT_PINS.map(p => {
            const active = macro === "all" || p.macro === macro;
            const m = IT_MACROS.find(mm => mm.id === p.macro);
            return (
              <g key={p.id}>
                <circle cx={p.x} cy={p.y} r={active ? 4 : 2.5} className="pin"
                        fill={active ? m.tint : "rgba(236,228,211,0.4)"}
                        stroke="rgba(14,26,34,0.9)" strokeWidth="1" />
                {active && <circle cx={p.x} cy={p.y} r="9" fill={m.tint} fillOpacity="0.18" />}
                <text x={p.x + 8} y={p.y + 3} className="pin-label">{p.city}</text>
              </g>
            );
          })}

          {/* compass */}
          <g transform="translate(395, 30)">
            <circle r="18" fill="none" stroke="rgba(236,228,211,0.2)" strokeWidth="0.5" />
            <line x1="0" y1="-15" x2="0" y2="15" stroke="rgba(236,228,211,0.4)" strokeWidth="0.5" />
            <line x1="-15" y1="0" x2="15" y2="0" stroke="rgba(236,228,211,0.4)" strokeWidth="0.5" />
            <text x="0" y="-20" textAnchor="middle" fontSize="7" fill="rgba(236,228,211,0.6)" letterSpacing="1">N</text>
          </g>
        </svg>
      </div>
    </section>
  );
};

/* -------- DRIVES (signature) -------- */
const ItDrives = ({ macro }) => (
  <section id="drives" className="it-sec it-drives">
    <div className="container">
      <div className="it-sec-head">
        <div>
          <div className="it-sec-num">§ 04 · Cinque grandi strade</div>
          <h2>Five drives that<br/>change <em>everything.</em></h2>
        </div>
        <p className="it-sec-blurb">
          Italy is best understood through the windscreen of a small, slightly underpowered car. <em>These are the five we recommend, in priority order, to anyone who has the time.</em> Distances are short. Stops are mandatory.
        </p>
      </div>

      {IT_DRIVES.map(d => {
        const region = IT_REGIONS.find(r => r.id === d.regionId);
        const dim = macro !== "all" && region.macro !== macro;
        return (
          <article
            key={d.id}
            className="it-drive"
            style={{"--region-hue": region.hue, opacity: dim ? 0.5 : 1, transition: "opacity 0.3s"}}
          >
            <div className="num">{d.num}</div>

            <div className="it-drive-head">
              <div className="lbl">{d.region}</div>
              <h3>{d.name} <em>{d.nameEm}</em></h3>
              <p className="blurb">{d.blurb}</p>
              <div className="stops">
                {d.stops.map((s, i) => (
                  <React.Fragment key={i}>
                    <span className="stop">{s}</span>
                    {i < d.stops.length - 1 && <span className="arrow">→</span>}
                  </React.Fragment>
                ))}
              </div>
              <div className="tip">{d.tip}</div>
            </div>

            <div>
              <div className="it-drive-meta">
                <div className="cell"><div className="k">Distance</div><div className="v"><em>{d.km}</em><span className="u">km</span></div></div>
                <div className="cell"><div className="k">Drive time</div><div className="v"><em>{d.hours}</em><span className="u">hrs · with stops</span></div></div>
                <div className="cell"><div className="k">Highest point</div><div className="v"><em>{d.elevMax}</em><span className="u">m</span></div></div>
                <div className="cell"><div className="k">Best season</div><div className="v" style={{fontSize: 16}}>{d.season}</div></div>
              </div>

              <div className="it-drive-detail">
                <div className="row"><span className="k">From → To</span><span>{d.from} → {d.to}</span></div>
                <div className="row"><span className="k">Surface</span><span>{d.surface}</span></div>
                <div className="row"><span className="k">Best car</span><span>{d.car}</span></div>
              </div>

              <div className="it-drive-profile">
                <div className="head">
                  <span>Elevation profile</span>
                  <span>{d.elevMin} m → {d.elevMax} m</span>
                </div>
                <ElevationProfile profile={d.profile} hue={region.hue} />
                <div className="axis">
                  <span>{d.from}</span>
                  <span>{d.to}</span>
                </div>
              </div>
            </div>
          </article>
        );
      })}
    </div>
  </section>
);

const ElevationProfile = ({ profile, hue }) => {
  const W = 400, H = 70;
  const max = Math.max(...profile);
  const min = Math.min(...profile);
  const span = max - min || 1;
  const points = profile.map((v, i) => {
    const x = (i / (profile.length - 1)) * W;
    const y = H - 6 - ((v - min) / span) * (H - 14);
    return [x, y];
  });
  const path = points.map((p, i) => (i === 0 ? `M ${p[0]} ${p[1]}` : `L ${p[0]} ${p[1]}`)).join(" ");
  const fill = path + ` L ${W} ${H} L 0 ${H} Z`;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
      <path d={fill} fill={hue} fillOpacity="0.18" />
      <path d={path} stroke={hue} strokeWidth="1.5" fill="none" />
      {points.map((p, i) => (
        <circle key={i} cx={p[0]} cy={p[1]} r="1.6" fill={hue} />
      ))}
    </svg>
  );
};

/* -------- CITIES -------- */
const CITY_LAYOUT = ["lg","md","sm","sm","md","sm","sm"]; // 7 cards
const ItCities = () => (
  <section id="cities" className="it-sec it-cities">
    <div className="container">
      <div className="it-sec-head">
        <div>
          <div className="it-sec-num">§ 05 · Le città</div>
          <h2>Seven cities,<br/><em>seven moods.</em></h2>
        </div>
        <p className="it-sec-blurb">
          A city in Italy is a small thing — most of them are walkable in a long afternoon. Stay <em>three nights</em> minimum. Rent a flat. Eat at the trattoria nearest your door at least once.
        </p>
      </div>

      <div className="it-cities-grid">
        {IT_CITIES.map((c, i) => {
          const region = IT_REGIONS.find(r => r.id === c.regionId);
          return (
            <article
              key={c.name}
              className={"it-city " + (CITY_LAYOUT[i] || "sm")}
              style={{
                "--city-img": `url(${c.img})`,
                "--region-hue": region.hue,
              }}
            >
              <div className="top">
                <span>0{i+1} · {c.region}</span>
                <span><b>{c.days} days</b></span>
              </div>
              <div className="body">
                <div className="name">{c.name}</div>
                <div className="mood">{c.mood}</div>
                <div className="quote">"{c.quote}"</div>
                <div className="meta">
                  <span>Best · <b>{c.best}</b></span>
                  <span>Pop · <b>{c.pop}M</b></span>
                </div>
              </div>
            </article>
          );
        })}
      </div>
    </div>
  </section>
);

/* -------- TRAINS -------- */
const ItTrains = () => (
  <section id="trains" className="it-sec it-trains">
    <div className="container">
      <div className="it-sec-head">
        <div>
          <div className="it-sec-num">§ 06 · Treni</div>
          <h2>The trains are<br/><em>genuinely good.</em></h2>
        </div>
        <p className="it-sec-blurb">
          Italo and Trenitalia run the spine. <em>Frecciarossa</em> hits 300 km/h between Milan and Naples. <em>Don't fly within Italy.</em>
        </p>
      </div>

      <div className="it-trains-grid">
        <div className="it-trains-aside">
          <p>Two operators run high-speed trains: <strong>Trenitalia</strong> (Frecciarossa) and <strong>Italo</strong>. They use the same tracks, the same stations, and they're both excellent. Italo is sometimes a few euros cheaper; Trenitalia has more frequent departures.</p>
          <p className="pull">"You can have lunch in Florence, dinner in Rome, and still be home in Milan by midnight. Don't, but you could."</p>
          <p>Book at least two weeks ahead for the cheap fares. Day-of tickets cost 2–3× more. <strong>Regionale</strong> trains are slow, cheap, and a vital part of the experience south of Naples.</p>
          <p>Stations sit in the centre of every city. From Milano Centrale to your aperitivo bar: 12 minutes on foot.</p>
        </div>
        <div className="it-trains-table">
          {IT_TRAINS.map((t, i) => (
            <div key={i} className="it-trains-row">
              <div className="route">{t.route}</div>
              <div className="time">{t.time}</div>
              <div className="op">{t.op}</div>
              <div className="note">— {t.note}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* -------- WHEN -------- */
const ItWhen = ({ season }) => (
  <section id="when" className="it-sec it-when">
    <div className="container">
      <div className="it-sec-head">
        <div>
          <div className="it-sec-num">§ 07 · Quando andare</div>
          <h2>Italy has<br/><em>two calendars.</em></h2>
        </div>
        <p className="it-sec-blurb">
          The North wakes up later and goes to bed earlier. The South does the opposite. <em>The two best months in Italy are May and October</em>, in that order. August in cities is a waste; August on the coast is a fight.
        </p>
      </div>

      <div className="it-when-strip">
        <div className="row">
          <div className="lbl">Month</div>
          {IT_MONTHS.map(m => <div key={m.m} className="cell mhead">{m.m}</div>)}
        </div>
        <div className="row">
          <div className="lbl">Il Nord</div>
          {IT_MONTHS.map(m => (
            <div key={m.m + "n"} className={"cell" + (m.n.startsWith("★") ? " is-star" : "")}>
              {m.n.replace("★ ", "")}
            </div>
          ))}
        </div>
        <div className="row last">
          <div className="lbl">Il Sud</div>
          {IT_MONTHS.map(m => (
            <div key={m.m + "s"} className={"cell" + (m.s.startsWith("★") ? " is-star" : "")}>
              {m.s.replace("★ ", "")}
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* -------- FOOD BENTO (light) -------- */
const ItFood = () => (
  <section id="food" className="it-sec it-food">
    <div className="container">
      <div className="it-sec-head">
        <div>
          <div className="it-sec-num">§ 08 · Tavola</div>
          <h2>The non-negotiable<br/><em>plates.</em></h2>
        </div>
        <p className="it-sec-blurb">
          Italian food is <em>not</em> Italian food. There is no such thing. There is the food of the village you happen to be in, and you should eat what's in season there, only.
        </p>
      </div>

      <div className="it-food-grid">
        {IT_FOOD.map((f, i) => {
          const region = IT_REGIONS.find(r => r.id === f.regionId);
          return (
            <article
              key={i}
              className={"it-food-card" + (f.span === 2 ? " span-2" : "")}
              style={{"--region-hue": region.hue}}
            >
              <div className="em">{f.emoji}</div>
              <div className="where">{f.where}</div>
              <div className="dish">{f.dish}</div>
              <div className="note">{f.note}</div>
            </article>
          );
        })}
      </div>
    </div>
  </section>
);

/* -------- FESTIVALS -------- */
const ItFestivals = () => (
  <section id="festivals" className="it-sec it-fest">
    <div className="container">
      <div className="it-sec-head">
        <div>
          <div className="it-sec-num">§ 09 · Sagre &amp; feste</div>
          <h2>Six reasons to<br/>be there <em>that week.</em></h2>
        </div>
        <p className="it-sec-blurb">
          A festival in Italy is rarely a tourist event. It is the village explaining itself to itself. <em>Show up early, stay late, and don't ask what time it ends.</em>
        </p>
      </div>

      <div className="it-fest-grid">
        {IT_FESTIVALS.map(f => {
          const region = IT_REGIONS.find(r => r.id === f.regionId);
          return (
            <article key={f.num} className="it-fest-card" style={{"--region-hue": region.hue}}>
              <div className="num">No. {f.num}</div>
              <div className="name"><em>{f.name}</em></div>
              <div className="meta">
                <span><b>{f.where}</b></span>
                <span>{f.when}</span>
              </div>
              <div className="text">{f.text}</div>
            </article>
          );
        })}
      </div>
    </div>
  </section>
);

/* -------- LANGUAGE -------- */
const ItLanguage = () => (
  <section id="language" className="it-sec it-lang">
    <div className="container">
      <div className="it-sec-head">
        <div>
          <div className="it-sec-num">§ 10 · La lingua</div>
          <h2>Eight phrases<br/>and you're <em>fine.</em></h2>
        </div>
        <p className="it-sec-blurb">
          Italian is the easiest of the romance languages for English speakers, and the hardest one to use without sounding like you're auditioning. <em>The trick is the rhythm, not the vocabulary.</em>
        </p>
      </div>

      <div className="it-lang-grid">
        <div className="it-lang-aside">
          <p>You don't need to speak Italian to travel in Italy — most of the country, at most of the points where you'll need it, has English. But it changes everything when you don't.</p>
          <p className="pull">"Buongiorno is a contract. Use it."</p>
          <p>The single most useful word is <em>buongiorno</em>, said audibly, on entering any room — a shop, a bar, an elevator with one stranger. Skip it and you've revealed yourself in a way nothing else does.</p>
        </div>
        <div className="it-phrases">
          {IT_PHRASES.map((p, i) => (
            <div key={i} className="it-phrase">
              <div className="it">{p.it}</div>
              <div className="en">{p.en}</div>
              <div className="note">— {p.note}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* -------- NEIGHBORHOODS -------- */
const ItNeighborhoods = () => (
  <section id="neighborhoods" className="it-sec it-nbhd">
    <div className="container">
      <div className="it-sec-head">
        <div>
          <div className="it-sec-num">§ 11 · Quartieri</div>
          <h2>Eight neighbourhoods<br/>that <em>aren't ruined.</em></h2>
        </div>
        <p className="it-sec-blurb">
          Where to actually sleep. Each pairs two adjacent neighbourhoods so you have <em>somewhere to walk</em> in the morning.
        </p>
      </div>

      <div className="it-nbhd-grid">
        {IT_NEIGHBORHOODS.map(n => {
          const region = IT_REGIONS.find(r => r.id === n.regionId);
          return (
            <article key={n.num} className="it-nbhd-card" style={{"--region-hue": region.hue}}>
              <div className="num">{n.num}</div>
              <div>
                <div className="city">{n.city}</div>
                <h3 className="name">{n.name} <em>{n.nameEm}</em></h3>
                <p className="text">{n.text}</p>
                <div className="why">— {n.why}</div>
              </div>
            </article>
          );
        })}
      </div>
    </div>
  </section>
);

/* -------- FAQ -------- */
const ItFaq = () => (
  <section id="faq" className="it-sec it-faq">
    <div className="container">
      <div className="it-sec-head">
        <div>
          <div className="it-sec-num">§ 12 · Le domande</div>
          <h2>Questions our<br/>contributors <em>get most.</em></h2>
        </div>
        <p className="it-sec-blurb">
          From a hundred reader emails. The honest answers, not the search-engine answers.
        </p>
      </div>

      <div className="it-faq-grid">
        <aside className="it-faq-aside">
          <p>If your question isn't here, write to <strong>letters@howto.travel</strong>. We answer most within a week and the good ones become guides.</p>
          <p>Updated <strong>April 2026</strong> by the Italy desk.</p>
        </aside>
        <div>
          {IT_FAQ.map((f, i) => (
            <details key={i} className="it-faq-item" open={i === 0}>
              <summary>{f.q}</summary>
              <div className="a">{f.a}</div>
            </details>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* -------- SIGN-OFF -------- */
const ItSignoff = () => (
  <section className="it-signoff">
    <div className="it-signoff-inner">
      <h2>Andiamo, <em>piano.</em></h2>
      <p>"There is no shortcut to Italy. The shortcut is the long way."</p>
      <div className="meta">
        Issue Nº 14 · Country guide 01 · Italy<br/>
        <b>184 field guides</b> &nbsp;·&nbsp; <b>20 regions</b> &nbsp;·&nbsp; <b>updated April 2026</b>
      </div>
    </div>
  </section>
);

/* -------- TWEAKS -------- */
const ItTweaks = ({ macro, setMacro, season, setSeason, traveler, setTraveler }) => (
  <TweaksPanel title="Italy">
    <TweakSection title="Macro region">
      <TweakRadio
        value={macro}
        onChange={setMacro}
        options={IT_MACROS.map(m => ({ value: m.id, label: m.name }))}
      />
    </TweakSection>
    <TweakSection title="Season focus">
      <TweakRadio
        value={season}
        onChange={setSeason}
        options={[
          { value: "all",    label: "Year-round" },
          { value: "spring", label: "Apr–Jun · Spring light" },
          { value: "summer", label: "Jul–Aug · Coast & cool" },
          { value: "autumn", label: "Sep–Oct · Vendemmia" },
          { value: "winter", label: "Nov–Mar · Quiet, fog, snow" },
        ]}
      />
    </TweakSection>
    <TweakSection title="Traveler type">
      <TweakRadio
        value={traveler}
        onChange={setTraveler}
        options={[
          { value: "any",   label: "Any traveler" },
          { value: "slow",  label: "Slow · one region only" },
          { value: "drive", label: "Driver · prioritise the strade" },
          { value: "city",  label: "City-led · trains + capitals" },
          { value: "food",  label: "Food-first" },
        ]}
      />
    </TweakSection>
  </TweaksPanel>
);

/* -------- APP -------- */
const ItApp = () => {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "macro": "all",
    "season": "all",
    "traveler": "any"
  }/*EDITMODE-END*/;

  // useTweaks comes from tweaks-panel.jsx — signature: [values, setTweak(key, val)]
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const setKey = (k) => (v) => setTweak(k, v);

  // sync body data-macro for CSS theming
  useEffectIT(() => {
    document.body.setAttribute("data-macro", tweaks.macro || "all");
  }, [tweaks.macro]);

  return (
    <>
      <Nav />
      <ItHero />
      <ItAnchor />
      <ItIntro />
      <ItMacros macro={tweaks.macro} setMacro={setKey("macro")} />
      <ItRegions macro={tweaks.macro} />
      <ItBoot macro={tweaks.macro} />
      <ItDrives macro={tweaks.macro} />
      <ItCities />
      <ItTrains />
      <ItWhen season={tweaks.season} />
      <ItFood />
      <ItFestivals />
      <ItLanguage />
      <ItNeighborhoods />
      <ItFaq />
      <ItSignoff />
      <Footer />
      <ItTweaks
        macro={tweaks.macro} setMacro={setKey("macro")}
        season={tweaks.season} setSeason={setKey("season")}
        traveler={tweaks.traveler} setTraveler={setKey("traveler")}
      />
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<ItApp />);
