/* ============================================================
   Auth — shared components for Sign In / Sign Up
   ============================================================ */

const { useState: aUseState, useEffect: aUseEffect } = React;

/* ----------- Session helpers ----------- */
const WayfareSession = {
  get() {
    try { return JSON.parse(localStorage.getItem('wayfare:session') || 'null'); }
    catch { return null; }
  },
  set(data) { localStorage.setItem('wayfare:session', JSON.stringify(data)); },
  clear() { localStorage.removeItem('wayfare:session'); },
  isAuthed() { return !!this.get(); },
};
window.WayfareSession = WayfareSession;

/* ----------- A11y Toolbar (reused) ----------- */
function MiniA11yToolbar() {
  const [fontScale, setFontScale] = aUseState(parseFloat(localStorage.getItem('wayfare:fontScale') || '1'));
  const [contrast, setContrast] = aUseState(localStorage.getItem('wayfare:theme') === 'contrast');

  aUseEffect(() => {
    document.documentElement.style.setProperty('--font-scale', String(fontScale));
    localStorage.setItem('wayfare:fontScale', String(fontScale));
  }, [fontScale]);

  aUseEffect(() => {
    document.documentElement.setAttribute('data-theme', contrast ? 'contrast' : (localStorage.getItem('wayfare:theme') || 'soft'));
    if (contrast) localStorage.setItem('wayfare:theme', 'contrast');
  }, [contrast]);

  return (
    <div className="a11y-bar" role="toolbar" aria-label="Accessibility">
      <button aria-label="Smaller text" onClick={() => setFontScale(Math.max(0.85, +(fontScale - 0.1).toFixed(2)))}>
        <span style={{ fontSize: 11 }}>A</span>
      </button>
      <button aria-label="Larger text" onClick={() => setFontScale(Math.min(1.4, +(fontScale + 0.1).toFixed(2)))}>
        <span style={{ fontSize: 16 }}>A</span>
      </button>
      <button aria-pressed={contrast} onClick={() => setContrast(!contrast)}>◐</button>
    </div>
  );
}

/* ----------- Brand mark ----------- */
function AuthBrand() {
  return (
    <a href="Wayfare.html" className="nav__brand" aria-label="Wayfare home">
      <span className="nav__brand-mark" aria-hidden="true">W</span>
      <span>Wayfare</span>
    </a>
  );
}

/* ----------- Inputs ----------- */
function Field({ label, hint, children, htmlFor, error }) {
  return (
    <div className="field">
      <label className="field__label" htmlFor={htmlFor}>
        {label}
      </label>
      {children}
      {hint && !error && <span className="field__hint">{hint}</span>}
      {error && <span className="field__hint" style={{ color: 'var(--emergency)' }}>{error}</span>}
    </div>
  );
}

function TextInput({ id, type = 'text', value, onChange, placeholder, icon, autoComplete, ...rest }) {
  return (
    <div className="field__group">
      {icon && <span className="field__icon">{icon}</span>}
      <input
        id={id}
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        autoComplete={autoComplete}
        className={'input' + (icon ? ' input--with-icon' : '')}
        {...rest}
      />
    </div>
  );
}

/* ----------- Social icons ----------- */
const SocialIcon = {
  google: (
    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
      <path fill="#4285F4" d="M22 12c0-.7-.1-1.4-.2-2H12v3.8h5.6c-.2 1.3-1 2.4-2 3.1v2.6h3.3c1.9-1.8 3.1-4.4 3.1-7.5Z"/>
      <path fill="#34A853" d="M12 22c2.7 0 5-1 6.7-2.5l-3.3-2.6c-.9.6-2 1-3.4 1-2.6 0-4.8-1.7-5.6-4.1H3v2.6C4.7 19.7 8.1 22 12 22Z"/>
      <path fill="#FBBC05" d="M6.4 13.8C6.2 13.2 6.1 12.6 6.1 12s.1-1.2.3-1.8V7.6H3a10 10 0 0 0 0 8.8l3.4-2.6Z"/>
      <path fill="#EA4335" d="M12 5.8c1.5 0 2.8.5 3.8 1.5l2.9-2.9C17 2.9 14.7 2 12 2 8.1 2 4.7 4.3 3 7.6l3.4 2.6C7.2 7.5 9.4 5.8 12 5.8Z"/>
    </svg>
  ),
  apple: (
    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
      <path fill="currentColor" d="M16.4 12.7c0-2.4 2-3.5 2-3.6-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.2-2.8.9-3.6.9-.8 0-1.9-.9-3.1-.8-1.6 0-3.1.9-3.9 2.4-1.7 2.9-.4 7.1 1.2 9.5.8 1.1 1.7 2.4 3 2.4 1.2-.1 1.6-.8 3.1-.8 1.4 0 1.8.8 3 .7 1.3 0 2.1-1.2 2.9-2.3.9-1.3 1.3-2.6 1.3-2.7-.1 0-2.5-.9-2.5-3.9Zm-2.5-7.1c.6-.8 1.1-1.9 1-3-.9 0-2.1.6-2.8 1.4-.6.7-1.2 1.9-1 2.9 1.1.1 2.2-.5 2.8-1.3Z"/>
    </svg>
  ),
};

function SocialButton({ provider, onClick, children }) {
  return (
    <button type="button" className="btn-social" onClick={onClick}>
      {SocialIcon[provider]}
      <span>{children}</span>
    </button>
  );
}

/* ----------- Visual right-side panel content ----------- */
function AuthVisual({ headline, body, footer }) {
  return (
    <aside className="auth__visual" aria-hidden="true">
      <div style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 700 }}>
          <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--accent)', display: 'inline-block', animation: 'pulseRing 1.8s infinite' }} />
          Built for every body
        </div>
      </div>

      <div style={{ position: 'relative', zIndex: 1 }}>
        <h2 className="h-section" style={{ color: '#fff', fontSize: 'clamp(36px, 4.5vw, 60px)', maxWidth: '14ch' }}>
          {headline}
        </h2>
        {body && (
          <p style={{ marginTop: 18, color: 'rgba(255,255,255,0.75)', fontSize: 16.5, lineHeight: 1.55, maxWidth: '36ch' }}>
            {body}
          </p>
        )}

        <div style={{ marginTop: 36, display: 'grid', gap: 12 }}>
          {[
            { icon: '◉', label: 'Wayfare Accessibility Score', sub: 'On every recommendation' },
            { icon: '✦', label: 'Scout-verified venues', sub: 'Real humans, lived experience' },
            { icon: '◐', label: 'Multimodal AI guide', sub: 'Camera + voice on tap' },
            { icon: '⊕', label: 'One-tap safety', sub: 'Location + profile shared instantly' },
          ].map(item => (
            <div key={item.label} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: 14, background: 'rgba(255,255,255,0.06)', borderRadius: 12, backdropFilter: 'blur(8px)' }}>
              <span style={{ width: 36, height: 36, borderRadius: 999, background: 'var(--accent)', color: 'var(--ink)', display: 'grid', placeItems: 'center', fontSize: 16, fontWeight: 700 }}>{item.icon}</span>
              <div>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 16, fontWeight: 500 }}>{item.label}</div>
                <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.6)' }}>{item.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ position: 'relative', zIndex: 1, fontSize: 12.5, color: 'rgba(255,255,255,0.5)', borderTop: '1px solid rgba(255,255,255,0.12)', paddingTop: 18 }}>
        {footer || '“Wayfare turned a 3-week panic into a 3-day plan I actually trusted.” — Anika R., wheelchair user'}
      </div>
    </aside>
  );
}

/* ----------- Stepper ----------- */
function Stepper({ total, current }) {
  return (
    <div className="stepper" aria-label={`Step ${current + 1} of ${total}`}>
      {Array.from({ length: total }).map((_, i) => (
        <span
          key={i}
          className={'stepper__step' + (i < current ? ' is-done' : i === current ? ' is-current' : '')}
        />
      ))}
    </div>
  );
}

Object.assign(window, {
  WayfareSession, MiniA11yToolbar, AuthBrand,
  Field, TextInput, SocialButton, AuthVisual, Stepper,
});