/* global React */
const { useState, useEffect, useRef } = React;

/* ================== ICON (Lucide-style outline) ================== */
function Icon({ name, size = 22, stroke = 1.75, ...rest }) {
  const c = "round";
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: c, strokeLinejoin: c, ...rest };
  switch (name) {
    case "users":      return (<svg {...props}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>);
    case "home":       return (<svg {...props}><path d="M3 9l9-6 9 6"/><path d="M5 8v12h14V8"/></svg>);
    case "layers":     return (<svg {...props}><polygon points="12 2 4 7 12 12 20 7 12 2"/><polyline points="4 12 12 17 20 12"/><polyline points="4 17 12 22 20 17"/></svg>);
    case "droplets":   return (<svg {...props}><path d="M12 2.69 5.5 12.5a7 7 0 1 0 13 0z"/></svg>);
    case "calendar":   return (<svg {...props}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M7 2v4M17 2v4"/></svg>);
    case "bell":       return (<svg {...props}><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>);
    case "map":        return (<svg {...props}><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21 3 6"/><line x1="9" y1="3" x2="9" y2="18"/><line x1="15" y1="6" x2="15" y2="21"/></svg>);
    case "history":    return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>);
    case "sparkles":   return (<svg {...props}><path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5z"/><path d="M19 15l.7 2.1L22 18l-2.3.9L19 21l-.7-2.1L16 18l2.3-.9z"/></svg>);
    case "arrow":      return (<svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>);
    case "whatsapp":   return (<svg {...props}><path d="M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8z"/><path d="M7.5 9.5c0 4 3 7 7 7"/></svg>);
    case "check":      return (<svg {...props}><polyline points="20 6 9 17 4 12"/></svg>);
    case "x":          return (<svg {...props}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>);
    case "menu":       return (<svg {...props}><path d="M3 6h18M3 12h18M3 18h18"/></svg>);
    case "play":       return (<svg {...props}><polygon points="5 3 19 12 5 21 5 3"/></svg>);
    case "chart":      return (<svg {...props}><path d="M3 3v18h18"/><path d="M7 14l3-3 4 4 5-7"/></svg>);
    case "globe":      return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>);
    case "shield":     return (<svg {...props}><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6z"/></svg>);
    case "zap":        return (<svg {...props}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>);
    default: return null;
  }
}

/* ================== BLUR ORB ================== */
function BlurOrb({ size = 320, color = "#234EFF", style = {}, opacity = 0.55 }) {
  return <div style={{ position: "absolute", width: size, height: size, borderRadius: 999, filter: "blur(80px)", background: color, opacity, pointerEvents: "none", ...style }} />;
}

/* ================== EYEBROW (section label) ================== */
function Eyebrow({ children, style = {} }) {
  return <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, letterSpacing: "0.10em", textTransform: "uppercase", color: "var(--ata-fg-subtle)", marginBottom: 16, display: "inline-flex", alignItems: "center", gap: 8, ...style }}>
    <span style={{ width: 6, height: 6, borderRadius: 999, background: "linear-gradient(135deg,#234EFF,#5B7FFF)", boxShadow: "0 0 8px #5B7FFF" }} />
    {children}
  </div>;
}

/* ================== SECTION TITLE ================== */
function SectionTitle({ children, gradient, style = {} }) {
  return <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(26px, 5vw, 48px)", lineHeight: 1.05, letterSpacing: "-0.022em", color: "var(--ata-fg)", margin: 0, ...style }}>
    {children}
    {gradient && <><br/><span style={{ background: "linear-gradient(135deg,#234EFF,#5B7FFF)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>{gradient}</span></>}
  </h2>;
}

/* ================== GLOW BUTTON (primary CTA) ================== */
function GlowButton({ children, href, onClick, secondary, size = "lg", iconLeft, iconRight, style = {} }) {
  const [hover, setHover] = useState(false);
  const heights = { lg: 56, md: 48, sm: 40 };
  const padding = { lg: "0 28px", md: "0 22px", sm: "0 16px" };
  const fontSize = { lg: 15, md: 14, sm: 13 };
  const base = {
    height: heights[size], padding: padding[size], borderRadius: 999, border: "none", cursor: "pointer",
    fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: fontSize[size], color: "#fff",
    display: "inline-flex", alignItems: "center", gap: 10, justifyContent: "center",
    transition: "all .45s cubic-bezier(0.16,1,0.3,1)",
    transform: hover ? "translateY(-2px) scale(1.02)" : "translateY(0)",
    textDecoration: "none", whiteSpace: "nowrap",
    ...style,
  };
  const primaryStyle = {
    ...base,
    background: "linear-gradient(135deg, #234EFF 0%, #5B7FFF 100%)",
    boxShadow: hover
      ? "0 0 50px rgba(35,78,255,.55), 0 8px 24px rgba(35,78,255,.30), inset 0 1px 0 rgba(255,255,255,.22)"
      : "0 0 30px rgba(35,78,255,.40), inset 0 1px 0 rgba(255,255,255,.18)",
  };
  const secondaryStyle = {
    ...base,
    background: hover ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.05)",
    backdropFilter: "blur(20px)", WebkitBackdropFilter: "blur(20px)",
    border: `1px solid ${hover ? "rgba(91,127,255,0.45)" : "rgba(255,255,255,0.10)"}`,
    boxShadow: hover ? "0 0 30px rgba(35,78,255,.20)" : "none",
  };
  const props = {
    onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false),
    style: secondary ? secondaryStyle : primaryStyle,
  };
  const inner = <>{iconLeft && <Icon name={iconLeft} size={size === "lg" ? 18 : 16} />}{children}{iconRight && <Icon name={iconRight} size={size === "lg" ? 18 : 16} />}</>;
  return href ? <a href={href} {...props} target={href.startsWith("http") ? "_blank" : undefined} rel="noreferrer">{inner}</a> : <button onClick={onClick} {...props}>{inner}</button>;
}

/* ================== GLASS CARD (with hover lift) ================== */
function GlassCard({ children, hover = true, padding = 32, radius = 28, style = {}, ...rest }) {
  const [h, setH] = useState(false);
  const baseShadow = "0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08)";
  const hoverShadow = "0 16px 48px rgba(0,0,0,0.40), 0 0 40px rgba(35,78,255,0.30), inset 0 1px 0 rgba(255,255,255,0.12)";
  return <div
    onMouseEnter={() => hover && setH(true)} onMouseLeave={() => hover && setH(false)}
    style={{
      background: h ? "rgba(255,255,255,0.07)" : "rgba(255,255,255,0.05)",
      backdropFilter: "blur(20px) saturate(140%)", WebkitBackdropFilter: "blur(20px) saturate(140%)",
      border: `1px solid ${h ? "rgba(91,127,255,0.40)" : "rgba(255,255,255,0.08)"}`,
      borderRadius: radius, padding,
      boxShadow: h ? hoverShadow : baseShadow,
      transform: h ? "translateY(-6px)" : "translateY(0)",
      transition: "all .45s cubic-bezier(0.16,1,0.3,1)",
      ...style,
    }} {...rest}>{children}</div>;
}

/* ================== ICON PILL (tinted gradient bg for an icon) ================== */
function IconPill({ icon, size = 48, color = "#5B7FFF" }) {
  return <div style={{
    width: size, height: size, borderRadius: 16,
    background: "linear-gradient(135deg, rgba(35,78,255,0.20), rgba(91,127,255,0.10))",
    border: "1px solid rgba(91,127,255,0.30)",
    display: "flex", alignItems: "center", justifyContent: "center",
    color, boxShadow: "inset 0 1px 0 rgba(255,255,255,0.10)",
    flexShrink: 0,
  }}><Icon name={icon} size={size * 0.46} stroke={1.75} /></div>;
}

/* ================== REVEAL ON SCROLL ================== */
function Reveal({ children, delay = 0, y = 16, style = {} }) {
  const ref = useRef(null);
  const [v, setV] = useState(false);
  useEffect(() => {
    const io = new IntersectionObserver(([e]) => e.isIntersecting && setV(true), { threshold: 0.15 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return <div ref={ref} style={{
    opacity: v ? 1 : 0, transform: v ? "translateY(0)" : `translateY(${y}px)`,
    filter: v ? "blur(0)" : "blur(8px)",
    transition: `opacity .8s cubic-bezier(0.16,1,0.3,1) ${delay}ms, transform .8s cubic-bezier(0.16,1,0.3,1) ${delay}ms, filter .6s ease ${delay}ms`,
    ...style,
  }}>{children}</div>;
}

/* expose to siblings */
Object.assign(window, { Icon, BlurOrb, Eyebrow, SectionTitle, GlowButton, GlassCard, IconPill, Reveal });