/* Recare Website — Shared UI primitives
   Buttons, Chips, Cards, Icons. */
const { useState, useEffect, useRef } = React;

// ─── Icon ────────────────────────────────────────────
// Lucide via CDN sprite — we reference by name and stroke ourselves.
function Icon({ name, size = 20, stroke = 2, className = "", style }) {
  // Minimal hand-rolled subset for the icons used here. Stroke style matches Lucide (2px round).
  const paths = {
    stethoscope: <><path d="M4.8 2v6a4 4 0 0 0 8 0V2"/><path d="M8 2h-3"/><path d="M14 2h-3"/><path d="M9 12v3a6 6 0 0 0 12 0v-1"/><circle cx="20" cy="10" r="2"/></>,
    heart: <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>,
    brain: <><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/></>,
    baby: <><path d="M9 12h.01"/><path d="M15 12h.01"/><path d="M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5"/><path d="M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1"/></>,
    tooth: <path d="M12 5.5c-1.7 0-2.5-1.5-5-1.5-2.5 0-4 2-4 5 0 6 3 13 5 13 1.5 0 2-2 4-2s2.5 2 4 2c2 0 5-7 5-13 0-3-1.5-5-4-5-2.5 0-3.3 1.5-5 1.5Z"/>,
    eye: <><circle cx="12" cy="12" r="3"/><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/></>,
    bone: <path d="M17 10c.7-.7 1.7-1 2.5-1a3.5 3.5 0 0 1 0 7c-.8 0-1.7-.4-2.5-1L14 12l-3 3 1 1c.7.7 1 1.7 1 2.5a3.5 3.5 0 1 1-7 0c0-.8.4-1.7 1-2.5L4 14l3-3L4 8c-.7-.7-1-1.6-1-2.5a3.5 3.5 0 1 1 7 0c0 .8-.4 1.7-1 2.5l1 1 3-3-1-1c-.7-.7-1-1.6-1-2.5a3.5 3.5 0 1 1 7 0c0 .9-.4 1.8-1 2.5L14 7Z"/>,
    activity: <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></>,
    arrow: <><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></>,
    arrowLeft: <><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></>,
    check: <path d="M20 6 9 17l-5-5"/>,
    star: <path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2Z"/>,
    map: <><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"/></>,
    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-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 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-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92Z"/>,
    mail: <><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></>,
    chevDown: <path d="m6 9 6 6 6-6"/>,
    chevRight: <path d="m9 6 6 6-6 6"/>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>,
    shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/>,
    clock: <><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></>,
    video: <><path d="m22 8-6 4 6 4V8Z"/><rect x="2" y="6" width="14" height="12" rx="2"/></>,
    sparkle: <path d="M12 3l1.7 5.3L19 10l-5.3 1.7L12 17l-1.7-5.3L5 10l5.3-1.7L12 3Z"/>,
    facebook: <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3Z"/>,
    instagram: <><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.4a4 4 0 1 1-7.9 1.2 4 4 0 0 1 7.9-1.2Z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></>,
    twitter: <path d="M22 4.01s-2.07.55-3 .76a4.42 4.42 0 0 0-7.5 4.03A12.55 12.55 0 0 1 3 4.65s-3.5 7.5 5 11.85A12.94 12.94 0 0 1 1.5 18C9.5 22.5 21 18 21 6.92c0-.27-.03-.54-.08-.8A8.27 8.27 0 0 0 22 4.01Z"/>,
    linkedin: <><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6Z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></>,
    whatsapp: <path d="M3 21l1.7-5A8.5 8.5 0 1 1 8 19l-5 2Z"/>,
    globe: <><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15 15 0 0 1 0 20a15 15 0 0 1 0-20Z"/></>,
    search: <><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></>,
    menu: <><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></>,
  };
  const directional = name === "arrow" || name === "arrowLeft" || name === "chevRight";
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
         className={className} style={style} aria-hidden="true"
         data-rtl-flip={directional ? "true" : undefined}>
      {paths[name] || null}
    </svg>
  );
}

// ─── Logo ────────────────────────────────────────────
function Logo({ variant = "navy", height = 38 }) {
  // Inline mark — diamond pair, wordmark, diamond pair, plus a soft Arabic-evoking arc.
  // We render text as SVG <text> so it inherits color and scales crisply.
  const color = variant === "light" ? "#ffffff" : "var(--rc-navy-900)";
  const accent = variant === "light" ? "#7FCEC3" : "var(--rc-teal-500)";
  return (
    <svg viewBox="0 0 240 64" height={height} role="img" aria-label="Recare">
      {/* Soft arc evoking the Arabic ر calligraphic stroke */}
      <path d="M 56 20 Q 120 -4 184 20" stroke={color} strokeWidth="2.2" fill="none" strokeLinecap="round" opacity="0.55"/>
      {/* diamond pair left */}
      <g fill={accent}>
        <rect x="8"  y="38" width="6" height="6" transform="rotate(45 11 41)"/>
        <rect x="18" y="38" width="6" height="6" transform="rotate(45 21 41)"/>
        <rect x="216" y="38" width="6" height="6" transform="rotate(45 219 41)"/>
        <rect x="226" y="38" width="6" height="6" transform="rotate(45 229 41)"/>
      </g>
      <text x="120" y="46" textAnchor="middle"
            fontFamily="Plus Jakarta Sans, system-ui, sans-serif"
            fontSize="30" fontWeight="700" letterSpacing="0.5"
            fill={color}>ReCare</text>
    </svg>
  );
}

// ─── Button ────────────────────────────────────────────
function Button({ variant = "primary", size = "md", icon, iconRight, children, ...props }) {
  const cls = `btn btn--${variant} ${size !== "md" ? `btn--${size}` : ""}`;
  return (
    <button className={cls} {...props}>
      {icon && <Icon name={icon} size={size === "lg" ? 18 : 16} />}
      {children}
      {iconRight && <Icon name={iconRight} size={size === "lg" ? 18 : 16} />}
    </button>
  );
}

// ─── Chip ────────────────────────────────────────────
function Chip({ tone = "default", icon, children, className = "" }) {
  const cls = `chip ${tone !== "default" ? `chip--${tone}` : ""} ${className}`;
  return (
    <span className={cls}>
      {icon && <Icon name={icon} size={14} />}
      {children}
    </span>
  );
}

// ─── Field ────────────────────────────────────────────
function Field({ label, hint, children }) {
  return (
    <label className="field">
      {label && <span className="field__label">{label}</span>}
      {children}
      {hint && <span className="field__hint">{hint}</span>}
    </label>
  );
}
function Input(props) { return <input className="field__input" {...props} />; }
function Select({ children, ...props }) { return <select className="field__select" {...props}>{children}</select>; }

// ─── Section header ────────────────────────────────────
function SectionHead({ eyebrow, title, sub }) {
  return (
    <div className="sec-head">
      {eyebrow && <span className="rc-eyebrow">{eyebrow}</span>}
      <h2 className="rc-h1">{title}</h2>
      {sub && <p>{sub}</p>}
    </div>
  );
}

Object.assign(window, { Icon, Logo, Button, Chip, Field, Input, Select, SectionHead });