/* global React */
const { useState } = React;

window.Container = function Container({ children, style = {}, ...rest }) {
  return (
    <div style={{ maxWidth: 1240, margin: "0 auto", padding: "0 clamp(20px, 4vw, 48px)", ...style }} {...rest}>
      {children}
    </div>
  );
};

window.Section = function Section({ children, dark = false, style = {}, ...rest }) {
  return (
    <section
      style={{
        padding: "clamp(72px, 10vw, 128px) 0",
        background: dark ? "var(--tl-grey-900)" : "transparent",
        color: dark ? "#fff" : "var(--fg)",
        position: "relative",
        ...style,
      }}
      {...rest}
    >
      {children}
    </section>
  );
};

window.Eyebrow = function Eyebrow({ children, light = false, style = {} }) {
  return (
    <div
      style={{
        fontSize: 12,
        fontWeight: 600,
        letterSpacing: "0.14em",
        textTransform: "uppercase",
        color: light ? "var(--tl-cyan-soft)" : "var(--tl-blue-primary)",
        marginBottom: 14,
        ...style,
      }}
    >
      {children}
    </div>
  );
};

window.Button = function Button({ variant = "primary", size = "md", children, icon, onClick, href, type, as }) {
  const [hover, setHover] = useState(false);
  const base = {
    fontFamily: "var(--font-sans)",
    fontWeight: 600,
    border: "1px solid transparent",
    borderRadius: 12,
    cursor: "pointer",
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    transition: "all 220ms cubic-bezier(.22,1,.36,1)",
    padding: size === "lg" ? "14px 26px" : size === "sm" ? "8px 14px" : "11px 20px",
    fontSize: size === "lg" ? 16 : size === "sm" ? 13 : 14,
    textDecoration: "none",
  };
  const variants = {
    primary: {
      background: "linear-gradient(135deg,#0B57E0,#1E8BFF 60%,#28D1FE)",
      color: "#fff",
      boxShadow: hover
        ? "0 12px 28px rgba(11,87,224,.42), 0 0 0 4px rgba(40,209,254,.18)"
        : "0 4px 14px rgba(11,87,224,.32)",
      transform: hover ? "translateY(-2px)" : "translateY(0)",
    },
    secondary: {
      background: "#fff",
      color: "var(--tl-blue-deep)",
      borderColor: hover ? "var(--tl-blue-primary)" : "var(--border)",
    },
    ghost: {
      background: hover ? "rgba(11,87,224,.08)" : "transparent",
      color: "var(--tl-blue-primary)",
    },
    glass: {
      background: hover ? "rgba(255,255,255,.18)" : "rgba(255,255,255,.10)",
      color: "#fff",
      borderColor: "rgba(255,255,255,.22)",
      backdropFilter: "blur(12px)",
    },
    "glass-light": {
      background: hover ? "rgba(255,255,255,.95)" : "rgba(255,255,255,.86)",
      color: "var(--tl-blue-deep)",
      borderColor: "rgba(255,255,255,.5)",
      backdropFilter: "blur(12px)",
    },
  };
  const Tag = href ? "a" : "button";
  return (
    <Tag
      href={href}
      type={type}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={onClick}
      style={{ ...base, ...variants[variant] }}
    >
      {children}
      {icon && <span style={{ display: "inline-flex" }}>{icon}</span>}
    </Tag>
  );
};

window.Tag = function Tag({ children, color = "blue" }) {
  const palettes = {
    blue: { bg: "rgba(11,87,224,.10)", fg: "var(--tl-blue-deep)", dot: "var(--tl-blue-primary)" },
    cyan: { bg: "rgba(40,209,254,.18)", fg: "var(--tl-blue-deep)", dot: "var(--tl-cyan)" },
    success: { bg: "rgba(22,163,112,.12)", fg: "#0A6E4B", dot: "var(--tl-success)" },
    neutral: { bg: "var(--tl-grey-100)", fg: "var(--fg-2)", dot: "var(--tl-grey-400)" },
    glass: { bg: "rgba(255,255,255,.10)", fg: "#fff", dot: "var(--tl-cyan)" },
    "glass-dark": { bg: "rgba(8,12,26,.45)", fg: "#fff", dot: "var(--tl-cyan)" },
  };
  const p = palettes[color];
  return (
    <span style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 12, padding: "4px 10px", borderRadius: 999, background: p.bg, color: p.fg, display: "inline-flex", alignItems: "center", gap: 6 }}>
      <span style={{ width: 6, height: 6, borderRadius: "50%", background: p.dot }} />
      {children}
    </span>
  );
};

window.Icon = function Icon({ name, size = 20, color = "currentColor", strokeWidth = 1.5 }) {
  const paths = {
    arrow: <path d="M5 12h14M12 5l7 7-7 7" />,
    "arrow-up-right": <path d="M7 17L17 7M8 7h9v9" />,
    check: <><path d="M22 11.08V12a10 10 0 11-5.93-9.14" /><polyline points="22 4 12 14.01 9 11.01" /></>,
    "check-simple": <polyline points="20 6 9 17 4 12" />,
    cpu: <><rect x="4" y="4" width="16" height="16" rx="2" /><rect x="9" y="9" width="6" height="6" /><path d="M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3" /></>,
    network: <><circle cx="18" cy="5" r="3" /><circle cx="6" cy="12" r="3" /><circle cx="18" cy="19" r="3" /><line x1="8.59" y1="13.51" x2="15.42" y2="17.49" /><line x1="15.41" y1="6.51" x2="8.59" y2="10.49" /></>,
    layers: <><path d="M12 2L2 7l10 5 10-5-10-5z" /><path d="M2 17l10 5 10-5" /><path d="M2 12l10 5 10-5" /></>,
    bot: <><rect x="3" y="11" width="18" height="10" rx="2" /><circle cx="12" cy="5" r="2" /><path d="M12 7v4" /><line x1="8" y1="16" x2="8" y2="16" /><line x1="16" y1="16" x2="16" y2="16" /></>,
    spark: <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />,
    chevron: <polyline points="9 18 15 12 9 6" />,
    external: <><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" /><polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" /></>,
    mail: <><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><polyline points="22,6 12,13 2,6" /></>,
    phone: <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" />,
    pin: <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" /><circle cx="12" cy="10" r="3" /></>,
    shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />,
    rocket: <><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 00-2.91-.09z" /><path d="M12 15l-3-3a22 22 0 012-3.95A12.88 12.88 0 0122 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 01-4 2z" /><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" /></>,
    target: <><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" /></>,
    eye: <><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" /></>,
    code: <><polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" /></>,
    git: <><circle cx="18" cy="18" r="3" /><circle cx="6" cy="6" r="3" /><path d="M13 6h3a2 2 0 012 2v7" /><line x1="6" y1="9" x2="6" y2="21" /></>,
    box: <><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" /><polyline points="3.27 6.96 12 12.01 20.73 6.96" /><line x1="12" y1="22.08" x2="12" y2="12" /></>,
    users: <><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 00-3-3.87" /><path d="M16 3.13a4 4 0 010 7.75" /></>,
    award: <><circle cx="12" cy="8" r="7" /><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" /></>,
    settings: <><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z" /></>,
    zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />,
    chart: <><line x1="18" y1="20" x2="18" y2="10" /><line x1="12" y1="20" x2="12" y2="4" /><line x1="6" y1="20" x2="6" y2="14" /></>,
    activity: <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />,
    flask: <><path d="M9 2v6L4 18a2 2 0 002 3h12a2 2 0 002-3l-5-10V2" /><line x1="9" y1="2" x2="15" y2="2" /></>,
    factory: <><path d="M2 20a2 2 0 002 2h16a2 2 0 002-2V8l-7 4V8l-7 4V4a2 2 0 00-2-2H4a2 2 0 00-2 2z" /><path d="M17 18h1M12 18h1M7 18h1" /></>,
    "shield-check": <><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 01-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 011-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 011.52 0C13.51 3.81 16 5 18 5a1 1 0 011 1z" /><path d="M9 12l2 2 4-4" /></>,
    linkedin: <><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-4 0v7h-4v-7a6 6 0 016-6z" /><rect x="2" y="9" width="4" height="12" /><circle cx="4" cy="4" r="2" /></>,
    instagram: <><rect x="2" y="2" width="20" height="20" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z" /><line x1="17.5" y1="6.5" x2="17.51" y2="6.5" /></>,
    youtube: <><path d="M22.54 6.42a2.78 2.78 0 00-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 00-1.94 2A29 29 0 001 11.75a29 29 0 00.46 5.33A2.78 2.78 0 003.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 001.94-2 29 29 0 00.46-5.25 29 29 0 00-.46-5.33z" /><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" /></>,
    play: <polygon points="5 3 19 12 5 21 5 3" />,
    quote: <><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z" /><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 1-.25 1-1.25 2v1c0 1 0 2 1 2v3c0 1 0 1 1 1h-2.5z" /></>,
    sparkles: <><path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3z" /><path d="M19 14l.8 2.2L22 17l-2.2.8L19 20l-.8-2.2L16 17l2.2-.8L19 14z" /></>,
    info: <><circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" /></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
      {paths[name] || null}
    </svg>
  );
};

window.Chip = function Chip({ size = 16, style = {} }) {
  return (
    <div style={{
      width: size, height: size,
      borderRadius: size > 18 ? 6 : 4,
      background: "linear-gradient(135deg,#1E8BFF,#28D1FE)",
      boxShadow: "0 6px 20px rgba(40,209,254,0.45), inset 0 1px 0 rgba(255,255,255,.4)",
      ...style,
    }} />
  );
};

/* Refined bullet (v0.12.0): a thin geometric mark + uppercase number replacing
   checkmark badges. Pass `n` for numbered (01, 02…) or omit for a minimal
   diamond mark. Used in page-servizi.jsx + page-blueprint.jsx editorial lists. */
window.Bullet = function Bullet({ children, n, light = false, style = {} }) {
  const accent = light ? "var(--tl-cyan)" : "var(--tl-blue-primary)";
  const fg = light ? "rgba(255,255,255,.92)" : "var(--fg-1)";
  const rule = light ? "rgba(255,255,255,.14)" : "var(--border)";
  return (
    <li style={{
      display: "grid",
      gridTemplateColumns: "auto 1fr",
      gap: 14,
      alignItems: "start",
      padding: "10px 0",
      borderTop: `1px solid ${rule}`,
      fontSize: 14.5,
      color: fg,
      lineHeight: 1.55,
      ...style,
    }}>
      <span style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 8,
        paddingTop: 2,
      }}>
        {n != null ? (
          <span style={{
            fontFamily: "var(--font-mono)",
            fontSize: 11,
            fontWeight: 600,
            color: accent,
            letterSpacing: ".08em",
            minWidth: 18,
          }}>{String(n).padStart(2, "0")}</span>
        ) : (
          <svg width="14" height="14" viewBox="0 0 14 14" style={{ flexShrink: 0, marginTop: 1 }} aria-hidden="true">
            <path d="M3 7 L7 3 L11 7 L7 11 Z" fill="none" stroke={accent} strokeWidth="1.2" />
            <circle cx="7" cy="7" r="1.6" fill={accent} />
          </svg>
        )}
      </span>
      <span>{children}</span>
    </li>
  );
};