// site/app-link.jsx — Points d'entrée vers l'App invité depuis le site.
//
// 5 surfaces différentes selon où on est sur le site :
//   1. <AppLinkBanner/>      bandeau discret au-dessus de la nav (dismissible)
//   2. <AppLinkNavButton/>   bouton secondaire dans la nav sticky (à côté du RSVP)
//   3. <AppLinkSection/>     section pleine largeur dédiée, après le RSVP (teaser des 7 features)
//   4. <AppLinkPostRsvpCTA/> CTA dans l'écran "thanks" du RSVP (flow naturel)
//   5. <AppLinkFaqCard/>     petite carte rappel dans la colonne gauche de la FAQ
//
// Le lien va vers "App invité Enora & Antoine.html" (même dossier).

const APP_URL = "App invité Enora & Antoine.html";
const APP_BANNER_DISMISS_KEY = "ea-site:app-banner-dismissed";

// ─────────────────────────────────────────────────────────
// 1) Bandeau au-dessus de la nav (dismissible)
// ─────────────────────────────────────────────────────────
function AppLinkBanner() {
  const [hidden, setHidden] = React.useState(() => {
    try { return localStorage.getItem(APP_BANNER_DISMISS_KEY) === "1"; } catch { return false; }
  });
  if (hidden) return null;
  const dismiss = () => {
    try { localStorage.setItem(APP_BANNER_DISMISS_KEY, "1"); } catch {}
    setHidden(true);
  };
  return (
    <div style={{
      width: "100%", background: T.rouge, color: T.white,
      padding: "10px 20px",
      display: "flex", justifyContent: "center", alignItems: "center", gap: 14, flexWrap: "wrap",
      position: "relative",
    }}>
      <span style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 3, textTransform: "uppercase", fontWeight: 600 }}>
        ♥ Nouveau
      </span>
      <span style={{ fontFamily: T.italic, fontStyle: "italic", fontSize: 14, color: "rgba(255,255,255,0.95)" }}>
        L'app invité est ouverte — quiz, anecdotes, paris, plan de table…
      </span>
      <a href={APP_URL} style={{
        fontFamily: T.mono, fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
        color: T.white, textDecoration: "none", padding: "5px 12px",
        background: "rgba(255,255,255,0.16)", border: "1px solid rgba(255,255,255,0.32)",
        fontWeight: 600,
      }}>↗ Ouvrir l'app</a>
      <button onClick={dismiss} style={{
        position: "absolute", right: 10, top: "50%", transform: "translateY(-50%)",
        background: "transparent", border: "none", color: "rgba(255,255,255,0.7)",
        fontFamily: T.mono, fontSize: 14, cursor: "pointer", padding: "4px 8px",
      }} aria-label="Masquer">×</button>
    </div>
  );
}

// ─────────────────────────────────────────────────────────
// 2) Bouton secondaire dans la nav sticky (à côté du RSVP)
// ─────────────────────────────────────────────────────────
function AppLinkNavButton({ mobile = false }) {
  if (mobile) {
    return (
      <a href={APP_URL} style={{
        marginTop: 10, padding: "13px 16px",
        background: "transparent", color: T.white, border: `1.5px solid ${T.or}`,
        fontFamily: T.mono, fontSize: 11, letterSpacing: 3, textTransform: "uppercase",
        fontWeight: 600, cursor: "pointer", textAlign: "center", textDecoration: "none",
        display: "block",
      }}>★ L'app invité</a>
    );
  }
  return (
    <a href={APP_URL} style={{
      background: "transparent", color: T.or, border: `1.5px solid ${T.or}`,
      padding: "8px 14px", fontFamily: T.mono, fontSize: 10, letterSpacing: 2,
      textTransform: "uppercase", fontWeight: 600, cursor: "pointer", textDecoration: "none",
      transition: "all .15s",
    }}
      onMouseEnter={(e) => { e.currentTarget.style.background = T.or; e.currentTarget.style.color = T.ink; }}
      onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = T.or; }}
    >★ App invité</a>
  );
}

// ─────────────────────────────────────────────────────────
// 3) Section dédiée pleine largeur après le RSVP — teaser des features
// ─────────────────────────────────────────────────────────
function AppLinkSection() {
  const [headerRef, headerSeen] = useInView();
  const features = [
    { icon: "♦", title: "Plan de table",      body: "Trouvez votre tablée et votre gîte d'un coup d'œil.", color: T.sage || "#7E8F75" },
    { icon: "★", title: "Concours d'anecdotes", body: "Soumettez une vraie et une fausse anecdote sur nous. Le jour J on vote.", color: T.rouge, hot: true },
    { icon: "Q", title: "Le Grand Quiz",       body: "30 questions sur nous, 2 manches, badges et classement.", color: T.rouge },
    { icon: "♠", title: "Place your bets",    body: "10 paris ludiques avant le grand jour.", color: T.rougeDeep || "#8C3A2E" },
    { icon: "♣", title: "Le Carnet scellé",    body: "Un message à ouvrir le jour J, dans 1 an ou dans 10 ans.", color: T.or },
    { icon: "●", title: "Les Paparazzis",     body: "Un prompt par semaine, une photo, une légende.", color: T.ink },
    { icon: "✦", title: "La Galerie",         body: "Vos plus beaux clichés du mariage, partagés.", color: T.orDeep || "#8E7128" },
  ];

  return (
    <Section id="section-app" bg={T.paper} washHue={20} washOpacity={0.22} paddingTop={100} paddingBottom={100}>
      <div ref={headerRef} style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 56px" }}>
        <div style={{
          fontFamily: T.mono, fontSize: 11, letterSpacing: 4, textTransform: "uppercase", color: T.rouge,
          opacity: headerSeen ? 1 : 0, transform: headerSeen ? "translateY(0)" : "translateY(12px)",
          transition: "opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1)",
        }}>
          ♥ L'app invité ♥
        </div>
        <div style={{
          fontFamily: T.bold, fontWeight: 700, fontSize: "clamp(44px, 7vw, 76px)", color: T.ink,
          lineHeight: 0.95, letterSpacing: -1.5, marginTop: 18,
          opacity: headerSeen ? 1 : 0, transform: headerSeen ? "translateY(0)" : "translateY(12px)",
          transition: "opacity .65s cubic-bezier(.2,.7,.3,1) .1s, transform .65s cubic-bezier(.2,.7,.3,1) .1s",
        }}>
          On a préparé <span style={{ fontFamily: T.italic, fontStyle: "italic", color: T.rouge }}>sept rendez-vous</span><br/>pour préparer la fête.
        </div>
        <div style={{
          fontFamily: T.italic, fontStyle: "italic", fontSize: "clamp(16px, 2vw, 19px)",
          color: T.inkSoft, lineHeight: 1.55, maxWidth: 600, margin: "22px auto 0",
          opacity: headerSeen ? 1 : 0, transform: headerSeen ? "translateY(0)" : "translateY(12px)",
          transition: "opacity .6s cubic-bezier(.2,.7,.3,1) .2s, transform .6s cubic-bezier(.2,.7,.3,1) .2s",
        }}>
          Une mini-app pour les invités : quiz, paris ludiques, anecdotes à soumettre, plan de table, carnet scellé, galerie photo et Paparazzi. Pas d'installation — un simple lien.
        </div>
        <div style={{
          marginTop: 36,
          opacity: headerSeen ? 1 : 0,
          transition: "opacity .6s cubic-bezier(.2,.7,.3,1) .3s",
        }}>
          <a href={APP_URL} style={{
            display: "inline-flex", alignItems: "center", gap: 12,
            padding: "16px 28px", background: T.rouge, color: T.white,
            fontFamily: T.mono, fontSize: 12, letterSpacing: 3.5, textTransform: "uppercase",
            fontWeight: 600, textDecoration: "none",
            boxShadow: `0 8px 28px ${T.rouge}55`,
            transition: "all .2s",
          }}
            onMouseEnter={(e) => e.currentTarget.style.transform = "translateY(-2px)"}
            onMouseLeave={(e) => e.currentTarget.style.transform = "translateY(0)"}
          >★ Ouvrir l'app invité →</a>
          <div style={{ marginTop: 14, fontFamily: T.mono, fontSize: 10, letterSpacing: 2, color: T.inkMute, textTransform: "uppercase" }}>
            On vous demandera votre nom à l'arrivée
          </div>
        </div>
      </div>

      {/* Grid des 7 features */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
        gap: 16,
        maxWidth: 1100, margin: "0 auto",
      }}>
        {features.map((f, i) => (
          <Reveal key={f.title} delay={Math.min(0.05 + i * 0.05, 0.4)}>
            <a href={`${APP_URL}#${["plan","anec","quiz","bets","carnet","papa","gal"][i]}`} style={{
              display: "block", padding: "24px 22px",
              background: T.white, border: `1px solid ${T.ruleSoft}`,
              borderLeft: `4px solid ${f.color}`,
              textDecoration: "none", color: T.ink,
              position: "relative", transition: "all .2s",
              boxShadow: T.shadow,
              minHeight: 160,
            }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = "translateY(-3px)";
                e.currentTarget.style.boxShadow = `0 12px 32px ${f.color}33`;
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = "translateY(0)";
                e.currentTarget.style.boxShadow = T.shadow;
              }}
            >
              {f.hot && (
                <div style={{
                  position: "absolute", top: 10, right: 10,
                  fontFamily: T.mono, fontSize: 8, letterSpacing: 2, fontWeight: 600,
                  background: T.rouge, color: T.white,
                  padding: "3px 7px", textTransform: "uppercase",
                }}>★ À ne pas rater</div>
              )}
              <div style={{
                width: 42, height: 42, borderRadius: "50%",
                background: f.color + "22", border: `1.5px solid ${f.color}`,
                display: "flex", alignItems: "center", justifyContent: "center",
                fontFamily: T.bold, fontSize: 18, color: f.color, fontWeight: 700,
              }}>{f.icon}</div>
              <div style={{ fontFamily: T.bold, fontWeight: 700, fontSize: 19, color: T.ink, marginTop: 14, letterSpacing: -0.3 }}>
                {f.title}
              </div>
              <div style={{ fontFamily: T.sans, fontSize: 13.5, color: T.inkSoft, lineHeight: 1.5, marginTop: 6 }}>
                {f.body}
              </div>
            </a>
          </Reveal>
        ))}
      </div>

      {/* Pied : rappel "pensez à confirmer" */}
      <div style={{ marginTop: 56, textAlign: "center" }}>
        <div style={{
          display: "inline-block", padding: "12px 24px",
          background: T.white, border: `1px dashed ${T.rule}`,
          fontFamily: T.italic, fontStyle: "italic", fontSize: 13.5, color: T.inkSoft,
        }}>
          <span style={{ color: T.rouge, fontWeight: 600, fontStyle: "normal" }}>Petit rappel</span> — pensez à <a href="#section-rsvp" style={{ color: T.ink, textDecoration: "underline" }}>confirmer votre présence</a> avant de plonger dans l'app.
        </div>
      </div>
    </Section>
  );
}

// ─────────────────────────────────────────────────────────
// 4) CTA dans l'écran "thanks" du RSVP — flow naturel
// ─────────────────────────────────────────────────────────
function AppLinkPostRsvpCTA() {
  return (
    <div style={{
      marginTop: 32, padding: "28px 28px 26px",
      background: `linear-gradient(135deg, ${T.rouge} 0%, ${T.rougeDeep || "#8C3A2E"} 100%)`,
      color: T.white, position: "relative", overflow: "hidden",
      textAlign: "left",
    }}>
      <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 3, textTransform: "uppercase", color: "rgba(255,255,255,0.85)", fontWeight: 600 }}>
        ♥ Maintenant
      </div>
      <div style={{ marginTop: 8, fontFamily: T.bold, fontWeight: 700, fontSize: "clamp(24px, 4vw, 32px)", color: T.white, lineHeight: 1.1, letterSpacing: -0.5 }}>
        Plongez dans l'app invité.
      </div>
      <div style={{ marginTop: 10, fontFamily: T.italic, fontStyle: "italic", fontSize: 15, color: "rgba(255,255,255,0.9)", lineHeight: 1.55, maxWidth: 480 }}>
        On vous attend dès maintenant pour le quiz, les anecdotes à soumettre, les paris du jour J, votre gîte, votre table… et le carnet à ouvrir dans 10 ans.
      </div>
      <a href={APP_URL} style={{
        display: "inline-flex", alignItems: "center", gap: 10,
        marginTop: 18, padding: "12px 22px",
        background: T.white, color: T.ink, textDecoration: "none",
        fontFamily: T.mono, fontSize: 11, letterSpacing: 2.5, textTransform: "uppercase", fontWeight: 600,
      }}>★ Ouvrir l'app invité →</a>
    </div>
  );
}

// ─────────────────────────────────────────────────────────
// 5) Petite carte rappel dans la colonne gauche de la FAQ
// ─────────────────────────────────────────────────────────
function AppLinkFaqCard() {
  return (
    <a href={APP_URL} style={{
      display: "block", marginTop: 26, padding: "18px 20px",
      background: T.ink, color: T.white, textDecoration: "none",
      maxWidth: 320, position: "relative",
      transition: "all .2s",
    }}
      onMouseEnter={(e) => e.currentTarget.style.transform = "translateY(-2px)"}
      onMouseLeave={(e) => e.currentTarget.style.transform = "translateY(0)"}
    >
      <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 3, textTransform: "uppercase", color: T.or, fontWeight: 600 }}>
        ★ Côté coulisses
      </div>
      <div style={{ marginTop: 8, fontFamily: T.bold, fontWeight: 700, fontSize: 20, color: T.white, lineHeight: 1.2, letterSpacing: -0.3 }}>
        L'app invité
      </div>
      <div style={{ marginTop: 8, fontFamily: T.italic, fontStyle: "italic", fontSize: 13.5, color: "rgba(255,255,255,0.75)", lineHeight: 1.5 }}>
        Quiz, anecdotes, paris, carnet scellé, plan de table…
      </div>
      <div style={{ marginTop: 12, fontFamily: T.mono, fontSize: 10, letterSpacing: 2.5, color: T.or, textTransform: "uppercase", display: "flex", alignItems: "center", gap: 6 }}>
        Ouvrir <span>→</span>
      </div>
    </a>
  );
}

Object.assign(window, {
  AppLinkBanner, AppLinkNavButton, AppLinkSection, AppLinkPostRsvpCTA, AppLinkFaqCard,
});