// Shared UI: phone mockup, logo, badges, helpers


// Logo wordmark
const Logo = ({ size = 36 }) => (
  <div className="logo" style={{ display: "flex", alignItems: "center", gap: 10 }}>
    <img src="assets/3a095513-aef6-40c7-8aee-587f8b73afce_removalai_preview.png?v=2" alt="AVideo AI" style={{ height: size, width: "auto", display: "block" }} />
  </div>
);
window.Logo = Logo;

// App store / Google Play badges (visual only, not real links)
const StoreBadge = ({ store, dark }) => {
  const isApple = store === "apple";
  return (
    <a className="store-badge" href="#" onClick={(e) => e.preventDefault()} style={{
      display: "inline-flex", alignItems: "center", gap: 12,
      background: dark ? "#fff" : "#000", color: dark ? "#000" : "#fff",
      padding: "10px 18px", borderRadius: 12, textDecoration: "none",
      transition: "transform .2s ease, box-shadow .2s ease",
      boxShadow: dark ? "0 4px 16px rgba(0,0,0,.08)" : "0 4px 16px rgba(0,0,0,.25)",
      minWidth: 180,
    }}>
      <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor">
        {isApple ? (
          <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
        ) : (
          <path d="M3.18 20.83c.05.16.13.32.23.45l8.95-8.94L3.41 3.4a1.15 1.15 0 00-.23.45c-.07.18-.11.4-.11.65v15.68c0 .25.04.47.11.65zm10.32-7.74l2.45 2.45-9.96 5.66c-.39.22-.8.21-1.16.04l8.67-8.15zm5.55-3.16c.62.36.96.97.96 1.57s-.34 1.21-.96 1.57l-2.91 1.66-2.66-2.66 2.66-2.66 2.91 1.52zM5.99 3.21c.36-.17.77-.18 1.16.04l9.96 5.66-2.45 2.45L5.99 3.21z"/>
        )}
      </svg>
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.1 }}>
        <span style={{ fontSize: 10, opacity: .8, fontWeight: 500 }}>
          {isApple ? "Download on the" : "GET IT ON"}
        </span>
        <span style={{ fontSize: 17, fontWeight: 600, letterSpacing: -.2 }}>
          {isApple ? "App Store" : "Google Play"}
        </span>
      </div>
    </a>
  );
};
window.StoreBadge = StoreBadge;

// Phone mockup with image carousel
const PhoneMockup = ({ images, accent, glow = true }) => {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % images.length), 3200);
    return () => clearInterval(t);
  }, [images.length]);
  return (
    <div className="phone-wrap" style={{ position: "relative", display: "inline-block" }}>
      {glow && <div className="phone-glow" style={{
        position: "absolute", inset: "-15% -20%", zIndex: 0,
        background: `radial-gradient(60% 50% at 50% 50%, ${accent}55, transparent 70%)`,
        filter: "blur(40px)", pointerEvents: "none",
      }} />}
      <div style={{
        position: "relative", zIndex: 1,
        width: 290, height: 588, borderRadius: 48,
        background: "linear-gradient(180deg, #1a1a1a, #0a0a0a)",
        padding: 11,
        boxShadow: "0 30px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.06)",
      }}>
        <div style={{
          width: "100%", height: "100%", borderRadius: 38, overflow: "hidden",
          position: "relative", background: "#000",
        }}>
          {/* Notch */}
          <div style={{
            position: "absolute", top: 8, left: "50%", transform: "translateX(-50%)",
            width: 100, height: 28, background: "#000", borderRadius: 20, zIndex: 3,
          }} />
          {/* Screen content */}
          {images.map((img, i) => (
            <div key={i} style={{
              position: "absolute", inset: 0,
              opacity: i === idx ? 1 : 0,
              transition: "opacity .8s ease",
            }}>
              {img.type === "placeholder" ? (
                <PhonePlaceholder kind={img.kind} accent={accent} label={img.label} />
              ) : (
                <img src={img.src} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              )}
            </div>
          ))}
          {/* Status bar */}
          <div style={{
            position: "absolute", top: 0, left: 0, right: 0, height: 44,
            display: "flex", alignItems: "center", justifyContent: "space-between",
            padding: "0 28px", color: "#fff", fontSize: 14, fontWeight: 600, zIndex: 2,
          }}>
            <span>9:41</span>
            <span style={{ opacity: 0 }}>—</span>
          </div>
        </div>
      </div>
      {/* Dots */}
      <div style={{
        position: "absolute", bottom: -28, left: 0, right: 0,
        display: "flex", justifyContent: "center", gap: 6, zIndex: 1,
      }}>
        {images.map((_, i) => (
          <div key={i} style={{
            width: i === idx ? 18 : 6, height: 6, borderRadius: 3,
            background: i === idx ? accent : "rgba(127,127,127,.4)",
            transition: "all .3s ease",
          }} />
        ))}
      </div>
    </div>
  );
};
window.PhoneMockup = PhoneMockup;

// In-phone screen "placeholders" — designed mock app screens
const PhonePlaceholder = ({ kind, accent, label }) => {
  if (kind === "generate") {
    return (
      <div style={{
        width: "100%", height: "100%", padding: "60px 18px 18px",
        background: "linear-gradient(180deg, #0a0e1a 0%, #0a0a14 100%)",
        color: "#fff", display: "flex", flexDirection: "column", gap: 14,
      }}>
        <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -.3 }}>Generate</div>
        <div style={{
          aspectRatio: "1", borderRadius: 18, overflow: "hidden", position: "relative",
          background: `linear-gradient(135deg, ${accent}, #6b3fb8)`,
        }}>
          <div style={{
            position: "absolute", inset: 0,
            background: "radial-gradient(circle at 30% 40%, rgba(255,255,255,.3), transparent 50%)",
          }} />
          <div style={{
            position: "absolute", bottom: 14, left: 14, right: 14,
            display: "flex", justifyContent: "space-between", alignItems: "flex-end",
          }}>
            <div>
              <div style={{ fontSize: 11, opacity: .8 }}>Cinematic</div>
              <div style={{ fontSize: 16, fontWeight: 600 }}>Golden Hour</div>
            </div>
            <div style={{
              width: 36, height: 36, borderRadius: 18,
              background: "rgba(255,255,255,.2)", backdropFilter: "blur(10px)",
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>▶</div>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          {["Portrait", "Cyberpunk", "Vintage", "Studio"].map((s, i) => (
            <div key={i} style={{
              aspectRatio: "1", borderRadius: 14,
              background: `linear-gradient(135deg, hsl(${200 + i * 30}, 50%, 35%), hsl(${220 + i * 30}, 60%, 25%))`,
              padding: 10, display: "flex", alignItems: "flex-end",
              fontSize: 12, fontWeight: 600,
            }}>{s}</div>
          ))}
        </div>
      </div>
    );
  }
  if (kind === "result") {
    return (
      <div style={{
        width: "100%", height: "100%", position: "relative",
        background: `linear-gradient(160deg, ${accent} 0%, #1a1f3a 50%, #000 100%)`,
      }}>
        <div style={{
          position: "absolute", inset: 0,
          background: "radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.15), transparent 60%)",
        }} />
        <div style={{
          position: "absolute", top: "30%", left: "50%", transform: "translateX(-50%)",
          width: 140, height: 180, borderRadius: 70,
          background: "linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.05))",
          backdropFilter: "blur(8px)", border: "1px solid rgba(255,255,255,.15)",
        }} />
        <div style={{
          position: "absolute", bottom: 100, left: 18, right: 18,
          color: "#fff", textAlign: "center",
        }}>
          <div style={{ fontSize: 11, opacity: .7, letterSpacing: 2, textTransform: "uppercase" }}>Generated</div>
          <div style={{ fontSize: 20, fontWeight: 700, marginTop: 4 }}>{label || "Cinematic Portrait"}</div>
        </div>
        <div style={{
          position: "absolute", bottom: 24, left: 18, right: 18,
          display: "flex", gap: 10,
        }}>
          <div style={{
            flex: 1, height: 48, borderRadius: 24,
            background: "rgba(255,255,255,.15)", backdropFilter: "blur(10px)",
            border: "1px solid rgba(255,255,255,.2)",
            display: "flex", alignItems: "center", justifyContent: "center",
            color: "#fff", fontWeight: 600, fontSize: 13,
          }}>Save</div>
          <div style={{
            flex: 1, height: 48, borderRadius: 24,
            background: "#fff", color: "#000",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontWeight: 600, fontSize: 13,
          }}>Share</div>
        </div>
      </div>
    );
  }
  if (kind === "upload") {
    return (
      <div style={{
        width: "100%", height: "100%", padding: "60px 18px 18px",
        background: "#fafafa", color: "#0a0a14",
        display: "flex", flexDirection: "column",
      }}>
        <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -.3, marginBottom: 18 }}>Upload</div>
        <div style={{
          flex: 1, borderRadius: 18,
          border: `2px dashed ${accent}`,
          background: `${accent}10`,
          display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
          gap: 14, padding: 20, textAlign: "center",
        }}>
          <div style={{
            width: 64, height: 64, borderRadius: 32,
            background: accent, color: "#fff",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 28,
          }}>+</div>
          <div style={{ fontSize: 15, fontWeight: 600 }}>Drop a photo</div>
          <div style={{ fontSize: 12, opacity: .6 }}>JPG, PNG up to 20MB</div>
        </div>
        <div style={{
          marginTop: 14, height: 52, borderRadius: 26,
          background: accent, color: "#fff",
          display: "flex", alignItems: "center", justifyContent: "center",
          fontWeight: 600, fontSize: 15,
        }}>Choose from library</div>
      </div>
    );
  }
  return null;
};
window.PhonePlaceholder = PhonePlaceholder;

// Simple icons
const Icon = ({ name, size = 22, color = "currentColor" }) => {
  const paths = {
    sparkle: "M12 2l1.5 5.5L19 9l-5.5 1.5L12 16l-1.5-5.5L5 9l5.5-1.5L12 2zm6 12l.8 2.7L21 17l-2.2.5L18 20l-.8-2.5L15 17l2.2-.3L18 14z",
    portrait: "M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-3.3 0-6 1.8-6 4v2h12v-2c0-2.2-2.7-4-6-4z",
    template: "M3 5a2 2 0 012-2h4a2 2 0 012 2v4a2 2 0 01-2 2H5a2 2 0 01-2-2V5zm10 0a2 2 0 012-2h4a2 2 0 012 2v4a2 2 0 01-2 2h-4a2 2 0 01-2-2V5zM3 15a2 2 0 012-2h4a2 2 0 012 2v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4zm10 0a2 2 0 012-2h4a2 2 0 012 2v4a2 2 0 01-2 2h-4a2 2 0 01-2-2v-4z",
    hd: "M3 6a2 2 0 012-2h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6zm5 4v4h1v-1.5h2V14h1v-4h-1v1.5H9V10H8zm5 0v4h2.5a1.5 1.5 0 001.5-1.5v-1a1.5 1.5 0 00-1.5-1.5H13z",
    shield: "M12 2l8 3v6c0 5-3.5 9.3-8 11-4.5-1.7-8-6-8-11V5l8-3z",
    crown: "M3 17h18l-2-9-4 3-3-6-3 6-4-3-2 9zm0 2h18v2H3v-2z",
    play: "M8 5v14l11-7L8 5z",
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden>
      <path d={paths[name]} />
    </svg>
  );
};
window.Icon = Icon;

Object.assign(window, { Logo, StoreBadge, PhoneMockup, PhonePlaceholder, Icon, useReveal });