// Shared tiny helpers
const Icon = ({ name, size = 20, stroke = 1.75, className = "" }) => {
  const paths = {
    play: <polygon points="6 3 20 12 6 21 6 3"/>,
    trend: <><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></>,
    target: <><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></>,
    zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>,
    cpu: <><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/></>,
    clapper: <><path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z"/><path d="m6.2 5.3 3.1 3.9"/><path d="m12.4 3.4 3.1 4"/><path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></>,
    arrowRight: <><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></>,
    check: <polyline points="20 6 9 17 4 12"/>,
    dollar: <><line x1="12" x2="12" y1="2" y2="22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></>,
    bar: <><line x1="12" x2="12" y1="20" y2="10"/><line x1="18" x2="18" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="16"/></>,
    menu: <><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="18" y2="18"/></>,
    close: <><path d="M18 6 6 18"/><path d="m6 6 12 12"/></>,
    sparkles: <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.582a.5.5 0 0 1 0 .962L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/>,
    trophy: <><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" className={className}>
      {paths[name]}
    </svg>
  );
};

const Logo = ({ size = 32, color = "#051B42" }) => (
  <svg viewBox="0 0 240 240" width={size} height={size} aria-label="Di Fiore Creative">
    <circle cx="120" cy="120" r="108" fill="none" stroke={color} strokeWidth="6"/>
    <rect x="114" y="150" width="12" height="52" rx="2" fill={color}/>
    <path d="M120 150 L120 120 L150 90" fill="none" stroke={color} strokeWidth="5.5" strokeLinecap="round" strokeLinejoin="round"/>
    <path d="M120 130 L152 130 L168 114" fill="none" stroke={color} strokeWidth="5.5" strokeLinecap="round" strokeLinejoin="round"/>
    <path d="M120 110 L140 110 L140 84" fill="none" stroke={color} strokeWidth="5.5" strokeLinecap="round" strokeLinejoin="round"/>
    <circle cx="150" cy="90" r="5" fill={color}/><circle cx="168" cy="114" r="5" fill={color}/><circle cx="140" cy="84" r="5" fill={color}/>
    <path d="M120 140 C 92 138, 74 120, 70 96 C 92 94, 110 110, 118 130 Z" fill={color}/>
    <path d="M120 118 C 100 108, 86 88, 86 66 C 106 72, 118 90, 122 112 Z" fill={color}/>
    <path d="M120 96 C 114 80, 118 58, 132 46 C 138 62, 134 82, 124 96 Z" fill={color}/>
    <circle cx="120" cy="56" r="6" fill={color}/>
  </svg>
);

const Eyebrow = ({ children, color = "#4361EE" }) => (
  <div style={{ fontFamily: "'Poppins',sans-serif", fontWeight: 500, fontSize: 12,
    textTransform: "uppercase", letterSpacing: "0.14em", color }}>{children}</div>
);

const Button = ({ children, variant = "primary", href = "#", onClick, icon }) => {
  const base = {
    display: "inline-flex", alignItems: "center", gap: 8,
    fontFamily: "'Inter',sans-serif", fontWeight: 500, fontSize: 15,
    padding: "12px 24px", borderRadius: 999, border: 0, cursor: "pointer",
    textDecoration: "none", transition: "all 180ms cubic-bezier(.2,.7,.2,1)",
  };
  const variants = {
    primary:   { background: "#051B42", color: "#fff" },
    secondary: { background: "#fff", color: "#051B42", border: "1.5px solid #051B42", padding: "10.5px 22.5px" },
    cta:       { background: "#4361EE", color: "#fff" },
    ghost:     { background: "transparent", color: "#fff", border: "1.5px solid rgba(255,255,255,.25)", padding: "10.5px 22.5px" },
  };
  return (
    <a href={href} onClick={onClick} style={{ ...base, ...variants[variant] }}
       onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-1px)"; }}
       onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; }}>
      {children}{icon && <Icon name={icon} size={16}/>}
    </a>
  );
};

// Responsive breakpoint hook. Returns "mobile" (<768), "tablet" (768–1023), or "desktop" (≥1024).
const useBreakpoint = () => {
  const compute = () => {
    if (typeof window === "undefined") return "desktop";
    const w = window.innerWidth;
    return w < 768 ? "mobile" : w < 1024 ? "tablet" : "desktop";
  };
  const [bp, setBp] = React.useState(compute);
  React.useEffect(() => {
    const onResize = () => setBp(compute());
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
  return bp;
};

Object.assign(window, { Icon, Logo, Eyebrow, Button, useBreakpoint });
