// app/home.jsx — Page Accueil de l'app invité

function HomePage({ onNavigate }) {
  const cd = useCountdownA(APP_DATA.dateISO);
  const { identity } = useGuest();
  const [philaTaps, setPhilaTaps] = React.useState(0);
  const [philaRevealed, setPhilaRevealed] = React.useState(false);

  const handleCountdownTap = () => {
    const next = philaTaps + 1;
    setPhilaTaps(next);
    if (next >= 3) {
      setPhilaRevealed(true);
      setTimeout(() => setPhilaRevealed(false), 5000);
      setPhilaTaps(0);
    }
  };
  const cards = [
    { id: "plan", icon: "♦", title: "Plan de table et gîtes", body: "Cherchez votre nom pour découvrir votre tablée et votre gîte.", color: A.sage },
    { id: "anec", icon: "★", title: "Concours d'anecdotes", body: "Soumettez une vraie et une fausse anecdote sur nous. Le jour J on vote.", color: A.rouge, isNew: true, isHot: true },
    { id: "quiz", icon: "Q", title: "Le Grand Quiz", body: "30 cartes, 2 manches : tu nous connais ? Score, badges et classement public.", color: A.rouge, isNew: true },
    { id: "bets", icon: "♠", title: "Place your bets", body: "10 paris ludiques avant le grand jour. Qui pleurera ? Quand se termine la soirée ?", color: A.rougeDeep },
    { id: "carnet", icon: "♣", title: "Le Carnet scellé", body: "Laissez-nous un message à ouvrir le jour J, dans 1 an ou dans 10 ans. Texte, voix ou photo.", color: A.or, isNew: true },
    { id: "papa", icon: "●", title: "Les Paparazzis", body: "Un prompt par semaine, une photo, une légende. Tout le monde joue.", color: A.ink, isNew: true },
    { id: "gal",  icon: "✦", title: "Galerie partagée", body: "Déposez vos plus beaux clichés du mariage. Tout le monde y a accès.", color: A.orDeep },
  ];

  // Bannière "nouveau prompt vous attend" (s'affiche tant que pas répondu au prompt actif)
  const activeBrPrompt = (typeof brGetActivePrompt === "function") ? brGetActivePrompt() : null;
  const myBrPost = (typeof brMyPostForPrompt === "function" && activeBrPrompt) ? brMyPostForPrompt(activeBrPrompt.id) : null;
  const showBrBanner = activeBrPrompt && !myBrPost && !(typeof brIsPauseDay === "function" && brIsPauseDay());
  return (
    <div style={{ position: "relative", overflow: "hidden", minHeight: "100vh" }}>
      <WashBg hue={120} opacity={0.18}/>
      <Page cascade={false}>
        <AppHeader
          eyebrow={identity?.firstName ? `♥ Bonjour ${identity.firstName}` : "Bienvenue"}
          title="L'App des invités"
        />
        <div style={{ textAlign: "center", marginTop: 4, fontFamily: A.italic, fontStyle: "italic", fontSize: 17, color: A.inkSoft, lineHeight: 1.5, maxWidth: 480, margin: "8px auto 0", animation: "a-up .5s .2s ease both" }}>
          {identity?.tableName ? (
            <>Vous êtes à la <strong style={{ color: A.ink, fontStyle: "normal" }}>{identity.tableName}</strong>{identity.giteName ? <>, au gîte <strong style={{ color: A.ink, fontStyle: "normal" }}>{identity.giteName}</strong></> : null}.<br/></>
          ) : null}
          Sept rendez-vous pour préparer (et prolonger) la fête.
        </div>

        {/* Bannière Paparazzi : un nouveau prompt vous attend */}
        {showBrBanner && (
          <button onClick={() => onNavigate("papa")} style={{
            width: "100%", marginTop: 22, padding: "14px 16px",
            background: A.ink, color: A.white, border: `1px solid ${A.or}`,
            cursor: "pointer", textAlign: "left",
            display: "flex", alignItems: "center", gap: 12,
            animation: "a-up .5s .25s ease both",
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: "50%",
              background: A.or, color: A.ink, flexShrink: 0,
              display: "flex", alignItems: "center", justifyContent: "center",
              fontFamily: A.display, fontStyle: "italic", fontSize: 18, fontWeight: 700,
            }}>●</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: A.mono, fontSize: 9, letterSpacing: 2, color: A.or, fontWeight: 600 }}>
                ★ UN NOUVEAU PROMPT VOUS ATTEND
              </div>
              <div style={{ fontFamily: A.italic, fontStyle: "italic", fontSize: 14, color: "rgba(255,255,255,0.85)", lineHeight: 1.35, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                "{activeBrPrompt.question}"
              </div>
            </div>
            <div style={{ color: A.or, fontFamily: A.display, fontSize: 22, flexShrink: 0 }}>→</div>
          </button>
        )}

        {/* Compte-à-rebours */}
        <div onClick={handleCountdownTap} style={{ margin: "32px 0 28px", padding: "20px 18px", background: A.ink, color: A.white, position: "relative", cursor: "pointer", userSelect: "none", animation: "a-up .5s .3s ease both" }}>
          <div style={{ fontFamily: A.mono, fontSize: 10, letterSpacing: 3, color: A.or, marginBottom: 10, textAlign: "center", textTransform: "uppercase" }}>
            Plus que
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", gap: 8, fontVariantNumeric: "tabular-nums" }}>
            {[
              { v: cd.d, l: "jours" }, { v: cd.h, l: "h" }, { v: cd.m, l: "min" }, { v: cd.s, l: "s" },
            ].map((x) => (
              <div key={x.l} style={{ flex: 1, textAlign: "center" }}>
                <div style={{ fontFamily: A.display, fontWeight: 700, fontSize: 30, lineHeight: 1, color: A.or }}>
                  {String(x.v).padStart(2, "0")}
                </div>
                <div style={{ fontFamily: A.mono, fontSize: 8, opacity: 0.7, letterSpacing: 2, marginTop: 4, textTransform: "uppercase" }}>{x.l}</div>
              </div>
            ))}
          </div>
          {philaTaps > 0 && philaTaps < 3 && (
            <div style={{ position: "absolute", bottom: 6, left: 0, right: 0, textAlign: "center", fontFamily: A.italic, fontStyle: "italic", fontSize: 10, color: A.or, opacity: 0.6 }}>
              ...
            </div>
          )}
        </div>

        {/* Phila easter egg #3 — popup */}
        {philaRevealed && (
          <div style={{
            position: "fixed", inset: 0, background: "rgba(26,22,18,0.6)",
            display: "flex", alignItems: "center", justifyContent: "center",
            zIndex: 100, animation: "a-fade .3s ease both",
          }} onClick={() => setPhilaRevealed(false)}>
            <div style={{
              background: A.white, padding: "32px 28px", maxWidth: 320, margin: "0 24px",
              border: `2px solid ${A.or}`, textAlign: "center",
              animation: "a-up .4s ease both",
            }} onClick={(e) => e.stopPropagation()}>
              <Phila variant="wide" size={120} style={{ display: "block", margin: "0 auto" }} />
              <div className="display-bold" style={{ fontSize: 28, color: A.ink, marginTop: 12, lineHeight: 1.1 }}>
                Vous m'avez trouvée.
              </div>
              <div style={{ fontFamily: A.italic, fontStyle: "italic", fontSize: 14, color: A.inkSoft, marginTop: 10, lineHeight: 1.5 }}>
                "Bonjour, c'est Phila. Je vous attends au mariage. Si vous trouvez deux autres signes de moi dans l'app, on se retrouve au Club."
              </div>
              <div style={{ marginTop: 18, fontFamily: A.mono, fontSize: 9, letterSpacing: 2, color: A.or }}>
                ♥ EASTER EGG 1/3 — HOME ♥
              </div>
              <button onClick={() => setPhilaRevealed(false)} style={{
                marginTop: 20, padding: "10px 22px",
                background: A.ink, color: A.white, border: "none",
                fontFamily: A.mono, fontSize: 10, letterSpacing: 2.5, textTransform: "uppercase", cursor: "pointer",
              }}>
                À bientôt
              </button>
            </div>
          </div>
        )}

        {/* Le Domaine — plan + frise horizontale des lieux */}
        <DomaineHero />

        {/* Cartes nav — effet éventail à l'entrée */}
        <div className="fan-stack" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {cards.map((c) => (
            <InfoCard key={c.id} accent={c.color} onClick={() => onNavigate(c.id)} style={{ padding: "18px 20px", position: "relative" }}>
              {c.isHot ? (
                <div style={{
                  position: "absolute", top: 10, right: 10,
                  fontFamily: A.mono, fontSize: 8, letterSpacing: 2, fontWeight: 700,
                  background: A.rouge, color: A.white,
                  padding: "3px 8px", borderRadius: 2, textTransform: "uppercase",
                  boxShadow: `0 0 0 1px ${A.rouge}, 0 2px 8px ${A.rouge}88`,
                }}>★ À ne pas rater</div>
              ) : c.isNew && (
                <div style={{
                  position: "absolute", top: 10, right: 10,
                  fontFamily: A.mono, fontSize: 8, letterSpacing: 2, fontWeight: 600,
                  background: A.rouge, color: A.white,
                  padding: "3px 7px", borderRadius: 2, textTransform: "uppercase",
                }}>Nouveau</div>
              )}
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <div style={{
                  width: 44, height: 44, borderRadius: "50%", background: c.color + "22",
                  border: `1.5px solid ${c.color}`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: A.display, fontSize: 18, color: c.color,
                  flexShrink: 0,
                }}>{c.icon}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontFamily: A.display, fontWeight: 700, fontSize: 19, color: A.ink, letterSpacing: -0.3 }}>{c.title}</div>
                  <div style={{ fontFamily: A.sans, fontSize: 13, color: A.inkSoft, lineHeight: 1.45, marginTop: 4 }}>{c.body}</div>
                </div>
                <div style={{ color: A.inkMute, fontFamily: A.display, fontSize: 22, flexShrink: 0 }}>→</div>
              </div>
            </InfoCard>
          ))}
        </div>

        {/* Le Domaine — section visuelle (4 variantes proposées) */}
        {/* Liens utiles vers le site principal */}
        <div style={{ marginTop: 32, padding: "16px 20px", background: A.paper, textAlign: "center", border: `1px solid ${A.ruleSoft}`, animation: "a-up .5s .9s ease both" }}>
          <div style={{ fontFamily: A.italic, fontStyle: "italic", fontSize: 14, color: A.inkSoft, lineHeight: 1.55 }}>
            Vous cherchez le programme, le RSVP ou les hébergements ?
          </div>
          <a href="Site mariage Enora & Antoine.html" style={{
            display: "inline-block", marginTop: 10, padding: "10px 18px",
            background: A.ink, color: A.white, textDecoration: "none",
            fontFamily: A.mono, fontSize: 10, letterSpacing: 2.5, textTransform: "uppercase",
          }}>
            ↗ Retour au site principal
          </a>
        </div>
      </Page>
    </div>
  );
}

Object.assign(window, { HomePage });

// ─── DomaineHero : Plaque + plan full-bleed (modal HD au tap) + frise des lieux ──
function DomaineHero() {
  const lieux = [
    { n: "I",   label: "Cérémonie",     where: "Cloître",            tone: "or",   body: "On se réunit dans la fraîcheur du cloître pour le moment le plus intime de la journée." },
    { n: "II",  label: "Vin d'honneur", where: "Cour Centrale",      tone: "sage", body: "Bulles, mignardises et premiers éclats de rire dans la cour pavée du château." },
    { n: "III", label: "Repas",         where: "Pelouse du Parc",    tone: "or",   body: "Grandes tablées sous les arbres, à la nuit tombante, avec vue sur le parc.", note: "& Tiramisu géant" },
    { n: "IV",  label: "Soirée",        where: "Salle de Réception", tone: "sage", body: "Ouverture du bal et danse jusqu'à plus soif." },
    { n: "V",   label: "Brunch",        where: "Pelouse de la Piscine", tone: "or", body: "Le lendemain, on récupère doucement au bord de la piscine, brunch en libre-service." },
  ];

  const [active, setActive] = React.useState(0);
  const [trackRef, trackSeen] = useInViewA({ rootMargin: "0px 0px -10% 0px" });
  const item = lieux[active];
  // Tous les dots et accents en or (uniforme)
  const color = A.or;
  const pale  = A.orPale;

  return (
    <div style={{ marginTop: 40, marginBottom: 12, animation: "a-up .5s .35s ease both" }}>
      {/* Plaque — titre centré au-dessus */}
      <div style={{ textAlign: "center" }}>
        <div className="eyebrow" style={{ color: A.sage }}>Le Domaine</div>
        <div style={{ fontFamily: A.display, fontWeight: 700, fontSize: 44, color: A.ink, lineHeight: 1, letterSpacing: -0.5, marginTop: 12 }}>
          Château Sentout
        </div>
        <div style={{ fontFamily: A.italic, fontStyle: "italic", fontSize: 15, color: A.inkSoft, marginTop: 8 }}>
          Là où la fête prend racine
        </div>
        <div style={{ width: 40, height: 1, background: A.or, margin: "16px auto 0", opacity: 0.5 }} />
      </div>

      {/* Plan plein largeur — déborde du padding du wrap */}
      <div style={{
        marginTop: 22, marginLeft: -20, marginRight: -20,
        background: A.paper,
        display: "block", width: "calc(100% + 40px)",
        position: "relative",
      }}>
        <img src="assets/plan-chateau-zones.png" alt="Plan du domaine"
          style={{ width: "100%", height: "auto", display: "block" }} />
      </div>

      {/* Frise horizontale — stations (pattern repris du Programme du site) */}
      <div ref={trackRef} style={{ position: "relative", padding: "30px 0 4px", marginTop: 4 }}>
        {/* Ligne qui se dessine au scroll */}
        <div style={{
          position: "absolute", top: "calc(30px + 9px)", left: "5%", right: "5%", height: 1,
          background: A.rule, transformOrigin: "left center",
          transform: trackSeen ? "scaleX(1)" : "scaleX(0)",
          transition: "transform .9s cubic-bezier(.4,0,.2,1) .25s",
        }} />

        <div style={{
          position: "relative",
          display: "grid",
          gridTemplateColumns: `repeat(${lieux.length}, 1fr)`,
          gap: 0,
        }}>
          {lieux.map((p, i) => {
            const sel = i === active;
            return (
              <button
                key={i}
                onClick={() => setActive(i)}
                aria-label={`${p.label} — ${p.where}`}
                style={{
                  background: "transparent", border: "none", cursor: "pointer", padding: "4px 2px",
                  display: "flex", flexDirection: "column", alignItems: "center", gap: 9,
                  opacity: trackSeen ? 1 : 0,
                  transform: trackSeen ? "translateY(0)" : "translateY(8px)",
                  transition: `opacity .45s ease ${0.3 + i * 0.08}s, transform .45s ease ${0.3 + i * 0.08}s`,
                }}
              >
                <span style={{
                  width: sel ? 20 : 11, height: sel ? 20 : 11, borderRadius: "50%",
                  background: sel ? color : A.white,
                  border: `${sel ? 2 : 1.5}px solid ${color}`,
                  boxShadow: sel ? `0 0 0 5px ${pale}` : "none",
                  transition: "all .25s cubic-bezier(.2,.7,.3,1)",
                  display: "block",
                }} />
                <span style={{
                  fontFamily: A.mono, fontSize: 9, letterSpacing: 1,
                  color: sel ? A.ink : A.inkMute, fontWeight: sel ? 600 : 400,
                  transition: "color .2s",
                  whiteSpace: "nowrap",
                }}>{p.n}</span>
              </button>
            );
          })}
        </div>
      </div>

      {/* Panneau détail du lieu actif — sans cadre, sans fond, juste typographie */}
      <div key={active} style={{
        marginTop: 18, padding: "6px 4px 0",
        animation: "dom-fade .35s cubic-bezier(.2,.7,.3,1) both",
        textAlign: "center",
      }}>
        <div style={{ fontFamily: A.mono, fontSize: 14, letterSpacing: 2.5, color: A.or, textTransform: "uppercase", fontWeight: 700 }}>
          {item.n} · {item.where}
        </div>
        <div style={{
          fontFamily: A.display, fontWeight: 700,
          fontSize: 28, color: A.ink, lineHeight: 1.05, letterSpacing: -0.6,
          marginTop: 8,
        }}>{item.label}</div>
        <div style={{
          marginTop: 10, fontFamily: A.italic, fontStyle: "italic",
          fontSize: 15, color: A.inkSoft, lineHeight: 1.5,
          maxWidth: 480, margin: "10px auto 0",
        }}>{item.body}</div>
        {item.note && (
          <div style={{
            marginTop: 10, fontFamily: A.mono, fontSize: 9, letterSpacing: 1.8,
            color: A.rouge, textTransform: "uppercase", fontWeight: 600,
          }}>★ {item.note}</div>
        )}
      </div>

      <style>{`
        @keyframes dom-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>
    </div>
  );
}