/* PeptideKit — shared UI bits */
const { useEffect, useRef, useState } = React;

// ---------- Logo / Wordmark ----------
function Logo({ size = 28 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{
        width: size, height: size, borderRadius: size * 0.28,
        backgroundImage: 'url(assets/app-icon.png)',
        backgroundSize: 'cover', backgroundPosition: 'center',
        boxShadow: '0 6px 18px rgba(59,130,246,0.35), 0 0 0 1px rgba(255,255,255,0.10) inset',
      }}/>
      <span style={{
        fontFamily: 'Geist, Inter, sans-serif',
        fontWeight: 600, fontSize: 17, letterSpacing: '-0.02em',
      }}>PeptideKit</span>
    </div>
  );
}

// ---------- App Store badge (real-feel, original layout) ----------
function AppStoreBadge({ size = 'md' }) {
  const big = size === 'lg';
  return (
    <a className="app-store-badge" href="#" aria-label="Download on the App Store"
       style={{ padding: big ? '14px 26px 14px 22px' : undefined }}>
      <svg width={big ? 28 : 24} height={big ? 32 : 28} viewBox="0 0 384 512" fill="#fff" aria-hidden>
        <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/>
      </svg>
      <div>
        <div className="badge-sub">Download on the</div>
        <div className="badge-main">App Store</div>
      </div>
    </a>
  );
}

// ---------- Floating phone ----------
function Phone({ src, alt, tilt = 0, glow = true, width = 280, className = '' }) {
  return (
    <div className={`phone-glow ${className}`} style={{
      transform: `rotate(${tilt}deg)`,
      width,
    }}>
      <img src={src} alt={alt} style={{
        width: '100%',
        display: 'block',
        filter: 'drop-shadow(0 30px 60px rgba(0,0,0,0.6)) drop-shadow(0 0 30px rgba(59,130,246,0.20))',
      }}/>
    </div>
  );
}

// ---------- Reveal-on-scroll ----------
function Reveal({ children, delay = 0, as: Tag = 'div', ...rest }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(true);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    setShown(false);
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setTimeout(() => setShown(true), delay);
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.05, rootMargin: '0px 0px 0px 0px' });
    obs.observe(el);
    return () => obs.disconnect();
  }, [delay]);
  return <Tag ref={ref} className={`reveal ${shown ? '' : 'pre'} ${rest.className || ''}`} style={rest.style}>{children}</Tag>;
}

// ---------- Bokeh ----------
function Bokeh({ count = 14 }) {
  const dots = Array.from({ length: count }).map((_, i) => {
    const size = 6 + Math.random() * 22;
    return {
      key: i,
      style: {
        left: `${Math.random() * 100}%`,
        top: `${Math.random() * 100}%`,
        width: size, height: size,
        animationDelay: `${Math.random() * 8}s`,
        animationDuration: `${10 + Math.random() * 10}s`,
        opacity: 0.2 + Math.random() * 0.5,
      }
    };
  });
  return (
    <div className="bokeh" aria-hidden>
      {dots.map(d => <span key={d.key} style={d.style}/>)}
    </div>
  );
}

// ---------- Lucide-ish line icons (hand-drawn minimal) ----------
function Icon({ name, size = 22 }) {
  const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'layers': return (
      <svg {...common}><path d="M12 3 2 8l10 5 10-5-10-5Z"/><path d="m2 17 10 5 10-5"/><path d="m2 12 10 5 10-5"/></svg>
    );
    case 'bell': return (
      <svg {...common}><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
    );
    case 'calc': return (
      <svg {...common}><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 7h8"/><path d="M8 12h.01M12 12h.01M16 12h.01M8 16h.01M12 16h.01M16 16h.01"/></svg>
    );
    case 'scan': return (
      <svg {...common}><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 12h10"/></svg>
    );
    case 'trend': return (
      <svg {...common}><path d="M3 17 9 11l4 4 8-8"/><path d="M14 7h7v7"/></svg>
    );
    case 'sparkles': return (
      <svg {...common}><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 'check': return (
      <svg {...common}><path d="m5 12 5 5L20 7"/></svg>
    );
    case 'chevron': return (
      <svg {...common}><path d="m6 9 6 6 6-6"/></svg>
    );
    case 'arrow-down': return (
      <svg {...common}><path d="M12 5v14M5 12l7 7 7-7"/></svg>
    );
    case 'shield': return (
      <svg {...common}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/></svg>
    );
    case 'lock': return (
      <svg {...common}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
    );
    case 'cpu': return (
      <svg {...common}><rect x="5" y="5" width="14" height="14" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3"/></svg>
    );
    default: return null;
  }
}

Object.assign(window, { Logo, AppStoreBadge, Phone, Reveal, Bokeh, Icon });
