// Le Club 55 — single-file site prototype
const { useState, useEffect, useRef } = React;

// ────────────────────────────────────────────────────────────────────────────
// Routing — hash-based so refresh / deep-link works in a single HTML file
// ────────────────────────────────────────────────────────────────────────────
function useRoute() {
  const get = () => (window.location.hash.replace(/^#\/?/, '') || 'accueil');
  const [route, setRoute] = useState(get);
  useEffect(() => {
    const h = () => { setRoute(get()); window.scrollTo({ top: 0, behavior: 'instant' }); };
    window.addEventListener('hashchange', h);
    return () => window.removeEventListener('hashchange', h);
  }, []);
  return route;
}
const go = (r) => { window.location.hash = '/' + r; };

// ────────────────────────────────────────────────────────────────────────────
// Wordmark — handwritten "le club 55" rendered as SVG path
// (drawn to feel like the real cursive on the towels)
// ────────────────────────────────────────────────────────────────────────────
function Wordmark({ size = 80, color = 'currentColor' }) {
  // Two-line treatment: "le club" on top, "55" below
  return (
    <svg viewBox="0 0 220 110" width={size * 2.2} height={size * 1.1}
         style={{ display: 'block', overflow: 'visible' }} aria-label="Le Club 55">
      <g fill="none" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
        {/* le */}
        <path d="M8,55 C12,40 14,28 18,22 C21,17 24,17 24,24 C24,32 22,46 22,56 C22,64 25,68 31,66 C36,64 40,58 42,52" />
        <path d="M44,52 C48,46 56,42 60,46 C64,50 58,58 50,58 C44,58 41,54 42,50 C44,44 52,40 58,40 C66,40 70,46 68,54" />
        {/* c */}
        <path d="M82,42 C76,40 68,44 66,52 C64,62 72,68 80,64 C84,62 88,58 90,54" />
        {/* l */}
        <path d="M96,16 C96,28 95,42 95,54 C95,62 97,66 102,64" />
        {/* u */}
        <path d="M108,42 C106,50 104,58 108,62 C112,66 118,62 122,56 C123,53 124,48 124,42 C124,48 124,56 126,62" />
        {/* b */}
        <path d="M134,16 C133,28 132,44 132,54 C132,60 134,64 139,62 C146,60 152,52 150,44 C148,38 142,38 138,44" />
        {/* 5 */}
        <path d="M30,82 C40,80 56,80 60,82 C50,88 44,94 42,102 C42,108 48,112 56,108 C66,104 72,94 68,86 C64,80 56,82 50,86" />
        {/* 5 */}
        <path d="M86,82 C96,80 112,80 116,82 C106,88 100,94 98,102 C98,108 104,112 112,108 C122,104 128,94 124,86 C120,80 112,82 106,86" />
      </g>
    </svg>
  );
}

// Better: actually draw "le club 55" cursive properly
function Cursive55({ height = 64, color = 'currentColor' }) {
  return (
    <svg viewBox="0 0 320 100" height={height} style={{ display: 'block', overflow: 'visible' }}
         aria-label="le club 55">
      <g fill="none" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
        {/* l */}
        <path d="M10,75 C14,55 18,30 22,15 C24,8 28,10 28,18 C28,32 24,55 22,72 C21,80 24,84 30,80" />
        {/* e */}
        <path d="M34,62 C42,52 56,52 56,62 C56,70 46,72 38,68 C34,66 34,72 38,76 C46,82 56,78 62,72" />
        {/* space */}
        {/* c */}
        <path d="M86,55 C76,52 66,60 66,70 C66,80 76,84 86,80 C92,77 96,72 98,68" />
        {/* l */}
        <path d="M106,18 C106,32 104,52 104,68 C104,76 106,80 112,78" />
        {/* u */}
        <path d="M118,55 C115,65 113,74 117,80 C123,84 132,78 138,68 C140,62 141,57 141,52 C141,60 142,72 145,80" />
        {/* b */}
        <path d="M156,18 C155,34 152,55 152,72 C152,82 158,84 166,80 C176,74 180,62 174,55 C168,48 158,52 152,62" />

        {/* 5 (first) */}
        <path d="M195,30 C205,28 222,28 226,32 C218,40 210,52 208,64 C207,72 213,78 222,76 C234,72 240,60 234,52 C228,46 218,50 213,56" />
        {/* 5 (second) */}
        <path d="M252,30 C262,28 279,28 283,32 C275,40 267,52 265,64 C264,72 270,78 279,76 C291,72 297,60 291,52 C285,46 275,50 270,56" />
      </g>
    </svg>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Layout chrome
// ────────────────────────────────────────────────────────────────────────────
function Header({ route }) {
  const [open, setOpen] = useState(false);
  const items = [
    ['accueil', 'Accueil'],
    ['restaurant', 'Le Restaurant'],
    ['plage', 'La Plage'],
    ['domaines', 'Nos Domaines'],
    ['contact', 'Contact'],
  ];
  return (
    <header className="site-header">
      <a className="brand" href="#/accueil" onClick={() => setOpen(false)}>
        <span className="brand-text">Le Club 55</span>
        <span className="brand-tag">Plage de Pampelonne · depuis 1955</span>
      </a>
      <nav className={`site-nav ${open ? 'open' : ''}`}>
        {items.map(([k, label]) => (
          <a key={k} href={`#/${k}`} onClick={() => setOpen(false)}
             className={route === k ? 'active' : ''}>{label}</a>
        ))}
        <a href="#/contact" className="nav-cta" onClick={() => setOpen(false)}>Réserver</a>
      </nav>
      <button className="menu-toggle" onClick={() => setOpen(o => !o)} aria-label="Menu">
        <span /><span /><span />
      </button>
    </header>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="footer-grid">
        <div className="footer-brand">
          <span className="brand-text brand-text-footer">Le Club 55</span>
          <p className="footer-tag">Plage de Pampelonne<br/>83350 Ramatuelle · France</p>
        </div>
        <div>
          <h4>Le Club</h4>
          <a href="#/restaurant">Le Restaurant</a>
          <a href="#/plage">La Plage &amp; Le Snack</a>
          <a href="#/domaines">Nos Domaines</a>
        </div>
        <div>
          <h4>Visiter</h4>
          <a href="#/contact">Réserver une table</a>
          <a href="#/contact">Réserver un matelas</a>
          <a href="#/contact">Nous trouver</a>
        </div>
        <div>
          <h4>Nous joindre</h4>
          <p className="muted">+33 (0)4 94 55 55 55</p>
          <p className="muted">contact@leclub55.fr</p>
          <p className="muted small">Ouvert d'avril à octobre,<br/>tous les jours, midi.</p>
        </div>
      </div>
      <div className="footer-rule" />
      <div className="footer-bottom">
        <span>© Le Club 55 · 1955–{new Date().getFullYear()}</span>
        <span className="muted small">Aquarelles · Stéphane Girel</span>
      </div>
    </footer>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Reusable bits
// ────────────────────────────────────────────────────────────────────────────
const Eyebrow = ({ children }) => <div className="eyebrow">{children}</div>;
const Display = ({ children, as: As = 'h1', className = '' }) =>
  <As className={`display ${className}`}>{children}</As>;
const Lede = ({ children }) => <p className="lede">{children}</p>;

function PullQuote({ children, attribution }) {
  return (
    <figure className="pullquote">
      <span className="pq-mark">«</span>
      <blockquote>{children}</blockquote>
      {attribution && <figcaption>— {attribution}</figcaption>}
    </figure>
  );
}

function Watermark({ src, alt, side = 'right', size = 320, top = 0 }) {
  return (
    <img src={src} alt={alt}
         className={`watermark watermark-${side}`}
         style={{ width: size, top }} />
  );
}

// ────────────────────────────────────────────────────────────────────────────
// PAGE — Accueil (Home)
// ────────────────────────────────────────────────────────────────────────────
function Accueil() {
  return (
    <>
      {/* HERO — full-bleed photo of the iconic towel + champagne bucket */}
      <section className="hero" data-screen-label="01 Accueil — Hero">
        <img className="hero-image" src="img/hero-bucket.avif" alt="Linge brodé Le Club 55 et seau à champagne" />
        <div className="hero-overlay" />
        <div className="hero-content">
          <Eyebrow>Plage de Pampelonne · Ramatuelle</Eyebrow>
          <h1 className="hero-title">
            <em>Une plage,</em><br/>
            <span>une famille,</span><br/>
            <em>depuis 1955.</em>
          </h1>
          <div className="hero-cta">
            <a href="#/restaurant" className="btn">Découvrir le restaurant</a>
            <a href="#/contact" className="btn btn-ghost">Réserver une table</a>
          </div>
        </div>
        <div className="hero-scroll"><span>Faites défiler</span><i /></div>
      </section>

      {/* INTRO — "Le mot de la maison" */}
      <section className="section section-intro">
        <div className="two-col">
          <div className="col-lead">
            <Eyebrow>Le mot de la maison</Eyebrow>
            <Display as="h2">
              Trois générations <em>de la même famille,</em> sur le même sable.
            </Display>
          </div>
          <div className="col-body">
            <p>En 1955, Geneviève et Bernard de Colmont déjeunent sur la plage de
              Pampelonne, prêtent quelques tables à l'équipe d'<em>Et Dieu créa la femme</em>,
              et n'ont jamais retiré la nappe. Soixante-dix étés plus tard, leurs enfants
              et petits-enfants reçoivent au même endroit, avec le même geste — un peu
              de pin parasol au-dessus de la tête, les pieds dans le sable, et la mer
              au bout de la table.</p>
            <p>Le Club 55 n'est pas un restaurant de plage. C'est <em>une plage qui se
              trouve avoir un restaurant</em>, et autour, une famille qui en prend soin.</p>
            <a href="#/domaines" className="link-arrow">Notre histoire et nos domaines →</a>
          </div>
        </div>
      </section>

      {/* THREE PILLARS — restaurant / plage / domaines */}
      <section className="section section-pillars">
        <div className="pillars">
          <a href="#/restaurant" className="pillar">
            <div className="pillar-img">
              <img src="img/restaurant-terrasse.avif" alt="La terrasse du restaurant" />
            </div>
            <div className="pillar-text">
              <Eyebrow>I.</Eyebrow>
              <h3>Le Restaurant</h3>
              <p>Une table à l'ombre des pins. Le panier de crudités, le poisson grillé,
                les tartes du jour.</p>
              <span className="link-arrow">Découvrir →</span>
            </div>
          </a>
          <a href="#/plage" className="pillar">
            <div className="pillar-img">
              <img src="img/paillote.avif" alt="Une paillote sur la plage" />
            </div>
            <div className="pillar-text">
              <Eyebrow>II.</Eyebrow>
              <h3>La Plage</h3>
              <p>Matelas sous paillote, le coin snack, l'eau turquoise. La journée se
                déroule au rythme du soleil.</p>
              <span className="link-arrow">Réserver →</span>
            </div>
          </a>
          <a href="#/domaines" className="pillar">
            <div className="pillar-img">
              <img src="img/cabanon-02.avif" alt="Le cabanon" />
            </div>
            <div className="pillar-text">
              <Eyebrow>III.</Eyebrow>
              <h3>Nos Domaines</h3>
              <p>Le potager, le cabanon, la maison. Tout ce qui n'est pas la plage —
                et qui pourtant la fait.</p>
              <span className="link-arrow">Visiter →</span>
            </div>
          </a>
        </div>
      </section>

      {/* QUOTE BAND */}
      <section className="section section-quote">
        <PullQuote attribution="Patrice de Colmont">
          Notre métier, c'est de faire en sorte que rien n'ait changé. C'est le travail
          le plus difficile du monde, et le plus joyeux.
        </PullQuote>
      </section>

      {/* SIGNATURE STRIP — full-bleed Girel panorama */}
      <section className="section section-signature" data-screen-label="01 Accueil — Signature">
        <img src="img/club-pano.avif" alt="Le Club 55 vu depuis la plage, aquarelle de Stéphane Girel" />
        <div className="signature-caption">
          <span className="muted small">aquarelle</span>
          <em>Le Club, vu de la plage</em>
          <span className="muted small">Stéphane Girel</span>
        </div>
      </section>

      {/* PRACTICAL */}
      <section className="section section-practical">
        <div className="practical-grid">
          <div className="practical-item">
            <Eyebrow>Saison</Eyebrow>
            <p className="practical-value">Avril → Octobre</p>
            <p className="muted small">Tous les jours, le midi uniquement.</p>
          </div>
          <div className="practical-item">
            <Eyebrow>Réservation</Eyebrow>
            <p className="practical-value">+33 4 94 55 55 55</p>
            <p className="muted small">Indispensable en haute saison.</p>
          </div>
          <div className="practical-item">
            <Eyebrow>Adresse</Eyebrow>
            <p className="practical-value">Bd. Patch, Pampelonne</p>
            <p className="muted small">83350 Ramatuelle</p>
          </div>
        </div>
      </section>
    </>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// PAGE — Restaurant
// ────────────────────────────────────────────────────────────────────────────
function Restaurant() {
  return (
    <>
      <section className="page-head" data-screen-label="02 Restaurant — Head">
        <Eyebrow>Chapitre I</Eyebrow>
        <Display>
          <em>Le Restaurant.</em>
        </Display>
        <Lede>
          Une grande terrasse en bois, des nappes bleues à pois, des paniers de crudités
          posés sur la table. On choisit le poisson, on attend qu'il sorte de la grille —
          le reste suit.
        </Lede>
      </section>

      <section className="section section-bleed">
        <img src="img/restaurant-terrasse.avif" alt="La grande terrasse du restaurant" className="bleed-img" />
      </section>

      <section className="section">
        <div className="two-col">
          <div className="col-lead">
            <Eyebrow>L'esprit</Eyebrow>
            <h2 className="display">Le panier, <em>puis le poisson.</em></h2>
          </div>
          <div className="col-body">
            <p>Au Club, le déjeuner commence par un grand panier de crudités déposé au
              centre de la table : tomates de Provence, radis avec leur fane, fenouil,
              concombres, céleri, artichauts violets. On se sert, on partage, on
              pioche.</p>
            <p>Vient ensuite la carte, courte et tenue : le loup grillé au fenouil, le
              tian de légumes, la côte de bœuf, les pâtes au pistou. Et toujours, à la
              fin, la tarte aux figues qu'on n'a pas le droit de refuser.</p>
          </div>
        </div>
      </section>

      {/* MENU CARD — la carte du jour */}
      <section className="section section-menu">
        <div className="menu-card">
          <header className="menu-card-head">
            <Eyebrow>La carte du jour</Eyebrow>
            <h3 className="menu-card-title"><em>Vendredi</em> 12 juillet</h3>
            <span className="menu-card-rule" />
          </header>

          <div className="menu-cols">
            <div className="menu-col">
              <h4>Pour commencer</h4>
              <ul className="menu-list">
                <li>
                  <span className="menu-name">Le grand panier de crudités</span>
                  <span className="menu-dots" />
                  <span className="menu-price">offert</span>
                </li>
                <li>
                  <span className="menu-name">Figues fraîches &amp; melon de Cavaillon</span>
                  <span className="menu-dots" />
                  <span className="menu-price">28</span>
                </li>
                <li>
                  <span className="menu-name">Tarte fine tomates &amp; tapenade</span>
                  <span className="menu-dots" />
                  <span className="menu-price">26</span>
                </li>
                <li>
                  <span className="menu-name">Salade de pourpier au chèvre frais</span>
                  <span className="menu-dots" />
                  <span className="menu-price">24</span>
                </li>
              </ul>
            </div>

            <div className="menu-illu">
              <img src="img/figues-melon.avif" alt="Figues et melon" />
            </div>

            <div className="menu-col">
              <h4>Du marché &amp; de la mer</h4>
              <ul className="menu-list">
                <li>
                  <span className="menu-name">Loup grillé entier au fenouil</span>
                  <span className="menu-dots" />
                  <span className="menu-price">68</span>
                </li>
                <li>
                  <span className="menu-name">Daurade royale, beurre nantais</span>
                  <span className="menu-dots" />
                  <span className="menu-price">62</span>
                </li>
                <li>
                  <span className="menu-name">Tian de légumes confits</span>
                  <span className="menu-dots" />
                  <span className="menu-price">36</span>
                </li>
                <li>
                  <span className="menu-name">Pâtes fraîches au pistou</span>
                  <span className="menu-dots" />
                  <span className="menu-price">32</span>
                </li>
                <li>
                  <span className="menu-name">Côte de bœuf, pommes grenailles</span>
                  <span className="menu-dots" />
                  <span className="menu-price">82</span>
                </li>
              </ul>
            </div>

            <div className="menu-illu">
              <img src="img/poisson.avif" alt="Poisson grillé" />
            </div>

            <div className="menu-col">
              <h4>Pour finir</h4>
              <ul className="menu-list">
                <li>
                  <span className="menu-name">Tarte aux figues</span>
                  <span className="menu-dots" />
                  <span className="menu-price">14</span>
                </li>
                <li>
                  <span className="menu-name">Soupe de pêches blanches au basilic</span>
                  <span className="menu-dots" />
                  <span className="menu-price">12</span>
                </li>
                <li>
                  <span className="menu-name">Sorbets de la maison</span>
                  <span className="menu-dots" />
                  <span className="menu-price">10</span>
                </li>
              </ul>
            </div>

            <div className="menu-illu">
              <img src="img/tarte.avif" alt="Tarte du jour" />
            </div>
          </div>

          <footer className="menu-card-foot">
            <p className="muted small">
              Carte revue chaque matin selon le marché et les retours de pêche. Prix
              en euros, service compris. Mention spéciale aux producteurs de Ramatuelle,
              Gassin et de la Mole.
            </p>
          </footer>
        </div>
      </section>

      {/* PATRICE PORTRAIT */}
      <section className="section section-portrait">
        <div className="portrait-grid">
          <div className="portrait-img">
            <img src="img/patrice.avif" alt="Patrice de Colmont avec son équipe" />
            <span className="caption">Patrice de Colmont, en cuisine, avec l'équipe.</span>
          </div>
          <div className="portrait-text">
            <Eyebrow>L'hôte</Eyebrow>
            <h2 className="display">Patrice <em>de Colmont.</em></h2>
            <p>Il a grandi entre la cuisine et le sable. Aujourd'hui, c'est lui qui passe
              entre les tables, qui parle aux pêcheurs à six heures du matin, qui choisit
              le rosé. Ce qu'il transmet n'est pas une recette : <em>c'est une manière
              d'être à table.</em></p>
            <PullQuote>
              On ne reçoit pas des clients. On reçoit des gens — des amis, parfois.
            </PullQuote>
          </div>
        </div>
      </section>

      <section className="section section-cta">
        <div className="cta-band">
          <h2 className="display"><em>Réserver</em> une table.</h2>
          <p>Le déjeuner se réserve indispensablement en haute saison. Notre équipe vous
            répond de 9h à 18h.</p>
          <a href="#/contact" className="btn">Demander une table</a>
        </div>
      </section>
    </>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// PAGE — Plage & Snack
// ────────────────────────────────────────────────────────────────────────────
function Plage() {
  return (
    <>
      <section className="page-head" data-screen-label="03 Plage — Head">
        <Eyebrow>Chapitre II</Eyebrow>
        <Display><em>La Plage</em> &amp; le Snack.</Display>
        <Lede>
          Quatre-vingt mètres de sable, quelques rangées de matelas sous paillote, et
          au bout du ponton, le coin snack. Ici la journée n'a pas d'heure — elle suit
          le soleil.
        </Lede>
      </section>

      <section className="section section-bleed">
        <img src="img/plage-pano.avif" alt="La plage, vue panoramique" className="bleed-img" />
      </section>

      <section className="section">
        <div className="two-col">
          <div className="col-lead">
            <Eyebrow>Une journée</Eyebrow>
            <h2 className="display">Du <em>matin</em> au <em>dernier rayon.</em></h2>
          </div>
          <div className="col-body">
            <p>À neuf heures, l'équipe lisse le sable, redresse les paillotes, sort les
              matelas. À onze, les premiers baigneurs s'installent. À midi trente, le
              service commence là-haut. À seize heures, le coin snack rouvre pour les
              affamés du tard. À dix-neuf, on plie. Le lendemain, on recommence.</p>
            <p>La plage est <em>privée mais ouverte</em>: vous pouvez réserver un matelas
              sans déjeuner au restaurant, et le déjeuner sans matelas. À votre guise.</p>
          </div>
        </div>
      </section>

      {/* TWO CARDS — Matelas / Snack */}
      <section className="section section-offerings">
        <div className="offerings">
          <article className="offer">
            <div className="offer-img">
              <img src="img/matelas.avif" alt="Matelas sur la plage" />
            </div>
            <div className="offer-body">
              <Eyebrow>Sur le sable</Eyebrow>
              <h3>Matelas &amp; paillote</h3>
              <p>Un matelas, une serviette à pois, un parasol de paille tressée. On vous
                installe, on apporte de l'eau fraîche, on vous laisse tranquille.</p>
              <ul className="offer-meta">
                <li><span>Demi-journée</span><span>45 €</span></li>
                <li><span>Journée complète</span><span>75 €</span></li>
                <li><span>Paillote double</span><span>140 €</span></li>
              </ul>
              <a href="#/contact" className="link-arrow">Réserver un matelas →</a>
            </div>
          </article>

          <article className="offer">
            <div className="offer-img">
              <img src="img/snack.avif" alt="Le coin snack" />
            </div>
            <div className="offer-body">
              <Eyebrow>Pieds dans le sable</Eyebrow>
              <h3>Le coin snack</h3>
              <p>Pour les petites faims, à toute heure : sandwich pan-bagnat, salade
                niçoise, glace italienne, pression bien fraîche. Sans réservation,
                sans cérémonie.</p>
              <ul className="offer-meta">
                <li><span>Service continu</span><span>11h → 18h</span></li>
                <li><span>Pan-bagnat</span><span>16 €</span></li>
                <li><span>Glaces &amp; sorbets</span><span>à partir de 6 €</span></li>
              </ul>
              <a href="#/contact" className="link-arrow">Voir l'emplacement →</a>
            </div>
          </article>
        </div>
      </section>

      {/* BAR INTERLUDE */}
      <section className="section section-bar">
        <div className="bar-grid">
          <div className="bar-illu">
            <img src="img/bar-scene.avif" alt="L'ambiance du bar" />
          </div>
          <div className="bar-text">
            <Eyebrow>L'apéro</Eyebrow>
            <h2 className="display">À <em>cinq heures,</em> on remonte au bar.</h2>
            <p>Le rosé est servi très frais, les olives arrivent sans qu'on les demande,
              et l'on parle moins fort qu'au déjeuner. Un moment plus calme, suspendu
              entre la sieste et la rentrée — souvent le meilleur de la journée.</p>
            <div className="bar-citrus">
              <img src="img/agrumes.avif" alt="Agrumes" />
              <span className="muted small">Les agrumes du bar — aquarelle</span>
            </div>
          </div>
        </div>
      </section>

      <section className="section section-cta">
        <div className="cta-band">
          <h2 className="display">Réserver <em>un matelas.</em></h2>
          <p>Les paillotes partent vite : une demande dès le mois de mars est plus sûre.</p>
          <a href="#/contact" className="btn">Demander une réservation</a>
        </div>
      </section>
    </>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// PAGE — Nos Domaines
// ────────────────────────────────────────────────────────────────────────────
function Domaines() {
  return (
    <>
      <section className="page-head" data-screen-label="04 Domaines — Head">
        <Eyebrow>Chapitre III</Eyebrow>
        <Display><em>Nos Domaines.</em></Display>
        <Lede>
          Au-delà du sable, il y a un potager qui nourrit la table, un cabanon qui
          héberge les amis, et une famille qui veille à ce que tout cela tienne
          ensemble.
        </Lede>
      </section>

      {/* TIMELINE — sept décennies */}
      <section className="section section-timeline">
        <div className="timeline">
          <Eyebrow>Une histoire en sept étés</Eyebrow>
          <ol className="timeline-list">
            <li>
              <span className="t-year">1955</span>
              <p>Geneviève et Bernard de Colmont s'installent au pied des dunes pour
                pique-niquer. Ils n'en repartent pas.</p>
            </li>
            <li>
              <span className="t-year">1956</span>
              <p>Vadim tourne <em>Et Dieu créa la femme.</em> Quelques tables sont
                prêtées à l'équipe ; la nappe ne sera plus jamais retirée.</p>
            </li>
            <li>
              <span className="t-year">1972</span>
              <p>Construction de la grande terrasse en bois sous les pins parasols, à
                l'emplacement qu'elle occupe encore.</p>
            </li>
            <li>
              <span className="t-year">1985</span>
              <p>Patrice reprend la maison aux côtés de son père. Le potager prend
                forme, les fournisseurs deviennent des amis.</p>
            </li>
            <li>
              <span className="t-year">2010</span>
              <p>Stéphane Girel pose son chevalet sur la plage et signe la première
                série d'aquarelles, depuis devenues l'identité de la maison.</p>
            </li>
            <li>
              <span className="t-year">2025</span>
              <p>Soixante-dix ans, trois générations, un seul et même geste — recevoir
                à table, sur le sable.</p>
            </li>
          </ol>
        </div>
      </section>

      {/* DOMAINES GRID */}
      <section className="section section-domaines">
        <div className="domaines-grid">

          <article className="domaine">
            <div className="domaine-img">
              <img src="img/cabanon-02.avif" alt="Le cabanon" />
            </div>
            <div className="domaine-text">
              <Eyebrow>I</Eyebrow>
              <h3>Le Cabanon</h3>
              <p>Une maison de gardien à l'arrière du restaurant. C'est ici qu'on dort
                quand on travaille tard, qu'on accueille un cousin, qu'un chien fait
                la sieste à l'ombre des roseaux.</p>
            </div>
          </article>

          <article className="domaine domaine-flipped">
            <div className="domaine-img">
              <img src="img/cabanon-01.avif" alt="Vue depuis le cabanon" />
            </div>
            <div className="domaine-text">
              <Eyebrow>II</Eyebrow>
              <h3>Le Patio</h3>
              <p>Derrière la porte du cabanon, un petit patio carrelé d'ocre. Quelques
                pas suffisent pour passer du domaine privé à la cuisine du
                restaurant.</p>
            </div>
          </article>

          <article className="domaine">
            <div className="domaine-img">
              <img src="img/pine-path.avif" alt="L'allée des pins" />
            </div>
            <div className="domaine-text">
              <Eyebrow>III</Eyebrow>
              <h3>L'allée des pins</h3>
              <p>Le chemin de dalles qui mène de la route à la plage, sous la voûte
                des pins parasols. C'est sans doute la plus belle entrée en matière
                de la côte.</p>
            </div>
          </article>

          <article className="domaine domaine-flipped">
            <div className="domaine-img">
              <img src="img/cabinet.avif" alt="Le linge de la maison" />
            </div>
            <div className="domaine-text">
              <Eyebrow>IV</Eyebrow>
              <h3>Le linge de maison</h3>
              <p>Nappes à pois bleus, serviettes brodées, draps de bain rayés. Tout
                est lavé, repassé, plié à la main, à quelques mètres de la salle.
                Une boutique discrète permet d'en emporter chez soi.</p>
              <a href="#/contact" className="link-arrow">Boutique sur place →</a>
            </div>
          </article>

        </div>
      </section>

      {/* GIREL ATTRIBUTION BAND */}
      <section className="section section-girel">
        <div className="girel">
          <div className="girel-text">
            <Eyebrow>Identité visuelle</Eyebrow>
            <h2 className="display">Les <em>aquarelles</em> de Stéphane Girel.</h2>
            <p>Depuis 2010, l'illustrateur Stéphane Girel pose son carnet à Pampelonne
              au tout début de chaque saison. Ses aquarelles — la terrasse, la plage,
              le clocher de Ramatuelle, le bar — composent <em>l'identité visuelle de
              la maison.</em> Vous les retrouvez sur les menus, les serviettes, et
              jusque sur ce site.</p>
          </div>
          <div className="girel-illu">
            <img src="img/bar-interior.avif" alt="Le bar — aquarelle de Girel" />
          </div>
        </div>
      </section>
    </>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// PAGE — Contact
// ────────────────────────────────────────────────────────────────────────────
function Contact() {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({
    type: 'restaurant', date: '', time: '13:00', guests: 4,
    name: '', email: '', phone: '', notes: ''
  });
  const upd = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = (e) => { e.preventDefault(); setSubmitted(true); };

  return (
    <>
      <section className="page-head" data-screen-label="05 Contact — Head">
        <Eyebrow>Chapitre IV</Eyebrow>
        <Display><em>Nous trouver.</em></Display>
        <Lede>
          Le Club 55 est situé sur la plage de Pampelonne, à mi-chemin entre
          Ramatuelle et Saint-Tropez. On y vient par la route, par les chemins
          piétons depuis la route des plages, ou par la mer.
        </Lede>
      </section>

      {/* MAP — full Girel hand-drawn map */}
      <section className="section section-map">
        <figure className="map-figure">
          <img src="img/map.avif" alt="Carte de la presqu'île — Stéphane Girel" />
          <figcaption className="map-cap">
            <span className="muted small">aquarelle &amp; cartographie</span>
            <em>La presqu'île de Saint-Tropez</em>
            <span className="muted small">Stéphane Girel — pour Le Club 55</span>
          </figcaption>
        </figure>
      </section>

      {/* ACCESS — three cards */}
      <section className="section section-access">
        <div className="access-grid">
          <article className="access-card">
            <div className="access-img">
              <img src="img/sttropez.avif" alt="Depuis Saint-Tropez" />
            </div>
            <Eyebrow>Depuis</Eyebrow>
            <h3>Saint-Tropez</h3>
            <p>Suivre la D93 (route des plages) sur 4 km en direction de Ramatuelle.
              Tourner à gauche au panneau « Plage de Pampelonne ». Parking sur place.</p>
            <p className="muted small">≈ 12 minutes en voiture · 35 minutes à vélo</p>
          </article>

          <article className="access-card">
            <div className="access-img">
              <img src="img/ramatuelle.avif" alt="Depuis Ramatuelle" />
            </div>
            <Eyebrow>Depuis</Eyebrow>
            <h3>Ramatuelle</h3>
            <p>Descendre par la route de Pampelonne (D93) en direction de la mer.
              Trois kilomètres jusqu'au croisement, puis suivre les indications
              jusqu'à la plage.</p>
            <p className="muted small">≈ 8 minutes en voiture</p>
          </article>

          <article className="access-card">
            <div className="access-img">
              <img src="img/plage-ambiance.avif" alt="Depuis la mer" />
            </div>
            <Eyebrow>Depuis</Eyebrow>
            <h3>La mer</h3>
            <p>Mouillage devant la plage par 4 à 6 mètres de fond, selon la saison.
              Notre équipage vient vous chercher en zodiac sur simple appel VHF
              canal 9.</p>
            <p className="muted small">Coordonnées : 43°14'N · 6°40'E</p>
          </article>
        </div>
      </section>

      {/* RESERVATION FORM */}
      <section className="section section-reservation" id="reserver">
        <div className="reserv-grid">
          <div className="reserv-lead">
            <Eyebrow>Demande</Eyebrow>
            <h2 className="display"><em>Réserver</em> votre venue.</h2>
            <p>Nous vous répondons sous 24 heures, par téléphone ou courriel. En haute
              saison (juillet-août), nous vous recommandons d'écrire dès le mois de
              mars.</p>
            <ul className="reserv-meta">
              <li><span className="muted small">Téléphone</span><strong>+33 4 94 55 55 55</strong></li>
              <li><span className="muted small">Courriel</span><strong>contact@leclub55.fr</strong></li>
              <li><span className="muted small">Saison</span><strong>1ᵉʳ avril → 15 octobre</strong></li>
            </ul>
          </div>

          <form className={`reserv-form ${submitted ? 'submitted' : ''}`} onSubmit={submit}>
            {submitted ? (
              <div className="reserv-thanks">
                <Eyebrow>Merci</Eyebrow>
                <h3>Votre demande est arrivée.</h3>
                <p>L'équipe d'accueil revient vers vous sous 24 heures, à
                  <strong> {form.email || 'votre adresse'}</strong>. À très bientôt
                  sur le sable.</p>
                <button type="button" className="btn btn-ghost"
                        onClick={() => { setSubmitted(false); setForm({...form, name:'', email:'', phone:'', notes:''}); }}>
                  Faire une autre demande
                </button>
              </div>
            ) : (
              <>
                <fieldset>
                  <legend>Pour quelle prestation ?</legend>
                  <div className="seg">
                    {[
                      ['restaurant', 'Une table'],
                      ['matelas', 'Un matelas'],
                      ['les-deux', 'Les deux'],
                    ].map(([v, l]) => (
                      <label key={v} className={form.type === v ? 'on' : ''}>
                        <input type="radio" name="type" value={v}
                               checked={form.type === v} onChange={upd('type')} />
                        {l}
                      </label>
                    ))}
                  </div>
                </fieldset>

                <div className="form-row">
                  <label>
                    <span>Date</span>
                    <input type="date" value={form.date} onChange={upd('date')} required />
                  </label>
                  <label>
                    <span>Heure</span>
                    <select value={form.time} onChange={upd('time')}>
                      <option>12:30</option><option>13:00</option><option>13:30</option>
                      <option>14:00</option><option>14:30</option>
                    </select>
                  </label>
                  <label>
                    <span>Convives</span>
                    <input type="number" min="1" max="20" value={form.guests} onChange={upd('guests')} />
                  </label>
                </div>

                <label>
                  <span>Votre nom</span>
                  <input type="text" value={form.name} onChange={upd('name')} required />
                </label>
                <div className="form-row">
                  <label>
                    <span>Courriel</span>
                    <input type="email" value={form.email} onChange={upd('email')} required />
                  </label>
                  <label>
                    <span>Téléphone</span>
                    <input type="tel" value={form.phone} onChange={upd('phone')} />
                  </label>
                </div>
                <label>
                  <span>Un mot pour nous</span>
                  <textarea rows="3" value={form.notes} onChange={upd('notes')}
                            placeholder="Anniversaire, allergie, demande particulière…" />
                </label>
                <button type="submit" className="btn">Envoyer la demande</button>
                <p className="muted small reserv-fine">
                  Cette demande ne vaut pas confirmation. Nous revenons vers vous
                  pour valider la disponibilité.
                </p>
              </>
            )}
          </form>
        </div>
      </section>
    </>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// App
// ────────────────────────────────────────────────────────────────────────────
function App() {
  const route = useRoute();
  const Page = ({
    accueil: Accueil,
    restaurant: Restaurant,
    plage: Plage,
    domaines: Domaines,
    contact: Contact,
  }[route] || Accueil);

  return (
    <div className="site">
      <Header route={route} />
      <main key={route}>
        <Page />
      </main>
      <Footer />
    </div>
  );
}

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