// À propos — La Coutume, Toucy
// Sources : Pappers (RCS Auxerre), La Tournée des Patrons, TripAdvisor, Tourisme Yonne

const AproposPage = ({ setRoute }) => (
  <>
    <section className="page-header">
      <div className="container">
        <Reveal className="eyebrow">À propos</Reveal>
        <Reveal as="h1" className="display" delay={1}>
          Un bistrot, <em>une passion</em>
        </Reveal>
        <Reveal delay={2}>
          <p className="lead">
            La Coutume, c'est l'histoire d'un cuisinier parisien qui a choisi Toucy pour ouvrir le restaurant dont il rêvait.
          </p>
        </Reveal>
      </div>
    </section>

    {/* Portrait chef */}
    <section className="section">
      <div className="container">
        <div className="split">
          <Reveal>
            <Parallax speed={0.08} className="split-visual">
              <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>
            {CHEF.bio.map((para, i) => (
              <p key={i} className={i === 0 ? "lead" : ""} style={{ marginTop: i === 0 ? 28 : 18, maxWidth: 520, color: i === 0 ? undefined : "var(--ink-soft)", lineHeight: i === 0 ? undefined : 1.75 }}>
                {para}
              </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>
          </Reveal>
        </div>
      </div>
    </section>

    {/* Parcours */}
    <section className="section-tight" style={{ background: "var(--bg-deep)" }}>
      <div className="container-narrow">
        <Reveal>
          <span className="eyebrow" style={{ display: "block", marginBottom: 20 }}>Le parcours</span>
          <h2 className="display section-title" style={{ marginBottom: 48 }}>
            De Paris <em>à Toucy</em>
          </h2>
        </Reveal>
        <div className="timeline">
          {[
            {
              year: "Paris",
              title: "Quinze ans en cuisine",
              text: "Charles Courtecuisse fait ses armes dans les cuisines parisiennes, dont celles du Verre à Vin. Une école exigeante : la cuisine de bistrot, celle des terrines, des abats et des sauces qui ne pardonnent pas l'à-peu-près.",
            },
            {
              year: CHEF.toucySince,
              title: "Toucy, la découverte",
              text: "Il pose ses valises en Puisaye pour les week-ends et les vacances. Le marché du samedi, les producteurs, la place du Marché — l'idée d'y ouvrir un jour sa table commence à faire son chemin.",
            },
            {
              year: "2025",
              title: "L'ouverture de La Coutume",
              text: "En mars 2025, la SAS La Coutume est immatriculée au RCS d'Auxerre et le restaurant ouvre ses portes au 1 Rue du Marché. Une carte courte, faite maison, et l'ardoise du jour selon le marché.",
            },
            {
              year: "2026",
              title: "Les Toques Françaises",
              text: "Le chef rejoint les Toques Françaises, association qui défend la cuisine française de terroir. Le restaurant s'installe durablement dans le paysage gourmand de la Puisaye.",
            },
          ].map((row, i) => (
            <Reveal key={row.title} delay={Math.min(i + 1, 4)} className="timeline-row">
              <div className="timeline-year">{row.year}</div>
              <div>
                <div className="timeline-title">{row.title}</div>
                <p className="timeline-text">{row.text}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>

    {/* Le lieu */}
    <section className="section">
      <div className="container">
        <div className="split">
          <Reveal>
            <span className="eyebrow">Le lieu</span>
            <h2 className="display section-title" style={{ marginTop: 20 }}>
              Place du Marché,<br /><span className="italic">Toucy</span>.
            </h2>
            <p style={{ marginTop: 24, color: "var(--ink-soft)", maxWidth: 520, lineHeight: 1.75, fontSize: 16 }}>
              Installé au 1 Rue du Marché, La Coutume bénéficie d'un cadre agréable sur l'une des jolies places du centre de Toucy — celle-là même où se tient le marché, l'un des plus animés de la Puisaye. L'intérieur évoque les bistrots d'autrefois : sobre, chaleureux, sans esbroufe.
            </p>
            <p style={{ marginTop: 16, color: "var(--ink-soft)", maxWidth: 520, lineHeight: 1.75, fontSize: 16 }}>
              Une terrasse est dressée aux beaux jours. Les animaux sont les bienvenus — merci simplement de le signaler à la réservation — et des chaises hautes sont disponibles pour les plus petits.
            </p>
            <div className="stat-row">
              {[
                { val: "Oui", label: "Terrasse" },
                { val: "Oui", label: "Animaux acceptés" },
                { val: "FR/EN", label: "Langues parlées" },
              ].map(s => (
                <div key={s.label} className="stat">
                  <div className="stat-val" style={{ fontSize: 34 }}>{s.val}</div>
                  <div className="stat-label">{s.label}</div>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={2}>
            <Parallax speed={0.08} className="split-visual">
              <Ph src={IMG.ambianceSalle} alt="Salle sobre et conviviale de La Coutume" variant="ph-dark" position="center 28%" style={{ width: "100%", height: "100%" }} />
            </Parallax>
          </Reveal>
        </div>
      </div>
    </section>

    {/* Infos pratiques résumées */}
    <section className="section-tight" style={{ background: "var(--bg-deep)" }}>
      <div className="container-narrow">
        <Reveal>
          <span className="eyebrow" style={{ display: "block", marginBottom: 20 }}>Informations pratiques</span>
          <h2 className="display section-title" style={{ marginBottom: 40 }}>
            Tout savoir avant de <em>venir</em>.
          </h2>
          <div className="infos-grid">
            {[
              { label: "Adresse",    value: `${INFO.address}, ${INFO.city}` },
              { label: "Téléphone",  value: INFO.phone, href: INFO.phoneHref },
              { label: "E-mail",     value: INFO.email, href: INFO.emailHref },
              { label: "Déjeuner",   value: "Mardi — Samedi · 12h à 14h" },
              { label: "Dîner",      value: "Jeudi — Samedi · 19h à 21h" },
              { label: "Fermeture",  value: "Dimanche et lundi" },
              { label: "Formule",    value: `À partir de ${PRICING.formule.price} € (entrée + plat + dessert)` },
              { label: "Menu du jour", value: `${PRICING.jour.price} €, à l'ardoise` },
              { label: "Terrasse",   value: "Disponible aux beaux jours" },
              { label: "Animaux",    value: "Acceptés — merci de prévenir" },
              { label: "Chaises bébé", value: "Disponibles" },
              { label: "Paiement",   value: INFO.payment.join(", ") },
            ].map(item => (
              <div key={item.label} className="info-cell">
                <div className="info-cell-label">{item.label}</div>
                {item.href
                  ? <a href={item.href} className="info-cell-value info-cell-link">{item.value}</a>
                  : <div className="info-cell-value">{item.value}</div>
                }
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>

    {/* Galerie */}
    <section className="section-tight">
      <div className="container">
        <div className="section-head">
          <div className="section-head-left">
            <Reveal className="eyebrow">Galerie</Reveal>
            <Reveal as="h2" className="display section-title" delay={1}>
              Le restaurant en <em>images</em>
            </Reveal>
          </div>
          <Reveal delay={2}>
            <a href={INFO.instagram} target="_blank" rel="noopener noreferrer" className="btn-link">
              Nos photos sur Instagram <Icon name="arrow" size={12} />
            </a>
          </Reveal>
        </div>
        <Reveal>
          <div className="gallery-masonry">
            {/* Les deux premières sont de vraies photos du restaurant. */}
            <div className="gallery-item tall"><Ph src={IMG.ambianceSalle} alt="La salle de La Coutume à Toucy, étagère à vins et tables de bistrot" variant="ph-dark" /></div>
            <div className="gallery-item wide"><Ph src={IMG.terrasse} alt="La salle de La Coutume ouverte sur la place du Marché" variant="ph-cream" /></div>
            <div className="gallery-item"><Ph src={IMG.plat_teteveau} alt="Tête de veau sauce gribiche" variant="ph-terracotta" /></div>
            <div className="gallery-item"><Ph src={IMG.cave} alt="Vins de l'Yonne" variant="ph-dark" /></div>
            <div className="gallery-item"><Ph src={IMG.tableDressee} alt="Table dressée" variant="ph-cream" /></div>
            <div className="gallery-item"><Ph src={IMG.cuisineChef} alt="En cuisine" variant="ph-dark" /></div>
            <div className="gallery-item"><Ph src={IMG.plat_baba} alt="Baba au rhum maison" variant="ph-terracotta" /></div>
            <div className="gallery-item tall"><Ph src={IMG.marche} alt="Le marché de Toucy" variant="ph-dark" /></div>
          </div>
        </Reveal>
        <Reveal>
          <p className="gallery-note">
            Les vues de la salle sont les photos du restaurant ; les plats sont encore
            illustrés par des visuels d'attente. Retrouvez toutes les photos sur{" "}
            <a href={INFO.instagram} target="_blank" rel="noopener noreferrer">Instagram</a> et{" "}
            <a href={INFO.facebook} target="_blank" rel="noopener noreferrer">Facebook</a>.
          </p>
        </Reveal>
      </div>
    </section>

    <CtaStrip setRoute={setRoute} />
  </>
);

Object.assign(window, { AproposPage });