// ui.jsx — Superstar Peptides shared atoms (light, brand-matched)
// Tiny, composable bits. NEVER name a styles object `styles`.

const { useState, useEffect, useRef, useMemo } = React;

// ─── Icons ────────────────────────────────────────────────
function Icon({ name, size = 18, stroke = 1.7 }) {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "back": return <svg {...p}><path d="M15 6l-6 6 6 6" /></svg>;
    case "check": return <svg {...p}><path d="M5 12l4 4 10-10" /></svg>;
    case "arrow": return <svg {...p}><path d="M5 12h14M13 6l6 6-6 6" /></svg>;
    case "menu": return <svg {...p}><path d="M3 7h18M3 12h18M3 17h18" /></svg>;
    case "shield": return <svg {...p}><path d="M12 3l8 3v6c0 4.5-3 8-8 9-5-1-8-4.5-8-9V6l8-3z" /><path d="M9 12l2 2 4-4" /></svg>;
    case "rx": return <svg {...p}><path d="M7 4h6a4 4 0 0 1 0 8H7zM7 4v16M7 12l6 8M11 16l6-4" /></svg>;
    case "spark": return <svg {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></svg>;
    case "flame": return <svg {...p}><path d="M12 3c1 4 5 5 5 10a5 5 0 0 1-10 0c0-2 1-3 2-4-.5 2 1 3 2 3 0-3-2-4 1-9z" /></svg>;
    case "moon": return <svg {...p}><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z" /></svg>;
    case "brain": return <svg {...p}><path d="M9 4a3 3 0 0 0-3 3v1a3 3 0 0 0-2 3v1a3 3 0 0 0 2 3v1a3 3 0 0 0 3 3M15 4a3 3 0 0 1 3 3v1a3 3 0 0 1 2 3v1a3 3 0 0 1-2 3v1a3 3 0 0 1-3 3M9 4v16M15 4v16" /></svg>;
    case "heart": return <svg {...p}><path d="M12 20s-7-4.35-7-10a4 4 0 0 1 7-2.65A4 4 0 0 1 19 10c0 5.65-7 10-7 10z" /></svg>;
    case "muscle": return <svg {...p}><path d="M4 15c2-1 4-1 6 1l3 3c1 1 3 1 4 0l2-2c1-1 1-3 0-4l-3-3c-2-2-2-4-1-6-3-1-5 0-7 2L4 15z"/></svg>;
    case "scale": return <svg {...p}><path d="M5 6h14l-2 12H7zM9 6c0-2 1-3 3-3s3 1 3 3"/></svg>;
    case "drop": return <svg {...p}><path d="M12 3s6 7 6 11a6 6 0 0 1-12 0c0-4 6-11 6-11z" /></svg>;
    case "leaf": return <svg {...p}><path d="M20 4c0 9-6 16-15 16C5 11 11 4 20 4zM5 20l8-8" /></svg>;
    case "fork": return <svg {...p}><path d="M8 3v6a2 2 0 0 0 4 0V3M10 11v10M17 3c-1 0-2 1-2 3v5a1 1 0 0 0 1 1h2V3z"/></svg>;
    case "stethoscope": return <svg {...p}><path d="M5 3v6a4 4 0 0 0 8 0V3M9 13v3a5 5 0 0 0 10 0v-2M19 14a2 2 0 1 0-4 0 2 2 0 0 0 4 0z"/></svg>;
    case "calendar": return <svg {...p}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>;
    case "lightning": return <svg {...p}><path d="M13 3L4 14h7l-1 7 9-11h-7l1-7z" /></svg>;
    case "warning": return <svg {...p}><path d="M12 3L2 20h20L12 3zM12 10v5M12 18v.5" /></svg>;
    case "x": return <svg {...p}><path d="M6 6l12 12M18 6L6 18" /></svg>;
    case "info": return <svg {...p}><circle cx="12" cy="12" r="9" /><path d="M12 8v.5M12 11v5"/></svg>;
    case "syringe": return <svg {...p}><path d="M17 3l4 4M14 6l4 4M3 21l11-11 4 4L7 25M9 15l2 2"/></svg>;
    case "lock": return <svg {...p}><rect x="5" y="11" width="14" height="10" rx="2" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></svg>;
    case "star": return <svg {...p} fill="currentColor" stroke="none"><path d="M12 3l2.6 5.6 6.1.8-4.5 4.3 1.1 6L12 17l-5.3 2.7 1.1-6L3.3 9.4l6.1-.8L12 3z"/></svg>;
    case "user": return <svg {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>;
    case "mail": return <svg {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>;
    case "clock": return <svg {...p}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2"/></svg>;
    case "dollar": return <svg {...p}><path d="M12 3v18M16 7H10a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6H8"/></svg>;
    case "plus": return <svg {...p}><path d="M12 5v14M5 12h14"/></svg>;
    case "trend": return <svg {...p}><path d="M3 17l6-6 4 4 8-8M14 7h6v6"/></svg>;
    case "atom": return <svg {...p}><circle cx="12" cy="12" r="2"/><path d="M12 4a8 8 0 0 0 0 16M4 12a8 8 0 0 1 16 0" transform="rotate(45 12 12)"/><path d="M12 4a8 8 0 0 0 0 16M4 12a8 8 0 0 1 16 0" transform="rotate(-45 12 12)"/></svg>;
    case "gym": return <svg {...p}><path d="M3 9v6M6 6v12M9 9h6M15 6v12M18 9v6"/></svg>;
    case "home": return <svg {...p}><path d="M4 11l8-7 8 7M6 10v10h12V10"/></svg>;
    case "play": return <svg {...p} fill="currentColor" stroke="none"><path d="M7 4l13 8-13 8z"/></svg>;
    default: return null;
  }
}

// ─── Brand star (4-point burst — matches site brandmark) ──
function BrandStar({ size = 18 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true">
      <path d="M12 0 L13.6 9.4 L24 12 L13.6 14.6 L12 24 L10.4 14.6 L0 12 L10.4 9.4 Z" />
    </svg>
  );
}

// ─── Wordmark ─────────────────────────────────────────────
function Wordmark() {
  return (
    <a href="/index.html" className="sp-wordmark">
      <span className="wm-star"><BrandStar size={18} /></span>
      <span>SUPERSTAR<span className="wm-sub">/PEPTIDES</span></span>
    </a>
  );
}

// ─── Top app bar (back · wordmark · help/lang/menu) ───────
function SPHeader({ step, total, onBack, canBack = true }) {
  const pct = total > 0 ? Math.max(2, Math.min(100, (step / total) * 100)) : 0;
  return (
    <header className="sp-topbar">
      <div className="sp-topbar-row">
        <button className="sp-back" onClick={onBack} disabled={!canBack} aria-label="Back">
          <Icon name="back" size={18} stroke={2.2} />
        </button>
        <Wordmark />
        <div className="sp-topbar-right">
          <span className="sp-link hide-mobile">Help</span>
          <span className="sp-link hide-mobile">English</span>
          <button className="sp-menu" aria-label="Menu"><Icon name="menu" size={22} stroke={2} /></button>
        </div>
      </div>
      {total > 0 ? (
        <div className="sp-progress-wrap">
          <div className="sp-progress-fill" style={{ width: `${pct}%` }} />
          <div className="sp-progress-count">{step} / {total}</div>
        </div>
      ) : (
        <div style={{ height: 'var(--progress-h)', background: 'transparent' }} />
      )}
    </header>
  );
}

// ─── Body silhouette (clinical SVG — light-bg palette) ─────
function BodySilhouette({ fat = 0.3, muscle = 0.4, gender = 'm', size = 240, selected = false }) {
  // Interpolate torso width based on fat & muscle
  const torsoW = 36 + fat * 32 + muscle * 8;
  const waistW = 28 + fat * 34;
  const armW = 10 + muscle * 8 + fat * 4;
  const chestY = gender === 'f' ? 92 : 86;
  const skin = '#D9C4A6';
  const skinShade = '#B89878';
  const shorts = '#3A4A5C';
  return (
    <svg width={size} height={size * 1.05} viewBox="0 0 200 210" style={{ display: 'block' }} className="bs-glow">
      <defs>
        <radialGradient id={`bg-${gender}`} cx="50%" cy="55%" r="60%">
          <stop offset="0%" stopColor={selected ? "rgba(232,181,168,0.45)" : "rgba(198,139,124,0.16)"} />
          <stop offset="60%" stopColor="rgba(198,139,124,0.04)" />
          <stop offset="100%" stopColor="rgba(0,0,0,0)" />
        </radialGradient>
        <linearGradient id={`skin-${gender}`} x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stopColor={skinShade} />
          <stop offset="50%" stopColor={skin} />
          <stop offset="100%" stopColor={skinShade} />
        </linearGradient>
      </defs>
      <ellipse cx="100" cy="120" rx="92" ry="98" fill={`url(#bg-${gender})`} />
      {/* Head */}
      <ellipse cx="100" cy="40" rx="16" ry="19" fill={`url(#skin-${gender})`} />
      {/* hair */}
      <path d="M85 32 q 0 -14 15 -14 q 15 0 15 14 q -5 -6 -15 -6 q -10 0 -15 6 z" fill="#3A2A1C" />
      {/* Neck */}
      <rect x="93" y="56" width="14" height="10" rx="3" fill={skinShade} />
      {/* Torso */}
      <path
        d={`
          M ${100 - torsoW/2} 66
          C ${100 - torsoW/2 - armW*0.2} 72, ${100 - torsoW/2 - armW*0.1} ${chestY}, ${100 - waistW/2 - 2} 130
          L ${100 - waistW/2} 150
          L ${100 + waistW/2} 150
          L ${100 + waistW/2 + 2} 130
          C ${100 + torsoW/2 + armW*0.1} ${chestY}, ${100 + torsoW/2 + armW*0.2} 72, ${100 + torsoW/2} 66 Z
        `}
        fill={`url(#skin-${gender})`}
      />
      {/* Arms */}
      <path d={`M ${100 - torsoW/2 + 1} 68 q -${armW} 18 -${armW*0.8} 60 q ${armW*0.2} 6 ${armW*0.6} 4 l ${armW*0.4} -55 z`} fill={skinShade} />
      <path d={`M ${100 + torsoW/2 - 1} 68 q ${armW} 18 ${armW*0.8} 60 q -${armW*0.2} 6 -${armW*0.6} 4 l -${armW*0.4} -55 z`} fill={skinShade} />
      {/* Shorts/legs */}
      <path d={`M ${100 - waistW/2 - 2} 148 L ${100 + waistW/2 + 2} 148 L ${100 + waistW/2 + 2} 180 q -2 4 -10 4 l -4 0 l 0 -22 l -8 0 l 0 22 l -4 0 q -8 0 -10 -4 z`} fill={shorts} />
      {/* drawstring */}
      <path d={`M 96 152 q 4 4 8 0`} stroke="#fff" strokeWidth="0.8" fill="none" />
      {/* Legs (lower) */}
      <path d={`M ${100 - waistW/2 + 4} 182 q -1 14 -3 24 l 11 0 q 1 -14 0 -24 z`} fill={skinShade} />
      <path d={`M ${100 + waistW/2 - 4} 182 q 1 14 3 24 l -11 0 q -1 -14 0 -24 z`} fill={skinShade} />
      {/* Muscle definition */}
      {muscle > 0.4 && (
        <g opacity={Math.min(0.55, muscle * 0.7)}>
          <path d={`M 100 75 q -10 0 -14 8 q -1 6 4 9 q 8 -1 10 -4 z M 100 75 q 10 0 14 8 q 1 6 -4 9 q -8 -1 -10 -4 z`} fill={skinShade} />
          <rect x="96" y="100" width="8" height="32" rx="2" fill={skinShade} opacity="0.5" />
          {/* abs lines */}
          {muscle > 0.6 && [108, 116, 124].map((y, i) => (
            <line key={i} x1="92" x2="108" y1={y} y2={y} stroke={skinShade} strokeWidth="0.6" opacity="0.5" />
          ))}
        </g>
      )}
      {fat > 0.5 && (
        <ellipse cx="100" cy="125" rx={20 + fat * 14} ry={18 + fat * 10} fill={skinShade} opacity={fat * 0.5} />
      )}
      {/* Soft edge highlight */}
      <ellipse cx="78" cy="100" rx="3" ry="40" fill="rgba(255,255,255,0.35)" />
      <ellipse cx="122" cy="100" rx="3" ry="40" fill="rgba(110,64,52,0.06)" />
    </svg>
  );
}

// ─── Body region map (selectable areas) ────────────────────
function BodyMap({ value = [], onToggle }) {
  const isOn = (k) => value.includes(k);
  const fill = (k) => isOn(k) ? 'var(--accent-deep)' : '#D9C4A6';
  const opa = (k) => isOn(k) ? 0.92 : 0.7;
  return (
    <svg width="220" height="290" viewBox="0 0 200 260" style={{ display: 'block', margin: '0 auto' }} className="bs-glow">
      <defs>
        <radialGradient id="bmGlow" cx="50%" cy="55%" r="55%">
          <stop offset="0%" stopColor="rgba(198,139,124,0.16)" />
          <stop offset="100%" stopColor="rgba(0,0,0,0)" />
        </radialGradient>
      </defs>
      <ellipse cx="100" cy="135" rx="90" ry="110" fill="url(#bmGlow)" />
      <ellipse cx="100" cy="32" rx="14" ry="17" fill="#D9C4A6" />
      <rect x="93" y="46" width="14" height="9" rx="3" fill="#B89878" />
      <path onClick={() => onToggle('shoulders')} style={{ cursor: 'pointer' }}
        d="M 60 60 q 14 -10 30 -4 l 0 14 q -18 -2 -30 6 z M 140 60 q -14 -10 -30 -4 l 0 14 q 18 -2 30 6 z"
        fill={fill('shoulders')} opacity={opa('shoulders')} />
      <path onClick={() => onToggle('chest')} style={{ cursor: 'pointer' }}
        d="M 78 74 q 22 -8 44 0 l -2 30 q -20 6 -40 0 z"
        fill={fill('chest')} opacity={opa('chest')} />
      <path onClick={() => onToggle('arms')} style={{ cursor: 'pointer' }}
        d="M 60 64 q -10 30 -8 70 l 14 -2 q -2 -38 8 -64 z"
        fill={fill('arms')} opacity={opa('arms')} />
      <path onClick={() => onToggle('arms')} style={{ cursor: 'pointer' }}
        d="M 140 64 q 10 30 8 70 l -14 -2 q 2 -38 -8 -64 z"
        fill={fill('arms')} opacity={opa('arms')} />
      <path onClick={() => onToggle('abs')} style={{ cursor: 'pointer' }}
        d="M 80 108 q 20 6 40 0 l -2 44 q -18 6 -36 0 z"
        fill={fill('abs')} opacity={opa('abs')} />
      <path onClick={() => onToggle('legs')} style={{ cursor: 'pointer' }}
        d="M 80 156 q 18 6 36 0 l -4 80 l -12 -2 l -4 -54 l -4 54 l -12 2 z"
        fill={fill('legs')} opacity={opa('legs')} />
    </svg>
  );
}

// ─── Footer / CTA wrap ────────────────────────────────────
function SPFooter({ children }) {
  return (
    <div className="sp-footer">
      <div className="sp-footer-inner">{children}</div>
    </div>
  );
}

// ─── Banner ────────────────────────────────────────────────
function SuccessBanner({ children }) {
  return (
    <div className="sp-banner">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l4 4 10-10"/></svg>
      <span>{children}</span>
    </div>
  );
}

// ─── Option card (horizontal row with icon + title + sub) ──
function OptionCard({ icon, title, sub, selected, onClick, trailing, multi = false, single = false, accentIcon = false, image }) {
  return (
    <button className={"sp-card" + (selected ? " selected" : "")} onClick={onClick} type="button">
      {image && (
        <div style={{ width: 70, height: 70, borderRadius: 12, overflow: 'hidden', flex: '0 0 auto', background: 'var(--bg-2)' }}>
          {image}
        </div>
      )}
      {icon && !image && (
        <div className={"sp-card-icon" + (accentIcon ? " dot" : "")}>
          {typeof icon === 'string' ? <Icon name={icon} size={22} /> : icon}
        </div>
      )}
      <div className="sp-card-grow">
        <div className="sp-card-title">{title}</div>
        {sub && <div className="sp-card-sub">{sub}</div>}
      </div>
      {trailing}
      {multi && (
        <div className="sp-check">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l4 4 10-10"/></svg>
        </div>
      )}
      {single && <div className="sp-radio" />}
    </button>
  );
}

// ─── Portrait card (silhouette + label bar) ───────────────
// NOTE: the design handoff used a drag-to-fill <image-slot> here. For the live
// page we render the silhouette directly so cards look complete out of the box.
// Swap in a real <img src> (or re-add image-slot) when brand body photos exist.
function PortraitCard({ label, selected, onClick, gender = 'm', fat = 0.3, muscle = 0.4, height = 240, slotId, placeholder }) {
  return (
    <button className={"sp-portrait" + (selected ? " selected" : "")} onClick={onClick} type="button"
      style={{ height, padding: 0 }}>
      <div className="sp-portrait-body">
        <BodySilhouette gender={gender} fat={fat} muscle={muscle} size={Math.min(height - 60, 170)} selected={selected} />
      </div>
      <div className="sp-portrait-label">{label}</div>
    </button>
  );
}

Object.assign(window, { Icon, BrandStar, Wordmark, SPHeader, SPFooter, BodySilhouette, BodyMap, SuccessBanner, OptionCard, PortraitCard });
