// La carte — La Coutume, Toucy
// Plats issus des avis publics TripAdvisor et de la presse.
// Prix unitaires non communiqués publiquement — seules les formules sont affichées.

const MenuPage = ({ setRoute }) => {
  const [cat, setCat] = React.useState("entrees");
  const cats = [
    { id: "entrees",  label: "Entrées",  count: MENU.entrees.length },
    { id: "plats",    label: "Plats",    count: MENU.plats.length },
    { id: "desserts", label: "Desserts", count: MENU.desserts.length },
    { id: "vins",     label: "La cave",  count: WINES.items.length },
  ];
  const items = MENU[cat] || [];
  const variants = ["ph-dark", "ph-terracotta", "ph-cream", "ph-dark"];
  const offers = [PRICING.formule, PRICING.jour, PRICING.carte];

  return (
    <>
      <section className="page-header">
        <div className="container">
          <Reveal className="eyebrow">La carte · Service sur place</Reveal>
          <Reveal as="h1" className="display" delay={1}>
            Notre <em>carte</em>
          </Reveal>
          <Reveal delay={2}>
            <p className="lead">
              Cuisine bistrotière faite maison, à partir de produits frais. La carte évolue au gré des saisons et du marché de Toucy.
            </p>
          </Reveal>
        </div>
      </section>

      {/* Formules */}
      <div className="formulas-banner">
        <div className="container">
          <Reveal>
            <span className="eyebrow" style={{ display: "block", marginBottom: 28 }}>Nos formules</span>
          </Reveal>
          <div className="pricing-grid pricing-grid-light">
            {offers.map((o, i) => (
              <Reveal key={o.name} delay={i + 1} className={`offer-card ${o.featured ? "featured" : ""}`}>
                {o.featured && <span className="offer-ribbon">Le plus choisi</span>}
                <div className="offer-title">{o.name}</div>
                <div className="offer-price">
                  {o.approx && <span className="offer-approx">≈</span>}{o.price}
                  <small>€</small>
                </div>
                <div className="offer-sub">{o.desc}</div>
                <ul className="offer-includes">
                  {o.includes.map(inc => <li key={inc}>{inc}</li>)}
                </ul>
                <div className="offer-note">{o.note}</div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>

      {/* Carte par catégorie */}
      <section className="section">
        <div className="container">
          <Reveal className="menu-cat-wrap">
            <div className="menu-cat-nav" role="tablist" aria-label="Catégories de la carte">
              {cats.map(c => (
                <button
                  key={c.id}
                  role="tab"
                  aria-selected={cat === c.id}
                  className={`menu-cat-btn ${cat === c.id ? "active" : ""}`}
                  onClick={() => setCat(c.id)}
                >
                  {c.label} <span className="menu-cat-count">{c.count}</span>
                </button>
              ))}
            </div>
          </Reveal>

          {cat === "vins" ? (
            <>
              <Reveal>
                <p className="section-note" style={{ marginTop: 0, marginBottom: 40, textAlign: "left" }}>
                  {WINES.intro}
                </p>
              </Reveal>
              <div className="wine-list">
                {WINES.items.map((w, i) => (
                  <Reveal key={w.name} delay={Math.min(i + 1, 4)} className="wine-item">
                    <div className="wine-icon"><Icon name="wine" size={18} /></div>
                    <div>
                      <div className="wine-name">{w.name}</div>
                      <p className="menu-item-desc">{w.desc}</p>
                      <div className="menu-item-tags"><span className="menu-item-tag">{w.type}</span></div>
                    </div>
                  </Reveal>
                ))}
              </div>
            </>
          ) : (
            <div className="menu-list" key={cat}>
              {items.map((it, i) => (
                <Reveal key={it.name} delay={Math.min(i + 1, 4)} className="menu-item">
                  <div className="menu-item-img">
                    <Ph src={IMG[it.img]} alt={it.name} variant={variants[i % 4]} />
                  </div>
                  <div>
                    <div className="menu-item-head">
                      <span className="menu-item-name">{it.name}</span>
                    </div>
                    <p className="menu-item-desc">{it.desc}</p>
                    {(it.tags.length > 0 || it.signature) && (
                      <div className="menu-item-tags">
                        {it.signature && <span className="menu-item-tag menu-item-tag-star">✦ Signature</span>}
                        {it.tags.filter(t => t !== "Signature").map(t => <span key={t} className="menu-item-tag">{t}</span>)}
                      </div>
                    )}
                  </div>
                </Reveal>
              ))}
            </div>
          )}

          <Reveal className="menu-footer">
            <p className="menu-footer-quote">
              La carte évolue selon les saisons et les arrivages. Les suggestions du jour sont à l'ardoise.
            </p>
            <p className="menu-footer-note">
              Formule complète à partir de {PRICING.formule.price} € — entrée, plat, dessert. Menu du jour à {PRICING.jour.price} €.
            </p>
            <div className="cta-actions" style={{ marginTop: 28 }}>
              <a href={INFO.phoneHref} className="btn btn-primary">
                <Icon name="phone" size={12} /> Réserver — {INFO.phone}
              </a>
              <a href={INFO.emailHref} className="btn btn-ghost">
                <Icon name="mail" size={12} /> Nous écrire
              </a>
            </div>
          </Reveal>
        </div>
      </section>
    </>
  );
};

Object.assign(window, { MenuPage });