const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#C9A84C",
  "heroTagline": "Indie Fusion. Unfiltered.",
  "showAccessPass": true
}/*EDITMODE-END*/;

function Newsletter() {
  const ref = useReveal();
  const [email, setEmail] = useState('');
  const [done, setDone] = useState(false);
  return (
    <section style={{ padding: '80px 24px', background: '#000' }}>
      <div style={{ maxWidth: 600, margin: '0 auto', textAlign: 'center' }}>
        <div ref={ref} className="liquid-glass reveal" style={{ borderRadius: 24, padding: '48px 40px' }}>
          <div className="section-badge" style={{ marginBottom: 20, margin: '0 auto 20px' }}>Stay Close</div>
          <h2 style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontSize: '2.2rem', color: '#fff', marginBottom: 12, letterSpacing: '-1px' }}>
            First to know.
          </h2>
          <p style={{ color: 'rgba(255,255,255,0.45)', fontWeight: 300, fontSize: '0.88rem', marginBottom: 28 }}>
            New music, tour dates, and exclusive content — straight to your inbox.
          </p>
          {done ? (
            <div style={{ color: 'var(--accent)', fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontSize: '1.3rem' }}>You're in. ✦</div>
          ) : (
            <form onSubmit={e => { e.preventDefault(); setDone(true); }}
              style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'center' }}>
              <input className="glass-input" type="email" placeholder="your@email.com" required
                value={email} onChange={e => setEmail(e.target.value)}
                style={{ flex: 1, minWidth: 200, borderRadius: 9999 }} />
              <button type="submit" className="btn-accent" style={{ whiteSpace: 'nowrap', padding: '11px 24px' }}>
                Subscribe
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const socials = [
    { label: 'Instagram', href: 'https://www.instagram.com/coloradofondew/', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="2" y="2" width="20" height="20" rx="5" /><circle cx="12" cy="12" r="5" /><circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" stroke="none" /></svg> },
    { label: 'Spotify', href: 'https://open.spotify.com/artist/1QbliGbXD2XPwfszhDWpbj?si=Olhj3BcDTju5JlvE5TF9jg', icon: <IconSpotify /> },
    { label: 'X / Twitter', href: 'https://x.com/ColoradoFonDew', icon: <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.736-8.857L2.25 2.25h6.775l4.261 5.638L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z"/></svg> },
    { label: 'SoundCloud', href: 'https://soundcloud.com/fondew', icon: <svg width="20" height="14" viewBox="0 0 24 16" fill="currentColor"><path d="M0 11.5C0 13.43 1.57 15 3.5 15H18a4 4 0 000-8c-.09 0-.18 0-.27.01A6 6 0 006.27 9.1 2.5 2.5 0 000 11.5zM1.5 8.5a1 1 0 011-1v7a1 1 0 01-1-1V8.5zm2 0a.5.5 0 01.5-.5v7a.5.5 0 01-.5-.5V8.5zm2-.5a.5.5 0 01.5.5v6a.5.5 0 01-.5.5V8z"/></svg> },
  ];

  return (
    <footer style={{ padding: '60px 24px 40px', borderTop: '1px solid rgba(255,255,255,0.06)', background: '#000' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        {/* Top row */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
          <img src="uploads/logo_upload-1776702310334.png" alt="FonDeW"
            style={{ height: 36, filter: 'invert(1)', objectFit: 'contain', opacity: 0.7 }} />
          {/* Socials */}
          <div style={{ display: 'flex', gap: 8 }}>
            {socials.map(s => (
              <a key={s.label} href={s.href} title={s.label}
                className="liquid-glass"
                style={{ width: 40, height: 40, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,0.55)', textDecoration: 'none', transition: 'color 0.2s' }}
                onMouseEnter={e => e.currentTarget.style.color = '#fff'}
                onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.55)'}
              >{s.icon}</a>
            ))}
          </div>
        </div>
        {/* Bottom row */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
          <span style={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.25)' }}>© 2026 FonDeW. All rights reserved.</span>
          <div style={{ display: 'flex', gap: 20 }}>
            {['Privacy', 'Terms', 'Press Kit'].map(l => (
              <a key={l} href="#" style={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.25)', textDecoration: 'none' }}
                onMouseEnter={e => e.currentTarget.style.color = 'rgba(255,255,255,0.6)'}
                onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.25)'}
              >{l}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

// ── Tweaks Panel ──────────────────────────────────────────────
function TweaksPanel({ tweaks, setTweaks }) {
  return (
    <div id="tweaks-panel" className="liquid-glass" style={{ borderRadius: 16, padding: '20px', width: 260 }}>
      <div style={{ fontSize: '0.78rem', fontWeight: 600, color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 16 }}>Tweaks</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div>
          <label style={{ fontSize: '0.72rem', color: 'rgba(255,255,255,0.4)', display: 'block', marginBottom: 6 }}>Accent Color</label>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <input type="color" value={tweaks.accentColor}
              onChange={e => {
                const v = e.target.value;
                setTweaks(t => ({...t, accentColor: v}));
                document.documentElement.style.setProperty('--accent', v);
                window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { accentColor: v } }, '*');
              }}
              style={{ width: 32, height: 32, borderRadius: 8, border: 'none', cursor: 'pointer', background: 'none' }} />
            <span style={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.5)', fontFamily: 'monospace' }}>{tweaks.accentColor}</span>
          </div>
        </div>
        <div>
          <label style={{ fontSize: '0.72rem', color: 'rgba(255,255,255,0.4)', display: 'block', marginBottom: 6 }}>Hero Tagline</label>
          <input className="glass-input" value={tweaks.heroTagline} style={{ fontSize: '0.8rem', padding: '8px 12px', borderRadius: 8 }}
            onChange={e => {
              const v = e.target.value;
              setTweaks(t => ({...t, heroTagline: v}));
              window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { heroTagline: v } }, '*');
            }} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <label style={{ fontSize: '0.72rem', color: 'rgba(255,255,255,0.4)' }}>Show Get Pass button</label>
          <div onClick={() => {
            const v = !tweaks.showAccessPass;
            setTweaks(t => ({...t, showAccessPass: v}));
            window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { showAccessPass: v } }, '*');
          }}
            style={{ width: 36, height: 20, borderRadius: 10, background: tweaks.showAccessPass ? 'var(--accent)' : 'rgba(255,255,255,0.15)', cursor: 'pointer', position: 'relative', transition: 'background 0.2s' }}>
            <div style={{ position: 'absolute', top: 2, left: tweaks.showAccessPass ? 18 : 2, width: 16, height: 16, borderRadius: '50%', background: '#fff', transition: 'left 0.2s' }} />
          </div>
        </div>
      </div>
    </div>
  );
}

// ── App ───────────────────────────────────────────────────────
function AppInner({ tweaks, setTweaks, tweaksVisible }) {
  const { user, openModal } = useAuth();

  useEffect(() => {
    const timer = setTimeout(() => {
      if (!user) openModal('signin');
    }, 1500);
    return () => clearTimeout(timer);
  }, [user]);

  return (
    <>
      <Navbar />
      <main>
        <Hero />
        <div style={{ background: '#000' }}>
          <About />
          <Music />
          <Shows />
          <Contact />
        </div>
      </main>
      <Footer />
      <div id="tweaks-panel" className={tweaksVisible ? 'visible' : ''} style={{ position: 'fixed', bottom: 24, right: 24, zIndex: 9999 }}>
        <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} />
      </div>
    </>
  );
}

function App() {
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  const [tweaksVisible, setTweaksVisible] = useState(false);

  useEffect(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accentColor);
  }, []);

  useEffect(() => {
    window.addEventListener('message', e => {
      if (e.data?.type === '__activate_edit_mode') setTweaksVisible(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaksVisible(false);
    });
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
  }, []);

  return (
    <AuthProvider>
      <AppInner tweaks={tweaks} setTweaks={setTweaks} tweaksVisible={tweaksVisible} />
    </AuthProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);