// studios.jsx — Studiouri 4U (beneficiu exclusiv pentru creatori)

const { useState: useStateSt } = React;

function StudiosPage({ onNav }) {
  return (
    <div className="page">
      <StudiosHero onNav={onNav} />
      <StudiosWhy />
      <StudiosEquipment />
      <StudiosLocations />
      <StudiosProcess />
      <StudiosExclusive />
      <StudiosFAQ />
      <StudiosCTA onNav={onNav} />
    </div>
  );
}

// ─── HERO ──────────────────────────────────────────────────────
function StudiosHero({ onNav }) {
  return (
    <section style={{ minHeight: '60vh', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', paddingTop: 120, paddingBottom: 60 }}>
      <Mesh />
      <Particles count={35} />
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div className="pill" style={{ marginBottom: 24 }}>
            <span className="dot" />
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.05em' }}>STUDIOURI 4U</span>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <h1 className="display" style={{ fontSize: 'clamp(40px, 6.5vw, 92px)', margin: 0, maxWidth: 1100, lineHeight: 1.02 }}>
            Studiourile noastre. <span style={{ background: 'linear-gradient(135deg, var(--accent-1), var(--accent-2))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>Acasă pentru creatorii 4U.</span>
          </h1>
        </Reveal>
        <Reveal delay={220}>
          <p style={{ fontSize: 'clamp(17px, 1.3vw, 21px)', color: 'var(--txt-2)', marginTop: 24, maxWidth: 760, lineHeight: 1.55 }}>
            Singura agenție din România cu studiouri proprii de live streaming. 3 spații, manageri dedicați, dotări profesionale — exclusiv pentru creatorii 4U Agency.
          </p>
        </Reveal>
        <Reveal delay={300}>
          <div style={{ marginTop: 28 }}><BackButton onNav={onNav} /></div>
        </Reveal>
        <Reveal delay={380}>
          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            {[['3', 'studiouri', 'București + Cluj'], ['24/7', 'acces', 'cu rezervare'], ['%', 'din încasări live', 'discutat individual']].map(([n, l, sub]) => (
              <div key={l} className="card-glass" style={{ padding: '12px 20px', display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span className="display mono" style={{ fontSize: 22, color: 'var(--accent-1)' }}>{n}</span>
                <span style={{ fontSize: 12, color: 'var(--txt-2)' }}>{l}</span>
                <span className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', marginLeft: 4 }}>· {sub}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─── DE CE STUDIOURI ───────────────────────────────────────────
function StudiosWhy() {
  return (
    <section style={{ padding: '120px 0', borderTop: '.5px solid var(--line-soft)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center' }} className="sw-grid">
          <Reveal>
            <div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● DE CE UN STUDIO PROFESIONAL</div>
              <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 56px)', margin: '0 0 32px', lineHeight: 1.05 }}>De ce ai nevoie de un studio profesional?</h2>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 18, color: 'var(--txt-2)', fontSize: 16, lineHeight: 1.7, maxWidth: 580 }}>
                <p style={{ margin: 0 }}>Live-urile pe TikTok nu sunt despre cameră. Sunt despre <strong style={{ color: 'var(--txt-1)' }}>prezență</strong>, <strong style={{ color: 'var(--txt-1)' }}>constanță</strong> și <strong style={{ color: 'var(--txt-1)' }}>calitate</strong> care se vede din primul minut.</p>
                <p style={{ margin: 0 }}>De acasă, faci compromis — lumini slabe, microfon mediu, fundal aglomerat, vecini care fac zgomot. Cu un studio profesional, te concentrezi pe ce contează: <strong style={{ color: 'var(--txt-1)' }}>conținut și audiență</strong>.</p>
                <p style={{ margin: 0 }}>La 4U Agency am construit 3 studiouri identice — 2 în București și 1 în Cluj-Napoca. Toate cu același nivel premium de dotări. Disponibile creatorilor 4U cu un procent din încasările live-ului — discutat individual.</p>
              </div>
            </div>
          </Reveal>
          <Reveal delay={150}>
            <div style={{ position: 'relative', aspectRatio: '1', maxWidth: 480, marginLeft: 'auto' }}>
              <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 50%, rgba(82,242,15,.18), transparent 65%)', filter: 'blur(60px)' }} />
              <div className="card-glass" style={{ position: 'relative', height: '100%', display: 'grid', placeItems: 'center', overflow: 'hidden', background: 'linear-gradient(135deg, rgba(82,242,15,.12), rgba(255,215,0,.08))', border: '.5px solid rgba(82,242,15,.25)' }}>
                <div style={{ display: 'flex', gap: 20, fontSize: 80, lineHeight: 1, animation: 'floatY 6s ease-in-out infinite', filter: 'drop-shadow(0 0 40px rgba(82,242,15,.4))' }}>
                  <span>🎙️</span><span>🎬</span><span>💡</span>
                </div>
                <span className="mono" style={{ position: 'absolute', top: 16, left: 16, color: 'rgba(255,255,255,.4)', fontSize: 18 }}>✦</span>
                <span className="mono" style={{ position: 'absolute', top: 16, right: 16, color: 'rgba(255,255,255,.4)', fontSize: 18 }}>✦</span>
                <span className="mono" style={{ position: 'absolute', bottom: 16, left: 16, color: 'rgba(255,255,255,.4)', fontSize: 18 }}>✦</span>
                <span className="mono" style={{ position: 'absolute', bottom: 16, right: 16, color: 'rgba(255,255,255,.4)', fontSize: 18 }}>✦</span>
                <div className="mono" style={{ position: 'absolute', bottom: 24, left: '50%', transform: 'translateX(-50%)', fontSize: 10, color: 'var(--txt-1)', letterSpacing: '0.25em' }}>ROOM SETUP</div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .sw-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }`}</style>
    </section>
  );
}

// ─── DOTĂRI ────────────────────────────────────────────────────
function StudiosEquipment() {
  const items = [
    { ico: '💡', t: 'Lumini profesionale',     d: 'Ring lights + softbox-uri, ajustabile' },
    { ico: '🎙️', t: 'Microfoane premium',      d: 'Condenser pentru voce clară' },
    { ico: '📱', t: 'Camere profesionale',     d: 'Echipamente profesionale, de ultimă generație.' },
    { ico: '🎨', t: 'Backdrop-uri schimbabile', d: 'Multiple variante de fundal' },
    { ico: '👗', t: 'Costume & props',         d: 'Pentru content variat' },
    { ico: '📶', t: 'Wifi gigabit',            d: 'Stabilitate pentru live-uri lungi' },
    { ico: '❄️', t: 'Aer condiționat',         d: 'Confort optim, indiferent de sezon' },
    { ico: '🚪', t: 'Cabină de schimbare',     d: 'Privacy pentru pregătire' },
    { ico: '🅿️', t: 'Parcare',                 d: 'Loc dedicat pentru creatorii 4U' },
    { ico: '🖥️', t: 'Setup live battles',      d: 'Configurare specială pentru meciuri' },
    { ico: '👨‍💼', t: 'Manager dedicat',          d: 'Tehnician 4U mereu pe loc, gata să ajute' },
    { ico: '☕', t: 'Zonă de relaxare',        d: 'Pauze între sesiuni live' },
  ];
  return (
    <section style={{ padding: '120px 0', borderTop: '.5px solid var(--line-soft)' }}>
      <div className="container">
        <Reveal>
          <div style={{ marginBottom: 24 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● DOTĂRI</div>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 56px)', margin: 0, lineHeight: 1.05 }}>Dotări profesionale. <span style={{ color: 'var(--txt-2)' }}>La fiecare ședință.</span></h2>
          </div>
        </Reveal>
        <Reveal delay={100}>
          <p style={{ fontSize: 16, color: 'var(--txt-2)', maxWidth: 640, lineHeight: 1.6, marginBottom: 56 }}>
            Cele 3 studiouri sunt identice — același echipament, aceleași standarde, aceeași echipă pregătită să te ajute.
          </p>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }} className="se-grid">
          {items.map((it, i) => (
            <Reveal key={it.t} delay={i * 40}>
              <div className="card hov" style={{ padding: 22, height: '100%', minHeight: 140 }}>
                <div style={{ width: 44, height: 44, borderRadius: 10, background: 'rgba(82,242,15,.10)', border: '.5px solid rgba(82,242,15,.2)', display: 'grid', placeItems: 'center', fontSize: 20, marginBottom: 14 }}>{it.ico}</div>
                <div className="display" style={{ fontSize: 15, marginBottom: 6 }}>{it.t}</div>
                <p style={{ fontSize: 12, color: 'var(--txt-2)', lineHeight: 1.5, margin: 0 }}>{it.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1100px) { .se-grid { grid-template-columns: repeat(3, 1fr) !important; }}
        @media (max-width: 760px)  { .se-grid { grid-template-columns: repeat(2, 1fr) !important; }}
        @media (max-width: 440px)  { .se-grid { grid-template-columns: 1fr !important; }}
      `}</style>
    </section>
  );
}

// ─── LOCAȚII ───────────────────────────────────────────────────
function StudiosLocations() {
  const locs = [
    { ico: '🏙️', name: 'Studio București #1', area: 'Sector central', avail: 'Cu programare' },
    { ico: '🏙️', name: 'Studio București #2', area: 'Sector vest',    avail: 'Cu programare' },
    { ico: '🏔️', name: 'Studio Cluj-Napoca',  area: 'Centru urban',   avail: 'Cu programare' },
  ];
  return (
    <section style={{ padding: '120px 0', borderTop: '.5px solid var(--line-soft)' }}>
      <div className="container">
        <Reveal>
          <div style={{ marginBottom: 24 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● LOCAȚII</div>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 56px)', margin: 0, lineHeight: 1.05 }}>Unde ne găsești.</h2>
          </div>
        </Reveal>
        <Reveal delay={100}>
          <p style={{ fontSize: 16, color: 'var(--txt-2)', maxWidth: 640, lineHeight: 1.6, marginBottom: 56 }}>
            Locația exactă o primești după înscrierea în 4U Agency și confirmarea programării. Acces pe bază de programare prin manager.
          </p>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="sl-grid">
          {locs.map((l, i) => (
            <Reveal key={l.name} delay={i * 100}>
              <div className="card-glass" style={{ padding: 32, height: '100%', position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', top: -40, right: -40, width: 180, height: 180, background: 'radial-gradient(circle, rgba(82,242,15,.10), transparent 70%)', filter: 'blur(30px)' }} />
                <div style={{ position: 'relative' }}>
                  <div style={{ fontSize: 56, marginBottom: 20, lineHeight: 1, filter: 'drop-shadow(0 0 30px rgba(82,242,15,.3))' }}>{l.ico}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px', borderRadius: 999, background: 'rgba(82,242,15,.10)', border: '.5px solid rgba(82,242,15,.3)' }}>
                      <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent-1)', boxShadow: '0 0 8px var(--accent-1)', animation: 'pulse 2s ease-in-out infinite' }} />
                      <span className="mono" style={{ fontSize: 10, color: 'var(--accent-1)', letterSpacing: '0.1em' }}>ACTIV</span>
                    </span>
                  </div>
                  <h3 className="display" style={{ fontSize: 22, margin: '0 0 6px' }}>{l.name}</h3>
                  <div style={{ fontSize: 13, color: 'var(--txt-2)', marginBottom: 24 }}>{l.area}</div>
                  <div style={{ paddingTop: 16, borderTop: '.5px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '0.1em' }}>DISPONIBILITATE</span>
                    <span style={{ fontSize: 12, color: 'var(--txt-1)' }}>{l.avail}</span>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .sl-grid { grid-template-columns: 1fr !important; }}
        @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; }}
      `}</style>
    </section>
  );
}

// ─── PROCES PROGRAMARE ─────────────────────────────────────────
function StudiosProcess() {
  const steps = [
    { n: '01', t: 'Înscrie-te în 4U',         d: 'Acces la studiouri vine cu calitatea de creator 4U Agency. Înscrie-te dacă încă nu ai cont.' },
    { n: '02', t: 'Discută cu managerul tău', d: 'După înscriere primești un manager de cont dedicat. El te informează despre disponibilitatea studiourilor.' },
    { n: '03', t: 'Programează ședința',      d: 'Stabilești cu managerul tău data, ora și studio-ul preferat. Programare flexibilă.' },
    { n: '04', t: 'Vino și fă live',          d: 'Ajungi la studio, găsești totul pregătit. Tehnicianul 4U te ajută cu setup-ul. Tu te concentrezi pe live.' },
  ];
  return (
    <section style={{ padding: '120px 0', borderTop: '.5px solid var(--line-soft)' }}>
      <div className="container">
        <Reveal>
          <div style={{ marginBottom: 56 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● PROCES</div>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 56px)', margin: 0, lineHeight: 1.05 }}>Cum rezervi un studio.</h2>
          </div>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, position: 'relative' }} className="sp-grid">
          {/* timeline line */}
          <div style={{ position: 'absolute', top: 24, left: '6%', right: '6%', height: 1, background: 'linear-gradient(90deg, transparent, var(--accent-1), transparent)', opacity: 0.3, pointerEvents: 'none' }} className="sp-line" />
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 80}>
              <div className="card" style={{ padding: 24, height: '100%', position: 'relative', background: 'rgba(255,255,255,.02)' }}>
                <div style={{ width: 48, height: 48, borderRadius: 12, background: 'rgba(82,242,15,.10)', border: '.5px solid rgba(82,242,15,.3)', display: 'grid', placeItems: 'center', marginBottom: 18 }}>
                  <span className="display mono" style={{ fontSize: 16, color: 'var(--accent-1)' }}>{s.n}</span>
                </div>
                <h3 className="display" style={{ fontSize: 17, margin: '0 0 8px' }}>{s.t}</h3>
                <p style={{ fontSize: 13, color: 'var(--txt-2)', lineHeight: 1.6, margin: 0 }}>{s.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1000px) { .sp-grid { grid-template-columns: 1fr 1fr !important; } .sp-line { display: none !important; }}
        @media (max-width: 600px)  { .sp-grid { grid-template-columns: 1fr !important; }}
      `}</style>
    </section>
  );
}

// ─── EXCLUSIVITATE ─────────────────────────────────────────────
function StudiosExclusive() {
  const stats = [
    { ico: '🏢', n: '3',    l: 'studiouri proprii' },
    { ico: '🎬', n: '+200', l: 'ședințe lunare' },
    { ico: '👨‍💼', n: '8',    l: 'manageri dedicați' },
    { ico: '💰', n: '%', l: 'din încasări (discutat individual)' },
  ];
  return (
    <section style={{ padding: '120px 0', borderTop: '.5px solid var(--line-soft)' }}>
      <div className="container">
        <Reveal>
          <div className="card-glass" style={{ padding: 'clamp(40px, 6vw, 72px)', position: 'relative', overflow: 'hidden', background: 'linear-gradient(135deg, rgba(82,242,15,.10), rgba(255,215,0,.06))', border: '.5px solid rgba(82,242,15,.20)' }}>
            <div style={{ position: 'absolute', top: -100, right: -100, width: 320, height: 320, background: 'radial-gradient(circle, rgba(82,242,15,.18), transparent 65%)', filter: 'blur(60px)' }} />
            <div style={{ position: 'absolute', bottom: -100, left: -80, width: 280, height: 280, background: 'radial-gradient(circle, rgba(255,215,0,.12), transparent 65%)', filter: 'blur(60px)' }} />
            <div style={{ position: 'relative' }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● EXCLUSIVITATE 4U</div>
              <h2 className="display" style={{ fontSize: 'clamp(28px, 4vw, 48px)', margin: '0 0 20px', lineHeight: 1.1, maxWidth: 880 }}>Studiouri proprii. Acces exclusiv. <span style={{ color: 'var(--accent-1)' }}>Doar pentru creatorii 4U.</span></h2>
              <p style={{ color: 'var(--txt-2)', fontSize: 16, lineHeight: 1.7, maxWidth: 760, margin: '0 0 40px' }}>
                Studiourile sunt construite de noi, întreținute de noi, dedicate creatorilor noștri. Nu închiriem la externi. Sunt disponibile creatorilor 4U cu un procent din încasările live-ului — procentul exact se discută individual cu managerul tău de cont.
              </p>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }} className="sx-grid">
                {stats.map((s, i) => (
                  <div key={s.l} className="card" style={{ padding: 22, background: 'rgba(0,0,0,.25)', display: 'flex', flexDirection: 'column', gap: 8 }}>
                    <div style={{ fontSize: 28, lineHeight: 1 }}>{s.ico}</div>
                    <div className="display mono" style={{ fontSize: 26, color: 'var(--accent-1)' }}>{s.n}</div>
                    <div style={{ fontSize: 12, color: 'var(--txt-2)' }}>{s.l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 800px) { .sx-grid { grid-template-columns: 1fr 1fr !important; }}
        @media (max-width: 440px) { .sx-grid { grid-template-columns: 1fr !important; }}
      `}</style>
    </section>
  );
}

// ─── FAQ ───────────────────────────────────────────────────────
function StudiosFAQ() {
  const items = [
    { q: 'Trebuie să fiu creator 4U ca să folosesc studiourile?', a: 'Da. Studiourile sunt un beneficiu exclusiv pentru creatorii înscriși în 4U Agency. Nu închiriem la externi. Înscrierea e gratuită și se face în 2 minute.' },
    { q: 'Cât costă o ședință de live în studio?',                a: 'Se aplică un procent din încasările live-ului. Procentul exact este confidențial și se discută individual cu managerul tău de cont. Tu vii cu energia și conținutul tău — toată aparatura (lumini, microfoane, camere, internet) e pusă la dispoziție de noi.' },
    { q: 'Pot rezerva în orice moment?',                          a: 'Studiourile noastre nu sunt pentru sesiuni ocazionale. Sunt destinate creatorilor care doresc să își desfășoare activitatea live constant din studio, pe termen mai lung. Programul exact se stabilește împreună cu managerul tău de cont.' },
  ];
  const [open, setOpen] = useStateSt(0);
  return (
    <section style={{ padding: '120px 0', borderTop: '.5px solid var(--line-soft)' }}>
      <div className="container" style={{ maxWidth: 880 }}>
        <Reveal>
          <div style={{ marginBottom: 40, textAlign: 'center' }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● ÎNTREBĂRI FRECVENTE</div>
            <h2 className="display" style={{ fontSize: 'clamp(28px, 3.6vw, 44px)', margin: 0, lineHeight: 1.1 }}>Câteva lucruri pe care merită să le știi.</h2>
          </div>
        </Reveal>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {items.map((it, i) => {
            const active = open === i;
            return (
              <Reveal key={i} delay={i * 60}>
                <div className="card" style={{ padding: 0, overflow: 'hidden', borderColor: active ? 'rgba(82,242,15,.3)' : undefined }}>
                  <button
                    onClick={() => setOpen(active ? -1 : i)}
                    style={{ width: '100%', padding: '20px 24px', background: 'none', border: 'none', textAlign: 'left', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, color: 'var(--txt-1)' }}
                  >
                    <span className="display" style={{ fontSize: 16 }}>{it.q}</span>
                    <span className="mono" style={{ fontSize: 18, color: 'var(--accent-1)', transform: active ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform .3s' }}>+</span>
                  </button>
                  <div style={{ maxHeight: active ? 220 : 0, overflow: 'hidden', transition: 'max-height .35s ease', borderTop: active ? '.5px solid var(--line)' : 'none' }}>
                    <p style={{ padding: '16px 24px 22px', margin: 0, color: 'var(--txt-2)', fontSize: 14, lineHeight: 1.7 }}>{it.a}</p>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─── CTA ───────────────────────────────────────────────────────
function StudiosCTA({ onNav }) {
  return (
    <section style={{ padding: '80px 0 120px' }}>
      <div className="container">
        <Reveal>
          <div className="card-glass" style={{ padding: 'clamp(40px, 6vw, 72px)', textAlign: 'center', position: 'relative', overflow: 'hidden', background: 'linear-gradient(135deg, rgba(82,242,15,.12), rgba(255,215,0,.06))', border: '.5px solid rgba(82,242,15,.25)' }}>
            <Mesh />
            <div style={{ position: 'relative', zIndex: 1 }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● HAI ÎN STUDIO</div>
              <h2 className="display" style={{ fontSize: 'clamp(32px, 5vw, 64px)', margin: '0 0 20px', lineHeight: 1.05 }}>Vrei acces la studiourile 4U?</h2>
              <p style={{ color: 'var(--txt-2)', fontSize: 17, maxWidth: 580, margin: '0 auto 32px', lineHeight: 1.6 }}>
                Înscrie-te în 4U Agency. Apoi programează-ți primul live profesional.
              </p>
              <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
                <button className="btn btn-primary btn-lg" onClick={() => onNav('signup')}>Înscrie-te ca creator →</button>
                <button className="btn btn-glass btn-lg" onClick={() => onNav('contact')}>Întreabă mai multe →</button>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.StudiosPage = StudiosPage;