/* global React */
/* ============================================================
   OASIA — Shared components: Icon, Logo, Button, Reveal
   ============================================================ */

// Minimal stroke icon set (Lucide-style, 1.75 stroke)
const ICON_PATHS = {
  arrowRight: <path d="M5 12h14M13 5l7 7-7 7" />,
  arrowDown:  <path d="M12 5v14M5 12l7 7 7-7" />,
  check:      <path d="M20 6 9 17l-5-5" />,
  shield:     <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />,
  scale:      <><path d="M12 3v18" /><path d="M3 7h18" /><path d="M7 7l-3 7a4 4 0 0 0 8 0L9 7" /><path d="M17 7l-3 7a4 4 0 0 0 8 0l-3-7" /></>,
  home:       <path d="M3 11.5 12 4l9 7.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z" />,
  phone:      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />,
  msg:        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z" />,
  whatsapp:   <><path d="M21 12a9 9 0 0 1-13.4 7.8L3 21l1.3-4.6A9 9 0 1 1 21 12z" /><path d="M8.5 9c.3 1.7 1.8 4 3.5 5 1.7 1 3.4.8 4 .3a1.6 1.6 0 0 0 .4-1.6l-.4-1c-.1-.3-.4-.4-.7-.3l-1.2.4c-.2.1-.4 0-.6-.1-.5-.4-1.3-1.2-1.7-1.7-.1-.2-.2-.4-.1-.6l.4-1.2c.1-.3 0-.6-.3-.7l-1-.4a1.6 1.6 0 0 0-1.6.4c-.4.4-.6 1.1-.7 1.5z" /></>,
  video:      <><rect x="2" y="6" width="14" height="12" rx="2" /><path d="M22 8l-6 4 6 4z" /></>,
  clock:      <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>,
  user:       <><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></>,
  users:      <><circle cx="9" cy="8" r="4" /><path d="M2 21a7 7 0 0 1 14 0" /><path d="M16 4a4 4 0 0 1 0 8" /><path d="M22 21a7 7 0 0 0-5-6.7" /></>,
  doc:        <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /><path d="M9 13h6M9 17h6" /></>,
  lock:       <><rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></>,
  eye:        <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" /><circle cx="12" cy="12" r="3" /></>,
  search:     <><circle cx="11" cy="11" r="7" /><path d="m20 20-4.3-4.3" /></>,
  heart:      <path d="M20.84 4.6a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.07a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.85a5.5 5.5 0 0 0 0-7.78z" />,
  spark:      <path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z" />,
  sparkles:   <><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z" /><path d="M19 17l.7 1.8L21.5 19.5l-1.8.7L19 22l-.7-1.8L16.5 19.5l1.8-.7z" /></>,
  zap:        <path d="M13 2 4 14h7l-1 8 9-12h-7z" />,
  map:        <><path d="M1 6v15l7-3 8 3 7-3V3l-7 3-8-3z" /><path d="M8 3v15M16 6v15" /></>,
  euro:       <path d="M19 5a8 8 0 1 0 0 14M4 10h11M4 14h11" />,
  alert:      <><path d="M12 9v4M12 17h.01M4.93 19h14.14a2 2 0 0 0 1.73-3L13.73 4a2 2 0 0 0-3.46 0L3.2 16a2 2 0 0 0 1.73 3z" /></>,
  briefcase:  <><rect x="2" y="7" width="20" height="14" rx="2" /><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /><path d="M2 13h20" /></>,
  refresh:    <><path d="M3 12a9 9 0 0 1 15-6.7L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-15 6.7L3 16" /><path d="M3 21v-5h5" /></>,
  key:        <><circle cx="8" cy="15" r="4" /><path d="m10.85 12.15 9.4-9.4M16 9l3 3M14 11l3 3" /></>,
  globe:      <><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" /></>,
  x:          <path d="M18 6 6 18M6 6l12 12" />,
  menu:       <path d="M3 6h18M3 12h18M3 18h18" />,
  plus:       <path d="M12 5v14M5 12h14" />,
  minus:      <path d="M5 12h14" />,
  send:       <><path d="m22 2-7 20-4-9-9-4z" /><path d="M22 2 11 13" /></>,
  leaf:       <><path d="M11 20A7 7 0 0 1 4 13c0-5 4-9 9-9a14 14 0 0 1 7 1c0 9-4 15-9 15z" /><path d="M2 22 11 13" /></>,
};

function Icon({ name, size = 20, stroke = 1.75, color = "currentColor", style }) {
  return (
    <svg
      width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke={color} strokeWidth={stroke}
      strokeLinecap="round" strokeLinejoin="round"
      aria-hidden="true"
      style={{ flexShrink: 0, ...style }}
    >
      {ICON_PATHS[name] || null}
    </svg>
  );
}

// Oasia wordmark
function Logo({ inverse = false, size = 28, sub = true }) {
  const ink = inverse ? "var(--ink-inv)" : "var(--ink)";
  return (
    <div style={{ display: "inline-flex", flexDirection: "column", lineHeight: 1, gap: 2 }}>
      <div style={{
        fontFamily: "var(--font-display)",
        fontWeight: 600,
        fontSize: size,
        letterSpacing: "-0.02em",
        color: ink,
        display: "inline-flex", alignItems: "baseline", gap: 0,
      }}>
        <span>oa</span>
        <span style={{
          color: "var(--petrol)",
          fontStyle: "italic",
          fontWeight: 500,
        }}>s</span>
        <span>ia</span>
      </div>
      {sub && (
        <div style={{
          fontFamily: "var(--font-mono)",
          fontSize: Math.round(size * 0.32),
          fontWeight: 500,
          letterSpacing: "0.20em",
          textTransform: "uppercase",
          color: inverse ? "rgba(248,244,234,0.55)" : "var(--ink-3)",
        }}>
          Una salida ordenada
        </div>
      )}
    </div>
  );
}

// Reveal-on-scroll
function Reveal({ children, delay = 0, as: As = "div", style, className = "" }) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVisible(true); io.disconnect(); }
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <As
      ref={ref}
      className={className}
      style={{
        opacity: visible ? 1 : 0,
        transform: visible ? "translateY(0)" : "translateY(16px)",
        transition: `opacity .8s cubic-bezier(.2,.7,.2,1) ${delay}ms, transform .8s cubic-bezier(.2,.7,.2,1) ${delay}ms`,
        ...style,
      }}
    >
      {children}
    </As>
  );
}

Object.assign(window, { Icon, Logo, Reveal });