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

// ── Icons (inline Lucide-style, 1.5 stroke) ──
const Icon = ({ name, size = 20, className = "" }) => {
  const props = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor", strokeWidth: 1.5,
    strokeLinecap: "round", strokeLinejoin: "round", className
  };
  const paths = {
    arrow:       <><path d="M5 12h14"/><path d="M13 5l7 7-7 7"/></>,
    "arrow-down":<><path d="M12 5v14"/><path d="M5 13l7 7 7-7"/></>,
    pin:         <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></>,
    cal:         <><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></>,
    users:       <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></>,
    trend:       <><polyline points="3 17 9 11 13 15 21 7"/><polyline points="14 7 21 7 21 14"/></>,
    search:      <><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></>,
    menu:        <><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></>,
    x:           <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    chev:        <polyline points="9 18 15 12 9 6"/>,
    play:        <polygon points="6 4 20 12 6 20 6 4"/>,
    twitter:     <path d="M22 5.8a8.5 8.5 0 0 1-2.4.7 4.2 4.2 0 0 0 1.8-2.3 8.4 8.4 0 0 1-2.7 1 4.2 4.2 0 0 0-7.1 3.8A11.9 11.9 0 0 1 3 4.7a4.2 4.2 0 0 0 1.3 5.6A4.2 4.2 0 0 1 2.4 9.8v.1a4.2 4.2 0 0 0 3.4 4.1 4.2 4.2 0 0 1-1.9.1 4.2 4.2 0 0 0 3.9 2.9A8.4 8.4 0 0 1 2 18.7a11.9 11.9 0 0 0 6.4 1.9c7.7 0 12-6.4 12-12v-.5A8.5 8.5 0 0 0 22 5.8z"/>,
    linkedin:    <><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/><path d="M22 21V14a4 4 0 0 0-8 0v7M14 9h-2v12h2"/></>,
    yt:          <><rect x="2" y="6" width="20" height="12" rx="3"/><polygon points="10 9 16 12 10 15 10 9"/></>,
    mail:        <><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="22 6 12 13 2 6"/></>,
    instagram:   <><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.5" fill="currentColor" stroke="none"/></>
  };
  return <svg {...props}>{paths[name] || null}</svg>;
};

// ── Eyebrow ──
const Eyebrow = ({ children, accent, teal, light, className = "" }) => {
  let color = "var(--slate-mid)";
  if (accent) color = "var(--gold)";
  if (teal)   color = "var(--peacock-bright)";
  if (light)  color = "rgba(240,233,216,0.5)";
  return (
    <div className={`eyebrow ${className}`} style={{
      fontFamily: "var(--font-condensed)",
      fontSize: 12, fontWeight: 700,
      letterSpacing: "0.16em", textTransform: "uppercase",
      color
    }}>{children}</div>
  );
};

// ── Rule ──
const Rule = ({ strong, gold, teal }) => {
  let borderColor = strong ? "var(--slate)" : "var(--hairline)";
  if (gold) borderColor = "var(--gold)";
  if (teal) borderColor = "var(--peacock)";
  return <hr style={{
    border: 0,
    borderTop: `${strong || gold || teal ? "2px" : "1px"} solid ${borderColor}`,
    margin: 0
  }}/>;
};

// ── Button ──
const Button = ({ variant = "primary", size = "md", children, onClick, arrow = true, as = "button", href }) => {
  const map = {
    primary:      { bg: "var(--gold)",     fg: "var(--ink)",       border: "transparent",              hbg: "var(--gold-bright)" },
    secondary:    { bg: "var(--ink)",      fg: "var(--parchment)", border: "transparent",              hbg: "var(--ink-raised)" },
    ghost:        { bg: "transparent",    fg: "var(--slate)",     border: "var(--vellum)",             hbg: "rgba(46,61,74,0.06)", hborder: "var(--slate)" },
    "ghost-light":{ bg: "transparent",    fg: "var(--parchment)", border: "rgba(240,233,216,0.35)",    hbg: "rgba(240,233,216,0.08)", hborder: "rgba(240,233,216,0.65)" },
    teal:         { bg: "var(--peacock)", fg: "var(--parchment)", border: "transparent",              hbg: "var(--peacock-bright)" },
  }[variant] || {};

  const sz = size === "sm"
    ? { p: "8px 16px", fs: 11 }
    : { p: "13px 24px", fs: 13 };

  const Comp = as;

  return (
    <Comp href={href} onClick={onClick}
      onMouseEnter={(e) => {
        e.currentTarget.style.background = map.hbg;
        if (map.hborder) e.currentTarget.style.borderColor = map.hborder;
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.background = map.bg;
        if (map.hborder) e.currentTarget.style.borderColor = map.border;
      }}
      style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        fontFamily: "var(--font-condensed)", fontSize: sz.fs, fontWeight: 700,
        letterSpacing: "0.1em", textTransform: "uppercase",
        padding: sz.p, borderRadius: 2,
        background: map.bg, color: map.fg,
        border: `1px solid ${map.border}`,
        cursor: "pointer", textDecoration: "none",
        transition: "background 180ms var(--ease-out), border-color 180ms"
      }}>
      {children}
      {arrow && <span style={{ display: "inline-flex", opacity: 0.9 }}><Icon name="arrow" size={15}/></span>}
    </Comp>
  );
};

window.Icon     = Icon;
window.Eyebrow  = Eyebrow;
window.Rule     = Rule;
window.Button   = Button;