// Before/After phone mockups used inside the hero slider + portfolio cases.

const TimeBar = ({ tint }) => (
  <div className="scr-notch" style={{ background: tint || "#fff", color: tint === "#fff" || !tint ? "#1C1A17" : "#1C1A17" }}>
    <span>9:41</span>
    <span style={{ display: "inline-flex", gap: 4, alignItems: "center" }}>
      <span style={{ display: "inline-block", width: 14, height: 7, border: "1px solid currentColor", borderRadius: 2 }} />
    </span>
  </div>
);

// "Avant" — cluttered, dated mobile page for a fictional brasserie
function AvantMockup() {
  return (
    <div className="scr avant">
      <TimeBar />
      <div className="avant-bar">
        <span>☰</span>
        <span style={{ flex: 1, fontFamily: 'Times New Roman, serif', fontStyle: "italic" }}>www.brasserie-exemple.fr</span>
        <span className="pill">PROMO!</span>
      </div>
      <div className="avant-hero">
        <div className="ah-title">Bienvenue!</div>
        <div className="ah-sub">— La meilleure brasserie depuis 1998 —</div>
      </div>
      <div className="avant-photos">
        <div className="avant-photo" style={{ backgroundImage: "url('assets/pub-storefront.png')", backgroundSize: "cover", backgroundPosition: "center 30%" }}></div>
        <div className="avant-photo v2" style={{ backgroundImage: "url('assets/pub-bar.png')", backgroundSize: "cover", backgroundPosition: "center center" }}></div>
        <div className="avant-photo v3" style={{ backgroundImage: "url('assets/pub-room.png')", backgroundSize: "cover", backgroundPosition: "center center" }}></div>
      </div>
      <div className="avant-text">
        <div className="all-caps">!! Nouveau menu de printemps !!</div>
        Cliquez ici pour télécharger notre PDF menu (mis à jour Octobre 2022). Voir nos plats, formule du midi, suggestion du chef et bien plus encore...
      </div>
      <div className="avant-mess">
        <div className="row"><span>Téléphone:</span><span>01 42 ... ... </span></div>
        <div className="row"><span>Ouvert:</span><span>tlj sauf dim/lun?</span></div>
        <div className="row"><span>Adresse:</span><span>voir contact →</span></div>
      </div>
      <div className="avant-cta">CLIQUEZ ICI POUR RÉSERVER!!!</div>
      <div className="avant-footer">© 2014 Tous droits réservés · Mentions légales · Plan du site · Webmaster</div>
    </div>
  );
}

// "Après" — clean modern mobile page for the same fictional brasserie
function ApresMockup() {
  return (
    <div className="scr apres">
      <TimeBar />
      <div className="apres-top">
        <div className="apres-logo">Brasserie<span className="dot">.</span></div>
        <div className="apres-menu" aria-hidden="true" />
      </div>
      <div className="apres-hero">
        <div className="apres-eyebrow">Paris 11e · depuis 1998</div>
        <div className="apres-title">Cuisine de saison, <em>servie sans façon.</em></div>
        <div className="apres-sub">
          Formule du midi 19 €. Bistronomie le soir. Terrasse ouverte d'avril à octobre.
        </div>
        <div className="apres-ctas">
          <div className="apres-btn solid">Réserver une table</div>
          <div className="apres-btn ghost">Voir la carte</div>
        </div>
      </div>
      <div className="apres-photo" style={{ backgroundImage: "url('assets/pub-terrace.png')" }} />
      <div className="apres-gallery">
        <div className="apres-thumb" style={{ backgroundImage: "url('assets/pub-interior.png')" }} />
        <div className="apres-thumb" style={{ backgroundImage: "url('assets/pub-room.png')" }} />
      </div>
      <div className="apres-info">
        <div className="row"><span className="lbl">Aujourd'hui</span><span className="val">12h–14h30 · 19h–22h30</span></div>
        <div className="row"><span className="lbl">Téléphone</span><span className="val">01 43 57 22 09</span></div>
        <div className="row"><span className="lbl">Adresse</span><span className="val">14 rue Oberkampf</span></div>
      </div>
      <div className="apres-foot">
        <span>Carte</span><span>Réserver</span><span>Itinéraire</span>
      </div>
    </div>
  );
}

// Tiny mockups for portfolio cards — same vocabulary as Apres but tinted
function CasePreview({ tone = "brasserie" }) {
  const palettes = {
    brasserie: {
      bg: "linear-gradient(160deg, #e9d9b8, #b89455)",
      tag: "Le Comptoir · fictif",
      tagline: "Cuisine de quartier, juste comme il faut.",
    },
    salon: {
      bg: "linear-gradient(160deg, #e6dbcf, #8a7864)",
      tag: "Atelier Lune · fictif",
      tagline: "Coupes nettes. Rendez-vous en deux clics.",
    },
    galerie: {
      bg: "linear-gradient(160deg, #d8d3c4, #5a5246)",
      tag: "Galerie 11 · fictif",
      tagline: "Vernissages, artistes, programme du mois.",
    },
  };
  const p = palettes[tone] || palettes.brasserie;
  return (
    <div className="case-mockup" style={{ background: "var(--bg-soft)" }}>
      <div style={{ position: "absolute", inset: 0, background: p.bg, opacity: 0.7 }} />
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 4px, transparent 4px 14px)",
      }} />
      <div style={{
        position: "absolute", left: "50%", top: "50%",
        transform: "translate(-50%, -50%)",
        width: "60%", maxWidth: 220,
        background: "var(--paper)",
        border: "1px solid var(--line)",
        borderRadius: 14,
        padding: "14px 14px 16px",
        boxShadow: "0 18px 40px -16px rgba(28,26,23,0.35)",
        fontFamily: "var(--sans)",
      }}>
        <div style={{ fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--gold-deep)" }}>
          {p.tag}
        </div>
        <div style={{ fontFamily: "var(--serif)", fontSize: 17, lineHeight: 1.1, marginTop: 6, fontWeight: 500 }}>
          {p.tagline}
        </div>
        <div style={{ display: "flex", gap: 6, marginTop: 10 }}>
          <div style={{ flex: 1, background: "var(--ink)", color: "var(--paper)", fontSize: 9, textAlign: "center", padding: "5px 6px", borderRadius: 999, fontWeight: 600 }}>Réserver</div>
          <div style={{ flex: 1, border: "1px solid var(--line-strong)", color: "var(--ink)", fontSize: 9, textAlign: "center", padding: "5px 6px", borderRadius: 999, fontWeight: 600 }}>Itinéraire</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AvantMockup, ApresMockup, CasePreview });