// Age Verification Modal — blocking, localStorage-backed.
// Per brief: redirects to google.com on "Under 18" confirm.
const AGE_KEY = 'ppl_age_verified';

function AgeGate({ onEnter }) {
  const [visible, setVisible] = React.useState(() => {
    try { return localStorage.getItem(AGE_KEY) !== 'true'; }
    catch { return true; }
  });
  const [showExitConfirm, setShowExitConfirm] = React.useState(false);

  React.useEffect(() => {
    if (visible) document.body.classList.add('locked');
    else document.body.classList.remove('locked');
  }, [visible]);

  const handleEnter = () => {
    try { localStorage.setItem(AGE_KEY, 'true'); } catch {}
    setVisible(false);
    onEnter?.();
  };
  const handleExit = () => setShowExitConfirm(true);
  const confirmExit = () => { window.location.href = 'https://www.google.com'; };

  // Expose global to re-trigger (used by Tweaks)
  React.useEffect(() => {
    window.__pplShowAgeGate = () => {
      try { localStorage.removeItem(AGE_KEY); } catch {}
      setVisible(true);
      setShowExitConfirm(false);
    };
  }, []);

  if (!visible) return null;

  return (
    <div style={agStyles.overlay} role="dialog" aria-modal="true" aria-labelledby="age-gate-title">
      {/* background art layers */}
      <div style={agStyles.bgGradient} />
      <div style={agStyles.bgCompass}>
        <AgeCompass />
      </div>

      <div style={agStyles.modal} className="card">
        <div style={agStyles.crest}>
          <div style={agStyles.crestInner}>
            <Icon.Skull style={{ width: 40, height: 40, color: 'var(--gold)' }} />
          </div>
          <div style={agStyles.crestRays} />
        </div>

        <div style={agStyles.eyebrow}>Wicked Tales Interactive presents</div>

        <h1 id="age-gate-title" style={agStyles.title}>
          Pirate Privates<br /><span style={{ color: 'var(--gold)' }}>Loot</span>
        </h1>

        <div className="ornament" style={{ margin: '18px 0 22px' }}>
          <Icon.Compass style={{ width: 14, height: 14 }} />
        </div>

        <p style={agStyles.warningTitle}>
          Adults Only · 18+
        </p>
        <p style={agStyles.body}>
          This website contains adult content intended for individuals
          <strong style={{ color: 'var(--gold)' }}> 18 years of age or older</strong>.
          By entering, you confirm that you are of legal age and agree to our
          {' '}<a href="#terms" style={agStyles.link}>Terms of Service</a>.
        </p>
        <p style={agStyles.disclaimer}>
          All characters depicted are fictional adults 18+.
        </p>

        {!showExitConfirm ? (
          <div style={agStyles.buttons}>
            <button className="btn btn-primary" onClick={handleEnter} style={{ flex: 1 }}>
              <Icon.Unlock /> I am 18 or older — Enter
            </button>
            <button className="btn btn-ghost" onClick={handleExit} style={{ flex: 1 }}>
              I am under 18 — Exit
            </button>
          </div>
        ) : (
          <div style={agStyles.exitConfirm} className="card" >
            <div style={{ color: 'var(--danger)', fontFamily: 'var(--f-caps)', fontSize: 12, letterSpacing: '.2em', marginBottom: 10 }}>
              ⚠ Access denied
            </div>
            <div style={{ fontFamily: 'var(--f-serif)', fontSize: 15, fontStyle: 'italic', marginBottom: 16, color: 'var(--cream)' }}>
              You must be 18+ to view this site. You will now be redirected away.
            </div>
            <div style={{ display: 'flex', gap: 10 }}>
              <button className="btn btn-primary" onClick={confirmExit} style={{ flex: 1 }}>
                Continue to Google <Icon.Arrow />
              </button>
              <button className="btn btn-ghost" onClick={() => setShowExitConfirm(false)}>
                Back
              </button>
            </div>
          </div>
        )}

        <div style={agStyles.footer}>
          <a href="#tos" style={agStyles.footerLink}>Terms of Service</a>
          <span style={agStyles.sep}>·</span>
          <a href="#privacy" style={agStyles.footerLink}>Privacy Policy</a>
          <span style={agStyles.sep}>·</span>
          <a href="https://wickedtalesinteractive.com" style={agStyles.footerLink}>wickedtalesinteractive.com</a>
        </div>
      </div>
    </div>
  );
}

function AgeCompass() {
  return (
    <svg viewBox="0 0 600 600" style={{ width: '100%', height: '100%', opacity: .08 }}>
      <g transform="translate(300,300)" fill="none" stroke="#D4AF37" strokeWidth="0.8">
        <circle r="280" />
        <circle r="240" />
        <circle r="200" strokeDasharray="2 6" />
        <circle r="160" />
        <circle r="120" strokeDasharray="1 4" />
        {[...Array(32)].map((_, i) => {
          const a = (i / 32) * Math.PI * 2;
          const x1 = Math.cos(a) * 160, y1 = Math.sin(a) * 160;
          const x2 = Math.cos(a) * 280, y2 = Math.sin(a) * 280;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} strokeWidth={i % 4 === 0 ? 1.4 : .5} />;
        })}
        <path d="M0,-200 L20,0 L0,200 L-20,0 Z" fill="#D4AF37" opacity=".3" />
        <path d="M-200,0 L0,20 L200,0 L0,-20 Z" fill="#D4AF37" opacity=".15" />
      </g>
    </svg>
  );
}

const agStyles = {
  overlay: {
    position: 'fixed', inset: 0, zIndex: 100,
    background: 'rgba(11,11,20,.97)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    padding: '24px',
    overflow: 'auto',
  },
  bgGradient: {
    position: 'absolute', inset: 0,
    background: 'radial-gradient(ellipse at center, rgba(0,34,84,.4), transparent 60%)',
    pointerEvents: 'none',
  },
  bgCompass: {
    position: 'absolute', inset: 0,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    pointerEvents: 'none',
    animation: 'sway 14s ease-in-out infinite',
  },
  modal: {
    position: 'relative',
    maxWidth: 560,
    width: '100%',
    padding: '48px 44px 28px',
    textAlign: 'center',
    background: 'linear-gradient(180deg, #0e1424, #080810)',
    border: '1px solid var(--gold)',
    boxShadow: '0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(212,175,55,.2) inset',
  },
  crest: {
    position: 'absolute',
    top: -34, left: '50%', transform: 'translateX(-50%)',
    width: 68, height: 68,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  },
  crestInner: {
    width: 68, height: 68, background: '#0B0B14',
    border: '1px solid var(--gold)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    position: 'relative',
    transform: 'rotate(45deg)',
  },
  crestRays: {
    position: 'absolute', inset: -6,
    border: '1px solid rgba(212,175,55,.3)',
    transform: 'rotate(45deg)',
  },
  eyebrow: {
    fontFamily: 'var(--f-caps)',
    letterSpacing: '.3em',
    fontSize: 10,
    color: 'var(--beige)',
    textTransform: 'uppercase',
    marginTop: 12,
    marginBottom: 16,
    opacity: .7,
  },
  title: {
    fontFamily: 'var(--f-display)',
    fontWeight: 900,
    fontSize: 'clamp(32px, 5vw, 42px)',
    lineHeight: 1,
    letterSpacing: '.02em',
    color: 'var(--cream)',
    textShadow: '0 2px 30px rgba(212,175,55,.3)',
  },
  warningTitle: {
    fontFamily: 'var(--f-caps)',
    letterSpacing: '.4em',
    fontSize: 13,
    color: 'var(--orange)',
    textTransform: 'uppercase',
    marginBottom: 14,
  },
  body: {
    fontFamily: 'var(--f-serif)',
    fontSize: 15.5,
    lineHeight: 1.55,
    color: 'var(--cream)',
    marginBottom: 10,
    padding: '0 8px',
  },
  disclaimer: {
    fontFamily: 'var(--f-serif)',
    fontStyle: 'italic',
    fontSize: 12.5,
    color: 'var(--beige)',
    opacity: .7,
    marginBottom: 24,
  },
  buttons: {
    display: 'flex', gap: 12, flexWrap: 'wrap',
    marginBottom: 22,
  },
  exitConfirm: {
    padding: 18,
    marginBottom: 22,
    background: 'rgba(255,85,85,.05)',
    borderColor: 'rgba(255,85,85,.3)',
    textAlign: 'left',
  },
  link: { color: 'var(--gold)', textDecoration: 'underline', textDecorationColor: 'rgba(212,175,55,.4)' },
  footer: {
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    gap: 8, flexWrap: 'wrap',
    fontFamily: 'var(--f-sans)', fontSize: 11,
    color: 'rgba(245,240,232,.4)',
    borderTop: '1px solid rgba(212,175,55,.1)',
    paddingTop: 16,
  },
  footerLink: {
    color: 'rgba(245,240,232,.6)', textDecoration: 'none',
    transition: 'color .2s',
  },
  sep: { color: 'rgba(245,240,232,.3)' },
};

window.AgeGate = AgeGate;