const { SocialIcon } = window.TheVisualsBrothersDesignSystem_fe64e0;

const brandPaths = {
  instagram: "M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7zm5 3.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9zm0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM17.8 6a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2z",
  linkedin: "M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM10 9h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.6c0-1.34-.02-3.06-1.87-3.06-1.87 0-2.16 1.46-2.16 2.96V21h-4z",
  x: "M18.9 3H22l-7.6 8.7L23.3 21h-6.9l-5.4-6.6L4.8 21H1.7l8.1-9.3L1 3h7l4.9 6.1L18.9 3zm-1.2 16h1.9L7.4 4.9H5.4L17.7 19z",
  youtube: "M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.6 15.5V8.5L15.8 12l-6.2 3.5z",
};

const footerColors = ["#D97706", "#F59E0B", "#FBBF24", "#EA580C", "#FDE68A", "#FCA5A5", "#93C5FD"];
const footerSprinkles = Array.from({ length: 30 }, (_, i) => ({
  left: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`,
  size: Math.round(Math.random() * 4 + 2), color: footerColors[i % footerColors.length],
  dur: `${(Math.random() * 2 + 2).toFixed(1)}s`, delay: `${(Math.random() * 3).toFixed(1)}s`,
}));

function SocialLink({ icon, href }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{
      width: "40px", height: "40px", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center",
      border: `1px solid ${hover ? "var(--accent-primary)" : "var(--border-strong)"}`,
      background: hover ? "var(--accent-primary)" : "transparent",
      color: hover ? "var(--slate-900)" : "var(--text-primary)",
      transform: hover ? "translateY(-4px)" : "translateY(0)", transition: "all var(--duration-fast) ease",
    }}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d={brandPaths[icon]} /></svg>
    </a>
  );
}

function Doodle({ src, style }) {
  return <img src={src} alt="" aria-hidden="true" className="vb-doodle" style={{ position: "absolute", pointerEvents: "none", opacity: 0.35, zIndex: 0, ...style }} />;
}

function Footer() {
  const [legal, setLegal] = React.useState(null);
  return (
    <footer id="contact" style={{
      padding: "80px var(--space-section-h) 40px", background: "var(--slate-900)",
      borderTop: "1px solid var(--border-subtle)", fontFamily: "var(--font-body)",
      position: "relative", overflow: "hidden",
    }}>
      <Doodle src="site/doodle-filmstrip.png" style={{ width: "70px", top: "28px", right: "48px", transform: "rotate(7deg)" }} />
      <Doodle src="site/doodle-bulb.png" style={{ width: "46px", top: "110px", right: "18%", transform: "rotate(-6deg)" }} />
      <Doodle src="site/doodle-star.png" style={{ width: "36px", bottom: "90px", left: "6%", transform: "rotate(5deg)" }} />
      <div style={{
        position: "absolute", top: "-30%", left: "50%", width: "800px", height: "600px", transform: "translateX(-50%)",
        background: "radial-gradient(circle, rgba(217,119,6,0.14), transparent 65%)",
        filter: "blur(10px)", animation: "vb-glow-pulse 6s ease-in-out infinite", zIndex: 0, pointerEvents: "none",
      }} />
      <img src="site/logo.png" alt="The Visuals Brothers" style={{ height: "56px", width: "auto", position: "relative", zIndex: 1, marginBottom: "24px" }} />
      <div style={{
        position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none",
      }}>
        {footerSprinkles.map((s, i) => (
          <div key={i} style={{
            position: "absolute", left: s.left, top: s.top, width: `${s.size}px`, height: `${s.size}px`,
            borderRadius: "50%", background: s.color,
            boxShadow: `0 0 ${s.size * 3}px ${s.color}, 0 0 ${s.size * 6}px ${s.color}`,
            animation: `vb-sprinkle-twinkle ${s.dur} ease-in-out infinite`, animationDelay: s.delay,
          }} />
        ))}
      </div>
      <h2 style={{
        position: "relative", zIndex: 1,
        fontSize: "28px", fontWeight: 700, color: "var(--text-primary)", marginBottom: "40px", marginTop: 0,
      }}>LET'S BUILD SOMETHING <span style={{ color: "var(--accent-primary)", textShadow: "0 0 24px rgba(217,119,6,0.5)" }}>EXTRAORDINARY</span></h2>
      <div style={{ position: "relative", zIndex: 1, display: "flex", gap: "60px", marginBottom: "40px", flexWrap: "wrap" }}>
        <div>
          <div style={{ fontSize: "12px", color: "var(--text-muted)", textTransform: "uppercase", marginBottom: "8px" }}>Email</div>
          <a href="mailto:info@thevisualsbrothers.com" style={{ fontSize: "14px", color: "var(--text-primary)", textDecoration: "none" }}
            onMouseEnter={(e) => (e.currentTarget.style.color = "var(--accent-primary)")}
            onMouseLeave={(e) => (e.currentTarget.style.color = "var(--text-primary)")}>info@thevisualsbrothers.com</a>
        </div>
        <div>
          <div style={{ fontSize: "12px", color: "var(--text-muted)", textTransform: "uppercase", marginBottom: "8px" }}>Phone</div>
          <a href="tel:+971585651100" style={{ fontSize: "14px", color: "var(--text-primary)", textDecoration: "none" }}
            onMouseEnter={(e) => (e.currentTarget.style.color = "var(--accent-primary)")}
            onMouseLeave={(e) => (e.currentTarget.style.color = "var(--text-primary)")}>+971 58 565 1100</a>
        </div>
        <div>
          <div style={{ fontSize: "12px", color: "var(--text-muted)", textTransform: "uppercase", marginBottom: "8px" }}>Social</div>
          <div style={{ display: "flex", gap: "12px" }}>
            <SocialLink icon="instagram" href="https://instagram.com/thevisualsbrothers" />
            <SocialLink icon="linkedin" href="https://linkedin.com/company/thevisualsbrothers" />
            <SocialLink icon="youtube" href="https://www.youtube.com/@thevisualsbrothers" />
          </div>
        </div>
      </div>
      <div style={{
        borderTop: "1px solid var(--border-subtle)", paddingTop: "40px", position: "relative", zIndex: 1,
        display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: "12px",
      }}>
        <div style={{ fontSize: "13px", color: "var(--text-muted)" }}>© 2026 THE VISUALS BROTHERS. ALL RIGHTS RESERVED.</div>
        <div style={{ display: "flex", gap: "24px" }}>
          <a href="#" onClick={(e) => { e.preventDefault(); setLegal("privacy"); }} style={{ fontSize: "13px", color: "var(--text-muted)", textDecoration: "none" }}
            onMouseEnter={(e) => (e.currentTarget.style.color = "var(--accent-primary)")}
            onMouseLeave={(e) => (e.currentTarget.style.color = "var(--text-muted)")}>PRIVACY POLICY</a>
          <a href="#" onClick={(e) => { e.preventDefault(); setLegal("terms"); }} style={{ fontSize: "13px", color: "var(--text-muted)", textDecoration: "none" }}
            onMouseEnter={(e) => (e.currentTarget.style.color = "var(--accent-primary)")}
            onMouseLeave={(e) => (e.currentTarget.style.color = "var(--text-muted)")}>TERMS &amp; CONDITIONS</a>
        </div>
      </div>
      {legal ? <LegalModal type={legal} onClose={() => setLegal(null)} /> : null}
    </footer>
  );
}

window.Footer = Footer;