// Servicos.jsx
const { useRef: useServRef } = React;

const SERVICOS = [
  {
    title: 'Mentoria Premium',
    desc: 'Transformação completa: corpo + mente + identidade. Equipe integrada (personal, nutricionista, médico) com trabalho emocional e de identidade.',
    icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <circle cx="11" cy="8" r="3.5" stroke="var(--accent)" strokeWidth="1.8"/>
        <path d="M4 18c0-3.314 3.134-6 7-6s7 2.686 7 6" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round"/>
        <path d="M16 6l1.5 1.5L20 5" stroke="var(--gold)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
  },
  {
    title: 'Personal Training Presencial',
    desc: 'Acompanhamento exclusivo com direção e estratégia. Cada sessão é desenhada para o seu corpo e o seu momento.',
    icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <path d="M3 11h16M11 3v16" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round"/>
        <circle cx="11" cy="11" r="8.5" stroke="var(--rose-mid)" strokeWidth="1.2"/>
      </svg>
    ),
  },
  {
    title: 'Treinos Online',
    desc: 'Praticidade sem abrir mão de resultado — de qualquer lugar do mundo. Estrutura completa, suporte real.',
    icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <rect x="2" y="4" width="18" height="12" rx="2" stroke="var(--accent)" strokeWidth="1.8"/>
        <path d="M7 20h8M11 16v4" stroke="var(--rose-mid)" strokeWidth="1.6" strokeLinecap="round"/>
      </svg>
    ),
  },
  {
    title: 'Funcional Conectadas',
    desc: 'Treinos em grupo, ambiente 100% feminino, comunidade que sustenta. A força do coletivo a serviço da sua transformação.',
    icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <circle cx="7.5" cy="8" r="2.8" stroke="var(--accent)" strokeWidth="1.6"/>
        <circle cx="14.5" cy="8" r="2.8" stroke="var(--accent)" strokeWidth="1.6"/>
        <path d="M2 18c0-2.761 2.462-5 5.5-5s5.5 2.239 5.5 5" stroke="var(--rose-mid)" strokeWidth="1.6" strokeLinecap="round"/>
        <path d="M14.5 13c3.038 0 5.5 2.239 5.5 5" stroke="var(--rose-mid)" strokeWidth="1.6" strokeLinecap="round"/>
      </svg>
    ),
  },
];

function Servicos() {
  const ref = useServRef();
  useReveal(ref);

  return (
    <section className="servicos-section" ref={ref} id="servicos">
      <div className="container">
        <div className="servicos-inner">
          {/* Left — photo placeholder */}
          <div className="reveal">
            <div className="servicos-photo-box" style={{ padding: 0, overflow: 'hidden' }}>
              <img
                src={(window.__resources && window.__resources['servicosImg']) || 'assets/taty-comunidade.jpg'}
                alt="Taty Vaillant com aluna — Conectadas Fitness"
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }}
              />
            </div>
          </div>

          {/* Right — description + grid */}
          <div>
            <p className="eyebrow reveal">O serviço</p>
            <h2 className="section-title reveal rev-d1">
              Quatro formas de entrar no método
            </h2>
            <p className="reveal rev-d2" style={{
              fontSize: 16, color: '#6a5060', marginTop: 16, marginBottom: 8, lineHeight: 1.7,
            }}>
              Seja qual for o seu ponto de partida — online, presencial, individual ou em grupo —
              existe uma entrada no método Conectadas Fitness feita para você.
            </p>
            <div className="servicos-grid">
              {SERVICOS.map((s, i) => (
                <div key={i} className={`servico-card reveal rev-d${i + 2}`}>
                  <div className="servico-icon">{s.icon}</div>
                  <h3 style={{
                    fontFamily: 'var(--font-display)', fontSize: 'clamp(15px,1.4vw,17px)',
                    fontWeight: 800, letterSpacing: '-0.01em', marginBottom: 8,
                  }}>{s.title}</h3>
                  <p style={{ fontSize: 13, color: '#6a5060', lineHeight: 1.65 }}>{s.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Servicos });