/* ============================================================ BALEARIC GROOVE v3 — app-v3.jsx Yellow #F1E850 · Red #E42322 · Deep Glass · Blob Depth ============================================================ */ const { useState, useEffect, useContext } = React; function CoverPH({ c1, c2, glyph, cover }) { if (cover) return (
{glyph}
); return (
{glyph}
); } /* ── Featured Release ── */ function Featured({ onPlay, current, playing }) { const { lang } = useLang(); const t = T[lang]; const f = window.FEATURED; const isThis = current?.id === 'featured'; return (
{t.featTag}
{f.format} · {f.date}

{f.title}

{f.artist}

{f.desc}

{f.track}
{t.streamSoon}
{I.spotify()} Spotify {I.arrowUp()}
); } /* ── Release Card ── */ function ReleaseCard({ r, onPlay, current, playing }) { const { lang } = useLang(); const t = T[lang]; const isThis = current?.id === r.id; return (
{r.format}
{t.streamNow}
{r.title}
{r.artist}
{r.date}
{I.spotify()} {I.beatport()} {I.soundcloud()}
); } /* ── Releases Section ── */ function Releases({ onPlay, current, playing }) { const { lang } = useLang(); const t = T[lang]; const [filter, setFilter] = useState('All'); const filters = [t.filterAll,'EP','Single','LP']; const shown = window.RELEASES.filter(r => filter===t.filterAll || r.format===filter); return (
{/* Depth blobs */}
{t.relEye}

{t.relH} {t.relHem}

{filters.map(f=>( ))}
{shown.map((r,i)=>(
))}
); } /* ── Artists Section ── */ function Artists({ onOpenDemo }) { const { lang } = useLang(); const t = T[lang]; return (
{t.artEye}

{t.artH} {t.artHem}

{window.ARTISTS.map((a,i)=>(
{a.releases} {t.artReleases}
{a.photo ? {a.name} :
{I.user()}photo
}
{t.artView}
{a.name}
{a.style}
))}
); } /* ── CTA Strip ── */ function CTAStrip({ onOpenDemo }) { const { lang } = useLang(); const t = T[lang]; return (
BG
{t.ctaEye}

{t.ctaH} {t.ctaHem}

{t.ctaSub}

demos@balearicgroove.com
); } /* ── Demo Modal ── */ const GENRES = ['Balearic','Downtempo','Deep House','Organic House','Ambient','Other']; function DemoModal({ open, onClose, onSuccess }) { const { lang } = useLang(); const t = T[lang]; const [form, setForm] = useState({name:'',email:'',artist:'',genre:'',link:'',message:'',gdpr:false}); const [errors, setErrors] = useState({}); const [loading, setLoading] = useState(false); const [faq, setFaq] = useState(-1); const set = (k,v) => setForm(f=>({...f,[k]:v})); const validate = () => { const e={}; if (!form.name.trim()) e.name = t.errReq; if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = t.errEmail; if (!form.artist.trim()) e.artist = t.errReq; if (!form.genre) e.genre = t.errPick; if (!/^https?:\/\/.+/.test(form.link)) e.link = t.errLink; if (!form.gdpr) e.gdpr = t.errConsent; setErrors(e); return !Object.keys(e).length; }; const submit = ev => { ev.preventDefault(); if (!validate()) return; setLoading(true); setTimeout(()=>{ setLoading(false); onClose(); onSuccess(); setForm({name:'',email:'',artist:'',genre:'',link:'',message:'',gdpr:false}); }, 1600); }; useEffect(()=>{ const fn = e=>{ if(e.key==='Escape') onClose(); }; window.addEventListener('keydown',fn); return ()=>window.removeEventListener('keydown',fn); },[onClose]); return (
e.stopPropagation()}> {/* Left — Form */}
{t.demoEye}

{t.demoH} {t.demoHem}

{t.demoSub}

set('name',e.target.value)} placeholder="Alex Rivera" /> {errors.name && {errors.name}}
set('email',e.target.value)} placeholder="you@email.com" /> {errors.email && {errors.email}}
set('artist',e.target.value)} placeholder="e.g. Dunes" /> {errors.artist && {errors.artist}}
{errors.genre && {errors.genre}}
set('link',e.target.value)} placeholder={t.fLinkP} /> {errors.link && {errors.link}}
{form.message.length}/500
set('gdpr',e.target.checked)} />
{t.fReply}
{/* Right — Sidebar */}

{lang==='es'?'3 razones para enviarlo':'3 reasons to send it'}

01
{t.r1t}{t.r1s}
02
{t.r2t}{t.r2s}
03
{t.r3t}{t.r3s}

{lang==='es'?'Nuestro sonido':'Our sound'}

{t.soundTags.map(tag=>{tag})}

FAQ

{t.faq.map(([q,a],i)=>(

{a}

))}
); } /* ── Success Modal ── */ function SuccessModal({ open, onClose }) { const { lang } = useLang(); const t = T[lang]; useEffect(()=>{ const fn=e=>{if(e.key==='Escape')onClose();}; window.addEventListener('keydown',fn); return ()=>window.removeEventListener('keydown',fn); },[onClose]); return (
e.stopPropagation()}>

{t.successH}

{t.successP} {t.successW}.

); } /* ── Footer ── */ function Footer({ onOpenDemo }) { const { lang } = useLang(); const t = T[lang]; const go = (e,href) => { e.preventDefault(); document.querySelector(href)?.scrollIntoView({behavior:'smooth'}); }; return ( ); } /* ── Mini Player ── */ function fmt(s){const m=Math.floor(s/60),ss=Math.floor(s%60);return m+':'+String(ss).padStart(2,'0');} function MiniPlayer({ track, playing, onToggle, onClose, progress }) { if (!track) return null; return (
{track.title[0]}
{track.title}
{track.artist} · Balearic Groove
{fmt(progress)}
3:30
{I.vol()}
); } /* ── APP ── */ function App() { const [lang, setLang] = useState('en'); const [track, setTrack] = useState(null); const [playing, setPlaying] = useState(false); const [progress, setProgress] = useState(0); const [demoOpen, setDemoOpen] = useState(false); const [success, setSuccess] = useState(false); useReveal(); const onPlay = newTrack => { if (track?.id === newTrack.id) { setPlaying(p=>!p); } else { setTrack(newTrack); setPlaying(true); setProgress(0); } }; useEffect(()=>{ if (!playing) return; const iv = setInterval(()=>setProgress(p=>p>=210?0:p+1),1000); return ()=>clearInterval(iv); },[playing]); useEffect(()=>{ document.body.style.paddingBottom = track ? 'var(--player-h)' : '0'; },[track]); useEffect(()=>{ document.body.style.overflow = demoOpen ? 'hidden' : ''; },[demoOpen]); const openDemo = () => setDemoOpen(true); const closeDemo = () => setDemoOpen(false); return (