// Componentes compartidos — Wisht web

// ---------- Responsive hook ----------
function useWindowWidth() {
  const [w, setW] = React.useState(() => window.innerWidth);
  React.useEffect(() => {
    const h = () => setW(window.innerWidth);
    window.addEventListener("resize", h, { passive: true });
    return () => window.removeEventListener("resize", h);
  }, []);
  return w;
}

// ---------- iPhone Mockup ----------
function IPhoneMockup({ src, width = 280, scale = 1, style = {} }) {
  const w = width * scale;
  const h = w * (844 / 390);
  return (
    <div
      style={{
        width: w,
        height: h,
        borderRadius: w * 0.13,
        background: "#0a0a0a",
        padding: w * 0.025,
        boxShadow: "0 30px 60px -20px rgba(15,20,40,0.35), 0 10px 30px -10px rgba(15,20,40,0.2)",
        position: "relative",
        flexShrink: 0,
        ...style,
      }}
    >
      <div
        style={{
          width: "100%",
          height: "100%",
          borderRadius: w * 0.105,
          overflow: "hidden",
          background: "#FFF7F0",
          position: "relative",
        }}
      >
        {src && (
          <img
            src={src}
            alt=""
            style={{
              width: "100%",
              height: "100%",
              objectFit: "cover",
              objectPosition: "top",
              display: "block",
            }}
          />
        )}
      </div>
    </div>
  );
}

// ---------- App Store Badge ----------
function AppStoreBadge({ comingSoon = false, top, bottom, dark = false, href = "https://apps.apple.com/app/wisht/id6756442873" }) {
  const bg = dark ? "#fff" : "#000";
  const fg = dark ? "#000" : "#fff";
  const baseStyle = {
    display: "inline-flex",
    alignItems: "center",
    gap: 12,
    padding: "12px 20px",
    background: bg,
    color: fg,
    border: "none",
    borderRadius: 14,
    textAlign: "left",
    fontFamily: "inherit",
    position: "relative",
    minWidth: 160,
    textDecoration: "none",
    opacity: 1,
  };
  const inner = (
    <>
      <svg width="26" height="32" viewBox="0 0 24 24" fill={fg} aria-hidden>
        <path d="M17.05 12.04c-.03-3.13 2.56-4.63 2.67-4.7-1.46-2.13-3.72-2.42-4.52-2.46-1.92-.2-3.75 1.13-4.73 1.13-.99 0-2.49-1.1-4.1-1.07-2.1.03-4.05 1.22-5.14 3.1-2.2 3.81-.56 9.45 1.58 12.55 1.05 1.51 2.29 3.21 3.92 3.15 1.58-.06 2.18-1.02 4.09-1.02 1.91 0 2.45 1.02 4.13.99 1.71-.03 2.79-1.54 3.83-3.07 1.21-1.76 1.71-3.47 1.74-3.56-.04-.02-3.34-1.28-3.37-5.04zM13.93 3.18c.85-1.05 1.43-2.5 1.27-3.94-1.23.05-2.74.83-3.62 1.86-.79.92-1.49 2.42-1.3 3.83 1.38.1 2.78-.7 3.65-1.75z"/>
      </svg>
      <div style={{ lineHeight: 1.1 }}>
        <div style={{ fontSize: 11, opacity: 0.8, fontWeight: 400 }}>{top}</div>
        <div style={{ fontSize: 17, fontWeight: 600, marginTop: 2 }}>{bottom}</div>
      </div>
      {comingSoon && (
        <span style={{
          position: "absolute", top: -8, right: -8,
          background: "#FF4B5C", color: "#fff",
          fontSize: 10, fontWeight: 600, padding: "3px 8px",
          borderRadius: 999, letterSpacing: 0.3,
        }}>SOON</span>
      )}
    </>
  );
  if (comingSoon) {
    return <button style={{ ...baseStyle, cursor: "default", opacity: 0.92 }}>{inner}</button>;
  }
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" style={{ ...baseStyle, cursor: "pointer" }}>
      {inner}
    </a>
  );
}

function GooglePlayBadge({ top, bottom, dark = false }) {
  const bg = dark ? "#fff" : "#000";
  const fg = dark ? "#000" : "#fff";
  return (
    <button
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 12,
        padding: "12px 20px",
        background: bg,
        color: fg,
        border: "none",
        borderRadius: 14,
        cursor: "default",
        textAlign: "left",
        fontFamily: "inherit",
        position: "relative",
        minWidth: 160,
        opacity: 0.85,
      }}
    >
      <svg width="26" height="28" viewBox="0 0 24 24" aria-hidden>
        <path d="M3.61 1.81C3.23 2.21 3 2.83 3 3.62v16.76c0 .79.23 1.41.61 1.81l.05.05L13 13v-.21L3.66 1.76l-.05.05z" fill="#5BC9F4"/>
        <path d="M16.81 16.34l-3.05-3.05V12.71l3.05-3.05.07.04 3.61 2.05c1.03.59 1.03 1.55 0 2.14l-3.61 2.05-.07.04z" fill="#FEE000"/>
        <path d="M16.88 16.3L13.66 13.08 3.61 23.19c.34.36.9.4 1.54.05l11.73-6.94" fill="#EA4335"/>
        <path d="M16.88 9.7L5.15.76C4.51.41 3.95.45 3.61.81l10.05 10.27L16.88 9.7z" fill="#34A853"/>
      </svg>
      <div style={{ lineHeight: 1.1 }}>
        <div style={{ fontSize: 11, opacity: 0.8, fontWeight: 400 }}>{top}</div>
        <div style={{ fontSize: 17, fontWeight: 600, marginTop: 2 }}>{bottom}</div>
      </div>
      <span
        style={{
          position: "absolute",
          top: -8,
          right: -8,
          background: "#1B2141",
          color: "#fff",
          fontSize: 10,
          fontWeight: 600,
          padding: "3px 8px",
          borderRadius: 999,
          letterSpacing: 0.3,
        }}
      >
        SOON
      </span>
    </button>
  );
}

// ---------- Toggle Bar (lang + theme) ----------
function ToggleBar({ lang, setLang, theme, setTheme, accent = "#FF4B5C" }) {
  return (
    <div style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>
      <div
        style={{
          display: "inline-flex",
          background: "var(--surface-2)",
          borderRadius: 999,
          padding: 3,
          border: "1px solid var(--divider)",
        }}
      >
        {["en", "es"].map((l) => (
          <button
            key={l}
            onClick={() => setLang(l)}
            style={{
              padding: "5px 10px",
              fontSize: 12,
              fontWeight: 600,
              border: "none",
              borderRadius: 999,
              cursor: "pointer",
              background: lang === l ? accent : "transparent",
              color: lang === l ? "#fff" : "var(--text-2)",
              fontFamily: "inherit",
              textTransform: "uppercase",
              letterSpacing: 0.5,
            }}
          >
            {l}
          </button>
        ))}
      </div>
      <button
        onClick={() => setTheme(theme === "light" ? "dark" : "light")}
        style={{
          width: 36,
          height: 36,
          borderRadius: 999,
          border: "1px solid var(--divider)",
          background: "var(--surface-2)",
          cursor: "pointer",
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          color: "var(--text-1)",
        }}
        aria-label="Toggle theme"
      >
        {theme === "light" ? (
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
        ) : (
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
        )}
      </button>
    </div>
  );
}

// ---------- Wisht Logo ----------
// Switches between logo-light.png and logo-dark.png via CSS classes.
// Add to each page's <style>:
//   [data-theme="dark"] .wl-light { display: none !important; }
//   [data-theme="dark"] .wl-dark  { display: block !important; }
function WishtLogo({ size = 28 }) {
  const h = Math.round(size * 1.1); // slight extra height for descenders
  return (
    <span style={{ display: "inline-flex", alignItems: "center", height: h }}>
      <img src="assets/logo-light.png" height={h} alt="Wisht" className="wl-light"
           style={{ display: "block", width: "auto" }} />
      <img src="assets/logo-dark.png"  height={h} alt="Wisht" className="wl-dark"
           style={{ display: "none",  width: "auto" }} />
    </span>
  );
}

// ---------- Wisht App Icon ----------
function WishtAppIcon({ size = 64 }) {
  return (
    <img
      src="assets/wisht-icon.png"
      width={size}
      height={size}
      alt="Wisht"
      style={{ borderRadius: size * 0.22, display: "block" }}
    />
  );
}

Object.assign(window, {
  IPhoneMockup,
  AppStoreBadge,
  GooglePlayBadge,
  ToggleBar,
  WishtLogo,
  WishtAppIcon,
  useWindowWidth,
});