// Reusable atoms. icons, stars, FDA badge, risk reversal row, sticky CTA.

const Icon = {
  check: (props={}) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="M5 12 l5 5 L20 6"/></svg>
  ),
  shield: (props={}) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12 l2 2 4-4"/></svg>
  ),
  arrow: (props={}) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>
  ),
  star: (props={}) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...props}><path d="M12 2 L14.6 8.6 L21.5 9.2 L16.3 13.8 L18 20.5 L12 16.8 L6 20.5 L7.7 13.8 L2.5 9.2 L9.4 8.6 Z"/></svg>
  ),
  no: (props={}) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" {...props}><path d="M6 6 l12 12 M18 6 l-12 12"/></svg>
  ),
  bolt: (props={}) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" {...props}><path d="M13 2 L4 14 h6 l-1 8 9-12 h-6 z"/></svg>
  ),
  clock: (props={}) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7 v5 l3 2"/></svg>
  ),
  pill: (props={}) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...props}><rect x="3" y="9" width="18" height="6" rx="3" transform="rotate(-30 12 12)"/></svg>
  ),
};

function Stars({ n = 5 }) {
  return (
    <span className="stars" aria-label={`${n} of 5 stars`}>
      {Array.from({ length: n }).map((_, i) => <Icon.star key={i} width="16" height="16" />)}
    </span>
  );
}

function FdaBadge({ style }) {
  return (
    <span className="fda-badge" style={style}>
      <span className="dot"></span>
      FDA Cleared · Class II
    </span>
  );
}

function RiskReversal({ items }) {
  const def = items || [
    "30-day money-back guarantee",
    "FDA Cleared, drug-free",
    "Free 15-min consult",
  ];
  return (
    <div className="risk-row">
      {def.map((t, i) => (
        <div key={i}>
          <span style={{ color: "var(--ok)" }}><Icon.check /></span>
          {t}
        </div>
      ))}
    </div>
  );
}

function StickyCTA({ onCTA }) {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 720);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={"sticky-cta" + (visible ? " visible" : "")}>
      <div>
        <div className="label">Prescription only. find out if you qualify</div>
        <div className="sub">2-minute eligibility check · $882 one-time · 5-year warranty</div>
      </div>
      <div className="spacer"></div>
      <a className="btn btn-accent" onClick={onCTA}>See if I qualify <Icon.arrow /></a>
    </div>
  );
}

Object.assign(window, { Icon, Stars, FdaBadge, RiskReversal, StickyCTA });