const { useState, useEffect, useRef } = React;

/* ===========================================================
   RESPONSIVE — viewport hook
   =========================================================== */
function useMediaQuery(query) {
  const [matches, setMatches] = useState(() =>
    typeof window !== "undefined" ? window.matchMedia(query).matches : false
  );
  useEffect(() => {
    const mql = window.matchMedia(query);
    const handler = (e) => setMatches(e.matches);
    setMatches(mql.matches);
    mql.addEventListener ? mql.addEventListener("change", handler) : mql.addListener(handler);
    return () => {
      mql.removeEventListener ? mql.removeEventListener("change", handler) : mql.removeListener(handler);
    };
  }, [query]);
  return matches;
}
const MOBILE = "(max-width: 768px)";
const TABLET = "(max-width: 1080px)";

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#f7f0e2", "#2a1810", "#c1813c"],
  "showTraditional": true
}/*EDITMODE-END*/;

/* ===========================================================
   DATA
   =========================================================== */
const PRODUCTS = [
  { id: 1, cat: "viennoiserie", name: "Croissant au beurre", subtitle: "feuilleté 72h", desc: "Pâte feuilletée pliée à la main, beurre fermier, sortie à 6h du matin.", price: 1.8, weight: "85g", tag: "Signature", img: "assets/croissants.jpg", color: "#caa86a" },
  { id: 2, cat: "viennoiserie", name: "Pain au chocolat", subtitle: "double barre noire", desc: "Deux barres de chocolat noir 70%, feuilletage doré à cœur.", price: 2.2, weight: "95g", img: null, color: "#7a4a2a" },
  { id: 3, cat: "viennoiserie", name: "Brioche pistache", subtitle: "filée à la main", desc: "Brioche tressée, crème de pistache, sucre perlé.", price: 3.5, weight: "180g", tag: "Nouveau", img: null, color: "#a8c478" },
  { id: 4, cat: "sale", name: "Pâté thon", subtitle: "harissa douce, olives", desc: "Thon Méditerranée, œuf, harissa et olives — tout maison.", price: 3.5, weight: "200g", img: null, color: "#c4a978" },
  { id: 5, cat: "sale", name: "Pâté fromage", subtitle: "triple fromage", desc: "Emmental, mozzarella, feta. Herbes du jardin, pâte brisée maison.", price: 3.2, weight: "200g", img: null, color: "#e8d49a" },
  { id: 6, cat: "sale", name: "Pâté poulet", subtitle: "champignons & béchamel", desc: "Poulet rôti effiloché, champignons de Paris, béchamel.", price: 4.0, weight: "220g", img: null, color: "#b88a5a" },
  { id: 7, cat: "oriental", name: "Mhalbiya", subtitle: "amandes & miel", desc: "Rouleaux croustillants garnis d'amandes pilées, parfumés au miel d'oranger.", price: 5.5, weight: "150g", tag: "Tradition", img: "assets/mhalbiya.jpg", color: "#b89858" },
  { id: 8, cat: "oriental", name: "Deblas", subtitle: "feuilles d'or au miel", desc: "Pâte fine roulée en rose, frite, trempée dans le miel, parsemée de sésame.", price: 4.5, weight: "120g", tag: "Maison", img: "assets/deblas.jpg", color: "#d9a958" },
  { id: 9, cat: "oriental", name: "Zlabia", subtitle: "miel & sésame doré", desc: "Spirales croustillantes au miel d'oranger, sésame doré.", price: 4.0, weight: "130g", img: "assets/zlabia.jpg", color: "#c98b3a" },
];

const CATS = [
  { id: "all", label: "Toute la carte" },
  { id: "viennoiserie", label: "Viennoiseries" },
  { id: "sale", label: "Salés" },
  { id: "oriental", label: "Pâtisseries orientales" },
];

/* ===========================================================
   ICONS — minimal hairline
   =========================================================== */
const Icon = {
  arrow: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  arrowUR: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...p}><path d="M7 17L17 7M9 7h8v8"/></svg>,
  plus: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" {...p}><path d="M12 5v14M5 12h14"/></svg>,
  bag: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.1" {...p}><path d="M5 8h14l-1 12H6L5 8zM9 8V5a3 3 0 0 1 6 0v3"/></svg>,
  close: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" {...p}><path d="M6 6l12 12M18 6L6 18"/></svg>,
  menu: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" {...p}><path d="M4 7h16M4 12h16M4 17h16"/></svg>,
  pin: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.1" {...p}><path d="M12 22s7-7.5 7-13a7 7 0 0 0-14 0c0 5.5 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></svg>,
  clock: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.1" {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
  phone: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.1" {...p}><path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>,
  insta: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.1" {...p}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.7" fill="currentColor"/></svg>,
  fb: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.1" {...p}><path d="M14 8h2.5V5H14a3 3 0 0 0-3 3v2H9v3h2v8h3v-8h2.5l.5-3H14z"/></svg>,
  wa: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.1" {...p}><path d="M3 21l1.6-5A8.5 8.5 0 1 1 8 19.4L3 21z"/></svg>,
};

/* ===========================================================
   ORNAMENT — small decorative SVG flourish
   =========================================================== */
function Flourish({ color = "currentColor", width = 96 }) {
  return (
    <svg width={width} height="14" viewBox="0 0 96 14" fill="none">
      <line x1="0" y1="7" x2="34" y2="7" stroke={color} strokeWidth="0.6"/>
      <circle cx="38" cy="7" r="1.3" fill={color}/>
      <path d="M44 7 Q48 2, 52 7 T60 7" stroke={color} strokeWidth="0.7" fill="none"/>
      <circle cx="64" cy="7" r="1.3" fill={color}/>
      <line x1="68" y1="7" x2="96" y2="7" stroke={color} strokeWidth="0.6"/>
    </svg>
  );
}

/* ===========================================================
   BRAND
   =========================================================== */
function CroissantMark({ size = 26, color = "currentColor" }) {
  return (
    <svg width={size} height={size * 0.7} viewBox="0 0 40 28" fill="none">
      <path d="M4 22 C4 22, 7 7, 20 7 C33 7, 36 22, 36 22 L33.5 22 C33.5 22, 30.5 11, 20 11 C9.5 11, 6.5 22, 6.5 22 Z" fill={color}/>
      <path d="M10.5 20 C11.5 16, 13.5 14, 15.5 13" stroke={color} strokeWidth="0.9" strokeLinecap="round"/>
      <path d="M15.5 19 C16.5 15, 18.5 13, 20.5 12.3" stroke={color} strokeWidth="0.9" strokeLinecap="round"/>
      <path d="M20.5 19 C21.5 15, 23.5 13, 25.5 12.3" stroke={color} strokeWidth="0.9" strokeLinecap="round"/>
      <path d="M25.5 20 C26.5 16, 28 14, 30 13" stroke={color} strokeWidth="0.9" strokeLinecap="round"/>
    </svg>
  );
}

function Brandmark({ size = "md", color }) {
  const c = color || "var(--ink)";
  const fs = size === "lg" ? 32 : size === "sm" ? 16 : 22;
  return (
    <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 4, lineHeight: 1 }}>
      <CroissantMark size={fs * 1.0} color={c} />
      <div className="serif" style={{
        fontFamily: "Cormorant Garamond",
        fontSize: fs,
        letterSpacing: "0.14em",
        color: c,
        fontWeight: 500,
      }}>PASTICCINI</div>
    </div>
  );
}

/* ===========================================================
   TOP BAR
   =========================================================== */
function TopBar() {
  const mob = useMediaQuery(MOBILE);
  return (
    <div style={{
      background: "var(--ink)", color: "var(--bg)",
      padding: mob ? "7px 18px" : "8px 24px",
      display: "flex", justifyContent: "space-between", alignItems: "center",
      fontSize: mob ? 11 : 12,
      letterSpacing: "0.04em",
    }}>
      <div style={{ display: "flex", gap: mob ? 12 : 28, alignItems: "center" }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--caramel-light)" }}></span>
          Ouvert · 06h – 20h
        </span>
        {!mob && <span style={{ opacity: 0.5 }}>·</span>}
        {!mob && <span>Livraison à Bizerte centre</span>}
      </div>
      {!mob && (
        <div className="italic" style={{ fontSize: 14, color: "var(--caramel-light)" }}>
          « Pétri à la main, cuit chaque matin »
        </div>
      )}
      <div style={{ display: "flex", gap: mob ? 14 : 18 }}>
        <a href="tel:+21672432100" style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <Icon.phone style={{ width: 13, height: 13 }} /> 72 432 100
        </a>
        {!mob && (
          <a href="https://instagram.com/pasticcini" style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <Icon.insta style={{ width: 13, height: 13 }} /> @pasticcini
          </a>
        )}
      </div>
    </div>
  );
}

/* ===========================================================
   NAV — centered, elegant
   =========================================================== */
function Nav({ cartCount, onCart, onNav }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const mob = useMediaQuery(MOBILE);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 60);
    window.addEventListener("scroll", f);
    return () => window.removeEventListener("scroll", f);
  }, []);

  const left = [["La boutique", "shop"], ["Spécialités", "specialty"]];
  const right = [["La maison", "about"], ["Nous trouver", "contact"]];
  const all = [...left, ...right];
  const go = (id) => { setMenuOpen(false); onNav(id); };

  const linkStyle = { fontSize: 13, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--ink-2)" };
  const iconBtn = {
    background: "transparent", border: "1px solid var(--line)", borderRadius: 999,
    width: 42, height: 42, display: "flex", alignItems: "center", justifyContent: "center",
  };

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled || menuOpen ? "rgba(247, 240, 226, 0.96)" : "var(--bg)",
      backdropFilter: scrolled || menuOpen ? "blur(12px)" : "none",
      borderBottom: "1px solid var(--line)",
      transition: "all 0.3s ease",
    }}>
      {mob ? (
        <div style={{
          padding: scrolled ? "12px 18px" : "16px 18px",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          transition: "padding 0.3s ease",
        }}>
          <button onClick={() => setMenuOpen(o => !o)} aria-label="Menu" style={iconBtn}>
            {menuOpen ? <Icon.close style={{ width: 18, height: 18 }} /> : <Icon.menu style={{ width: 18, height: 18 }} />}
          </button>
          <a href="#top" onClick={(e) => { e.preventDefault(); go("top"); }}>
            <Brandmark size="sm" />
          </a>
          <button onClick={onCart} aria-label="Panier" style={{ ...iconBtn, position: "relative" }}>
            <Icon.bag style={{ width: 17, height: 17 }} />
            {cartCount > 0 && (
              <span style={{
                position: "absolute", top: -4, right: -4,
                background: "var(--caramel-deep)", color: "var(--paper)",
                borderRadius: 999, minWidth: 18, height: 18, fontSize: 10,
                display: "flex", alignItems: "center", justifyContent: "center", padding: "0 4px",
              }}>{cartCount}</span>
            )}
          </button>
        </div>
      ) : (
        <div style={{
          padding: scrolled ? "16px 48px" : "28px 48px",
          display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 48,
          transition: "padding 0.3s ease",
        }}>
          <nav style={{ display: "flex", gap: 32 }}>
            {left.map(([l, id]) => (
              <a key={id} href={`#${id}`} onClick={(e) => { e.preventDefault(); onNav(id); }} style={linkStyle}>
                {l}
              </a>
            ))}
          </nav>
          <a href="#top" onClick={(e) => { e.preventDefault(); onNav("top"); }}>
            <Brandmark size={scrolled ? "sm" : "md"} />
          </a>
          <nav style={{ display: "flex", gap: 32, justifyContent: "flex-end", alignItems: "center" }}>
            {right.map(([l, id]) => (
              <a key={id} href={`#${id}`} onClick={(e) => { e.preventDefault(); onNav(id); }} style={linkStyle}>
                {l}
              </a>
            ))}
            <button onClick={onCart} style={{
              background: "transparent", border: "1px solid var(--line)",
              borderRadius: 999, padding: "10px 16px", fontSize: 12, fontWeight: 500,
              letterSpacing: "0.06em", textTransform: "uppercase",
              display: "flex", alignItems: "center", gap: 8,
            }}>
              <Icon.bag style={{ width: 14, height: 14 }} /> Panier ({cartCount})
            </button>
          </nav>
        </div>
      )}

      {mob && menuOpen && (
        <nav style={{ borderTop: "1px solid var(--line)", padding: "6px 18px 16px", display: "grid", gap: 0 }}>
          {all.map(([l, id]) => (
            <a key={id} href={`#${id}`} onClick={(e) => { e.preventDefault(); go(id); }}
               style={{ fontSize: 15, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--ink-2)", padding: "15px 4px", borderBottom: "1px solid var(--line-soft)" }}>
              {l}
            </a>
          ))}
        </nav>
      )}
    </header>
  );
}

/* ===========================================================
   HERO
   =========================================================== */
function Hero({ onNav }) {
  const mob = useMediaQuery(MOBILE);
  return (
    <section id="top" style={{ padding: mob ? "32px 20px 56px" : "60px 48px 100px", position: "relative" }}>
      <div style={{
        display: "grid", gridTemplateColumns: mob ? "1fr" : "1.05fr 1fr",
        gap: mob ? 48 : 80, alignItems: "center",
        maxWidth: 1440, margin: "0 auto",
        minHeight: mob ? "auto" : "calc(100vh - 200px)",
      }}>
        {/* LEFT — TEXT */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 28, display: "flex", alignItems: "center", gap: 14 }}>
            <Flourish color="var(--caramel-deep)" width={48} />
            Pâtisserie · Bizerte · depuis 2018
          </div>
          <h1 className="serif" style={{
            fontSize: mob ? "clamp(40px, 11.5vw, 60px)" : "clamp(56px, 7.4vw, 116px)",
            lineHeight: 0.96,
            margin: "0 0 28px",
            fontWeight: 400,
            letterSpacing: "-0.018em",
          }}>
            L'art doux<br/>
            <span className="italic" style={{ color: "var(--caramel-deep)" }}>du croissant</span>,<br/>
            <span className="italic" style={{ color: "var(--caramel-deep)" }}>du miel </span>
            et de la patience.
          </h1>
          <p style={{ fontSize: 18, color: "var(--ink-2)", lineHeight: 1.65, maxWidth: 460, margin: "0 0 40px" }}>
            Une maison de pâtisserie au cœur de Bizerte, où le feuilletage français
            rencontre la générosité tunisienne. Tout est fait à la main, cuit du jour, jamais conservé.
          </p>
          <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
            <button onClick={() => onNav("shop")} className="btn-primary">
              Découvrir la carte <Icon.arrow style={{ width: 15, height: 15 }} />
            </button>
            <button onClick={() => onNav("contact")} className="btn-ghost">
              Nous trouver
            </button>
          </div>

          {/* TRUST */}
          <div style={{
            marginTop: 64, paddingTop: 32,
            borderTop: "1px solid var(--line)",
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24,
          }}>
            {[
              ["72h", "de feuilletage"],
              ["100%", "fait maison"],
              ["4.9★", "312 avis Google"],
            ].map(([n, l], i) => (
              <div key={i}>
                <div className="serif" style={{ fontSize: 36, color: "var(--caramel-deep)", fontWeight: 500, lineHeight: 1, letterSpacing: "-0.02em" }}>{n}</div>
                <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 8, letterSpacing: "0.04em" }}>{l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* RIGHT — PHOTO COMPOSITION */}
        <div style={{ position: "relative", height: mob ? 430 : 680 }}>
          {/* Background frame */}
          <div style={{
            position: "absolute",
            top: 20, right: 20, bottom: 20, left: 60,
            border: "1px solid var(--caramel)",
            zIndex: 0,
          }}></div>

          {/* Main photo */}
          <div style={{
            position: "absolute",
            top: 0, right: 60, bottom: 60, left: 0,
            overflow: "hidden",
            boxShadow: "0 30px 60px rgba(42, 24, 16, 0.18)",
            zIndex: 1,
          }}>
            <img src="assets/croissants.jpg" alt="Croissants Pasticcini" style={{
              width: "100%", height: "100%", objectFit: "cover",
            }}/>
          </div>

          {/* small photo overlay */}
          <div style={{
            position: "absolute",
            bottom: 0, right: 0,
            width: 220, height: 280,
            overflow: "hidden",
            border: "8px solid var(--bg)",
            boxShadow: "0 18px 40px rgba(42, 24, 16, 0.2)",
            zIndex: 2,
          }}>
            <img src="assets/mhalbiya.jpg" alt="Mhalbiya" style={{
              width: "100%", height: "100%", objectFit: "cover",
            }}/>
          </div>

          {/* circular badge */}
          <div style={{
            position: "absolute",
            top: 30, left: 0,
            width: 130, height: 130,
            borderRadius: "50%",
            background: "var(--caramel)",
            color: "var(--paper)",
            display: "flex", flexDirection: "column",
            alignItems: "center", justifyContent: "center",
            transform: "rotate(-12deg)",
            boxShadow: "0 10px 30px rgba(193, 129, 60, 0.4)",
            zIndex: 3,
          }}>
            <div className="italic" style={{ fontSize: 13, opacity: 0.85 }}>fournée du</div>
            <div className="serif" style={{ fontSize: 36, fontWeight: 500, lineHeight: 1 }}>matin</div>
            <div className="italic" style={{ fontSize: 13, opacity: 0.85, marginTop: 2 }}>à 6 heures</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===========================================================
   MARQUEE — italic caramel band
   =========================================================== */
function Marquee() {
  const mob = useMediaQuery(MOBILE);
  const items = ["Croissant au beurre", "Pâté thon harissa", "Mhalbiya aux amandes", "Brioche pistache", "Deblas au miel", "Pain au chocolat", "Zlabia sésame", "Pâté poulet"];
  return (
    <section style={{
      background: "var(--caramel)", color: "var(--paper)",
      padding: mob ? "22px 0" : "32px 0", overflow: "hidden",
      borderTop: "1px solid var(--caramel-deep)",
      borderBottom: "1px solid var(--caramel-deep)",
    }}>
      <div style={{
        display: "flex", gap: 64, whiteSpace: "nowrap",
        animation: "marquee 45s linear infinite",
      }}>
        {Array(3).fill(0).map((_, i) => (
          <div key={i} style={{ display: "flex", gap: 64, alignItems: "center" }}>
            {items.map((x, j) => (
              <React.Fragment key={j}>
                <span className="italic" style={{ fontSize: mob ? 26 : 38, letterSpacing: "-0.005em" }}>{x}</span>
                <span style={{ fontSize: 14, opacity: 0.7 }}>✦</span>
              </React.Fragment>
            ))}
          </div>
        ))}
      </div>
      <style>{`@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-33.333%)} }`}</style>
    </section>
  );
}

/* ===========================================================
   PRODUCT CARD
   =========================================================== */
function ProductCard({ p, onAdd, size = "md" }) {
  const [hover, setHover] = useState(false);
  const aspect = size === "tall" ? "3/4" : size === "wide" ? "5/4" : "4/5";
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ position: "relative" }}
    >
      <div style={{
        position: "relative", overflow: "hidden",
        aspectRatio: aspect,
        background: p.img ? "transparent" : `linear-gradient(160deg, ${p.color}, ${p.color}aa)`,
        marginBottom: 18,
      }}>
        {p.img ? (
          <img src={p.img} alt={p.name} style={{
            width: "100%", height: "100%", objectFit: "cover",
            transition: "transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)",
            transform: hover ? "scale(1.04)" : "scale(1)",
          }}/>
        ) : (
          <>
            <div style={{
              position: "absolute", inset: 0,
              background: "radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), transparent 60%)",
            }}></div>
            <div style={{
              position: "absolute", inset: 0,
              display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
              gap: 12, padding: 20, textAlign: "center", color: "rgba(255,255,255,0.94)",
            }}>
              <CroissantMark size={40} color="rgba(255,255,255,0.92)" />
              <div className="serif" style={{ fontSize: 24, fontWeight: 500, lineHeight: 1.1 }}>{p.name}</div>
              <div className="italic" style={{ fontSize: 15, opacity: 0.85 }}>douceur maison · photo à venir</div>
            </div>
          </>
        )}
        {p.tag && (
          <div className="italic" style={{
            position: "absolute", top: 14, left: 14,
            background: "var(--bg)", color: "var(--caramel-deep)",
            padding: "5px 14px",
            fontSize: 15, fontStyle: "italic",
            borderRadius: 999,
          }}>{p.tag}</div>
        )}

        {/* hover add button */}
        <button onClick={() => onAdd(p)} style={{
          position: "absolute", right: 14, bottom: 14,
          width: 44, height: 44, borderRadius: "50%",
          background: "var(--ink)", color: "var(--paper)",
          border: "none",
          display: "flex", alignItems: "center", justifyContent: "center",
          opacity: hover ? 1 : 0,
          transform: hover ? "translateY(0)" : "translateY(8px)",
          transition: "all 0.3s ease",
        }}>
          <Icon.plus style={{ width: 16, height: 16 }} />
        </button>
      </div>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
        <div>
          <h3 className="serif" style={{ fontSize: 24, fontWeight: 500, margin: 0, lineHeight: 1.15 }}>
            {p.name}
          </h3>
          <p className="italic" style={{ fontSize: 16, color: "var(--muted)", margin: "4px 0 0" }}>
            {p.subtitle}
          </p>
        </div>
        <div className="serif" style={{ fontSize: 22, fontWeight: 500, color: "var(--caramel-deep)", whiteSpace: "nowrap" }}>
          {p.price.toFixed(1)} <span style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.04em" }}>DT</span>
        </div>
      </div>
    </div>
  );
}

/* ===========================================================
   CATALOGUE
   =========================================================== */
function Catalogue({ onAdd }) {
  const [filter, setFilter] = useState("all");
  const mob = useMediaQuery(MOBILE);
  const tab = useMediaQuery(TABLET);
  const filtered = filter === "all" ? PRODUCTS : PRODUCTS.filter(p => p.cat === filter);

  return (
    <section id="shop" style={{ padding: mob ? "72px 20px" : tab ? "100px 32px" : "140px 48px", maxWidth: 1440, margin: "0 auto" }}>
      <div style={{ textAlign: "center", marginBottom: 72 }}>
        <div className="eyebrow" style={{ marginBottom: 24, display: "flex", alignItems: "center", gap: 14, justifyContent: "center" }}>
          <Flourish color="var(--caramel-deep)" width={60} />
          La carte
          <Flourish color="var(--caramel-deep)" width={60} />
        </div>
        <h2 className="serif" style={{
          fontSize: "clamp(56px, 6.5vw, 96px)", fontWeight: 400,
          margin: 0, lineHeight: 1, letterSpacing: "-0.02em",
        }}>
          Notre vitrine <span className="italic" style={{ color: "var(--caramel-deep)" }}>du jour.</span>
        </h2>
        <p className="italic" style={{ fontSize: 20, color: "var(--muted)", marginTop: 20 }}>
          Neuf gourmandises, préparées chaque matin avant l'ouverture.
        </p>
      </div>

      {/* FILTER */}
      <div style={{
        display: "flex", justifyContent: "center", gap: 4, flexWrap: "wrap",
        marginBottom: mob ? 40 : 56,
      }}>
        {CATS.map(c => (
          <button key={c.id} onClick={() => setFilter(c.id)} style={{
            background: filter === c.id ? "var(--ink)" : "transparent",
            color: filter === c.id ? "var(--paper)" : "var(--ink-2)",
            border: "1px solid " + (filter === c.id ? "var(--ink)" : "var(--line)"),
            padding: "12px 22px", borderRadius: 999,
            fontSize: 13, letterSpacing: "0.04em",
            transition: "all 0.2s ease",
          }}>{c.label}</button>
        ))}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: mob ? "1fr" : tab ? "repeat(2, 1fr)" : "repeat(3, 1fr)", gap: mob ? 36 : 48 }}>
        {filtered.map(p => <ProductCard key={p.id} p={p} onAdd={onAdd} />)}
      </div>
    </section>
  );
}

/* ===========================================================
   SPECIALTIES — Tunisian sweets feature
   =========================================================== */
function Specialty({ onAdd }) {
  const mob = useMediaQuery(MOBILE);
  const tab = useMediaQuery(TABLET);
  const specs = PRODUCTS.filter(p => p.cat === "oriental");
  return (
    <section id="specialty" style={{
      padding: mob ? "72px 20px" : tab ? "100px 32px" : "140px 48px",
      background: "var(--ink)",
      color: "var(--paper)",
      position: "relative",
    }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: mob ? "1fr" : "1fr 1.4fr", gap: mob ? 28 : 80, alignItems: mob ? "start" : "end", marginBottom: mob ? 48 : 80 }}>
          <div>
            <div className="eyebrow" style={{ color: "var(--caramel-light)", marginBottom: 24, display: "flex", alignItems: "center", gap: 14 }}>
              <Flourish color="var(--caramel-light)" width={48} />
              Spécialités tunisiennes
            </div>
            <h2 className="serif" style={{
              fontSize: "clamp(48px, 5.5vw, 84px)",
              margin: 0, lineHeight: 1.02, letterSpacing: "-0.02em", fontWeight: 400,
            }}>
              Les douceurs <span className="italic" style={{ color: "var(--caramel-light)" }}>de la maison.</span>
            </h2>
          </div>
          <p className="italic" style={{ fontSize: 22, color: "rgba(252, 247, 235, 0.7)", lineHeight: 1.5, margin: 0, maxWidth: 560 }}>
            Recettes héritées des grands-mères de Bizerte. Le miel d'oranger, le sésame doré et les amandes pilées, dans un feuilleté patiemment roulé.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: mob ? "1fr" : tab ? "repeat(2, 1fr)" : "repeat(3, 1fr)", gap: 32 }}>
          {specs.map((p, i) => (
            <SpecCard key={p.id} p={p} idx={i} onAdd={onAdd} />
          ))}
        </div>
      </div>
    </section>
  );
}

function SpecCard({ p, idx, onAdd }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ position: "relative" }}
    >
      <div style={{
        position: "relative", overflow: "hidden",
        aspectRatio: "4/5",
        marginBottom: 24,
      }}>
        {p.img && (
          <img src={p.img} alt={p.name} style={{
            width: "100%", height: "100%", objectFit: "cover",
            transition: "transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)",
            transform: hover ? "scale(1.05)" : "scale(1)",
          }}/>
        )}
        <div style={{
          position: "absolute", top: 16, left: 16,
          color: "var(--paper)",
          padding: "6px 14px",
          border: "1px solid rgba(252,247,235,0.4)",
          borderRadius: 999,
          fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase",
        }}>n° {String(idx + 1).padStart(2, "0")}</div>
      </div>

      <h3 className="serif" style={{ fontSize: 32, fontWeight: 500, margin: "0 0 6px", letterSpacing: "-0.01em" }}>
        {p.name}
      </h3>
      <p className="italic" style={{ fontSize: 18, color: "var(--caramel-light)", margin: "0 0 14px" }}>
        {p.subtitle}
      </p>
      <p style={{ fontSize: 14, color: "rgba(252,247,235,0.65)", margin: "0 0 18px", lineHeight: 1.6, maxWidth: 360 }}>
        {p.desc}
      </p>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 18, borderTop: "1px solid rgba(252,247,235,0.18)" }}>
        <div className="serif" style={{ fontSize: 22, fontWeight: 500, color: "var(--caramel-light)" }}>
          {p.price.toFixed(1)} <span style={{ fontSize: 11, color: "rgba(252,247,235,0.5)", letterSpacing: "0.04em" }}>DT / {p.weight}</span>
        </div>
        <button onClick={() => onAdd(p)} style={{
          background: "transparent", border: "1px solid rgba(252,247,235,0.5)",
          color: "var(--paper)", borderRadius: 999,
          padding: "8px 16px", fontSize: 12, letterSpacing: "0.04em",
          display: "flex", alignItems: "center", gap: 8,
        }}>
          Ajouter <Icon.plus style={{ width: 13, height: 13 }} />
        </button>
      </div>
    </div>
  );
}

/* ===========================================================
   ABOUT
   =========================================================== */
function About() {
  const mob = useMediaQuery(MOBILE);
  return (
    <section id="about" style={{ padding: mob ? "72px 20px" : "140px 48px" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto", display: "grid", gridTemplateColumns: mob ? "1fr" : "1fr 1.05fr", gap: mob ? 48 : 96, alignItems: "center" }}>
        {/* PHOTO COMPOSITION */}
        <div style={{ position: "relative", height: mob ? 420 : 680 }}>
          <div style={{
            position: "absolute",
            top: 40, left: 0,
            width: "78%", height: "78%",
            overflow: "hidden",
            boxShadow: "0 30px 60px rgba(42, 24, 16, 0.15)",
          }}>
            <img src="assets/deblas.jpg" alt="Deblas" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
          </div>
          <div style={{
            position: "absolute",
            bottom: 0, right: 0,
            width: "48%", height: "48%",
            overflow: "hidden",
            border: "10px solid var(--bg)",
            boxShadow: "0 18px 40px rgba(42, 24, 16, 0.2)",
          }}>
            <img src="assets/zlabia.jpg" alt="Zlabia" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
          </div>
          {/* italic caption */}
          <div className="italic" style={{
            position: "absolute", top: 0, right: 0,
            maxWidth: 200, textAlign: "right",
            fontSize: 17, color: "var(--muted)",
            paddingTop: 6,
            borderTop: "1px solid var(--line)",
          }}>
            Dans notre atelier de Bizerte, juste avant l'aube.
          </div>
        </div>

        {/* TEXT */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 24, display: "flex", alignItems: "center", gap: 14 }}>
            <Flourish color="var(--caramel-deep)" width={48} />
            La maison
          </div>
          <h2 className="serif" style={{
            fontSize: "clamp(48px, 5.5vw, 84px)",
            margin: 0, lineHeight: 1.02, letterSpacing: "-0.02em", fontWeight: 400,
          }}>
            Une famille,<br/>
            <span className="italic" style={{ color: "var(--caramel-deep)" }}>un atelier,</span><br/>
            une seule façon de faire.
          </h2>
          <div style={{ marginTop: 36, display: "grid", gap: 22 }}>
            <p style={{ fontSize: 17, color: "var(--ink-2)", lineHeight: 1.65, margin: 0 }}>
              Pasticcini est né en 2018 dans une cuisine modeste, à deux pas du Vieux Port. La maison a grandi sans jamais changer de méthode : tout est encore pétri à la main, le feuilletage repose toute la nuit, et chaque pièce est cuite le matin même.
            </p>
            <p style={{ fontSize: 17, color: "var(--ink-2)", lineHeight: 1.65, margin: 0 }}>
              Les viennoiseries empruntent à la rigueur française. Les pâtés rendent hommage à la générosité bizertine. Et nos pâtisseries orientales — mhalbiya, deblas, zlabia — viennent directement des cahiers de recettes de nos grands-mères.
            </p>
          </div>

          <div style={{ marginTop: 48 }}>
            <Flourish color="var(--caramel-deep)" width={120} />
          </div>

          <div className="italic" style={{ fontSize: 26, color: "var(--caramel-deep)", marginTop: 32, lineHeight: 1.3, maxWidth: 480 }}>
            « Le bon goût ne se presse pas. Il se mérite — au four, et au cœur. »
          </div>
          <div style={{ fontSize: 13, color: "var(--muted)", letterSpacing: "0.06em", textTransform: "uppercase", marginTop: 14 }}>
            — Aïcha, chef pâtissière
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===========================================================
   TESTIMONIALS
   =========================================================== */
function Testimonials() {
  const reviews = [
    { name: "Yasmine B.", from: "Bizerte", stars: 5, text: "Le seul endroit à Bizerte où je trouve un vrai croissant feuilleté. La pâte est aérienne, le beurre se sent à chaque bouchée." },
    { name: "Mohamed K.", from: "Tunis", stars: 5, text: "Je fais une heure de route chaque samedi pour leurs pâtés thon et leurs mhalbiya. Indétrônables." },
    { name: "Sophie L.", from: "Marseille", stars: 5, text: "On dirait un atelier de pâtisserie parisien posé en bord de Méditerranée. Un service adorable, une vitrine envoûtante." },
  ];
  const mob = useMediaQuery(MOBILE);
  const tab = useMediaQuery(TABLET);
  return (
    <section style={{ padding: mob ? "64px 20px" : "120px 48px", background: "var(--bg-soft)" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 64 }}>
          <div className="eyebrow" style={{ marginBottom: 18, display: "flex", alignItems: "center", gap: 14, justifyContent: "center" }}>
            <Flourish color="var(--caramel-deep)" width={48} />
            Témoignages
            <Flourish color="var(--caramel-deep)" width={48} />
          </div>
          <h2 className="serif" style={{
            fontSize: "clamp(40px, 4.6vw, 64px)",
            margin: 0, lineHeight: 1.02, letterSpacing: "-0.02em", fontWeight: 400,
          }}>
            On en parle <span className="italic" style={{ color: "var(--caramel-deep)" }}>autour du four.</span>
          </h2>
          <div style={{ display: "flex", justifyContent: "center", gap: 6, marginTop: 20 }}>
            {[1,2,3,4,5].map(i => <span key={i} style={{ fontSize: 22, color: "var(--caramel)" }}>★</span>)}
            <span style={{ fontSize: 14, color: "var(--muted)", marginLeft: 12, alignSelf: "center" }}>4.9/5 · 312 avis Google</span>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: mob ? "1fr" : tab ? "repeat(2, 1fr)" : "repeat(3, 1fr)", gap: 32 }}>
          {reviews.map((r, i) => (
            <div key={i} style={{
              background: "var(--paper)",
              padding: mob ? 28 : 40,
              border: "1px solid var(--line)",
              position: "relative",
            }}>
              <div className="serif" style={{
                position: "absolute", top: 16, right: 24,
                fontSize: 84, color: "var(--caramel-light)",
                lineHeight: 0.6, fontStyle: "italic", fontWeight: 400, opacity: 0.5,
              }}>"</div>
              <div style={{ display: "flex", gap: 3, marginBottom: 20 }}>
                {Array(r.stars).fill(0).map((_, j) => <span key={j} style={{ fontSize: 14, color: "var(--caramel)" }}>★</span>)}
              </div>
              <p className="italic" style={{ fontSize: 22, lineHeight: 1.45, margin: "0 0 28px", color: "var(--ink)" }}>
                {r.text}
              </p>
              <hr className="dotline" style={{ margin: "0 0 18px" }} />
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <div style={{
                  width: 40, height: 40, borderRadius: "50%",
                  background: "var(--caramel)", color: "var(--paper)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontWeight: 500, fontSize: 14,
                }}>{r.name[0]}</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{r.name}</div>
                  <div style={{ fontSize: 12, color: "var(--muted)", letterSpacing: "0.04em" }}>{r.from}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===========================================================
   CONTACT
   =========================================================== */
function Contact() {
  const mob = useMediaQuery(MOBILE);
  const [form, setForm] = useState({ name: "", contact: "", topic: "Commande sur mesure", message: "" });
  const [sent, setSent] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => { setSent(false); setForm({ name: "", contact: "", topic: "Commande sur mesure", message: "" }); }, 3500);
  };
  return (
    <section id="contact" style={{ padding: mob ? "72px 20px" : "140px 48px" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 80 }}>
          <div className="eyebrow" style={{ marginBottom: 24, display: "flex", alignItems: "center", gap: 14, justifyContent: "center" }}>
            <Flourish color="var(--caramel-deep)" width={48} />
            Visite & contact
            <Flourish color="var(--caramel-deep)" width={48} />
          </div>
          <h2 className="serif" style={{
            fontSize: "clamp(56px, 6.5vw, 96px)", fontWeight: 400,
            margin: 0, lineHeight: 1, letterSpacing: "-0.02em",
          }}>
            On vous attend <span className="italic" style={{ color: "var(--caramel-deep)" }}>à Bizerte.</span>
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: mob ? "1fr" : "1fr 1.1fr", gap: 48 }}>
          {/* LEFT — info + map */}
          <div>
            <div style={{
              border: "1px solid var(--line)", padding: 0, overflow: "hidden",
            }}>
              {[
                { icon: Icon.pin, h: "Adresse", l1: "12 Avenue Habib Bourguiba", l2: "Bizerte 7000 · Tunisie" },
                { icon: Icon.clock, h: "Horaires", l1: "Lundi – Samedi · 06h00 – 20h00", l2: "Dimanche · 07h00 – 13h00" },
                { icon: Icon.phone, h: "Téléphone & WhatsApp", l1: "+216 72 432 100", l2: "Disponible toute la journée" },
              ].map((c, i) => (
                <div key={i} style={{
                  display: "grid", gridTemplateColumns: "auto 1fr",
                  gap: 24, padding: "28px 32px",
                  borderTop: i > 0 ? "1px solid var(--line)" : "none",
                }}>
                  <div style={{
                    width: 46, height: 46, borderRadius: "50%",
                    border: "1px solid var(--caramel)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    color: "var(--caramel-deep)",
                  }}>
                    <c.icon style={{ width: 18, height: 18 }} />
                  </div>
                  <div>
                    <div className="eyebrow" style={{ marginBottom: 6 }}>{c.h}</div>
                    <div style={{ fontSize: 17, fontWeight: 500 }}>{c.l1}</div>
                    <div style={{ fontSize: 14, color: "var(--muted)", marginTop: 2 }}>{c.l2}</div>
                  </div>
                </div>
              ))}
            </div>

            {/* MAP */}
            <div style={{
              marginTop: 24, position: "relative",
              border: "1px solid var(--line)", overflow: "hidden",
              aspectRatio: "5/3",
            }}>
              <svg viewBox="0 0 600 360" style={{ width: "100%", height: "100%", display: "block" }}>
                <rect width="600" height="360" fill="#e9e0c9"/>
                <path d="M0,0 L600,0 L600,120 Q400,140 220,110 Q80,100 0,120 Z" fill="#b7d2dc" opacity="0.55"/>
                <path d="M0,0 L600,0 L600,90 Q400,108 220,80 Q80,70 0,90 Z" fill="#9bbfd0" opacity="0.45"/>
                {/* roads */}
                <path d="M0,210 Q200,190 400,220 T600,200" fill="none" stroke="var(--bg)" strokeWidth="16"/>
                <path d="M0,210 Q200,190 400,220 T600,200" fill="none" stroke="#cfc5a8" strokeWidth="1" strokeDasharray="4 6"/>
                <path d="M300,360 L300,210" stroke="var(--bg)" strokeWidth="12"/>
                <path d="M150,360 L150,210" stroke="var(--bg)" strokeWidth="10"/>
                <path d="M450,360 L450,210" stroke="var(--bg)" strokeWidth="10"/>
                {/* blocks */}
                {[[40,230],[80,260],[180,240],[220,260],[340,230],[380,265],[480,240],[520,260], [40,330],[120,330],[240,330],[360,330],[460,330],[540,330]].map(([x,y],i)=>(
                  <rect key={i} x={x} y={y} width="34" height="22" fill="#dccfa8" stroke="#bca878" strokeWidth="0.5"/>
                ))}
                {/* pin */}
                <circle cx="305" cy="206" r="32" fill="var(--caramel)" opacity="0.3">
                  <animate attributeName="r" values="20;34;20" dur="2.5s" repeatCount="indefinite"/>
                  <animate attributeName="opacity" values="0.4;0;0.4" dur="2.5s" repeatCount="indefinite"/>
                </circle>
                <circle cx="305" cy="206" r="12" fill="var(--ink)"/>
                <circle cx="305" cy="206" r="5" fill="var(--caramel)"/>
                <text x="322" y="202" fontFamily="Cormorant Garamond" fontStyle="italic" fontSize="18" fill="#2a1810">Pasticcini</text>
                <text x="322" y="219" fontFamily="Manrope" fontSize="9" letterSpacing="1" fill="#8a7560">12 AV. BOURGUIBA</text>
              </svg>
              <a href="https://maps.google.com" target="_blank" style={{
                position: "absolute", top: 16, right: 16,
                background: "var(--ink)", color: "var(--paper)",
                padding: "10px 16px", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase",
                borderRadius: 999, display: "flex", alignItems: "center", gap: 8,
              }}>Ouvrir dans Maps <Icon.arrowUR style={{ width: 12, height: 12 }} /></a>
            </div>
          </div>

          {/* RIGHT — FORM */}
          <div style={{ background: "var(--paper)", padding: mob ? 28 : 56, border: "1px solid var(--line)" }}>
            <h3 className="serif" style={{ fontSize: 40, fontWeight: 500, margin: "0 0 6px", letterSpacing: "-0.015em" }}>
              Une commande <span className="italic" style={{ color: "var(--caramel-deep)" }}>spéciale?</span>
            </h3>
            <p style={{ fontSize: 16, color: "var(--muted)", marginBottom: 36, maxWidth: 460 }}>
              Mariage, baptême, anniversaire, événement d'entreprise — dites-nous tout, nous revenons sous 24h.
            </p>

            <form onSubmit={submit}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Sujet</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 32 }}>
                {["Commande sur mesure", "Mariage", "Événement", "Question"].map(t => (
                  <button key={t} type="button" onClick={() => setForm({...form, topic: t})} style={{
                    background: form.topic === t ? "var(--ink)" : "transparent",
                    color: form.topic === t ? "var(--paper)" : "var(--ink-2)",
                    border: "1px solid " + (form.topic === t ? "var(--ink)" : "var(--line)"),
                    borderRadius: 999, padding: "8px 14px",
                    fontSize: 12, letterSpacing: "0.04em",
                  }}>{t}</button>
                ))}
              </div>

              <div style={{ display: "grid", gap: 24 }}>
                <Field label="Votre nom" value={form.name} onChange={v => setForm({...form, name: v})} placeholder="Aïcha Ben Salem" />
                <Field label="Email ou téléphone" value={form.contact} onChange={v => setForm({...form, contact: v})} placeholder="vous@exemple.tn" />
                <Field label="Votre demande" textarea value={form.message} onChange={v => setForm({...form, message: v})} placeholder="Décrivez-nous votre projet…" />
              </div>

              <button type="submit" style={{
                marginTop: 36, width: "100%",
                background: sent ? "var(--caramel-deep)" : "var(--ink)",
                color: "var(--paper)",
                border: "none", padding: 18, fontSize: 13, fontWeight: 500,
                letterSpacing: "0.08em", textTransform: "uppercase",
                borderRadius: 4,
                display: "flex", alignItems: "center", justifyContent: "center", gap: 12,
                transition: "all 0.3s ease",
              }}>
                {sent ? "✓ Message envoyé — réponse sous 24h" : <>Envoyer la demande <Icon.arrow style={{ width: 14, height: 14 }} /></>}
              </button>

              <div style={{ display: "flex", gap: 8, marginTop: 24, justifyContent: "center" }}>
                {[
                  { Ic: Icon.wa, l: "WhatsApp", href: "https://wa.me/21672432100" },
                  { Ic: Icon.insta, l: "Instagram", href: "https://instagram.com/pasticcini" },
                  { Ic: Icon.fb, l: "Facebook", href: "#" },
                ].map((s, i) => (
                  <a key={i} href={s.href} target="_blank" style={{
                    display: "flex", alignItems: "center", gap: 8,
                    fontSize: 12, padding: "10px 14px",
                    border: "1px solid var(--line)", borderRadius: 999,
                    letterSpacing: "0.04em",
                  }}>
                    <s.Ic style={{ width: 14, height: 14 }} /> {s.l}
                  </a>
                ))}
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

function Field({ label, value, onChange, placeholder, textarea }) {
  const In = textarea ? "textarea" : "input";
  return (
    <div>
      <div className="eyebrow" style={{ marginBottom: 8 }}>{label}</div>
      <In
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        rows={textarea ? 4 : undefined}
        style={{
          width: "100%", background: "transparent",
          border: "none", borderBottom: "1px solid var(--line)",
          padding: "10px 0", fontSize: 17, fontFamily: "inherit",
          color: "var(--ink)", outline: "none",
          resize: textarea ? "vertical" : "none",
        }}
      />
    </div>
  );
}

/* ===========================================================
   FOOTER
   =========================================================== */
function Footer() {
  const mob = useMediaQuery(MOBILE);
  return (
    <footer style={{ background: "var(--ink)", color: "var(--paper)" }}>
      <div style={{ padding: mob ? "56px 20px 32px" : "80px 48px 40px", maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ textAlign: "center", paddingBottom: 56, borderBottom: "1px solid rgba(252,247,235,0.13)" }}>
          <Brandmark size="lg" color="var(--paper)" />
          <div className="italic" style={{ marginTop: 18, fontSize: 22, color: "var(--caramel-light)" }}>
            « Pétri à la main, cuit chaque matin. »
          </div>
          <div style={{ display: "flex", justifyContent: "center", marginTop: 28 }}>
            <Flourish color="var(--caramel-light)" width={120} />
          </div>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: mob ? "repeat(2, 1fr)" : "repeat(4, 1fr)", gap: mob ? 32 : 48,
          padding: mob ? "40px 0" : "56px 0",
          borderBottom: "1px solid rgba(252,247,235,0.13)",
        }}>
          {[
            { h: "Adresse", l: ["12 Av. Habib Bourguiba", "Bizerte 7000", "Tunisie"] },
            { h: "Horaires", l: ["Lun–Sam · 06h–20h", "Dimanche · 07h–13h"] },
            { h: "Contact", l: ["+216 72 432 100", "bonjour@pasticcini.tn", "WhatsApp dispo"] },
            { h: "Suivez-nous", l: ["Instagram @pasticcini", "Facebook Pasticcini Bizerte"] },
          ].map((c, i) => (
            <div key={i}>
              <div className="eyebrow" style={{ color: "var(--caramel-light)", marginBottom: 18 }}>{c.h}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8 }}>
                {c.l.map((x, j) => <li key={j} style={{ fontSize: 14, color: "rgba(252,247,235,0.75)" }}>{x}</li>)}
              </ul>
            </div>
          ))}
        </div>

        <div style={{ display: "flex", flexDirection: mob ? "column" : "row", gap: mob ? 10 : 0, justifyContent: "space-between", alignItems: mob ? "flex-start" : "center", paddingTop: 28 }}>
          <div style={{ fontSize: 12, color: "rgba(252,247,235,0.5)", letterSpacing: "0.04em" }}>
            © 2026 Pasticcini — Pâtisserie artisanale, Bizerte
          </div>
          <div className="italic" style={{ fontSize: 14, color: "rgba(252,247,235,0.5)" }}>
            Conçu avec soin à Bizerte
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ===========================================================
   CART DRAWER
   =========================================================== */
function CartDrawer({ open, items, onClose, onAdjust }) {
  const total = items.reduce((s, x) => s + x.p.price * x.q, 0);
  const count = items.reduce((s, x) => s + x.q, 0);
  if (!open) return null;
  return (
    <div style={{ position: "fixed", inset: 0, zIndex: 200, display: "flex" }}>
      <div onClick={onClose} style={{ flex: 1, background: "rgba(42,24,16,0.4)" }}></div>
      <div style={{
        width: "min(440px, 100vw)", background: "var(--bg)",
        height: "100%", overflow: "auto",
        animation: "drawIn 0.3s cubic-bezier(0.16,1,0.3,1)",
        display: "flex", flexDirection: "column",
      }}>
        <div style={{ padding: "28px 32px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div>
            <div className="eyebrow">Panier</div>
            <div className="serif" style={{ fontSize: 28, fontWeight: 500, marginTop: 4 }}>{count} {count <= 1 ? "article" : "articles"}</div>
          </div>
          <button onClick={onClose} style={{ background: "transparent", border: "1px solid var(--line)", borderRadius: "50%", width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center" }}>
            <Icon.close style={{ width: 14, height: 14 }} />
          </button>
        </div>
        <div style={{ flex: 1, padding: "0 32px" }}>
          {items.length === 0 ? (
            <div style={{ padding: 48, textAlign: "center" }}>
              <div className="italic" style={{ fontSize: 26, color: "var(--muted)" }}>Votre panier est vide.</div>
              <div style={{ fontSize: 14, color: "var(--muted)", marginTop: 12 }}>Ajoutez un croissant pour commencer la journée.</div>
            </div>
          ) : items.map(({ p, q }) => (
            <div key={p.id} style={{ display: "grid", gridTemplateColumns: "70px 1fr auto", gap: 16, padding: "20px 0", borderBottom: "1px solid var(--line)", alignItems: "center" }}>
              <div style={{ width: 70, height: 70, overflow: "hidden", background: `linear-gradient(160deg, ${p.color}, ${p.color}aa)` }}>
                {p.img && <img src={p.img} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover" }}/>}
              </div>
              <div>
                <div className="serif" style={{ fontSize: 18, fontWeight: 500 }}>{p.name}</div>
                <div className="italic" style={{ fontSize: 14, color: "var(--muted)" }}>{p.subtitle}</div>
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 8 }}>
                  <button onClick={() => onAdjust(p.id, q - 1)} style={qBtn}>−</button>
                  <span style={{ minWidth: 18, textAlign: "center", fontSize: 13 }}>{q}</span>
                  <button onClick={() => onAdjust(p.id, q + 1)} style={qBtn}>+</button>
                </div>
              </div>
              <div className="serif" style={{ fontSize: 18, fontWeight: 500, color: "var(--caramel-deep)" }}>{(p.price * q).toFixed(1)} DT</div>
            </div>
          ))}
        </div>
        {items.length > 0 && (
          <div style={{ padding: 32, borderTop: "1px solid var(--line)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 }}>
              <span className="eyebrow">Total</span>
              <span className="serif" style={{ fontSize: 30, fontWeight: 500 }}>{total.toFixed(1)} DT</span>
            </div>
            <a href="https://wa.me/21672432100" target="_blank" className="btn-primary" style={{ width: "100%", justifyContent: "center" }}>
              Commander par WhatsApp <Icon.arrowUR style={{ width: 14, height: 14 }} />
            </a>
            <div style={{ fontSize: 11, color: "var(--muted)", textAlign: "center", marginTop: 14, letterSpacing: "0.04em" }}>Paiement à la boutique ou à la livraison</div>
          </div>
        )}
      </div>
      <style>{`@keyframes drawIn { from { transform: translateX(100%); } to { transform: translateX(0); } }`}</style>
    </div>
  );
}
const qBtn = {
  background: "var(--paper)", border: "1px solid var(--line)",
  borderRadius: "50%", width: 22, height: 22,
  display: "flex", alignItems: "center", justifyContent: "center",
  fontSize: 13, lineHeight: 1, cursor: "pointer", padding: 0, color: "var(--ink)",
};

/* ===========================================================
   APP
   =========================================================== */
function App() {
  const [cart, setCart] = useState([]);
  const [cartOpen, setCartOpen] = useState(false);
  const [toast, setToast] = useState(null);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const p = t.palette || TWEAK_DEFAULTS.palette;
    document.documentElement.style.setProperty("--bg", p[0]);
    document.documentElement.style.setProperty("--ink", p[1]);
    document.documentElement.style.setProperty("--caramel", p[2]);
  }, [t.palette]);

  const onAdd = (p) => {
    setCart(c => {
      const ex = c.find(x => x.p.id === p.id);
      if (ex) return c.map(x => x.p.id === p.id ? { ...x, q: x.q + 1 } : x);
      return [...c, { p, q: 1 }];
    });
    setToast(`✓ ${p.name} ajouté`);
    setTimeout(() => setToast(null), 1800);
  };
  const onAdjust = (id, q) => {
    if (q <= 0) setCart(c => c.filter(x => x.p.id !== id));
    else setCart(c => c.map(x => x.p.id === id ? { ...x, q } : x));
  };
  const onNav = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: id === "top" ? 0 : el.offsetTop - 80, behavior: "smooth" });
  };

  const count = cart.reduce((s, x) => s + x.q, 0);

  return (
    <>
      <TopBar />
      <Nav cartCount={count} onCart={() => setCartOpen(true)} onNav={onNav} />
      <Hero onNav={onNav} />
      <Marquee />
      <Catalogue onAdd={onAdd} />
      <Specialty onAdd={onAdd} />
      <About />
      <Testimonials />
      <Contact />
      <Footer />

      <CartDrawer open={cartOpen} items={cart} onClose={() => setCartOpen(false)} onAdjust={onAdjust} />

      {toast && (
        <div style={{
          position: "fixed", bottom: 32, left: "50%", transform: "translateX(-50%)",
          background: "var(--ink)", color: "var(--paper)",
          padding: "14px 26px", borderRadius: 999,
          fontSize: 14, zIndex: 300,
          boxShadow: "0 8px 30px rgba(42,24,16,0.2)",
          animation: "toastIn 0.3s ease",
        }}>{toast}</div>
      )}
      <style>{`@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }`}</style>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette">
          <TweakColor
            label="Couleurs (fond / encre / caramel)"
            value={t.palette}
            onChange={v => setTweak("palette", v)}
            options={[
              ["#f7f0e2", "#2a1810", "#c1813c"],
              ["#fcf7eb", "#1a0f08", "#a86530"],
              ["#f0e8d4", "#3a2818", "#d4a169"],
              ["#fff8ec", "#2a1810", "#8e5a22"],
              ["#ebe4d2", "#2e1d10", "#c97548"],
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);