/* global React */

/* ============ MENU ============ */
const MEAL_DATA = {
  ipo: [
    { tag: "Pranzo", t: "Petto di pollo + riso basmati + zucchine", k: 520, p: 48, c: 62, f: 9, w: "320 g" },
    { tag: "Cena", t: "Merluzzo al forno + patate dolci + spinaci", k: 480, p: 42, c: 48, f: 12, w: "300 g" },
    { tag: "Colazione", t: "Yogurt greco + avena + frutti di bosco", k: 380, p: 28, c: 52, f: 6, w: "250 g" },
    { tag: "Spuntino", t: "Skyr + mandorle + mela", k: 240, p: 18, c: 28, f: 8, w: "180 g" },
    { tag: "Pranzo", t: "Tonno + farro + pomodorini", k: 510, p: 40, c: 60, f: 11, w: "310 g" },
    { tag: "Cena", t: "Tacchino + quinoa + broccoli", k: 470, p: 44, c: 46, f: 10, w: "295 g" },
  ],
  iper: [
    { tag: "Pranzo", t: "Manzo magro + pasta integrale + insalata", k: 720, p: 58, c: 82, f: 18, w: "380 g" },
    { tag: "Cena", t: "Salmone + riso venere + asparagi", k: 680, p: 52, c: 68, f: 22, w: "360 g" },
    { tag: "Colazione", t: "Pancake proteici + banana + burro arachidi", k: 560, p: 38, c: 72, f: 14, w: "300 g" },
    { tag: "Spuntino", t: "Frullato proteico + avena", k: 380, p: 32, c: 42, f: 8, w: "350 ml" },
    { tag: "Pranzo", t: "Pollo + patate + olive", k: 700, p: 56, c: 76, f: 20, w: "390 g" },
    { tag: "Cena", t: "Hamburger di tacchino + bulgur + zucca", k: 660, p: 50, c: 70, f: 18, w: "370 g" },
  ],
  veg: [
    { tag: "Pranzo", t: "Tofu + riso integrale + verdure saltate", k: 540, p: 32, c: 68, f: 14, w: "330 g" },
    { tag: "Cena", t: "Lenticchie + farro + cavolo nero", k: 510, p: 28, c: 74, f: 11, w: "320 g" },
    { tag: "Colazione", t: "Porridge avena + semi + frutta", k: 420, p: 16, c: 64, f: 12, w: "280 g" },
    { tag: "Spuntino", t: "Hummus + cracker integrali + carote", k: 280, p: 10, c: 36, f: 10, w: "180 g" },
    { tag: "Pranzo", t: "Tempeh + quinoa + pomodorini", k: 550, p: 34, c: 60, f: 16, w: "335 g" },
    { tag: "Cena", t: "Ceci + cous cous + zucchine", k: 490, p: 24, c: 70, f: 12, w: "315 g" },
  ],
};

function MenuSection({ variant = "grid" }) {
  const [diet, setDiet] = React.useState("ipo");
  const meals = MEAL_DATA[diet];
  const slotPrefix = diet; // ipo | iper | veg

  return (
    <section className="ng-section" id="menu" data-screen-label="04 Menu">
      <div className="ng-container">
        <div className="ng-section__head">
          <p className="ng-eyebrow">Esempio menu</p>
          <h2 className="ng-h2">Pasti personalizzati a Milano, costruiti sul tuo piano.</h2>
          <p className="ng-lead">Tre esempi di settimane reali, ricostruite per tre piani diversi. Ogni piatto è pesato al grammo, sigillato sottovuoto con condimenti separati — consegnato a Milano e nei comuni dell'hinterland.</p>
        </div>

        <div className="ng-menu-tabs">
          {[["ipo","Ipocalorico"],["iper","Ipercalorico"],["veg","Vegetariano"]].map(([k,l]) => (
            <button
              key={k}
              className={"ng-menu-tab" + (diet===k ? " is-active" : "")}
              onClick={() => setDiet(k)}
            >{l}</button>
          ))}
        </div>

        {variant === "grid" && <MenuGrid meals={meals} slotPrefix={slotPrefix} />}
        {variant === "table" && <MenuTable meals={meals} />}
        {variant === "week" && <MenuWeek meals={meals} />}
      </div>
    </section>
  );
}

function MenuGrid({ meals, slotPrefix = "ipo" }) {
  return (
    <div className="ng-menu-grid">
      {meals.slice(0,6).map((m, i) => (
        <article className="ng-meal" key={slotPrefix+"-"+i}>
          <div className="ng-meal__media">
            <span className="ng-meal__tag">{m.tag}</span>
            <image-slot id={"meal-"+slotPrefix+"-"+i} src={(window.NG_ROOT || "") + "img/meal-"+slotPrefix+"-"+i+".webp"} placeholder={m.t}></image-slot>
          </div>
          <div className="ng-meal__body">
            <h3 className="ng-meal__title">{m.t}</h3>
            <div className="ng-meal__macros">
              <span><b>{m.k}</b> kcal</span>
              <span><b>{m.p}</b>P</span>
              <span><b>{m.c}</b>C</span>
              <span><b>{m.f}</b>G</span>
            </div>
            <span className="ng-meal__weight">⚖ {m.w} pesati al grammo</span>
          </div>
        </article>
      ))}
    </div>
  );
}

function MenuTable({ meals }) {
  return (
    <table className="ng-menu-table">
      <thead>
        <tr>
          <th>Pasto</th>
          <th>Piatto</th>
          <th>Kcal</th>
          <th>P / C / G</th>
          <th>Peso</th>
        </tr>
      </thead>
      <tbody>
        {meals.map((m, i) => (
          <tr key={i}>
            <td>{m.tag}</td>
            <td><b>{m.t}</b></td>
            <td>{m.k}</td>
            <td>{m.p} / {m.c} / {m.f} g</td>
            <td className="ng-grams">{m.w}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function MenuWeek({ meals }) {
  const days = ["Lun","Mar","Mer","Gio","Ven","Sab","Dom"];
  return (
    <div className="ng-menu-week">
      {days.map((d, i) => (
        <div className="ng-menu-day" key={d}>
          <p className="ng-menu-day__name">{d}</p>
          {[meals[i % meals.length], meals[(i+2) % meals.length], meals[(i+4) % meals.length]].map((m, j) => (
            <div className="ng-menu-day__meal" key={j}>
              <b>{m.tag}</b>
              <span>{m.t}</span>
              <span style={{fontFamily:"var(--ng-mono)", color:"var(--ng-primary-deep)", fontSize:11}}>{m.k} kcal · {m.w}</span>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

/* ============ PRICING ============ */
// Pricing dal Business Plan 3 maggio 2026 (allineato al configuratore):
// Solo pranzo €11/gg · Pranzo+cena €18,50/gg · Completo €23/gg
// 5gg = 22 gg/mese · 6gg = 26 gg/mese · trimestrale -10%
const PLANS = [
  { n: "Solo pranzo",    ppg: 11.00, gg5: 242, gg6: 286,
    desc: "Pranzo",
    pasti5: "5 pranzi / settimana", pasti6: "6 pranzi / settimana",
    feats: ["Solo pranzo, pesato al grammo", "Consegna 1× o 2× a settimana", "Aggiorni il piano quando vuoi"] },
  { n: "Pranzo + cena",  ppg: 18.50, gg5: 407, gg6: 481, featured: true,
    desc: "Pranzo + cena",
    pasti5: "10 pasti / settimana", pasti6: "12 pasti / settimana",
    feats: ["Pranzo + cena, pesati al grammo", "Consegna 2× a settimana", "Verifica con il tuo nutrizionista", "Pesatura al grammo certificata"] },
  { n: "Piano completo", ppg: 23.00, gg5: 506, gg6: 598,
    desc: "Spuntini + pranzo + cena",
    pasti5: "15 pasti / settimana", pasti6: "18 pasti / settimana",
    feats: ["3 pasti al giorno + spuntini", "Consegna 2× a settimana", "Slot prioritario consegna", "Cambio piano illimitato"] },
];
const NG_GG_MAP = { 5: 22, 6: 26 };

function ngPrice(plan, days, cycle) {
  const m1 = plan.ppg * NG_GG_MAP[days];      // mensile pieno
  const monthly = cycle === "month" ? m1 : m1 * 0.9; // trimestrale -10% sul mensile
  const total = cycle === "month" ? monthly : monthly * 3;
  return { monthly: Math.round(monthly), total: Math.round(total) };
}

function PricingSection({ variant = "cards" }) {
  const [cycle, setCycle] = React.useState("month");
  const [days, setDays] = React.useState(6);
  return (
    <section className="ng-section ng-section--soft" id="prezzi" data-screen-label="05 Prezzi">
      <div className="ng-container">
        <div className="ng-section__head">
          <p className="ng-eyebrow">Piani</p>
          <h2 className="ng-h2">Pasti personalizzati a Milano: prezzi trasparenti.</h2>
          <p className="ng-lead">Scegli quanti giorni a settimana e se pagare a mese o a trimestre. Stesso prezzo a Milano e nei 18 comuni dell'hinterland. Cambi piano quando vuoi. Il trimestrale è scontato del 10%.</p>
        </div>

        <div className="ng-price-controls" style={{display:"flex", flexWrap:"wrap", gap:24, justifyContent:"center", alignItems:"center", marginBottom:36}}>
          <div className="ng-price-control">
            <span className="ng-price-control__label">Giorni / settimana</span>
            <div className="ng-menu-tabs" style={{margin:0}}>
              <button className={"ng-menu-tab" + (days===5 ? " is-active" : "")} onClick={() => setDays(5)}>5 giorni</button>
              <button className={"ng-menu-tab" + (days===6 ? " is-active" : "")} onClick={() => setDays(6)}>6 giorni</button>
            </div>
          </div>
          <div className="ng-price-control">
            <span className="ng-price-control__label">Fatturazione</span>
            <div className="ng-menu-tabs" style={{margin:0}}>
              <button className={"ng-menu-tab" + (cycle==="month" ? " is-active" : "")} onClick={() => setCycle("month")}>Mensile</button>
              <button className={"ng-menu-tab" + (cycle==="quarter" ? " is-active" : "")} onClick={() => setCycle("quarter")}>Trimestrale −10%</button>
            </div>
          </div>
        </div>

        {variant === "cards" && <PricingCards cycle={cycle} days={days} />}
        {variant === "table" && <PricingTable cycle={cycle} days={days} />}
        {variant === "calc" && <PricingCalc cycle={cycle} days={days} />}
      </div>
    </section>
  );
}

function PricingCards({ cycle = "month", days = 6 }) {
  const per = cycle === "month" ? "/ mese" : "/ mese";
  return (
    <div className="ng-pricing">
      {PLANS.map(p => {
        const { monthly, total } = ngPrice(p, days, cycle);
        const sub = days === 5 ? p.pasti5 : p.pasti6;
        return (
          <div className={"ng-price" + (p.featured ? " ng-price--featured" : "")} key={p.n}>
            <h3 className="ng-price__name">{p.n}</h3>
            <div className="ng-price__amount">
              <span className="cur">€</span>
              <span className="num">{monthly}</span>
              <span className="per">{per}</span>
            </div>
            <p className="ng-price__sub">
              {sub} · {days} giorni
              {cycle === "quarter" && <><br/><small style={{color:"var(--ng-ink-500)"}}>Totale trimestrale: €{total.toLocaleString("it-IT")}</small></>}
            </p>
            <ul className="ng-price__list">
              {p.feats.map(f => <li key={f}><Check size={16}/> {f}</li>)}
            </ul>
            <a href="#configura" className={"ng-btn " + (p.featured ? "ng-btn--primary" : "ng-btn--outline")}>
              Scegli {p.n} <ArrowRight />
            </a>
          </div>
        );
      })}
    </div>
  );
}

function PricingTable({ cycle = "month", days = 6 }) {
  return (
    <table className="ng-price-table">
      <thead>
        <tr>
          <th>Piano</th>
          <th>Pasti / settimana</th>
          <th>Consegne</th>
          <th>Prezzo / mese</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {PLANS.map(p => {
          const { monthly } = ngPrice(p, days, cycle);
          const sub = days === 5 ? p.pasti5 : p.pasti6;
          return (
            <tr key={p.n} className={p.featured ? "ng-feat" : ""}>
              <td><b>{p.n}</b></td>
              <td>{sub}</td>
              <td>{p.n === "Solo pranzo" ? "1× o 2× sett" : "2× sett"}</td>
              <td className="ng-amt">€{monthly} <small>/mese</small></td>
              <td><a href="#configura" className="ng-btn ng-btn--outline">Scegli</a></td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

function PricingCalc({ cycle = "month", days = 6 }) {
  const [planIdx, setPlanIdx] = React.useState(1);
  const plan = PLANS[planIdx];
  const { monthly, total } = ngPrice(plan, days, cycle);
  const sub = days === 5 ? plan.pasti5 : plan.pasti6;
  return (
    <div className="ng-calc">
      <div className="ng-calc__row">
        <span className="ng-calc__label">Piano</span>
        <span className="ng-calc__val">{plan.n}</span>
      </div>
      <div className="ng-menu-tabs" style={{marginTop:0, marginBottom:18}}>
        {PLANS.map((p, i) => (
          <button key={p.n} className={"ng-menu-tab" + (planIdx===i ? " is-active" : "")} onClick={() => setPlanIdx(i)}>{p.n}</button>
        ))}
      </div>
      <div className="ng-calc__row">
        <span className="ng-calc__label">Pasti</span>
        <span className="ng-calc__val" style={{fontSize:16, fontWeight:500}}>{sub} · {days} giorni</span>
      </div>
      <div className="ng-calc__total">
        <div>
          <div style={{fontSize:13, color:"var(--ng-ink-500)", marginBottom:4}}>
            {cycle === "month" ? "Totale mensile" : "Mensile (trimestrale −10%)"}
          </div>
          <div className="ng-calc__total-num">
            <span className="ng-calc__total-price">€{monthly.toLocaleString("it-IT")}</span>
            <span className="ng-calc__total-per">/ mese</span>
          </div>
          {cycle === "quarter" && (
            <div className="ng-calc__total-extra">Totale trimestrale: €{total.toLocaleString("it-IT")}</div>
          )}
        </div>
        <a href="#top" className="ng-btn ng-btn--primary">Inizia <ArrowRight /></a>
      </div>
    </div>
  );
}

/* ============ MAP / ZONES ============ */
const MILANO_ZONES = [
  "Centro Storico", "Brera", "Porta Venezia", "Porta Romana", "Porta Garibaldi",
  "Isola", "Navigli", "Porta Genova", "Tortona", "Ticinese",
  "Città Studi", "Lambrate", "Bicocca", "Bovisa", "Dergano",
  "Sempione", "Fiera", "San Siro", "Gallaratese", "QT8",
  "Niguarda", "Affori", "Maciachini", "Stazione Centrale", "Loreto",
  "Buenos Aires", "Porta Vittoria", "Forlanini", "Mecenate", "Corvetto",
  "Chiesa Rossa", "Barona", "Famagosta", "Lorenteggio", "Inganni",
  "Bande Nere", "De Angeli", "Wagner", "Pagano", "Buonarroti",
  "Cadorna", "Solari", "Sant'Ambrogio", "Magenta", "Conciliazione",
  "Repubblica", "Turati", "Moscova", "Lanza", "Cordusio",
  "Missori", "Crocetta", "Lodi", "Romolo", "Abbiategrasso",
  "Gratosoglio", "Rogoredo", "Santa Giulia", "Mecenate", "Forlanini",
  "Udine", "Cimiano", "Crescenzago", "Gorla", "Turro",
  "Greco", "Istria", "Zara", "Maciachini", "Dergano",
];
// Comuni hinterland coperti — prima cintura Milano + Monza
const HINTERLAND = [
  { n: "Sesto San Giovanni", cap: "20099" },
  { n: "Cinisello Balsamo",  cap: "20092" },
  { n: "Cologno Monzese",    cap: "20093" },
  { n: "Cusano Milanino",    cap: "20095" },
  { n: "Bresso",             cap: "20091" },
  { n: "Cormano",            cap: "20032" },
  { n: "Cusago",             cap: "20090" },
  { n: "Trezzano sul Naviglio", cap: "20090" },
  { n: "Corsico",            cap: "20094" },
  { n: "Buccinasco",         cap: "20090" },
  { n: "Assago",             cap: "20057" },
  { n: "San Donato Milanese",cap: "20097" },
  { n: "San Giuliano Milanese", cap: "20098" },
  { n: "Segrate",            cap: "20054" },
  { n: "Vimodrone",          cap: "20055" },
  { n: "Cernusco sul Naviglio", cap: "20063" },
  { n: "Pioltello",          cap: "20096" },
  { n: "Monza",              cap: "20900" },
];

// Set CAP coperti: tutta Milano (20121-20162) + hinterland
const HINTERLAND_CAPS = new Set(HINTERLAND.map(h => h.cap));
function isCapCovered(cap) {
  const c = String(cap || "").trim();
  if (!/^\d{5}$/.test(c)) return null; // null = invalido
  const n = parseInt(c, 10);
  if (n >= 20121 && n <= 20162) return "milano";
  if (HINTERLAND_CAPS.has(c)) return "hinterland";
  // CAP 20xxx limitrofi non in lista
  if (c.startsWith("20") || c.startsWith("209")) return "near";
  return "no";
}

function MapSection() {
  const [tab, setTab] = React.useState("milano"); // milano | hinterland
  const [cap, setCap] = React.useState("");
  const status = cap.length === 5 ? isCapCovered(cap) : null;

  const milanoSorted = [...new Set(MILANO_ZONES)].sort((a,b)=>a.localeCompare(b,"it"));
  const hinterlandSorted = [...HINTERLAND].sort((a,b)=>a.n.localeCompare(b.n,"it"));

  const statusUI = (() => {
    if (!status) return null;
    if (status === "milano") return { c: "var(--ng-primary-deep)", bg: "rgba(33,180,161,0.10)", icon: "✓", t: "Sì, copriamo il tuo CAP a Milano." };
    if (status === "hinterland") return { c: "var(--ng-primary-deep)", bg: "rgba(33,180,161,0.10)", icon: "✓", t: "Sì, consegniamo nel tuo comune dell'hinterland." };
    if (status === "near") return { c: "#9a6b00", bg: "rgba(255,193,7,0.15)", icon: "~", t: "Siamo nelle vicinanze: scrivici, valutiamo caso per caso." };
    return { c: "#a02e2e", bg: "rgba(220,80,80,0.12)", icon: "×", t: "Non ancora attivi qui — lasciaci la mail per essere avvisato." };
  })();

  return (
    <section className="ng-section" id="zone" data-screen-label="06 Zone">
      <div className="ng-container ng-map-wrap">
        <div>
          <p className="ng-eyebrow">Zone di consegna</p>
          <h2 className="ng-h2">Milano + hinterland: consegniamo dove vivi.</h2>
          <p className="ng-lead">Tutta Milano e i comuni della prima cintura, fino a Monza. Sottovuoto e condimenti separati: i pasti si conservano in frigo 4–5 giorni dopo la consegna.</p>

          {/* CAP checker */}
          <div style={{
            marginTop: 22,
            padding: "16px 18px",
            background: "#fff",
            border: "1px solid var(--ng-ink-100)",
            borderRadius: 14,
          }}>
            <label style={{
              display:"block",
              fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase",
              color: "var(--ng-ink-500)", fontFamily: "var(--ng-mono)",
              marginBottom: 8,
            }}>Verifica il tuo CAP</label>
            <div style={{display:"flex", gap:10, alignItems:"center"}}>
              <input
                type="text"
                inputMode="numeric"
                maxLength={5}
                value={cap}
                onChange={e => setCap(e.target.value.replace(/\D/g,"").slice(0,5))}
                placeholder="es. 20099"
                style={{
                  flex: 1,
                  padding: "12px 14px",
                  fontSize: 16,
                  fontFamily: "var(--ng-mono)",
                  border: "1px solid var(--ng-ink-100)",
                  borderRadius: 10,
                  outline: "none",
                  background: "var(--ng-bg-soft)",
                }}
              />
              <span style={{fontSize:13, color:"var(--ng-ink-500)"}}>5 cifre</span>
            </div>
            {statusUI && (
              <div style={{
                marginTop: 10,
                padding: "10px 12px",
                borderRadius: 10,
                background: statusUI.bg,
                color: statusUI.c,
                fontSize: 14,
                display:"flex", alignItems:"center", gap: 10,
              }}>
                <span style={{
                  width: 22, height: 22, borderRadius: "50%",
                  background: statusUI.c, color: "#fff",
                  display:"inline-flex", alignItems:"center", justifyContent:"center",
                  fontSize: 13, fontWeight: 700, flexShrink: 0,
                }}>{statusUI.icon}</span>
                <span>{statusUI.t}</span>
              </div>
            )}
          </div>

          {/* Tabs Milano / Hinterland */}
          <div className="ng-menu-tabs" style={{marginTop: 22, marginBottom: 14}}>
            <button className={"ng-menu-tab" + (tab==="milano" ? " is-active" : "")} onClick={() => setTab("milano")}>Milano · {milanoSorted.length} zone</button>
            <button className={"ng-menu-tab" + (tab==="hinterland" ? " is-active" : "")} onClick={() => setTab("hinterland")}>Hinterland · {hinterlandSorted.length} comuni</button>
          </div>

          {tab === "milano" && (
            <>
              <div style={{
                display:"grid",
                gridTemplateColumns:"repeat(auto-fill, minmax(140px, 1fr))",
                gap:"6px 14px",
                fontSize:13.5,
                color:"var(--ng-ink-700)",
                maxHeight:280,
                overflowY:"auto",
                paddingRight:8
              }}>
                {milanoSorted.map(z => (
                  <span key={z} style={{display:"flex",alignItems:"center",gap:8,padding:"4px 0"}}>
                    <span style={{width:6,height:6,borderRadius:"50%",background:"var(--ng-primary)",flexShrink:0}}></span>
                    {z}
                  </span>
                ))}
              </div>
              <p style={{fontSize:13,color:"var(--ng-ink-400)",marginTop:14}}>
                Tutti i CAP da 20121 a 20162 · 1–2 consegne a settimana
              </p>
            </>
          )}

          {tab === "hinterland" && (
            <>
              <div style={{
                display:"grid",
                gridTemplateColumns:"repeat(auto-fill, minmax(180px, 1fr))",
                gap:"6px 14px",
                fontSize:13.5,
                color:"var(--ng-ink-700)",
                maxHeight:280,
                overflowY:"auto",
                paddingRight:8
              }}>
                {hinterlandSorted.map(h => (
                  <span key={h.n} style={{display:"flex",alignItems:"center",gap:8,padding:"4px 0"}}>
                    <span style={{width:6,height:6,borderRadius:"50%",background:"#178f80",flexShrink:0}}></span>
                    <span>{h.n} <span style={{fontFamily:"var(--ng-mono)", color:"var(--ng-ink-400)", fontSize:12}}>{h.cap}</span></span>
                  </span>
                ))}
              </div>
              <p style={{fontSize:13,color:"var(--ng-ink-400)",marginTop:14}}>
                Prima cintura Milano + Monza · 1–2 consegne a settimana · Stesso costo di consegna
              </p>
            </>
          )}
        </div>
        <div className="ng-map" style={{aspectRatio:"6 / 5"}}>
          <MilanMap focus={tab} />
        </div>
      </div>
    </section>
  );
}

function MilanMap({ focus = "milano" }) {
  // Realistic stylized map of Milan based on actual geography:
  // - Cerchia dei Navigli (innermost ring, historical center)
  // - Cerchia dei Bastioni / Mura Spagnole (middle ring)
  // - Circonvallazione esterna (outer ring)
  // - 9 Municipi positioned roughly correctly
  // - Major radial avenues from Duomo
  // - Parco Sempione, Parco Forlanini, Idroscalo, Naviglio Grande/Pavese
  return (
    <svg viewBox="0 0 600 500" preserveAspectRatio="xMidYMid meet" style={{display:"block"}}>
      <defs>
        <radialGradient id="ng-map-bg" cx="50%" cy="50%" r="65%">
          <stop offset="0%" stopColor="#F4FBFA"/>
          <stop offset="100%" stopColor="#FAFBFA"/>
        </radialGradient>
        <pattern id="ng-water" patternUnits="userSpaceOnUse" width="6" height="6">
          <rect width="6" height="6" fill="#E8F7F4"/>
          <path d="M0 3 Q1.5 1.5 3 3 T6 3" stroke="#21B4A1" strokeWidth="0.4" fill="none" opacity="0.5"/>
        </pattern>
      </defs>

      <rect width="600" height="500" fill="url(#ng-map-bg)"/>

      {/* Hinterland ring — wider boundary around Milano */}
      <ellipse cx="300" cy="265" rx="285" ry="225"
               fill={focus === "hinterland" ? "rgba(23,143,128,0.05)" : "none"}
               stroke="#178f80" strokeWidth="1" strokeDasharray="3 6" opacity={focus === "hinterland" ? 0.7 : 0.35}/>
      <text x="555" y="80" fontSize="8" fill="#178f80" fontFamily="DM Mono, monospace" textAnchor="end" opacity={focus === "hinterland" ? 1 : 0.5}>Hinterland</text>

      {/* Naviglio Grande - SW */}
      <path d="M 80 360 Q 180 340 250 320 L 290 280" stroke="url(#ng-water)" strokeWidth="6" fill="none" opacity="0.8"/>
      <path d="M 80 360 Q 180 340 250 320 L 290 280" stroke="#21B4A1" strokeWidth="1" fill="none" opacity="0.4"/>
      {/* Naviglio Pavese - S */}
      <path d="M 290 280 L 280 360 Q 270 420 240 470" stroke="url(#ng-water)" strokeWidth="6" fill="none" opacity="0.8"/>
      <path d="M 290 280 L 280 360 Q 270 420 240 470" stroke="#21B4A1" strokeWidth="1" fill="none" opacity="0.4"/>

      {/* Parco Sempione - NW of center */}
      <ellipse cx="248" cy="218" rx="32" ry="22" fill="#E8F7F4" stroke="#B7C3C0" strokeWidth="0.6" strokeDasharray="2 2"/>
      <text x="248" y="222" fontSize="7" fill="#5A6E6B" fontFamily="DM Mono, monospace" textAnchor="middle">Sempione</text>

      {/* Parco Forlanini - E */}
      <ellipse cx="450" cy="280" rx="28" ry="20" fill="#E8F7F4" stroke="#B7C3C0" strokeWidth="0.6" strokeDasharray="2 2"/>
      <text x="450" y="284" fontSize="7" fill="#5A6E6B" fontFamily="DM Mono, monospace" textAnchor="middle">Forlanini</text>

      {/* Idroscalo - E */}
      <path d="M 510 270 Q 540 260 545 290 Q 535 310 505 305 Z" fill="url(#ng-water)" stroke="#21B4A1" strokeWidth="0.8" opacity="0.7"/>
      <text x="525" y="293" fontSize="6.5" fill="#178f80" fontFamily="DM Mono, monospace" textAnchor="middle">Idroscalo</text>

      {/* Outer ring - Circonvallazione esterna (irregular shape, real Milano) */}
      <path d="M 300 70
               C 400 75 480 130 510 200
               C 530 250 535 320 510 380
               C 480 430 400 460 300 460
               C 200 460 130 430 100 380
               C 80 320 80 250 95 200
               C 120 130 200 75 300 70 Z"
            fill="rgba(33,180,161,0.04)"
            stroke="#21B4A1"
            strokeWidth="1.4"
            strokeDasharray="6 4"/>

      {/* Middle ring - Bastioni */}
      <path d="M 300 145
               C 360 148 410 175 425 220
               C 440 260 435 305 415 340
               C 395 370 350 385 300 385
               C 250 385 205 370 185 340
               C 165 305 160 260 175 220
               C 190 175 240 148 300 145 Z"
            fill="rgba(33,180,161,0.06)"
            stroke="#178f80"
            strokeWidth="1.2"
            strokeDasharray="4 3"/>

      {/* Inner ring - Cerchia Navigli (centro storico) */}
      <path d="M 300 200
               C 330 202 355 215 365 240
               C 372 260 370 285 358 305
               C 348 322 325 332 300 332
               C 275 332 252 322 242 305
               C 230 285 228 260 235 240
               C 245 215 270 202 300 200 Z"
            fill="rgba(33,180,161,0.10)"
            stroke="#21B4A1"
            strokeWidth="1.5"/>

      {/* Major radial avenues from Duomo */}
      {[
        [300, 266, 510, 200, "C.so Buenos Aires"],     // NE
        [300, 266, 510, 380, "V.le Forlanini"],        // E
        [300, 266, 380, 460, "C.so Lodi"],             // SE
        [300, 266, 220, 460, "Naviglio Pavese"],       // SW
        [300, 266, 100, 380, "C.so Vercelli"],         // W
        [300, 266, 95, 200, "C.so Sempione"],          // NW
        [300, 266, 200, 75, "C.so Garibaldi"],         // N
        [300, 266, 400, 75, "Viale Zara"],             // NNE
      ].map(([x1,y1,x2,y2,n], i) => (
        <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#DDE4E2" strokeWidth="1" strokeDasharray="2 4"/>
      ))}

      {/* Stazione Centrale - landmark */}
      <rect x="346" y="135" width="14" height="9" fill="#5A6E6B" rx="1"/>
      <text x="368" y="142" fontSize="7" fill="#5A6E6B" fontFamily="DM Mono, monospace">Stazione Centrale</text>

      {/* Duomo - center landmark */}
      <circle cx="300" cy="266" r="5" fill="#0E2A2A"/>
      <circle cx="300" cy="266" r="9" fill="none" stroke="#0E2A2A" strokeWidth="0.5" opacity="0.4"/>
      <text x="310" y="270" fontSize="9" fill="#0E2A2A" fontFamily="DM Sans" fontWeight="600">Duomo</text>

      {/* Zone dots — distributed across the 9 Municipi */}
      <g opacity={focus === "hinterland" ? 0.35 : 1}>
      {[
        // M1 - Centro storico (tight cluster around Duomo)
        [285, 250, "Brera"],
        [320, 245, "P. Venezia"],
        [275, 285, "Cordusio"],
        [318, 290, "Missori"],

        // M2 - NE: Stazione Centrale, Loreto, Lambrate
        [355, 165, "Centrale"],
        [395, 195, "Loreto"],
        [445, 215, "Lambrate"],
        [400, 145, "Bicocca"],

        // M3 - E: Città Studi, Forlanini
        [400, 250, "Città Studi"],
        [445, 320, "Forlanini"],
        [475, 250, "Cimiano"],

        // M4 - SE: Porta Romana, Corvetto, Rogoredo
        [330, 340, "P. Romana"],
        [380, 380, "Corvetto"],
        [430, 410, "Rogoredo"],
        [365, 425, "S. Giulia"],

        // M5 - S: Navigli, Ticinese, Chiesa Rossa
        [275, 360, "Navigli"],
        [240, 405, "C. Rossa"],
        [305, 405, "Lodi"],
        [200, 365, "Barona"],

        // M6 - SW: Lorenteggio, Bande Nere
        [180, 320, "Lorenteggio"],
        [170, 270, "Bande Nere"],
        [140, 350, "Inganni"],

        // M7 - W: De Angeli, San Siro, Fiera
        [180, 230, "De Angeli"],
        [125, 215, "San Siro"],
        [155, 175, "Fiera"],
        [100, 250, "Gallaratese"],

        // M8 - NW: Sempione, QT8, Bovisa
        [220, 180, "Sempione"],
        [180, 130, "QT8"],
        [255, 130, "Bovisa"],
        [220, 100, "Dergano"],

        // M9 - N: Isola, Niguarda, Affori
        [290, 175, "Isola"],
        [320, 110, "Niguarda"],
        [275, 90, "Affori"],
        [340, 215, "Repubblica"],
      ].map(([x, y, n], i) => (
        <g key={n+i}>
          <circle cx={x} cy={y} r="9" fill="#21B4A1" opacity="0.16"/>
          <circle cx={x} cy={y} r="3.2" fill="#21B4A1"/>
          <text x={x+6} y={y+2.5} fontSize="7.5" fill="#0E2A2A" fontFamily="DM Sans" fontWeight="500">{n}</text>
        </g>
      ))}
      </g>

      {/* Hinterland markers — comuni prima cintura around Milano */}
      <g opacity={focus === "milano" ? 0.45 : 1}>
      {[
        // North
        [310, 50, "Monza"],
        [355, 75, "Sesto S.G."],
        [285, 65, "Cinisello B."],
        [240, 60, "Cusano M."],
        [380, 110, "Cologno M."],
        [225, 95, "Bresso"],
        [195, 70, "Cormano"],
        // East
        [510, 230, "Vimodrone"],
        [535, 260, "Cernusco s/N"],
        [555, 305, "Pioltello"],
        [510, 350, "Segrate"],
        // South-East
        [435, 460, "S. Donato"],
        [380, 480, "S. Giuliano"],
        // South-West
        [180, 460, "Assago"],
        [130, 415, "Buccinasco"],
        [85, 365, "Corsico"],
        [55, 310, "Trezzano s/N"],
        [40, 245, "Cusago"],
      ].map(([x, y, n], i) => (
        <g key={"h"+n+i}>
          <circle cx={x} cy={y} r="8" fill="#178f80" opacity="0.18"/>
          <circle cx={x} cy={y} r="3" fill="#178f80" stroke="#fff" strokeWidth="0.8"/>
          <text x={x+6} y={y+2.5} fontSize="7.5" fill="#0E2A2A" fontFamily="DM Sans" fontWeight="600">{n}</text>
        </g>
      ))}
      </g>

      {/* Compass */}
      <g transform="translate(560, 30)">
        <circle r="14" fill="#fff" stroke="#DDE4E2" strokeWidth="0.8"/>
        <path d="M 0 -10 L 3 0 L 0 -3 L -3 0 Z" fill="#0E2A2A"/>
        <path d="M 0 10 L 3 0 L 0 3 L -3 0 Z" fill="#B7C3C0"/>
        <text y="-15" fontSize="7" fill="#5A6E6B" fontFamily="DM Mono, monospace" textAnchor="middle">N</text>
      </g>

      {/* Legend */}
      <g transform="translate(20, 446)">
        <rect width="200" height="44" rx="4" fill="#fff" stroke="#DDE4E2" strokeWidth="0.6"/>
        <circle cx="14" cy="14" r="3.2" fill="#21B4A1"/>
        <circle cx="14" cy="14" r="8" fill="#21B4A1" opacity="0.16"/>
        <text x="28" y="17" fontSize="9" fill="#0E2A2A" fontFamily="DM Sans">Milano · 50+ zone</text>
        <circle cx="14" cy="32" r="3" fill="#178f80" stroke="#fff" strokeWidth="0.8"/>
        <circle cx="14" cy="32" r="8" fill="#178f80" opacity="0.18"/>
        <text x="28" y="35" fontSize="9" fill="#0E2A2A" fontFamily="DM Sans">Hinterland · 18 comuni</text>
      </g>

      {/* Scale */}
      <g transform="translate(440, 470)">
        <line x1="0" y1="0" x2="60" y2="0" stroke="#5A6E6B" strokeWidth="1"/>
        <line x1="0" y1="-3" x2="0" y2="3" stroke="#5A6E6B" strokeWidth="1"/>
        <line x1="60" y1="-3" x2="60" y2="3" stroke="#5A6E6B" strokeWidth="1"/>
        <text x="30" y="-6" fontSize="8" fill="#5A6E6B" fontFamily="DM Mono, monospace" textAnchor="middle">2 km</text>
      </g>
    </svg>
  );
}

Object.assign(window, { MenuSection, PricingSection, MapSection });