// services.jsx — Servicii (umbrelă, accesibilă din dropdown header)

const SERVICE_LINKS = [
  { id: 'courses',        icon: '🎓', label: 'Academia TikTok' },
  { id: 'profile-design', icon: '🎨', label: 'Personalizare profil' },
  { id: 'studios',        icon: '🎬', label: 'Studiouri 4U' },
  { id: 'campaigns',      icon: '📢', label: 'Campanii cu influenceri' },
];

function ServicesPage({ onNav }) {
  return (
    <div className="page">
      <ServicesHero />
      <ServicesQuickLinks onNav={onNav} />
    </div>
  );
}

function ServicesHero() {
  return (
    <section style={{ minHeight: '35vh', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', paddingTop: 120, paddingBottom: 32 }}>
      <Mesh />
      <Particles count={20} />
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div className="pill" style={{ marginBottom: 20 }}>
            <span className="dot" />
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.05em' }}>SERVICII</span>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <h1 className="display" style={{ fontSize: 'clamp(40px, 6vw, 80px)', margin: 0, letterSpacing: '-0.04em' }}>Serviciile 4U.</h1>
        </Reveal>
        <Reveal delay={200}>
          <p style={{ fontSize: 'clamp(15px, 1.2vw, 18px)', color: 'var(--txt-2)', marginTop: 18, maxWidth: 600, lineHeight: 1.55 }}>
            Alege serviciul care te interesează.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function ServicesQuickLinks({ onNav }) {
  return (
    <section style={{ padding: '20px 0 120px' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, maxWidth: 920, margin: '0 auto' }} className="svc-links">
          {SERVICE_LINKS.map((s, i) => (
            <Reveal key={s.id} delay={i * 60}>
              <button onClick={() => onNav(s.id)} className="card hov" style={{
                width: '100%', padding: '22px 18px', textAlign: 'left',
                display: 'flex', flexDirection: 'column', gap: 10,
                cursor: 'pointer', border: '.5px solid var(--line)',
                background: 'rgba(255,255,255,.02)',
              }}>
                <div style={{ fontSize: 32, lineHeight: 1 }}>{s.icon}</div>
                <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--txt-0)' }}>{s.label}</div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--accent-1)', letterSpacing: '0.1em', marginTop: 'auto' }}>VEZI →</div>
              </button>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .svc-links { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 500px) { .svc-links { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

window.ServicesPage = ServicesPage;