// Shared design tokens, blobs, icons, primitives for Pau Polaino redesign

// Colors are CSS variables so a single wrapper can swap the whole palette
// at runtime via the Tweaks panel.
const PP_COLORS = {
  cream: "var(--cream)",
  mintSoft: "var(--mint-soft)",
  mint: "var(--mint)",
  coralSoft: "var(--coral-soft)",
  coral: "var(--coral)",
  red: "var(--red)",
  ink: "var(--ink)",
  ink2: "var(--ink-2)",
  paper: "var(--paper)",
};

// Hex source-of-truth (used by tweaks-panel swatches)
const PP_HEX = {
  cream: "#feffe4",
  mintSoft: "#bdece3",
  mint: "#95e1d3",
  coralSoft: "#f7b0b0",
  coral: "#f38181",
  red: "#ef5252",
  ink: "#1f1a1a",
  ink2: "#4a3f3f",
  paper: "#fbf9f1",
};

/* ---------- ORGANIC SVG BLOBS ---------- */
const Blob1 = ({ fill = "#f7b0b0", style }) => (
  <svg viewBox="0 0 600 600" preserveAspectRatio="none" style={style}>
    <path
      fill={fill}
      d="M421.5,313Q394,376,343.5,415Q293,454,228,438Q163,422,116,373Q69,324,80,254.5Q91,185,138,131.5Q185,78,255,82Q325,86,389,124Q453,162,455,231Q457,300,421.5,313Z"
    />
  </svg>
);

const Blob2 = ({ fill = "#95e1d3", style }) => (
  <svg viewBox="0 0 600 600" preserveAspectRatio="none" style={style}>
    <path
      fill={fill}
      d="M447,332Q412,414,335,438Q258,462,182.5,425.5Q107,389,90,304.5Q73,220,127,153Q181,86,265.5,90Q350,94,418.5,148Q487,202,471,267Q455,332,447,332Z"
    />
  </svg>
);

const Blob3 = ({ fill = "#bdece3", style }) => (
  <svg viewBox="0 0 600 600" preserveAspectRatio="none" style={style}>
    <path
      fill={fill}
      d="M463,322Q447,394,381,428.5Q315,463,235,449.5Q155,436,113,371.5Q71,307,93.5,230.5Q116,154,184,113Q252,72,328,89Q404,106,447,170Q490,234,476.5,283Q463,332,463,322Z"
    />
  </svg>
);

const Blob4 = ({ fill = "#f38181", style }) => (
  <svg viewBox="0 0 600 600" preserveAspectRatio="none" style={style}>
    <path
      fill={fill}
      d="M421,313.5Q415,377,361,409.5Q307,442,234.5,438.5Q162,435,121,376.5Q80,318,98.5,250Q117,182,162,128.5Q207,75,275.5,95.5Q344,116,395.5,158Q447,200,438.5,250Q430,300,421,313.5Z"
    />
  </svg>
);

/* Soft wavy line, used as section divider */
const WavyLine = ({ stroke = "#1f1a1a", style }) => (
  <svg viewBox="0 0 1200 40" preserveAspectRatio="none" style={style}>
    <path
      d="M0,20 Q150,0 300,20 T600,20 T900,20 T1200,20"
      stroke={stroke}
      strokeWidth="1.5"
      fill="none"
    />
  </svg>
);

/* ---------- ICONS (line, 1.5px) ---------- */
const Icon = ({ d, size = 20, stroke = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    {typeof d === "string" ? <path d={d} /> : d}
  </svg>
);

const IconMoon = (p) => <Icon {...p} d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z" />;
const IconStar = (p) => <Icon {...p} d="M12 2l2.9 6.6 7.1.7-5.4 4.9 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" />;
const IconHeart = (p) => <Icon {...p} d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />;
const IconArrow = (p) => (
  <Icon {...p} d={null}>
    <path d="M5 12h14" /><path d="M13 5l7 7-7 7" />
  </Icon>
);
const IconArrowR = ({ size = 18, stroke = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12h14" /><path d="M13 5l7 7-7 7" />
  </svg>
);
const IconPlay = (p) => (
  <svg width={p.size || 14} height={p.size || 14} viewBox="0 0 24 24" fill={p.stroke || "currentColor"}>
    <path d="M8 5v14l11-7z" />
  </svg>
);
const IconCheck = (p) => <Icon {...p} d="M20 6L9 17l-5-5" />;
const IconSparkle = ({ size = 16, stroke = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round">
    <path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.5 5.5l2.8 2.8M15.7 15.7l2.8 2.8M5.5 18.5l2.8-2.8M15.7 8.3l2.8-2.8" />
  </svg>
);

/* ---------- COMMON PRIMITIVES ---------- */

const Pill = ({ children, bg = PP_COLORS.ink, color = "#fff", border, style, size = "md", icon }) => {
  const pad = size === "sm" ? "8px 14px" : size === "lg" ? "18px 28px" : "12px 22px";
  const fs = size === "sm" ? 13 : size === "lg" ? 17 : 15;
  return (
    <button
      style={{
        background: bg,
        color,
        border: border || "none",
        borderRadius: 999,
        padding: pad,
        fontSize: fs,
        fontWeight: 600,
        fontFamily: "var(--f-body)",
        letterSpacing: "-0.01em",
        cursor: "pointer",
        display: "inline-flex",
        alignItems: "center",
        gap: 10,
        whiteSpace: "nowrap",
        ...style,
      }}
    >
      {children}
      {icon}
    </button>
  );
};

/* Striped placeholder used for photography slots that aren't filled in */
const PhotoSlot = ({ label = "foto · pau + bebé", style, radius = 28, tone = "warm" }) => {
  const palette = tone === "warm"
    ? { a: "#e9c8c0", b: "#f4d8d2", text: "#5b3a3a" }
    : tone === "mint"
    ? { a: "#bfe4dc", b: "#d6efe9", text: "#2f5a52" }
    : { a: "#e6e1d2", b: "#f1ece0", text: "#5a4a2a" };
  return (
    <div
      style={{
        position: "relative",
        borderRadius: radius,
        overflow: "hidden",
        background: `repeating-linear-gradient(135deg, ${palette.a} 0 12px, ${palette.b} 12px 24px)`,
        ...style,
      }}
    >
      <span
        style={{
          position: "absolute",
          left: 14,
          bottom: 12,
          fontFamily: "ui-monospace, 'SF Mono', Menlo, monospace",
          fontSize: 11,
          color: palette.text,
          background: "rgba(255,255,255,0.7)",
          padding: "4px 8px",
          borderRadius: 999,
          letterSpacing: "0.02em",
        }}
      >
        {label}
      </span>
    </div>
  );
};

/* Tiny rounded badge with star rating row */
const TrustBadge = ({ count = 320, style }) => (
  <div
    style={{
      display: "inline-flex",
      alignItems: "center",
      gap: 10,
      background: "#fff",
      border: "1px solid rgba(0,0,0,0.06)",
      padding: "8px 14px",
      borderRadius: 999,
      fontSize: 13,
      color: PP_COLORS.ink,
      boxShadow: "0 6px 18px rgba(31,26,26,0.06)",
      ...style,
    }}
  >
    <span style={{ display: "inline-flex", gap: 2 }}>
      {[0, 1, 2, 3, 4].map((i) => (
        <svg key={i} width="12" height="12" viewBox="0 0 24 24" fill={PP_COLORS.red}>
          <path d="M12 2l2.9 6.6 7.1.7-5.4 4.9 1.6 7L12 17.5 5.8 21.2l1.6-7L2 9.3l7.1-.7z" />
        </svg>
      ))}
    </span>
    <span style={{ fontWeight: 600 }}>4.9</span>
    <span style={{ color: PP_COLORS.ink2 }}>· {count}+ familias</span>
  </div>
);

/* Top brand mark */
const BrandMark = ({ color = PP_COLORS.ink, size = "md" }) => {
  const fs = size === "lg" ? 22 : 18;
  const badge = fs + 10;
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, color }}>
      <img src="/nueva-web/assets/pp-badge.png" alt="pau polaino" width={badge} height={badge} style={{ display: "block", borderRadius: 999 }} />
      <span style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: fs, letterSpacing: "-0.04em" }}>
        pau<span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, padding: "0 2px" }}>·</span>polaino
      </span>
    </div>
  );
};

/* Top navigation, reused across desktop sections */
const NAV_ITEMS = [
  { label: "Inicio", href: "/" },
  { label: "Servicios", href: "/\#servicios" },
  { label: "Sobre mí", href: "/\#sobre-pau" },
  { label: "Contacto", href: "/contacto/" },
];

const TopNav = ({ tone = "ink", cta = "Reservar llamada informativa", ctaHref = "/contacto/", width = 1440 }) => {
  const ink = tone === "ink" ? PP_COLORS.ink : "#fff";
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "26px 56px", color: ink }}>
      <a href="/" style={{ color: "inherit", textDecoration: "none" }}><BrandMark color={ink} /></a>
      <nav style={{ display: "flex", gap: 36, fontSize: 15, fontWeight: 500 }}>
        {NAV_ITEMS.map((it) => (
          <a key={it.label} href={it.href} style={{ cursor: "pointer", opacity: 0.85, color: "inherit", textDecoration: "none" }}>{it.label}</a>
        ))}
      </nav>
      <a href={ctaHref} style={{ textDecoration: "none", visibility: cta ? "visible" : "hidden" }}>
        <Pill bg={ink} color={tone === "ink" ? "#fff" : PP_COLORS.ink} icon={<IconArrowR size={16} />}>
          {cta || "·"}
        </Pill>
      </a>
    </div>
  );
};

/* ---------- Menú móvil funcional (hamburguesa → panel deslizante) ---------- */
const MOBILE_MENU_ITEMS = [
  { label: "Inicio", href: "/" },
  { label: "Servicios", href: "/\#servicios" },
  { label: "Sobre mí", href: "/\#sobre-pau" },
  { label: "Contacto", href: "/contacto/" },
];

const MobileMenu = ({ trigger = "circle" }) => {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const TriggerBtn = trigger === "outline" ? (
    <button
      aria-label="Abrir menú"
      onClick={() => setOpen(true)}
      style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "transparent", color: PP_COLORS.ink, border: `1.5px solid ${PP_COLORS.ink}`, padding: "8px 14px", borderRadius: 999, fontSize: 12, fontWeight: 600, fontFamily: "var(--f-body)", cursor: "pointer" }}
    >
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={PP_COLORS.ink} strokeWidth="1.8" strokeLinecap="round"><path d="M3 6h18M3 12h18M3 18h18" /></svg>
      Menú
    </button>
  ) : (
    <button
      aria-label="Abrir menú"
      onClick={() => setOpen(true)}
      style={{ width: 40, height: 40, borderRadius: 999, background: "#fff", border: "none", display: "grid", placeItems: "center", boxShadow: "0 4px 12px rgba(0,0,0,0.07)", cursor: "pointer", padding: 0 }}
    >
      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke={PP_COLORS.ink} strokeWidth="1.7" strokeLinecap="round"><path d="M3 6h18M3 12h18M3 18h18" /></svg>
    </button>
  );

  return (
    <React.Fragment>
      {TriggerBtn}
      {open && (
        <div
          onClick={() => setOpen(false)}
          style={{ position: "fixed", inset: 0, zIndex: 4000, background: "rgba(31,26,26,0.45)", display: "flex", justifyContent: "flex-end", animation: "pp-fade-in .2s ease" }}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            style={{ width: "84%", maxWidth: 360, height: "100%", background: PP_COLORS.cream, padding: "46px 26px 28px", display: "flex", flexDirection: "column", boxShadow: "-24px 0 70px rgba(31,26,26,0.28)", animation: "pp-slide-in .26s cubic-bezier(.2,.7,.3,1)" }}
          >
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 30 }}>
              <a href="/" style={{ textDecoration: "none" }}><BrandMark size="md" /></a>
              <button
                aria-label="Cerrar menú"
                onClick={() => setOpen(false)}
                style={{ width: 40, height: 40, borderRadius: 999, background: "rgba(31,26,26,0.06)", border: "none", cursor: "pointer", color: PP_COLORS.ink, display: "grid", placeItems: "center" }}
              >
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={PP_COLORS.ink} strokeWidth="1.8" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
              </button>
            </div>
            <nav style={{ display: "flex", flexDirection: "column" }}>
              {MOBILE_MENU_ITEMS.map((it) => (
                <a
                  key={it.label}
                  href={it.href}
                  onClick={() => setOpen(false)}
                  style={{ fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 25, letterSpacing: "-0.02em", color: PP_COLORS.ink, textDecoration: "none", padding: "15px 0", borderBottom: "1px solid rgba(31,26,26,0.09)" }}
                >
                  {it.label}
                </a>
              ))}
            </nav>
            <a href="/contacto/" style={{ marginTop: "auto", textDecoration: "none" }}>
              <div style={{ background: PP_COLORS.ink, color: "#fff", borderRadius: 999, padding: "16px 22px", textAlign: "center", fontFamily: "var(--f-body)", fontWeight: 700, fontSize: 15, display: "flex", alignItems: "center", justifyContent: "center", gap: 8 }}>
                Reservar llamada <IconArrowR size={16} stroke="#fff" />
              </div>
            </a>
          </div>
        </div>
      )}
    </React.Fragment>
  );
};

/* ---------- Export to window for cross-script access ---------- */
Object.assign(window, {
  PP_COLORS, PP_HEX,
  Blob1, Blob2, Blob3, Blob4, WavyLine,
  Icon, IconMoon, IconStar, IconHeart, IconArrow, IconArrowR, IconPlay, IconCheck, IconSparkle,
  Pill, PhotoSlot, TrustBadge, BrandMark, TopNav, MobileMenu,
});