// site/lieu.jsx — Le lieu (Château Sentout), galerie + carte + accès
// Comment venir (mairie → château, parking, navette)
// Hébergements (cartes des gîtes/hôtels recommandés)

// ─── Le Lieu ──────────────────────────────────────────────────────
function LieuSection() {
  return (
    <Section id="section-lieu" bg={T.white} washHue={60} washOpacity={0.30} paddingTop={100} paddingBottom={80}>
      <SectionHeader
        eyebrow="Le lieu"
        title="Château Sentout"
        subtitle="Un domaine viticole au cœur de la Gironde, surplombant la Garonne. Pierres dorées, vieilles vignes, et une cour intérieure qui s'illumine à la nuit tombée."
      />

      {/* Galerie photos du château
          📝 Pour changer une image : remplacer le fichier dans /assets/ ou
             changer le `src` ci-dessous. Les 5 photos disponibles sont :
             - chateau-1-ceremonie.jpg  (cérémonie avec chaises)
             - chateau-2-groupe.jpg     (photo de groupe devant la façade)
             - chateau-3-diner.jpg      (cour intérieure illuminée à la nuit)
             - chateau-4-allee.jpg      (allée végétale de la cérémonie)
             - chateau-5-pano.jpg       (vue panoramique du domaine)
      */}
      <div style={{
        display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
        gap: 12, marginBottom: 32,
      }}>
        <Reveal delay={0}>
          <VisualPlate src="assets/chateau-5-pano.jpg" alt="Vue panoramique du Château Sentout"
            ratio="16/10" caption="Vue panoramique du domaine" treatment="low" />
        </Reveal>
        <Reveal delay={0.08}>
          <VisualPlate src="assets/chateau-1-ceremonie.jpg" alt="Espace cérémonie laïque"
            ratio="16/10" caption="L'aire de cérémonie laïque" treatment="low" />
        </Reveal>
        <Reveal delay={0.16}>
          <VisualPlate src="assets/chateau-3-diner.jpg" alt="Cour intérieure illuminée"
            ratio="16/10" caption="Cour intérieure à la nuit tombée" treatment="low" />
        </Reveal>
        <Reveal delay={0.24}>
          <VisualPlate src="assets/chateau-2-groupe.jpg" alt="Façade du château"
            ratio="16/10" caption="Devant la façade du château" treatment="low" />
        </Reveal>
      </div>

      {/* Carte + infos */}
      <div style={{
        display: "grid", gap: 24,
        gridTemplateColumns: "minmax(0, 1fr)",
      }} className="lieu-grid">
        <Card hover={false} accent={T.or} style={{ padding: "28px 28px" }}>
          <div className="eyebrow-small">Adresse</div>
          <div style={{ fontFamily: T.bold, fontWeight: 700, fontSize: 24, marginTop: 6 }}>
            {DATA.chateau.name}
          </div>
          <div style={{ fontFamily: T.sans, fontSize: 15, color: T.inkSoft, marginTop: 4, lineHeight: 1.5 }}>
            {DATA.chateau.address}<br/>
            {DATA.chateau.city}<br/>
            {DATA.chateau.region}
          </div>
          <div style={{ marginTop: 18, display: "flex", gap: 10, flexWrap: "wrap" }}>
            <ButtonSecondary href={DATA.chateau.mapsUrl}>
              ↗ Ouvrir dans Maps
            </ButtonSecondary>
          </div>
        </Card>

        {/* Mini carte SVG schématique */}
        <Card hover={false} style={{ padding: 0, overflow: "hidden", minHeight: 280 }}>
          <iframe
            src={`https://www.openstreetmap.org/export/embed.html?bbox=${DATA.chateau.coords.lng - 0.03},${DATA.chateau.coords.lat - 0.02},${DATA.chateau.coords.lng + 0.03},${DATA.chateau.coords.lat + 0.02}&layer=mapnik&marker=${DATA.chateau.coords.lat},${DATA.chateau.coords.lng}`}
            style={{ width: "100%", height: "100%", minHeight: 280, border: 0, display: "block" }}
            title="Carte du Château Sentout"
            loading="lazy"
          />
        </Card>
      </div>

      <style>{`
        @media (min-width: 720px) {
          .lieu-grid { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </Section>
  );
}

// ─── Comment venir ────────────────────────────────────────────────
function VenirSection() {
  const modes = [
    {
      suit: "♣", title: "En voiture", text: "Depuis Bordeaux, comptez 30 min via la rocade puis la D10. Parking gratuit sur le domaine.",
      meta: "30 min · A630 + D10",
    },
    {
      suit: "♠", title: "En train", text: "Gare de Bordeaux Saint-Jean, puis 25 min en taxi ou Uber. Aucune gare à Tabanac.",
      meta: "TGV jusqu'à Bordeaux",
    },
    {
      suit: "♦", title: "Covoiturage", text: "Indiquez dans votre RSVP si vous avez des places ou si vous en cherchez — on met les invités en relation.",
      meta: "Via le RSVP",
    },
  ];
  return (
    <Section id="section-venir" bg={T.white} washHue={0} washOpacity={0.28} paddingTop={100} paddingBottom={100}>
      <SectionHeader
        eyebrow="Comment venir"
        title="Vous y rendre"
        subtitle="Tabanac est à 25 minutes au sud-est de Bordeaux. Trois façons de nous rejoindre."
      />

      <div style={{
        display: "grid", gap: 16,
        gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
      }}>
        {modes.map((m, i) => (
          <Reveal key={m.title} delay={i * 0.08}>
            <Card accent={T.or}>
              <div className="eyebrow-small">{m.meta}</div>
              <div style={{ fontFamily: T.bold, fontWeight: 700, fontSize: 22, marginTop: 8, color: T.ink }}>
                {m.title}
              </div>
              <div style={{ fontFamily: T.sans, fontSize: 14, color: T.inkSoft, marginTop: 8, lineHeight: 1.55 }}>
                {m.text}
              </div>
            </Card>
          </Reveal>
        ))}
      </div>

      {/* Trajet mairie → château */}
      <div style={{ marginTop: 32, padding: "20px 24px", background: T.white, border: `1px solid ${T.ruleSoft}` }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap", justifyContent: "space-between" }}>
          <div>
            <div className="eyebrow-small" style={{ marginBottom: 6 }}>Trajet du jour</div>
            <div style={{ fontFamily: T.italic, fontStyle: "italic", fontSize: 18, color: T.ink }}>
              Mairie de Mérignac → Château Sentout · ~35 minutes
            </div>
          </div>
          <ButtonSecondary href={`https://www.google.com/maps/dir/?api=1&origin=Mairie+de+Mérignac&destination=Château+Sentout+Tabanac`}>
            ↗ Voir l'itinéraire
          </ButtonSecondary>
        </div>
      </div>
    </Section>
  );
}

// ─── Hébergements ─────────────────────────────────────────────────
function HebergementsSection() {
  return (
    <Section id="section-hebergements" bg={T.white} washHue={-30} washOpacity={0.30} paddingTop={100} paddingBottom={100}>
      <SectionHeader
        eyebrow="À deux pas"
        title="Hébergements"
        subtitle="Une sélection de gîtes, chambres d'hôtes et hôtels proches du Château. Liste complète à valider — Enora & Antoine te confirmeront leurs préférés."
      />

      <div style={{
        display: "grid", gap: 16,
        gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
      }}>
        {DATA.hebergements.map((h, i) => (
          <Reveal key={i} delay={Math.min(i * 0.08, 0.32)}>
            <Card accent={i % 2 === 0 ? T.or : T.rouge}>
              <div className="eyebrow-small">{h.type}</div>
              <div style={{ fontFamily: T.bold, fontWeight: 700, fontSize: 20, marginTop: 6, color: T.ink, lineHeight: 1.1 }}>
                {h.name}
              </div>
              <div style={{ marginTop: 10, fontFamily: T.sans, fontSize: 13, color: T.inkSoft, lineHeight: 1.5 }}>
                {h.note}
              </div>
              <div style={{
                marginTop: 12, paddingTop: 12, borderTop: `1px dashed ${T.rule}`,
                display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10,
                fontFamily: T.mono, fontSize: 10, letterSpacing: 1.5, color: T.inkSoft,
              }}>
                <span>{h.distance}</span>
                <span style={{ color: T.rouge, fontWeight: 600 }}>{h.price}</span>
              </div>
            </Card>
          </Reveal>
        ))}
      </div>

      <div style={{
        marginTop: 32, padding: "16px 20px", background: T.paper,
        borderLeft: `3px solid ${T.or}`, fontFamily: T.italic, fontStyle: "italic",
        fontSize: 15, color: T.ink, lineHeight: 1.5,
      }}>
        <strong style={{ fontFamily: T.bold, fontStyle: "normal", color: T.orDeep, fontSize: 12, letterSpacing: 2, textTransform: "uppercase", display: "block", marginBottom: 4 }}>
          Le mot des mariés
        </strong>
        Nous avons aussi une liste complète de gîtes en cours de validation. On vous l'envoie par email dès qu'elle est prête (ou dites-le-nous dans le RSVP si vous voulez qu'on vous tienne au jus).
      </div>
    </Section>
  );
}

Object.assign(window, { LieuSection, VenirSection, HebergementsSection });