/* ui.jsx — shared primitives for AI Fitters one-page site */
const { useState, useEffect, useRef } = React;

// ------------------------- Button -------------------------
function Button({ variant = "primary", size = "default", icon, iconRight, children, onClick, type = "button", disabled, href, fullWidth, title }) {
  const variants = {
    primary: { background: "var(--blue)",     color: "#fff",       border: "1px solid var(--blue)" },
    ink:     { background: "var(--ink)",      color: "#fff",       border: "1px solid var(--ink)" },
    orange:  { background: "var(--orange)",   color: "#fff",       border: "1px solid var(--orange)" },
    outline: { background: "transparent",     color: "var(--ink)", border: "1px solid var(--ink)" },
    soft:    { background: "var(--white)",    color: "var(--ink)", border: "1px solid var(--line)" },
    ghost:   { background: "transparent",     color: "var(--ink-soft)", border: "1px solid transparent" },
    onDark:  { background: "rgba(255,255,255,0.08)", color: "#fff", border: "1px solid rgba(255,255,255,0.18)" },
  };
  const sizes = {
    sm:      { padding: "8px 14px",  fontSize: 13, borderRadius: 8 },
    default: { padding: "11px 18px", fontSize: 14, borderRadius: 10 },
    lg:      { padding: "15px 22px", fontSize: 15, borderRadius: 12 },
  };
  const style = {
    display: fullWidth ? "flex" : "inline-flex",
    width: fullWidth ? "100%" : "auto",
    justifyContent: "center",
    alignItems: "center", gap: 8,
    fontFamily: "var(--font-sans)", fontWeight: 600,
    cursor: disabled ? "not-allowed" : "pointer",
    opacity: disabled ? 0.4 : 1,
    transition: "transform .12s var(--t-ease), background .15s var(--t-ease), box-shadow .15s var(--t-ease)",
    textDecoration: "none",
    whiteSpace: "nowrap",
    ...variants[variant], ...sizes[size],
  };
  const Tag = href ? "a" : "button";
  const props = href ? { href } : { type, onClick, disabled };
  return (
    <Tag {...props} style={style} title={title}
      onMouseDown={e => e.currentTarget.style.transform = "translateY(0)"}
      onMouseUp={e => e.currentTarget.style.transform = "translateY(-1px)"}
      onMouseEnter={e => !disabled && (e.currentTarget.style.transform = "translateY(-1px)")}
      onMouseLeave={e => e.currentTarget.style.transform = "translateY(0)"}>
      {icon && <i data-lucide={icon} style={{width:16, height:16, strokeWidth:2}}></i>}
      <span>{children}</span>
      {iconRight && <i data-lucide={iconRight} style={{width:16, height:16, strokeWidth:2}}></i>}
    </Tag>
  );
}

// ------------------------- Chip -------------------------
function Chip({ children, tone = "neutral", icon }) {
  const tones = {
    neutral: { background: "var(--white)",    color: "var(--ink-soft)", border: "1px solid var(--line)" },
    sand:    { background: "var(--sand)",     color: "var(--ink-soft)", border: "1px solid var(--line)" },
    blue:    { background: "var(--blue-100)", color: "var(--blue-700)", border: "1px solid transparent" },
    orange:  { background: "var(--orange)",   color: "#fff",            border: "1px solid transparent" },
    dark:    { background: "var(--ink)",      color: "#fff",            border: "1px solid var(--ink)" },
    onDark:  { background: "rgba(255,255,255,0.08)", color: "#fff",     border: "1px solid rgba(255,255,255,0.18)" },
  };
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500,
      padding: "5px 10px", borderRadius: 9999, letterSpacing: ".02em",
      ...tones[tone]
    }}>
      {icon && <i data-lucide={icon} style={{width:12, height:12, strokeWidth:2}}></i>}
      {children}
    </span>
  );
}

// ------------------------- Eyebrow -------------------------
function Eyebrow({ children, color = "var(--muted)" }) {
  return <div style={{
    fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 700,
    letterSpacing: ".08em", textTransform: "uppercase", color
  }}>{children}</div>;
}

// ------------------------- Field -------------------------
function Field({ label, type = "text", value, onChange, placeholder, help, error, multiline, name, required, rows = 4 }) {
  const C = multiline ? "textarea" : "input";
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span style={{ fontSize: 13, fontWeight: 600, color: "var(--ink)" }}>
        {label}{required && <span style={{ color: "var(--danger)", marginLeft: 4 }}>*</span>}
      </span>
      <C type={multiline ? undefined : type}
         name={name}
         value={value || ""}
         onChange={e => onChange && onChange(e.target.value)}
         placeholder={placeholder}
         rows={multiline ? rows : undefined}
         style={{
           fontFamily: "var(--font-sans)", fontSize: 15,
           padding: "12px 14px",
           border: `1px solid ${error ? "var(--danger)" : "var(--line)"}`,
           borderRadius: 10, background: "#fff",
           outline: "none", transition: "border-color .15s, box-shadow .15s",
           resize: multiline ? "vertical" : "none",
           color: "var(--ink)",
           width: "100%", minWidth: 0, boxSizing: "border-box",
         }}
         onFocus={e => { e.target.style.borderColor = "var(--blue)"; e.target.style.boxShadow = "0 0 0 3px var(--blue-100)"; }}
         onBlur={e => { e.target.style.borderColor = error ? "var(--danger)" : "var(--line)"; e.target.style.boxShadow = "none"; }}
      />
      {error
        ? <span style={{ fontSize: 12, fontWeight: 500, color: "var(--danger)" }}>{error}</span>
        : help && <span style={{ fontSize: 12, color: "var(--muted)" }}>{help}</span>}
    </label>
  );
}

// ------------------------- Card -------------------------
function Card({ variant = "standard", padding, children, onClick, hover = true, style: extraStyle }) {
  const variants = {
    standard: { background: "#fff",          border: "1px solid var(--line)", borderRadius: 20, padding: padding ?? 32, color: "var(--ink)" },
    warm:     { background: "var(--sand)",   border: "1px solid transparent", borderRadius: 16, padding: padding ?? 28,   color: "var(--ink)" },
    featured: { background: "var(--blue-900)", border: "1px solid var(--blue-900)", borderRadius: 20, padding: padding ?? 36, color: "#fff" },
    plain:    { background: "#fff",          border: "1px solid var(--line)", borderRadius: 16, padding: padding ?? 24, color: "var(--ink)" },
  };
  const [h, setH] = useState(false);
  const hoverStyle = !hover ? {} :
    variant === "warm"     ? { background: h ? "var(--sand-warm)" : "var(--sand)", transform: h ? "translateY(-3px)" : "none" } :
    variant === "featured" ? { boxShadow: h ? "var(--sh-lg)" : "none" } :
                             { boxShadow: h ? "var(--sh-md)" : "none", transform: h ? "translateY(-4px)" : "none" };
  return (
    <div onClick={onClick}
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ transition: "transform .2s var(--t-ease), box-shadow .2s var(--t-ease), background .2s var(--t-ease)",
               cursor: onClick ? "pointer" : "default",
               ...variants[variant], ...hoverStyle, ...extraStyle }}>
      {children}
    </div>
  );
}

// ------------------------- FeatureIcon -------------------------
function FeatureIcon({ name, dark, size = 56, iconSize = 26, radius = 14 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: radius,
      background: dark ? "rgba(255,255,255,0.1)" : "var(--blue-100)",
      color: dark ? "#fff" : "var(--blue)",
      display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
    }}>
      <i data-lucide={name} style={{ width: iconSize, height: iconSize, strokeWidth: 2 }}></i>
    </div>
  );
}

// ------------------------- Logo -------------------------
function Logo({ variant = "black", height = 32 }) {
  const src = variant === "white"
    ? "assets/ai-fitters-logo-white.png"
    : "assets/ai-fitters-logo-black.png";
  return <img src={src} alt="AI Fitters" style={{ height, width: "auto", display: "block" }} />;
}

// ------------------------- PhotoPlaceholder -------------------------
function PhotoPlaceholder({ aspect, label = "Photo", radius = 16, dark = false, icon = "image", style: extra, height }) {
  const bg = dark ? "rgba(255,255,255,0.04)" : "var(--sand)";
  const border = dark ? "1px dashed rgba(255,255,255,0.22)" : "1px dashed var(--sand-deep)";
  const fg = dark ? "rgba(255,255,255,0.55)" : "var(--muted)";
  return (
    <div style={{
      width: "100%",
      boxSizing: "border-box",
      aspectRatio: aspect, height,
      background: bg, border, borderRadius: radius,
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
      gap: 8, color: fg, padding: 16, overflow: "hidden", ...extra,
    }}>
      <i data-lucide={icon} style={{ width: 22, height: 22, strokeWidth: 1.75 }}></i>
      <span style={{
        fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".06em",
        textTransform: "uppercase", textAlign: "center", lineHeight: 1.4,
        maxWidth: 240,
      }}>{label}</span>
    </div>
  );
}

// ------------------------- Toast -------------------------
function Toast({ message, onClose }) {
  useEffect(() => {
    const t = setTimeout(onClose, 2400);
    return () => clearTimeout(t);
  }, [onClose]);
  return (
    <div style={{
      position: "fixed", bottom: 24, left: "50%", transform: "translateX(-50%)",
      background: "var(--blue-900)", color: "#fff", padding: "12px 18px",
      borderRadius: 10, fontSize: 14, boxShadow: "var(--sh-lg)", zIndex: 100,
      display: "flex", alignItems: "center", gap: 10,
    }}>
      <i data-lucide="check" style={{ width: 16, height: 16, strokeWidth: 2.5, color: "var(--success)" }}></i>
      {message}
    </div>
  );
}

// ------------------------- useLucide -------------------------
function useLucide() {
  useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
}

// ------------------------- Section wrapper -------------------------
function Section({ id, bg = "white", children, padding = "56px 32px", style: extra }) {
  const bgMap = {
    white: "#fff",
    sand:  "var(--sand)",
    dark:  "var(--blue-900)",
  };
  return (
    <section id={id} style={{ background: bgMap[bg], padding, ...extra }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>{children}</div>
    </section>
  );
}

// Section heading kit
function SectionHeading({ eyebrow, title, sub, align = "left", color = "var(--ink)", subColor = "var(--ink-soft)", maxWidth = 720 }) {
  return (
    <div style={{ textAlign: align, marginBottom: 48,
                  display: "flex", flexDirection: "column",
                  alignItems: align === "center" ? "center" : "flex-start",
                  gap: 14 }}>
      {eyebrow && <Eyebrow color={color === "#fff" ? "rgba(255,255,255,0.55)" : "var(--muted)"}>{eyebrow}</Eyebrow>}
      <h2 style={{ fontSize: "clamp(36px, 5vw, 56px)", fontWeight: 800,
                   letterSpacing: "-0.03em", lineHeight: 1.05, margin: 0,
                   color, textWrap: "balance", maxWidth }}>{title}</h2>
      {sub && <p style={{ fontSize: 19, lineHeight: 1.5, color: subColor,
                          margin: 0, maxWidth, textWrap: "pretty" }}>{sub}</p>}
    </div>
  );
}

Object.assign(window, { Button, Chip, Eyebrow, Field, Card, FeatureIcon, Logo, PhotoPlaceholder, Toast, useLucide, Section, SectionHeading });