/* Age gate — 21+ verification modal over a softly blurred hero. */
(function () {
  const { Button, Logo, FanLeaf } = window.WeedReviewDesignSystem_dcaedb;
  const { useState } = React;

  function AgeGate({ onVerified }) {
    const [denied, setDenied] = useState(false);
    const [mode, setMode] = useState('yesno'); // 'yesno' | 'dob'
    const [dob, setDob] = useState({ m: '', d: '', y: '' });

    const checkDob = () => {
      const { m, d, y } = dob;
      if (!m || !d || !y) return;
      const birth = new Date(Number(y), Number(m) - 1, Number(d));
      const now = new Date();
      let age = now.getFullYear() - birth.getFullYear();
      const md = now.getMonth() - birth.getMonth();
      if (md < 0 || (md === 0 && now.getDate() < birth.getDate())) age--;
      if (age >= 21) onVerified(); else setDenied(true);
    };

    const field = (key, ph, max, w) => (
      React.createElement('input', {
        value: dob[key], inputMode: 'numeric', placeholder: ph, maxLength: max,
        onChange: (e) => setDob((s) => ({ ...s, [key]: e.target.value.replace(/\D/g, '') })),
        style: { width: w, textAlign: 'center', height: 48, border: '1.5px solid var(--border-default)', borderRadius: 'var(--radius-md)', background: 'var(--surface-raised)', fontFamily: 'var(--font-mono)', fontSize: 18, color: 'var(--text-body)', outline: 'none' },
      })
    );

    return (
      <div style={{ position: 'fixed', inset: 0, zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
        {/* Blurred hero backdrop */}
        <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 120% at 80% 10%, #24503F 0%, #1B3B2F 46%, #12291F 100%)', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, filter: 'blur(7px)', opacity: 0.9 }}>
            <div style={{ position: 'absolute', right: -80, top: -60, opacity: 0.14 }}><FanLeaf size={520} filledColor="#BFE29A" /></div>
            <div style={{ position: 'absolute', left: 60, bottom: -120, opacity: 0.08 }}><FanLeaf size={360} filledColor="#EDE7D8" /></div>
            <div style={{ position: 'absolute', left: 80, top: 140, color: '#EDE7D8', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 84, letterSpacing: '-0.03em', lineHeight: 1 }}>Puff, Puff,<br />Rate.</div>
          </div>
          <div style={{ position: 'absolute', inset: 0, background: 'rgba(15,36,27,0.55)' }} />
        </div>

        {/* Modal */}
        <div style={{ position: 'relative', width: 'min(440px, 100%)', background: 'var(--surface-card)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-lg)', padding: 'var(--space-9) var(--space-8)', textAlign: 'center' }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 'var(--space-6)' }}><Logo size="lg" /></div>
          {!denied ? (
            <React.Fragment>
              <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 600, color: 'var(--text-heading)', letterSpacing: '-0.02em' }}>Are you 21 or older?</h1>
              <p style={{ color: 'var(--text-muted)', fontSize: 15, margin: '10px auto 26px', maxWidth: 340 }}>
                WeedReview is an editorial cannabis community for adults of legal age. You must verify your age to continue.
              </p>
              {mode === 'yesno' ? (
                <React.Fragment>
                  <div style={{ display: 'flex', gap: 12 }}>
                    <Button size="lg" fullWidth onClick={onVerified}>Yes, I’m 21+</Button>
                    <Button size="lg" variant="secondary" fullWidth onClick={() => setDenied(true)}>No</Button>
                  </div>
                  <button onClick={() => setMode('dob')} style={{ marginTop: 18, background: 'none', border: 'none', color: 'var(--text-link)', fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600, cursor: 'pointer' }}>
                    Enter my date of birth instead
                  </button>
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <div style={{ display: 'flex', gap: 10, justifyContent: 'center', marginBottom: 20 }}>
                    {field('m', 'MM', 2, 64)}{field('d', 'DD', 2, 64)}{field('y', 'YYYY', 4, 92)}
                  </div>
                  <Button size="lg" fullWidth onClick={checkDob}>Enter WeedReview</Button>
                  <button onClick={() => setMode('yesno')} style={{ marginTop: 16, background: 'none', border: 'none', color: 'var(--text-link)', fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600, cursor: 'pointer' }}>Back</button>
                </React.Fragment>
              )}
              <p style={{ color: 'var(--text-faint)', fontSize: 12, marginTop: 22, lineHeight: 1.5 }}>
                By entering you agree to consume responsibly and follow the laws of your jurisdiction.
              </p>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, color: 'var(--text-heading)' }}>Come back when you’re 21.</h1>
              <p style={{ color: 'var(--text-muted)', fontSize: 15, margin: '12px auto 24px', maxWidth: 320 }}>
                You must be of legal age to browse WeedReview. Please close this tab.
              </p>
              <Button variant="ghost" onClick={() => setDenied(false)}>Go back</Button>
            </React.Fragment>
          )}
        </div>
      </div>
    );
  }
  window.AgeGate = AgeGate;
})();