// Shared auth-page primitives. Both Sign In and Sign Up use these.

function Logo({ size = 26 }) {
  return (
    <a href="index.html" className="logo">
      <span className="logo-mark" style={{ width: size, height: size }}>
        <svg viewBox="0 0 36 32" width="74%" height="74%" fill="currentColor" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" aria-hidden="true">
          <path d="M4 5 L10 5 L12 18 L14 5 L20 5 L12 27 Z" />
          <rect x="22.5" y="23" width="9.5" height="3.8" rx="0.7" className="logo-caret" />
        </svg>
      </span>
      <span>vibn</span>
    </a>
  );
}

function TopBar({ rightLink }) {
  return (
    <header className="topbar">
      <Logo />
      {rightLink && (
        <a href={rightLink.href} className="topbar-back">
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
            <path d="M13 8H3M7 4 3 8l4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          {rightLink.label}
        </a>
      )}
    </header>
  );
}

function Glows() {
  return (
    <>
      <div className="auth-glow" style={{
        width: 700, height: 700,
        top: -150, left: "50%", transform: "translateX(-50%)",
        background: "radial-gradient(circle at center, oklch(0.74 0.175 35 / 0.22) 0%, transparent 62%)",
      }} />
      <div className="auth-glow" style={{
        width: 500, height: 500,
        bottom: -100, left: 0,
        background: "radial-gradient(circle at center, oklch(0.45 0.10 35 / 0.20) 0%, transparent 62%)",
      }} />
      <div className="auth-glow" style={{
        width: 450, height: 450,
        top: "50%", right: -150,
        background: "radial-gradient(circle at center, oklch(0.45 0.10 35 / 0.15) 0%, transparent 62%)",
      }} />
    </>
  );
}

function Arrow({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// Google "G" mark — inline SVG so we don't need to bundle an asset.
function GoogleIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 18 18" aria-hidden="true">
      <path fill="#EA4335" d="M9 3.6c1.3 0 2.5.5 3.4 1.3l2.5-2.5C13.4 1 11.3.1 9 .1 5.5.1 2.4 2.1.9 5.1l2.9 2.3C4.5 5.2 6.6 3.6 9 3.6Z"/>
      <path fill="#34A853" d="M17.6 9.2c0-.6-.1-1.2-.2-1.8H9v3.4h4.9c-.2 1.1-.9 2-1.9 2.6l2.9 2.3c1.7-1.6 2.7-3.9 2.7-6.5Z"/>
      <path fill="#FBBC05" d="M3.8 10.7c-.2-.6-.3-1.1-.3-1.7s.1-1.2.3-1.7L.9 5C.3 6.2 0 7.5 0 9s.3 2.8.9 4l2.9-2.3Z"/>
      <path fill="#4285F4" d="M9 17.9c2.4 0 4.4-.8 5.9-2.2l-2.9-2.3c-.8.5-1.8.9-3 .9-2.3 0-4.3-1.6-5-3.7L1.1 12.9C2.6 15.9 5.6 17.9 9 17.9Z"/>
    </svg>
  );
}

// Apple mark (filled apple silhouette)
function AppleIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 18 18" fill="currentColor" aria-hidden="true">
      <path d="M14.7 13.1c-.4 1-1 1.9-1.7 2.5-.5.5-1.1.7-1.7.7-.6 0-1-.2-1.7-.5-.7-.3-1.3-.5-1.8-.5s-1.2.2-1.9.5c-.7.3-1.2.4-1.6.5-.6 0-1.2-.2-1.7-.7C2 14.8 1.4 13.6.9 12c-.5-1.7-.7-3.3-.6-4.7.1-1.6.7-2.9 1.7-3.9C2.8 2.7 3.8 2.2 5 2.2c.4 0 .9.1 1.5.4s1 .4 1.2.4c.2 0 .7-.1 1.4-.4.7-.3 1.3-.4 1.7-.4 1 .1 1.9.5 2.6 1.3-.9.6-1.4 1.5-1.4 2.6 0 .9.3 1.6 1 2.2.3.3.6.5 1 .6-.1.2-.2.5-.3.7Zm-3-12c0 .8-.3 1.6-.9 2.4-.7.9-1.6 1.5-2.6 1.4 0-.1 0-.2 0-.3 0-.8.3-1.6.9-2.3.3-.4.7-.7 1.1-.9.4-.2.9-.4 1.4-.4 0 .1 0 .1.1.1Z"/>
    </svg>
  );
}

function MailIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
      <rect x="2.5" y="4.5" width="15" height="11" rx="1.5"/>
      <path d="M3.5 6 10 11l6.5-5"/>
    </svg>
  );
}

function TrustStrip({ items }) {
  return (
    <div className="auth-trust">
      {items.map((item, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="sep">·</span>}
          <span>{item}</span>
        </React.Fragment>
      ))}
    </div>
  );
}

// useResendTimer — manages a countdown for the "Resend in 30s" CTA after the
// magic-link confirmation state. Returns [remaining, restart].
function useResendTimer(initialSeconds = 30) {
  const [left, setLeft] = React.useState(initialSeconds);
  React.useEffect(() => {
    if (left <= 0) return undefined;
    const t = setTimeout(() => setLeft(left - 1), 1000);
    return () => clearTimeout(t);
  }, [left]);
  const restart = () => setLeft(initialSeconds);
  return [left, restart];
}

Object.assign(window, {
  Logo, TopBar, Glows, Arrow,
  GoogleIcon, AppleIcon, MailIcon,
  TrustStrip, useResendTimer,
});
