// Shared primitives for the Protect-Me website UI kit.

const { useState } = React;

function Button({ variant = 'primary', arrow, children, onClick, href }) {
  const cls = `btn btn-${variant}${arrow ? ' btn-arrow' : ''}`;
  if (href) return <a href={href} className={cls} onClick={onClick}>{children}</a>;
  return <button className={cls} onClick={onClick}>{children}</button>;
}

function StoreButton({ label = 'App Store', kind = 'apple' }) {
  const apple = (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
  );
  const google = (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 20.5v-17c0-.59.34-1.11.84-1.35L13.69 12l-9.85 9.85c-.5-.24-.84-.76-.84-1.35zm13.81-5.38L6.05 21.34l8.49-8.49 2.27 2.27zm3.35-4.31c.34.27.56.69.56 1.19s-.22.92-.56 1.19l-1.97 1.13-2.5-2.5 2.5-2.5 1.97 1.49zM6.05 2.66l10.76 6.22-2.27 2.27-8.49-8.49z"/></svg>
  );
  return (
    <a href="#" className="store-btn" aria-label={label}>
      {kind === 'apple' ? apple : google} {label}
    </a>
  );
}

function Eyebrow({ children }) { return <div className="section-label reveal revealed">{children}</div>; }

function FeatureIcon({ kind }) {
  const common = { width: 40, height: 40, viewBox: '0 0 24 24', fill: 'none', stroke: '#d4411e', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (kind === 'lock') return (<svg {...common}><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/><circle cx="12" cy="16" r="1"/></svg>);
  if (kind === 'pin') return (<svg {...common}><path d="M12 2a7 7 0 0 0-7 7c0 3 2 5.5 4 7.5L12 22l3-5.5c2-2 4-4.5 4-7.5a7 7 0 0 0-7-7z"/><circle cx="12" cy="9" r="2.5"/><path d="M8.5 13.5s1 1.5 3.5 1.5 3.5-1.5 3.5-1.5"/></svg>);
  return (<svg {...common}><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>);
}

Object.assign(window, { Button, StoreButton, Eyebrow, FeatureIcon });
