/* global React, ReactDOM, Photo, ChapterHead, Icon */
const { useState, useEffect } = React;

function BrandMark({ className }) {
  return (
    <svg className={className} viewBox="0 0 48 48" fill="none" aria-hidden="true">
      <circle cx="24" cy="24" r="22" stroke="currentColor" strokeWidth="1.4" />
      <path d="M19 30V18h2v-3h2v3h2v-2h2v2h2v12" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round" />
      <path d="M16 31c2-3 5-4.5 8-4.5s6 1.5 8 4.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
      <path d="M18 34c1.6-2.2 3.7-3.3 6-3.3s4.4 1.1 6 3.3" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" opacity="0.6" />
    </svg>
  );
}
const Arrow = () => (
  <svg className="btn__arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>
);
const Check = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m5 12 4 4L19 6" /></svg>
);

function Header() {
  const [stuck, setStuck] = useState(false);
  useEffect(() => {
    const on = () => setStuck(window.scrollY > 12);
    on(); window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <header className={"header plaque" + (stuck ? " is-stuck" : "")}>
      <div className="container plaque__row">
        <a className="plaque__brand" href="#top">
          <span className="plaque__name">Poterie du Bousquet</span>
          <span className="plaque__sub">Artisans potiers depuis 1815, Château du Bousquet, Ardèche</span>
        </a>
        <a className="plaque__cta" href="#contact">Recevoir la sélection</a>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="shero" id="top">
      <div className="container">
        <div className="salonband">
          <span className="salonband__a">EquipHotel, merci pour votre visite</span>
          <span className="salonband__sep" aria-hidden="true" />
          <span className="salonband__b">La sélection de la Maison : contenants, arts de la table, bougies</span>
        </div>
      </div>
      <div className="container shero__inner">
        <div className="shero__copy">
          <h1>Une maison se reconnaît à sa matière.</h1>
          <p className="shero__sub">Du hall à la terrasse, du bar à la chambre : une même signature. Le grès dehors, une couleur d'émail dedans. Des pièces pensées pour les lieux qui reçoivent, et pour le réassort.</p>
          <div className="shero__actions">
            <a className="btn btn--primary" href="#contact" onClick={() => window.dispatchEvent(new CustomEvent("lead-mode", { detail: "catalogue" }))}>Recevoir la présentation de la Maison <Arrow /></a>
            <a className="btn btn--secondary" href="#contact" onClick={() => window.dispatchEvent(new CustomEvent("lead-mode", { detail: "rdv" }))}>Demander un rendez-vous (15 min)</a>
          </div>
          <p className="shero__micro">Réponse sous 48h. Conditions pro et disponibilités sur demande.</p>
        </div>
        <div className="shero__media">
          <Photo id="salon-hero" ratio="4 / 5" radius={16} src="images/atelier-jarre-dehors-portrait.jpg" placeholder="Atelier — grande jarre" alt="Le potier pose la main sur une grande jarre marquée du cachet, atelier ouvert sur les cyprès" />
        </div>
      </div>
    </section>
  );
}

function Manifeste() {
  const rows = [
    ["Matière", "Le grès dehors, sa texture intacte, la signature de la maison."],
    ["Couleur", "Dedans, une couleur d'émail profonde. Reconductible, prête à réassortir."],
    ["Geste", "Une pastille de grès, pour garder l'atelier avec vous."],
  ];
  return (
    <section className="section section--bg1">
      <div className="container">
        <div className="manif">
          {rows.map(([k, v]) => (
            <div className="manif__row" key={k}><span className="manif__k">{k}</span><p className="manif__v">{v}</p></div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Lieux() {
  const pts = ["Cohérence des espaces, du lobby à la suite", "Séries reconductibles, prêtes à réassortir", "SAV casse simple (photo, décision rapide)"];
  return (
    <section className="section section--bg0">
      <div className="container lieux">
        <ChapterHead numeral="·" kicker="Hospitality" title="Pour les lieux qui reçoivent." />
        <ul className="colpoints lieux__pts">{pts.map((p) => <li key={p}>{p}</li>)}</ul>
      </div>
    </section>
  );
}

function DedansDehors() {
  return (
    <section className="section section--bg0" id="dedans-dehors">
      <div className="container">
        <ChapterHead numeral="I" kicker="Dedans · Dehors" title="Une même maison, du lobby à la terrasse." intro="La même terre, le même émail, de l'accueil aux extérieurs. Une adresse se lit d'un seul regard." />
        <div className="dd">
          <figure><Photo id="dd-in" ratio="1 / 1" src="images/sq/oranger-salon.jpg" placeholder="Dedans" alt="Oranger en pot émaillé dans un salon" /><figcaption className="t-caption">Dedans — Lobby, salon</figcaption></figure>
          <figure><Photo id="dd-out" ratio="1 / 1" src="images/sq/oranger-rooftop.jpg" placeholder="Dehors" alt="Oranger en pot émaillé sur une terrasse" /><figcaption className="t-caption">Dehors — Terrasse, rooftop</figcaption></figure>
        </div>
      </div>
    </section>
  );
}

function Collections() {
  const chapters = [
    { n: "I", id: "contenants", kicker: "Chapitre — Contenants", title: "Des contenants qui se prescrivent en ensembles.",
      intro: "Du seuil au rooftop, la texture du grès reste la signature de la maison.",
      shots: [["sq/chateau.jpg", "Accueil, entrée"], ["sq/oliviers-entree.jpg", "Terrasse, petit-déjeuner"], ["sq/oranger-rooftop.jpg", "Rooftop, fin de journée"]],
      situation: ["insp-terrasse.jpg", "Terrasse, petit-déjeuner"],
      usages: ["Accueil, entrée", "Terrasse, petit-déjeuner", "Rooftop, fin de journée"] },
    { n: "II", id: "vaisselle", kicker: "Chapitre — Arts de la table", title: "La même maison, à table.",
      intro: "Texture de grès à l'extérieur, couleur d'émail dedans : une signature, du bar au petit-déjeuner. Reconductible, prête à réassortir.",
      shots: [["sq/cachet-email.jpg", "Bar, comptoir café"], ["sq/restaurant-vin.jpg", "Salle, service"], ["sq/dedans2.jpg", "Service en chambre"]],
      situation: ["insp-restaurant.jpg", "Salle, service"],
      usages: ["Bar, comptoir café", "Salle, service", "Service en chambre"] },
    { n: "III", id: "bougies", kicker: "Chapitre — Bougies", title: "Le geste, le soir.",
      intro: "Une pastille de grès, une lueur à la Maison. Du lobby à la suite, l'adresse se reconnaît aussi à la tombée du jour.",
      shots: [["sq/dedans.jpg", "Lobby, salon"], ["sq/atelier-cachet.jpg", "Suite, table de nuit"], ["sq/oranger-salon.jpg", "Table du soir"]],
      situation: ["insp-appartement.jpg", "Suite, table de nuit"],
      usages: ["Lobby, salon", "Suite, table de nuit", "Table du soir"] },
  ];
  return (
    <>
      {chapters.map((c, ci) => (
        <section className={"section " + (ci % 2 === 0 ? "section--bg1" : "section--bg0")} id={c.id} key={c.id}>
          <div className="container chap">
            <div className="chap__txt">
              <ChapterHead numeral={c.n} kicker={c.kicker} title={c.title} intro={c.intro} />
              <ul className="usages">{c.usages.map((u) => <li key={u}>{u}</li>)}</ul>
            </div>
            <div className="chap__media">
              <div className="colgrid colgrid--3">
                {c.shots.map(([p, cap], i) => (
                  <figure key={p}><Photo id={c.id + "-" + i} ratio="1 / 1" radius={10} src={"images/" + p} placeholder={cap} alt={cap} /><figcaption>{cap}</figcaption></figure>
                ))}
              </div>
              <figure className="chap__situ"><Photo id={c.id + "-situ"} ratio="16 / 9" radius={10} src={"images/" + c.situation[0]} placeholder={c.situation[1]} alt={c.situation[1]} /><figcaption>{c.situation[1]}</figcaption></figure>
            </div>
          </div>
        </section>
      ))}
    </>
  );
}

function Adresse() {
  return (
    <section className="section section--bg0" id="adresse">
      <div className="container">
        <div className="proof">
          <div className="proof__imgs">
            <figure><Photo id="pr-chateau" ratio="16 / 10" radius={12} src="images/chateau.jpg" placeholder="Le château" alt="Château du Bousquet" /></figure>
            <figure><Photo id="pr-atelier" ratio="1 / 1" radius={12} src="images/sq/atelier-tour.jpg" placeholder="Mains au tour" alt="Le potier au tour, mains dans la terre" /></figure>
            <figure><Photo id="pr-email" ratio="1 / 1" radius={12} src="images/sq/atelier-poncage.jpg" placeholder="Geste d'atelier" alt="Finition d'une grande jarre à l'atelier" /></figure>
          </div>
          <div className="proof__txt">
            <ChapterHead numeral="IV" kicker="Adresse & preuves" title="Une adresse. Une sélection. Une évidence." />
            <p>Vallée de l'Eyrieux, Château du Bousquet. Une maison vivante, depuis 1815.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function LeadForm() {
  const [sent, setSent] = useState(false);
  const [mode, setMode] = useState("catalogue");
  useEffect(() => {
    const on = (e) => setMode(e.detail || "catalogue");
    window.addEventListener("lead-mode", on);
    return () => window.removeEventListener("lead-mode", on);
  }, []);
  const submit = (e) => { e.preventDefault(); setSent(true); };
  const rdv = mode === "rdv";
  return (
    <section className="section section--bg1" id="contact">
      <div className="container lead">
        <div className="lead__side">
          <ChapterHead numeral="V" kicker="Espace Pro" title="Prolonger la rencontre avec la Maison." />
          <p>Présentation de la sélection, rendez-vous, ouverture de compte ou échantillon couleur : une seule demande suffit.</p>
          <ul className="lead__list">
            <li><Check />Sélection de la Maison : contenants, arts de la table, bougies</li>
            <li><Check />Conditions pro, disponibilités & réassort</li>
            <li><Check />Échantillon couleur d'émail</li>
          </ul>
        </div>
        <form className="form" onSubmit={submit} noValidate>
          {sent ? (
            <div className="form__done">
              <h3>Merci. Nous revenons vers vous sous 48h.</h3>
              <p className="t-small">{rdv ? "Nous vous proposons un créneau de 15 min par email." : "La présentation de la Maison vous parvient par email dès validation de votre demande."}</p>
              <a className="btn btn--secondary" href="Kit%20Merchandising.html">Découvrir l'Espace Pro <Arrow /></a>
            </div>
          ) : (
            <>
              <fieldset className="choices">
                <legend>Votre demande</legend>
                {[["catalogue", "Recevoir la présentation de la Maison"], ["conditions", "Obtenir les conditions pro (hospitality)"], ["echantillon", "Demander un échantillon couleur d'émail"], ["rdv", "Réserver un rendez-vous (15 min)"]].map(([v, l]) => (
                  <label className={"choice" + (mode === v ? " is-on" : "")} key={v}><input type="radio" name="demande" value={v} checked={mode === v} onChange={() => setMode(v)} /><span>{l}</span></label>
                ))}
              </fieldset>
              <div className="fld"><label htmlFor="f-nom">Nom</label><input id="f-nom" name="nom" type="text" autoComplete="name" required /></div>
              <div className="fld"><label htmlFor="f-email">Email</label><input id="f-email" name="email" type="email" autoComplete="email" required /></div>
              <div className="fld"><label htmlFor="f-soc">Société</label><input id="f-soc" name="societe" type="text" autoComplete="organization" required /></div>
              <div className="fld"><label htmlFor="f-profil">Profil</label>
                <select id="f-profil" name="profil" defaultValue="">
                  <option value="" disabled>Choisir…</option>
                  <option>Hôtel / Restaurant</option><option>Concept-store</option><option>Fleuriste</option><option>Jardinerie</option><option>Paysagiste</option><option>Décorateur / Architecte</option><option>Autre</option>
                </select>
              </div>
              {rdv && (
                <>
                  <div className="fld"><label htmlFor="f-tel">Téléphone <span className="opt">(optionnel)</span></label><input id="f-tel" name="tel" type="tel" autoComplete="tel" /></div>
                  <div className="fld"><label htmlFor="f-creneau">Créneau souhaité</label><input id="f-creneau" name="creneau" type="text" placeholder="ex. mardi matin, ou semaine prochaine" /></div>
                </>
              )}
              <label className="consent"><input type="checkbox" required /><span>J'accepte que Poterie du Bousquet utilise ces informations pour répondre à ma demande. Aucune revente, désinscription à tout moment.</span></label>
              <button className="btn btn--primary" type="submit">{rdv ? "Réserver un rendez-vous (15 min)" : "Recevoir la présentation de la Maison"} <Arrow /></button>
              <p className="form__micro">Réponse sous 48h.</p>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

function Video() {
  const [play, setPlay] = useState(false);
  return (
    <section className="section section--bg0">
      <div className="container">
        <div className="video">
          {play ? (
            <video src="videos/atelier.mp4" autoPlay muted loop playsInline controls />
          ) : (
            <>
              <Photo id="video-poster" ratio="16 / 9" radius={0} src="images/atelier-dos.jpg" placeholder="Image de couverture vidéo — atelier ou émail" alt="" />
              <button className="video__play" onClick={() => setPlay(true)} aria-label="Lire la vidéo">
                <span><svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z" /></svg></span>
              </button>
            </>
          )}
        </div>
        <p className="video__cap">Le geste. La matière. La tenue.</p>
      </div>
    </section>
  );
}

function EndCta() {
  return (
    <section className="section section--bg1">
      <div className="container endcta">
        <p className="endcta__t">Prolonger la rencontre, à votre rythme.</p>
        <div className="shero__actions">
          <a className="btn btn--primary" href="#contact" onClick={() => window.dispatchEvent(new CustomEvent("lead-mode", { detail: "catalogue" }))}>Recevoir la présentation de la Maison <Arrow /></a>
          <a className="btn btn--secondary" href="#contact" onClick={() => window.dispatchEvent(new CustomEvent("lead-mode", { detail: "rdv" }))}>Demander un rendez-vous (15 min)</a>
        </div>
        <p className="shero__micro">Réponse sous 48h. Conditions pro et disponibilités sur demande.</p>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__top">
          <div>
            <a className="brand" href="Maison.html"><BrandMark className="brand__mark" /><span className="brand__txt"><span className="brand__name">Poterie du Bousquet</span><span className="brand__sub">Depuis 1815 · Ardèche</span></span></a>
            <p className="footer__blurb">Poterie du Bousquet, artisans potiers depuis 1815, Château du Bousquet, Ardèche.</p>
          </div>
          <div className="footer__cols">
            <div className="footer__col"><h4>Adresse</h4><ul><li>Château du Bousquet</li><li>Vallée de l'Eyrieux, Ardèche</li><li>Artisans potiers depuis 1815</li></ul></div>
            <div className="footer__col"><h4>Contact</h4><ul><li><a href="#contact">Écrire à la maison</a></li><li><a href="#contact">Demander un rendez-vous</a></li></ul></div>
            <div className="footer__col"><h4>Légal</h4><ul><li><a href="#">Mentions légales</a></li><li><a href="#">Confidentialité</a></li></ul></div>
          </div>
        </div>
        <div className="footer__bottom"><span>© {new Date().getFullYear()} Poterie du Bousquet</span><span>Une maison, dedans comme dehors.</span></div>
      </div>
    </footer>
  );
}

function StickyCta() {
  const [on, setOn] = useState(false);
  useEffect(() => {
    document.body.classList.add("has-sticky");
    const form = document.getElementById("contact");
    const io = new IntersectionObserver(([e]) => setOn(!e.isIntersecting && window.scrollY > 400), { threshold: 0.2 });
    if (form) io.observe(form);
    const onScroll = () => { if (window.scrollY <= 400) setOn(false); else if (form) { const r = form.getBoundingClientRect(); setOn(!(r.top < window.innerHeight && r.bottom > 0)); } };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => { io.disconnect(); window.removeEventListener("scroll", onScroll); };
  }, []);
  return (
    <div className={"sticky-cta" + (on ? " is-on" : "")}>
      <span className="sticky-cta__txt">Poterie du Bousquet</span>
      <a className="plaque__cta" href="#contact">Recevoir la sélection</a>
    </div>
  );
}

function App() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("is-in"); io.unobserve(e.target); } }), { rootMargin: "0px 0px -8% 0px", threshold: 0.06 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
  return (
    <>
      <Header />
      <main>
        <Hero />
        <div className="reveal"><Manifeste /></div>
        <div className="reveal"><Lieux /></div>
        <div className="reveal"><Collections /></div>
        <div className="reveal"><Adresse /></div>
        <div className="reveal"><LeadForm /></div>
        <div className="reveal"><Video /></div>
        <div className="reveal"><EndCta /></div>
      </main>
      <Footer />
      <StickyCta />
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);