// Page d'accueil — La Coutume, Toucy

const HomeHero = ({ setRoute }) => {
  const go = (id) => (e) => { e.preventDefault(); setRoute(id); window.scrollTo({ top: 0, behavior: "smooth" }); };
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <Reveal className="eyebrow" delay={1}>Bistrot traditionnel · Toucy · Puisaye-Yonne</Reveal>
            <Reveal as="h1" className="display hero-title" delay={2}>
              Cuisine
              <span className="italic">française</span>
              à Toucy
            </Reveal>
            <Reveal delay={3}>
              <p className="lead hero-sub">
                Tête de veau sauce gribiche, andouillette de Chablis, baba au rhum maison. La cuisine de bistrot comme on l'aime, signée {CHEF.name}, membre des Toques&nbsp;Françaises.
              </p>
            </Reveal>
            <Reveal delay={4}>
              <div className="hero-cta">
                <a href={INFO.phoneHref} className="btn btn-primary">
                  <Icon name="phone" size={12} /> {INFO.phone}
                </a>
                <a href="#" onClick={go("menu")} className="btn btn-ghost">
                  Voir la carte
                </a>
              </div>
            </Reveal>
            <Reveal delay={4}>
              <div className="hero-meta">
                <a href={RATING.url} target="_blank" rel="noopener noreferrer" className="hero-rating">
                  <div className="hero-stars">
                    {[1,2,3,4,5].map(i => <Icon key={i} name="star" size={14} />)}
                  </div>
                  <span>{RATING.score}/5 · {RATING.count} avis TripAdvisor</span>
                </a>
                <div className="hero-place">
                  <Icon name="pin" size={14} /> {INFO.address}, {INFO.city}
                </div>
              </div>
            </Reveal>
          </div>
          <Reveal delay={2}>
            <Parallax speed={0.1} className="hero-visual">
              <div className="hero-badge">
                <Icon name="award" size={22} />
                <span>Toques<br />Françaises</span>
              </div>
              <Ph src={IMG.hero} alt="Salle du bistrot La Coutume à Toucy" variant="ph-dark" style={{ width: "100%", height: "100%" }} />
            </Parallax>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

// ── Bandeau infos rapides ────────────────────────────────────────────────────
const QuickBar = () => (
  <div className="quickbar">
    <div className="container">
      <div className="quickbar-grid">
        <div className="quickbar-item">
          <Icon name="clock" size={16} />
          <div>
            <strong>Déjeuner mar. — sam.</strong>
            <span>Dîner jeu. — sam.</span>
          </div>
        </div>
        <div className="quickbar-item">
          <Icon name="utensils" size={16} />
          <div>
            <strong>Formule {PRICING.formule.price} €</strong>
            <span>Entrée · plat · dessert</span>
          </div>
        </div>
        <div className="quickbar-item">
          <Icon name="leaf" size={16} />
          <div>
            <strong>Terrasse</strong>
            <span>Animaux acceptés</span>
          </div>
        </div>
        <div className="quickbar-item">
          <Icon name="pin" size={16} />
          <div>
            <strong>Place du Marché</strong>
            <span>Centre de Toucy</span>
          </div>
        </div>
      </div>
    </div>
  </div>
);

// ── Plats signature ──────────────────────────────────────────────────────────
const SignatureSection = ({ setRoute }) => {
  const go = (id) => (e) => { e.preventDefault(); setRoute(id); window.scrollTo({ top: 0, behavior: "smooth" }); };
  const dishes = [
    { name: "Tête de veau", desc: "Sauce gribiche. Le plat signature — « exceptionnelle », disent les habitués.", tag: "Signature", img: IMG.plat_teteveau, variant: "ph-dark" },
    { name: "Andouillette de Chablis", desc: "Celle de Michel Soulié, la référence du département.", tag: "Terroir", img: IMG.plat_andouillette, variant: "ph-terracotta" },
    { name: "Baba au rhum", desc: "Fait maison, ramené de Paris par le chef.", tag: "Dessert", img: IMG.plat_baba, variant: "ph-cream" },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="section-head-left">
            <Reveal className="eyebrow">Les incontournables</Reveal>
            <Reveal as="h2" className="display section-title" delay={1}>
              La table <span className="italic">du chef</span>
            </Reveal>
          </div>
          <Reveal delay={2}>
            <a href="#" onClick={go("menu")} className="btn-link">
              Voir toute la carte <Icon name="arrow" size={12} />
            </a>
          </Reveal>
        </div>
        <div className="signature-grid">
          {dishes.map((s, i) => (
            <Reveal key={s.name} delay={i + 1} className="plate">
              <div className="plate-img">
                <span className="plate-tag">{s.tag}</span>
                <Ph src={s.img} alt={s.name} variant={s.variant} />
              </div>
              <div className="plate-meta">
                <div className="plate-name">{s.name}</div>
              </div>
              <p className="plate-desc">{s.desc}</p>
            </Reveal>
          ))}
        </div>
        <Reveal>
          <p className="section-note">
            La carte évolue selon les saisons et les arrivages. Les suggestions du jour sont annoncées à l'ardoise.
          </p>
        </Reveal>
      </div>
    </section>
  );
};

// ── Le chef ──────────────────────────────────────────────────────────────────
const ChefSection = ({ setRoute }) => {
  const go = (id) => (e) => { e.preventDefault(); setRoute(id); window.scrollTo({ top: 0, behavior: "smooth" }); };
  return (
    <section className="section" style={{ background: "var(--bg-deep)" }}>
      <div className="container">
        <div className="split">
          <Reveal>
            <Parallax speed={0.08} className="split-visual">
              <div className="split-badge">
                {CHEF.openedIn.split(" ")[1]}
                <span>Depuis</span>
              </div>
              <Ph src={IMG.portraitChef} alt={`${CHEF.name}, chef de La Coutume à Toucy`} variant="ph-dark" style={{ width: "100%", height: "100%" }} />
            </Parallax>
          </Reveal>
          <Reveal delay={2}>
            <span className="eyebrow">Le chef</span>
            <h2 className="display section-title" style={{ marginTop: 20 }}>
              {CHEF.name.split(" ")[0]}<br /><span className="italic">{CHEF.name.split(" ")[1]}</span>
            </h2>
            <p className="lead" style={{ marginTop: 28, maxWidth: 520 }}>
              {CHEF.bio[0]}
            </p>
            <div className="award-row">
              {AWARDS.map(a => (
                <div key={a.label} className="award-chip">
                  <Icon name="award" size={15} />
                  <div>
                    <strong>{a.label}</strong>
                    <span>{a.detail}</span>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 32 }}>
              <a href="#" onClick={go("apropos")} className="btn-link">
                Son histoire <Icon name="arrow" size={12} />
              </a>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

// ── Ambiance ─────────────────────────────────────────────────────────────────
const AmbianceSection = () => (
  <section className="section">
    <div className="container">
      <div className="split">
        <Reveal>
          <span className="eyebrow">L'ambiance</span>
          <h2 className="display section-title" style={{ marginTop: 20 }}>
            Une jolie place,<br />un bistrot <span className="italic">sincère</span>.
          </h2>
          <p className="lead" style={{ marginTop: 28, maxWidth: 500 }}>
            Installé au cœur de Toucy, sur la place du Marché, La Coutume propose une cuisine bistrotière simple et généreuse. Décor sobre, ambiance conviviale — l'essentiel est dans l'assiette.
          </p>
          <div className="stat-row">
            <div className="stat">
              <div className="stat-val">{PRICING.formule.price}€</div>
              <div className="stat-label">Formule 3 plats</div>
            </div>
            <div className="stat">
              <div className="stat-val">{RATING.score}</div>
              <div className="stat-label">Note TripAdvisor</div>
            </div>
            <div className="stat">
              <div className="stat-val"><Icon name="leaf" size={38} /></div>
              <div className="stat-label">Terrasse l'été</div>
            </div>
          </div>
        </Reveal>
        <Reveal delay={2}>
          <Parallax speed={0.08} className="split-visual">
            <div className="split-badge">Fait<br />maison<span>Toucy</span></div>
            {/* photo paysage dans un cadre portrait : on cale le cadrage sur le
                haut de l'image, où se trouvent la salle et l'étagère à vins */}
            <Ph src={IMG.ambianceSalle} alt="Salle du bistrot La Coutume à Toucy" variant="ph-dark" position="center 28%" style={{ width: "100%", height: "100%" }} />
          </Parallax>
        </Reveal>
      </div>
    </div>
  </section>
);

// ── Formules ─────────────────────────────────────────────────────────────────
const FormuleSection = ({ setRoute }) => {
  const go = (id) => (e) => { e.preventDefault(); setRoute(id); window.scrollTo({ top: 0, behavior: "smooth" }); };
  const offers = [PRICING.formule, PRICING.jour, PRICING.carte];
  return (
    <section className="moment-banner">
      <div className="container">
        <Reveal>
          <div className="moment-label">Nos formules</div>
          <h2 className="moment-title display">
            Bien manger, <em>sans se ruiner</em>
          </h2>
        </Reveal>
        <div className="pricing-grid">
          {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>
        <Reveal>
          <div className="pricing-cta">
            <a href={INFO.phoneHref} className="btn btn-primary">
              <Icon name="phone" size={12} /> Réserver — {INFO.phone}
            </a>
            <a href="#" onClick={go("menu")} className="btn btn-ghost btn-on-dark">
              Voir la carte
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ── Avis TripAdvisor ─────────────────────────────────────────────────────────
// Avis publics TripAdvisor, résumés en français. Aucun avis inventé.
const AvisSection = () => (
  <section className="section">
    <div className="container">
      <div className="section-head">
        <div className="section-head-left">
          <Reveal className="eyebrow">Avis clients</Reveal>
          <Reveal as="h2" className="display section-title" delay={1}>
            Ce qu'ils en <span className="italic">disent</span>
          </Reveal>
        </div>
        <Reveal delay={2}>
          <div className="rating-block">
            <div className="display rating-score">{RATING.score}</div>
            <div>
              <div className="hero-stars">
                {[1,2,3,4,5].map(i => <Icon key={i} name="star" size={14} />)}
              </div>
              <div className="rating-meta">
                TripAdvisor · {RATING.count} avis<br />{RATING.rank}
              </div>
            </div>
          </div>
        </Reveal>
      </div>

      <div className="reviews-track">
        {REVIEWS.slice(0, 3).map((r, i) => (
          <Reveal key={r.author} delay={i + 1} className="review-card">
            <div className="review-stars">
              {[1,2,3,4,5].map(j => (
                <Icon key={j} name="star" size={13} />
              ))}
            </div>
            <p className="review-text">« {r.text} »</p>
            {r.dishes && <div className="review-dishes">{r.dishes}</div>}
            <div className="review-author">
              <div className="review-avatar">{r.author.charAt(0)}</div>
              <div className="review-meta">
                <span className="review-name">{r.author}</span>
                <span className="review-date">{r.date} · TripAdvisor</span>
              </div>
            </div>
          </Reveal>
        ))}
      </div>

      <Reveal style={{ textAlign: "center", marginTop: 44 }}>
        <a href={RATING.url} target="_blank" rel="noopener noreferrer" className="btn-link">
          Lire les {RATING.count} avis sur TripAdvisor <Icon name="arrow" size={12} />
        </a>
      </Reveal>
    </div>
  </section>
);

// ── Section SEO texte ─────────────────────────────────────────────────────────
const SeoSection = () => (
  <section className="section-tight" style={{ background: "var(--bg-deep)" }}>
    <div className="container-narrow">
      <Reveal>
        <div className="prose">
          <h3>Restaurant traditionnel à Toucy, en Puisaye-Yonne</h3>
          <p>
            La Coutume est un <strong>restaurant à Toucy</strong> proposant une cuisine bistrotière française faite maison, dans un cadre sobre et chaleureux. Situé au <strong>1 Rue du Marché, 89130 Toucy</strong>, sur la place du Marché, le restaurant accueille ses convives du mardi au samedi à déjeuner et du jeudi au samedi le soir.
          </p>
          <p>
            En cuisine, <strong>{CHEF.name}</strong> — quinze années passées derrière les fourneaux parisiens, membre des Toques Françaises — signe une carte de classiques : <strong>tête de veau sauce gribiche</strong>, <strong>andouillette de Chablis</strong>, pâté en croûte, blanquette de veau, baba au rhum maison. La carte évolue au fil des saisons et du marché.
          </p>
          <p>
            Que vous cherchiez <strong>où manger à Toucy</strong>, un déjeuner convivial ou un dîner en bonne compagnie, La Coutume propose une formule complète — entrée, plat et dessert — à partir de {PRICING.formule.price}&nbsp;€, et un menu du jour à {PRICING.jour.price}&nbsp;€. Une adresse appréciée pour son rapport qualité-prix et la générosité de ses assiettes.
          </p>
          <p>
            Le restaurant est accessible depuis les communes voisines de la Puisaye : <a href="seo-saint-sauveur.html">Saint-Sauveur-en-Puisaye</a>, <a href="seo-saint-fargeau.html">Saint-Fargeau</a>, et <a href="seo-auxerre.html">Auxerre</a> (environ 25&nbsp;km). Terrasse disponible aux beaux jours. Animaux de compagnie acceptés sur réservation.
          </p>
        </div>
      </Reveal>
    </div>
  </section>
);

// ── CTA ───────────────────────────────────────────────────────────────────────
const CtaStrip = ({ setRoute }) => {
  const go = (id) => (e) => { e.preventDefault(); setRoute(id); window.scrollTo({ top: 0, behavior: "smooth" }); };
  return (
    <section className="cta-strip">
      <div className="container">
        <Reveal>
          <h2 className="display">
            Une table à <em>partager</em>,<br />une cuisine <em>sincère</em>.
          </h2>
          <p className="lead cta-lead">
            Appelez-nous pour réserver votre table. Ouvert du mardi au samedi à déjeuner, et du jeudi au samedi le soir.
          </p>
          <div className="cta-actions">
            <a href={INFO.phoneHref} className="btn btn-primary">
              <Icon name="phone" size={12} /> {INFO.phone}
            </a>
            <a href="#" onClick={go("contact")} className="btn btn-ghost btn-on-terracotta">
              Infos pratiques <Icon name="arrow" size={12} />
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

const HomePage = ({ setRoute }) => (
  <>
    <HomeHero setRoute={setRoute} />
    <QuickBar />
    <SignatureSection setRoute={setRoute} />
    <ChefSection setRoute={setRoute} />
    <AmbianceSection />
    <FormuleSection setRoute={setRoute} />
    <AvisSection />
    <SeoSection />
    <CtaStrip setRoute={setRoute} />
  </>
);

Object.assign(window, { HomePage, CtaStrip });