/* global React */
const { useState: arS, useEffect: arE, useRef: arR } = React;

/* ── Notify popup ───────────────────────────────────── */
function NotifyPopup({ email, onClose }) {
  arE(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [onClose]);

  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 999,
        background: 'rgba(21,20,15,0.72)',
        backdropFilter: 'blur(6px)',
        display: 'grid', placeItems: 'center',
        animation: 'notifyFadeIn .25s ease',
      }}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{
          background: '#1C1B14',
          border: '1px solid rgba(239,234,224,0.12)',
          borderRadius: 20,
          padding: '48px 44px',
          maxWidth: 440, width: '90%',
          textAlign: 'center',
          position: 'relative',
          boxShadow: '0 40px 100px rgba(0,0,0,0.55)',
          animation: 'notifySlideUp .3s cubic-bezier(.22,1,.36,1)',
        }}
      >
        {/* close */}
        <button
          onClick={onClose}
          data-cursor=""
          style={{
            position: 'absolute', top: 16, right: 16,
            background: 'rgba(239,234,224,0.08)', border: 'none', borderRadius: '50%',
            width: 32, height: 32, cursor: 'pointer',
            color: 'rgba(239,234,224,0.5)', fontSize: 14, lineHeight: 1,
            display: 'grid', placeItems: 'center',
            transition: 'background .2s, color .2s',
          }}
          onMouseEnter={e => { e.currentTarget.style.background = 'rgba(239,234,224,0.16)'; e.currentTarget.style.color = '#EFEAE0'; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'rgba(239,234,224,0.08)'; e.currentTarget.style.color = 'rgba(239,234,224,0.5)'; }}
        >✕</button>

        {/* icon */}
        <div style={{
          width: 56, height: 56, borderRadius: '50%',
          background: 'rgba(184,92,58,0.15)',
          border: '1px solid rgba(184,92,58,0.35)',
          display: 'grid', placeItems: 'center',
          margin: '0 auto 28px',
        }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#B85C3A" strokeWidth="1.5">
            <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.01 1.18 2 2 0 012 .01h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z"/>
          </svg>
        </div>

        <div className="mono" style={{ fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#B85C3A', marginBottom: 14 }}>
          You're on the list
        </div>
        <div className="serif" style={{ fontSize: 32, lineHeight: 1.1, color: '#EFEAE0', marginBottom: 16 }}>
          We'll let you know.
        </div>
        <div style={{ fontSize: 13, color: 'rgba(239,234,224,0.5)', lineHeight: 1.7, marginBottom: 32 }}>
          {email && <><span style={{ color: 'rgba(239,234,224,0.75)' }}>{email}</span><br /></>}
          One mail when AR ships. No noise before that.
        </div>

        <button
          onClick={onClose}
          data-cursor=""
          style={{
            width: '100%', padding: '14px 0', borderRadius: 999,
            background: '#B85C3A', border: 'none', cursor: 'pointer',
            fontFamily: 'inherit', fontSize: 11, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: '#EFEAE0', fontWeight: 500,
            transition: 'background .2s',
          }}
          onMouseEnter={e => { e.currentTarget.style.background = '#a04f30'; }}
          onMouseLeave={e => { e.currentTarget.style.background = '#B85C3A'; }}
        >
          Got it
        </button>
      </div>
      <style>{`
        @keyframes notifyFadeIn { from { opacity: 0 } to { opacity: 1 } }
        @keyframes notifySlideUp { from { opacity: 0; transform: translateY(20px) scale(.97) } to { opacity: 1; transform: none } }
      `}</style>
    </div>
  );
}

/* ── AR Coming Soon ─────────────────────────────────── */
function ARSoon() {
  const I = window.IMAGES || {};
  const [tilt, setTilt] = arS({ x: 0, y: 0 });
  const [notified, setNotified] = arS(false);
  const [notifyEmail, setNotifyEmail] = arS('');
  const phoneRef = arR(null);

  arE(() => {
    const el = phoneRef.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      setTilt({
        x: (e.clientY - cy) / 40,
        y: (e.clientX - cx) / 40,
      });
    };
    const onLeave = () => setTilt({ x: 0, y: 0 });
    el.addEventListener('mousemove', onMove);
    el.addEventListener('mouseleave', onLeave);
    return () => {
      el.removeEventListener('mousemove', onMove);
      el.removeEventListener('mouseleave', onLeave);
    };
  }, []);

  return (
    <>
    <section id="ar-soon" style={{
      position: 'relative',
      padding: '160px 0',
      background: 'var(--ink)',
      color: 'var(--bg)',
      overflow: 'hidden',
    }}>
      {/* warm radial glow */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 800px 600px at 75% 50%, rgba(184,92,58,0.18), transparent 60%)',
        pointerEvents: 'none',
      }} />

      <div style={{ position: 'relative', maxWidth: 1400, margin: '0 auto', padding: '0 32px' }}>
        <FadeUp>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 60 }}>
            <span className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(239,234,224,0.55)' }}>
              — 03 / Augmented Reality
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 12px', border: '1px solid rgba(239,234,224,0.25)', borderRadius: 999 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#B85C3A', boxShadow: '0 0 10px #B85C3A' }} className="ar-pulse" />
              <span className="mono" style={{ fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase' }}>Coming Q3 2026</span>
            </span>
          </div>
        </FadeUp>

        <div className="ar-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          {/* Left — copy */}
          <div>
            <h2 className="serif kerning-tight" style={{ fontSize: 'clamp(44px, 6vw, 96px)', lineHeight: 0.95, marginBottom: 32 }}>
              <Reveal text="Carry the room" />
              <br />
              <span style={{ fontStyle: 'italic', color: '#E8B89E' }}>
                <Reveal text="in your pocket." baseDelay={0.2} />
              </span>
            </h2>

            <FadeUp delay={0.3}>
              <p style={{ color: 'rgba(239,234,224,0.7)', fontSize: 16, lineHeight: 1.7, maxWidth: 480, marginBottom: 40 }}>
                Point your phone at the floor. Aura unfurls a 1:1 model of any space onto it — chairs you can walk around, lamps that cast real shadow, walls that hold up to a tape measure.
              </p>
            </FadeUp>

            <FadeUp delay={0.45}>
              <div className="ar-features" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 48, maxWidth: 460 }}>
                {[
                  ['LiDAR aware', 'Snaps to detected planes; no QR markers needed.'],
                  ['1:1 to scale', 'Measure with your finger — millimetre accurate.'],
                  ['Light matched', 'Reads the room and re-lights the model in real time.'],
                  ['No install', 'Opens via QR. WebXR; iOS 17 + Android 13.'],
                ].map(([t, d], i) => (
                  <div key={i}>
                    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#E8B89E', marginBottom: 8 }}>
                      0{i+1}
                    </div>
                    <div className="serif" style={{ fontSize: 22, lineHeight: 1.15, marginBottom: 6 }}>{t}</div>
                    <div style={{ fontSize: 12, color: 'rgba(239,234,224,0.55)', lineHeight: 1.6 }}>{d}</div>
                  </div>
                ))}
              </div>
            </FadeUp>

            <FadeUp delay={0.6}>
              <form onSubmit={(e) => { e.preventDefault(); setNotified(true); }} style={{
                display: 'flex', alignItems: 'center', gap: 0,
                background: 'rgba(255,253,248,0.08)',
                border: '1px solid rgba(239,234,224,0.2)',
                borderRadius: 999,
                padding: 6,
                maxWidth: 460,
              }}>
                <input
                  type="email"
                  placeholder="you@somewhere.studio"
                  required
                  value={notifyEmail}
                  onChange={e => setNotifyEmail(e.target.value)}
                  style={{
                    flex: 1,
                    background: 'transparent',
                    border: 'none',
                    outline: 'none',
                    color: 'var(--bg)',
                    fontSize: 14,
                    padding: '12px 18px',
                    fontFamily: 'inherit',
                  }}
                />
                <button type="submit" className="btn-primary" data-cursor="click" style={{ background: '#B85C3A', color: 'var(--bg)' }}>
                  Notify me
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                    <path d="M5 12h14M13 6l6 6-6 6" />
                  </svg>
                </button>
              </form>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(239,234,224,0.4)', marginTop: 14 }}>
                · No spam · One mail when it ships
              </div>
            </FadeUp>
          </div>

          {/* Right — phone mock */}
          <div ref={phoneRef} style={{ display: 'grid', placeItems: 'center', minHeight: 600, perspective: 1400 }}>
            <FadeUp delay={0.2}>
              <div className="phone-3d" style={{
                width: 290, height: 580,
                borderRadius: 44,
                background: '#0a0908',
                padding: 8,
                boxShadow: '0 60px 120px rgba(0,0,0,0.45), 0 0 0 1px rgba(239,234,224,0.08), inset 0 0 0 2px rgba(239,234,224,0.06)',
                position: 'relative',
                transformStyle: 'preserve-3d',
                transform: `rotateX(${tilt.x}deg) rotateY(${-tilt.y}deg)`,
                transition: 'transform .4s cubic-bezier(.22,1,.36,1)',
              }}>
                {/* notch */}
                <div style={{ position: 'absolute', top: 18, left: '50%', transform: 'translateX(-50%)', width: 100, height: 26, background: '#0a0908', borderRadius: 999, zIndex: 4 }} />

                {/* screen */}
                <div style={{
                  width: '100%', height: '100%',
                  borderRadius: 36,
                  overflow: 'hidden',
                  position: 'relative',
                  background: `url(${I.arRoom}) center/cover, #2a2620`,
                }}>
                  {/* AR overlay grid */}
                  <svg viewBox="0 0 290 580" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', mixBlendMode: 'screen', opacity: 0.45 }}>
                    <defs>
                      <linearGradient id="grid-fade" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stopColor="#E8B89E" stopOpacity="0" />
                        <stop offset="60%" stopColor="#E8B89E" stopOpacity="0.5" />
                        <stop offset="100%" stopColor="#E8B89E" stopOpacity="0.05" />
                      </linearGradient>
                    </defs>
                    {/* perspective grid (floor) */}
                    {[...Array(7)].map((_, i) => (
                      <line key={`h${i}`} x1={20 - i*8} y1={380 + i*22} x2={270 + i*8} y2={380 + i*22} stroke="url(#grid-fade)" strokeWidth="0.6" />
                    ))}
                    {[...Array(11)].map((_, i) => (
                      <line key={`v${i}`} x1={20 + i*25} y1="380" x2={i*40 - 80} y2="580" stroke="url(#grid-fade)" strokeWidth="0.6" />
                    ))}
                  </svg>

                  {/* AR target reticle */}
                  <div style={{ position: 'absolute', top: '46%', left: '50%', transform: 'translate(-50%, -50%)' }}>
                    <div style={{ width: 70, height: 70, position: 'relative' }}>
                      <span style={{ position: 'absolute', top: 0, left: 0, width: 14, height: 14, borderTop: '1.5px solid #E8B89E', borderLeft: '1.5px solid #E8B89E' }} />
                      <span style={{ position: 'absolute', top: 0, right: 0, width: 14, height: 14, borderTop: '1.5px solid #E8B89E', borderRight: '1.5px solid #E8B89E' }} />
                      <span style={{ position: 'absolute', bottom: 0, left: 0, width: 14, height: 14, borderBottom: '1.5px solid #E8B89E', borderLeft: '1.5px solid #E8B89E' }} />
                      <span style={{ position: 'absolute', bottom: 0, right: 0, width: 14, height: 14, borderBottom: '1.5px solid #E8B89E', borderRight: '1.5px solid #E8B89E' }} />
                      <div className="ar-target-pulse" style={{ position: 'absolute', inset: '50% 50%', width: 6, height: 6, transform: 'translate(-50%, -50%)', background: '#E8B89E', borderRadius: '50%' }} />
                    </div>
                  </div>

                  {/* top label */}
                  <div style={{ position: 'absolute', top: 64, left: 16, right: 16, display: 'flex', justifyContent: 'space-between' }}>
                    <span className="mono" style={{ fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#fff', background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(6px)', padding: '4px 8px', borderRadius: 4 }}>
                      ● AR · Live
                    </span>
                    <span className="mono" style={{ fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#fff', background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(6px)', padding: '4px 8px', borderRadius: 4 }}>
                      2.4m
                    </span>
                  </div>

                  {/* bottom card */}
                  <div style={{
                    position: 'absolute', left: 12, right: 12, bottom: 18,
                    background: 'rgba(20,18,14,0.55)',
                    backdropFilter: 'blur(14px)',
                    borderRadius: 18,
                    padding: '14px 16px',
                    border: '1px solid rgba(255,253,248,0.08)',
                  }}>
                    <div className="mono" style={{ fontSize: 8, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#E8B89E', marginBottom: 4 }}>
                      Place model · Penthouse 02
                    </div>
                    <div className="serif" style={{ fontSize: 18, lineHeight: 1.1, color: '#fff', marginBottom: 10 }}>
                      Tap floor to anchor
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <div style={{ display: 'flex', gap: 8 }}>
                        <span style={{ width: 26, height: 26, borderRadius: 6, background: '#E8B89E' }} />
                        <span style={{ width: 26, height: 26, borderRadius: 6, background: '#5a554a' }} />
                        <span style={{ width: 26, height: 26, borderRadius: 6, background: '#c8d2bc' }} />
                      </div>
                      <span style={{ width: 38, height: 38, borderRadius: '50%', background: '#fff', display: 'grid', placeItems: 'center', color: '#15140F' }}>
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                          <path d="M5 12h14M13 6l6 6-6 6" />
                        </svg>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </FadeUp>

            {/* floating callouts */}
            <div className="ar-callout" style={{
              position: 'absolute', top: '20%', left: '6%',
              padding: '8px 12px', borderRadius: 999,
              border: '1px solid rgba(239,234,224,0.2)',
              background: 'rgba(255,253,248,0.06)',
              backdropFilter: 'blur(8px)',
            }}>
              <span className="mono" style={{ fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#E8B89E' }}>
                ↗ Plane detected
              </span>
            </div>
            <div className="ar-callout" style={{
              position: 'absolute', bottom: '20%', right: '4%',
              padding: '8px 12px', borderRadius: 999,
              border: '1px solid rgba(239,234,224,0.2)',
              background: 'rgba(255,253,248,0.06)',
              backdropFilter: 'blur(8px)',
            }}>
              <span className="mono" style={{ fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#fff' }}>
                ◍ 1:1 scale
              </span>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes arPulse { 0%,100%{ transform: scale(1); opacity: 1 } 50%{ transform: scale(2.4); opacity: 0 } }
        .ar-pulse { animation: arPulse 2s ease-out infinite; }
        @keyframes arTargetPulse { 0%,100%{ box-shadow: 0 0 0 0 #E8B89E } 50%{ box-shadow: 0 0 0 18px rgba(232,184,158,0) } }
        .ar-target-pulse { animation: arTargetPulse 1.8s ease-out infinite; }
        @keyframes calloutFloat { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
        .ar-callout { animation: calloutFloat 4s ease-in-out infinite; }
      `}</style>
    </section>
    {notified && <NotifyPopup email={notifyEmail} onClose={() => setNotified(false)} />}
    </>
  );
}

window.ARSoon = ARSoon;