// ============================================================
// MEMBERSHIP TOOLS — auth-modal + lidmaatschap (Mollie)
// ============================================================
const { useState: useMS } = React;

function AuthModal({ tab = 'login', onClose, onDone }) {
  const [active, setActive] = useMS(tab);

  const submit = (e, kind) => {
    e.preventDefault();
    onDone && onDone(kind);
  };

  return (
    <div className="auth-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="auth-card" role="dialog" aria-modal="true" aria-label="Pootje account">
        <button className="auth-close" type="button" aria-label="Sluiten" onClick={onClose}>✕</button>

        <div className="auth-tabs">
          <button type="button" className={`auth-tab ${active === 'login' ? 'active' : ''}`} onClick={() => setActive('login')}>Inloggen</button>
          <button type="button" className={`auth-tab ${active === 'register' ? 'active' : ''}`} onClick={() => setActive('register')}>Account maken</button>
        </div>

        <div className="auth-body">
          {active === 'login' ? (
            <form className="auth-pane" onSubmit={(e) => submit(e, 'login')}>
              <h3 className="serif">Welkom terug</h3>
              <label className="fld"><span>E-mailadres</span><input type="email" name="email" autoComplete="username" required /></label>
              <label className="fld"><span>Wachtwoord</span><input type="password" name="pwd" autoComplete="current-password" required /></label>
              <button type="submit" className="btn btn-primary full">Inloggen</button>
              <p className="auth-alt">Nog geen account? <a onClick={() => setActive('register')}>Maak er een</a></p>
            </form>
          ) : (
            <form className="auth-pane" onSubmit={(e) => submit(e, 'register')}>
              <h3 className="serif">Maak je Pootje-account</h3>
              <label className="fld"><span>Naam</span><input type="text" name="name" autoComplete="name" required /></label>
              <label className="fld"><span>E-mailadres</span><input type="email" name="email" autoComplete="email" required /></label>
              <label className="fld"><span>Wachtwoord</span><input type="password" name="pwd" autoComplete="new-password" required /></label>
              <button type="submit" className="btn btn-primary full">Account maken &amp; afrekenen</button>
              <p className="auth-pay">🔒 Daarna reken je veilig af met Mollie — iDEAL, creditcard en meer.</p>
              <p className="auth-alt">Al lid? <a onClick={() => setActive('login')}>Inloggen</a></p>
            </form>
          )}
        </div>
      </div>
    </div>
  );
}

const PLANS = [
  {
    id: 'gratis', name: 'Verkenner', sub: 'Om te starten',
    amt: '€0', per: 'gratis', featured: false, cta: 'Maak gratis account', authTab: 'register',
    feats: ['Bewaar je hondenmatch', 'Favorieten-lijst', '1 ras-gids ontgrendeld'],
  },
  {
    id: 'maand', name: 'Pootje Plus', sub: 'Alles, maandelijks opzegbaar',
    amt: '€7,50', per: '/ maand', featured: true, ribbon: 'Populairst', cta: 'Start met Plus', authTab: 'register',
    feats: ['Alle 200+ ras-gidsen', 'Persoonlijk matchadvies', '10% korting in de webshop', 'Dierenarts-chat'],
  },
  {
    id: 'jaar', name: 'Pootje Plus Jaar', sub: '2 maanden gratis',
    amt: '€69', per: '/ jaar', featured: false, cta: 'Kies jaarvoordeel', authTab: 'register',
    feats: ['Alles uit Pootje Plus', '2 maanden voordeel', 'Gezinsaccount: tot 3 profielen'],
  },
];

function MembershipScreen({ onLogin }) {
  return (
    <div style={{ background: 'var(--paper)' }}>
      <div className="container" style={{ paddingTop: 80, paddingBottom: 96 }}>
        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 56px' }}>
          <div className="section-eyebrow" style={{ color: 'var(--terracotta)' }}>Word lid</div>
          <h1 className="serif" style={{ marginBottom: 16 }}>Haal alles uit Pootje</h1>
          <p className="muted" style={{ fontSize: 17 }}>
            Maak een gratis account of word Plus en ontgrendel elke ras-gids, persoonlijk matchadvies en korting in de webshop.
          </p>
        </div>

        <div className="plans">
          {PLANS.map((p) => (
            <div key={p.id} className={`plan ${p.featured ? 'featured' : ''}`}>
              {p.ribbon && <div className="ribbon">{p.ribbon}</div>}
              <h3 className="serif">{p.name}</h3>
              <p className="plan-sub">{p.sub}</p>
              <div className="price"><span className="amt">{p.amt}</span><span className="per">{p.per}</span></div>
              <ul className="feat">
                {p.feats.map((f, i) => <li key={i}><span>{f}</span></li>)}
              </ul>
              <button
                className={`btn ${p.featured ? 'btn-primary' : 'btn-ghost'} full`}
                onClick={() => onLogin(p.authTab)}
              >
                {p.cta}
              </button>
            </div>
          ))}
        </div>

        <div className="pay-note">
          <span className="pay-lead">🔒 Veilig betalen met Mollie</span>
          <div className="pay-methods">
            <span className="pm">iDEAL</span>
            <span className="pm">Creditcard</span>
            <span className="pm">Bancontact</span>
            <span className="pm">PayPal</span>
            <span className="pm">Apple Pay</span>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AuthModal, MembershipScreen });