// Manifesto, Method, Services, Space, Team, Contact sections

const Marquee = () => (
  <div className="marquee">
    <div className="marquee-track">
      {[...Array(2)].flatMap((_,i) => [
        <span key={i+'a'}>Performance</span>,
        <span key={i+'b'} className="sep">·</span>,
        <span key={i+'c'}><em>Cuidado</em></span>,
        <span key={i+'d'} className="sep">·</span>,
        <span key={i+'e'}>Longevidade</span>,
        <span key={i+'f'} className="sep">·</span>,
        <span key={i+'g'}><em>Recuperação</em></span>,
        <span key={i+'h'} className="sep">·</span>,
        <span key={i+'i'}>Ciência</span>,
        <span key={i+'j'} className="sep">·</span>,
        <span key={i+'k'}><em>Perseverança</em></span>,
        <span key={i+'l'} className="sep">·</span>,
      ])}
    </div>
  </div>
);

const ManifestoSection = () => (
  <section className="section-pad" id="sobre">
    <div className="container">
      <div className="section-head reveal">
        <div className="section-head-num">01 — Manifesto</div>
        <h2 className="display h2 reveal delay-1">
          A transformação começa<br/>com <em>respeito</em>.
        </h2>
      </div>

      <div className="manifesto-grid">
        <div className="manifesto-text reveal">
          <p className="lede">
            Nada em nós é genérico, porque nada em você é igual a ninguém. Guiamos histórias com coragem, devolvemos autonomia e reconectamos você, com você mesmo.
          </p>
          <p>
            E é aí que ela entra: a <em style={{fontFamily:'Instrument Serif, serif'}}>perseverança</em>. Protagonista silenciosa, presente em cada passo. Força que acolhe, rotina que sustenta. Para nós, perseverança é cuidado em estado puro — é fazer de novo, com intenção. É continuar, mesmo quando parece difícil.
          </p>
          <p>
            Queremos influenciar o mercado a ser mais humano, mais inteligente, mais comprometido com a vida real. Porque quando a forma de cuidar muda, tudo muda.
          </p>
          <p style={{marginTop: '2em', fontFamily:'Instrument Serif, serif', fontStyle:'italic', fontSize:'clamp(20px, 1.6vw, 26px)', color:'var(--ink)'}}>
            Não é só perseverar… é Persera.
          </p>
        </div>
        <div className="reveal delay-1">
          <Field palette="paper" className="manifesto-image" label="Recovery Lounge"/>
        </div>
      </div>
    </div>
  </section>
);

const principios = [
  { num: "01", title: "Respeitamos a singularidade de cada indivíduo", body: "Cada pessoa carrega uma história, um ritmo e um potencial únicos. Construímos cada jornada com escuta, observação e cuidado personalizado." },
  { num: "02", title: "Vamos além do físico — impulsionamos vidas", body: "Cada mudança conquistada é um degrau para uma vida mais consciente, leve e potente. Cada cliente, protagonista de sua própria evolução." },
  { num: "03", title: "Perseverança é a nossa rotina", body: "Resultados consistentes nascem do compromisso diário com o processo. Mais importante do que velocidade é a presença diária, o esforço real, o passo firme." },
  { num: "04", title: "A inovação pulsa em tudo o que fazemos", body: "Estamos atentos às novas tecnologias, ao comportamento das pessoas e ao que pode tornar nossa entrega ainda mais completa — sempre um passo à frente." },
  { num: "05", title: "Unimos gentileza e força", body: "Acolhemos com escuta e empatia, mas também guiamos com firmeza e convicção. Um ambiente seguro e afetivo, mas também desafiador e transformador." },
  { num: "06", title: "Nossa excelência tem base científica", body: "Cada protocolo, cada orientação e cada método é sustentado por ciência, pesquisa e prática especializada. Sem achismos. Sem modismos." },
  { num: "07", title: "O olho no olho é essencial", body: "Em um mundo acelerado, não abrimos mão da presença genuína. É por meio dessa conexão sincera que criamos relações de confiança e parceria duradoura." },
];

const MethodSection = () => {
  const [active, setActive] = React.useState(0);
  return (
    <section className="section-pad" id="metodo" style={{background:'var(--paper-warm)'}}>
      <div className="container">
        <div className="section-head reveal">
          <div className="section-head-num">02 — Método</div>
          <h2 className="display h2 reveal delay-1">
            Sete princípios<br/>que <em>guiam</em> tudo.
          </h2>
        </div>
        <div className="method-list reveal">
          {principios.map((p, i) => (
            <div key={i} className="method-row" onMouseEnter={() => setActive(i)}>
              <span className="num">{p.num}</span>
              <h3 className="title">{p.title}</h3>
              <p className="body">{p.body}</p>
              <span className="indicator">{active === i ? '◉' : '○'}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const services = [
  { label: "01", name: "Treino inteligente", desc: "Planos individualizados de alta intensidade, ajustados em tempo real por avaliação corporal, biometria e wearables.", palette: "blue" },
  { label: "02", name: "Fisioterapia & Osteopatia", desc: "Recuperação, prevenção e tratamento de dores crônicas, com profissionais altamente capacitados e protocolos atualizados.", palette: "blueWarm" },
  { label: "03", name: "Recuperação avançada", desc: "Tanque frio e quente, ofurô, sauna e protocolos de recuperação acelerada para regular o sistema nervoso e otimizar o desempenho.", palette: "deep" },
  { label: "04", name: "Massagem & toque terapêutico", desc: "Liberação miofascial, drenagem e técnicas integrativas — com mãos treinadas e tempo dedicado a você.", palette: "sand" },
  { label: "05", name: "Avaliações & dados", desc: "Análises corporais, genéticas e metabólicas — uma fotografia honesta para personalizar cada intervenção.", palette: "smoke" },
  { label: "06", name: "Programas de longevidade", desc: "Acompanhamentos remotos, gamificação e workshops para que a evolução não pare quando você sai do espaço.", palette: "glow" },
];

const ServicesSection = () => (
  <section className="section-pad" id="servicos">
    <div className="container">
      <div className="section-head reveal">
        <div className="section-head-num">03 — Serviços</div>
        <h2 className="display h2 reveal delay-1">
          Um ecossistema<br/>de <em>evolução</em> contínua.
        </h2>
      </div>
      <div className="services-intro reveal">
        <p className="lede">
          Integramos múltiplas especialidades em um só lugar. Treinos de alta intensidade convivem com fisioterapia, recuperação avançada e tecnologia de ponta — tudo orquestrado em torno de uma única pergunta:
        </p>
        <p style={{fontFamily:'Instrument Serif, serif', fontStyle:'italic', fontSize:'clamp(22px, 2.4vw, 36px)', lineHeight: 1.2, color:'var(--ink)'}}>
          o que é melhor para você, neste momento da sua jornada?
        </p>
      </div>

      <div className="service-grid reveal">
        {services.map((s, i) => (
          <div key={i} className="service-card">
            <div>
              <Field palette={s.palette} className="visual" />
              <span className="label">{s.label} · Serviço</span>
              <h3 className="name">{s.name}</h3>
              <p className="desc">{s.desc}</p>
            </div>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--line)'}}>
              <span className="label">Saiba mais</span>
              <span style={{color:'var(--azul-claro)'}}>→</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const QuoteSection = () => (
  <section className="reveal" style={{margin: '0'}}>
    <div className="quote">
      <div className="container">
        <p className="quote-text">
          "Performance começa com <em>cuidado</em>. Resultado vem com <em>ciência</em>. Transformação vem com <em>perseverança</em>."
        </p>
        <div className="quote-source">— Trueline Persera</div>
      </div>
    </div>
  </section>
);

const SpaceSection = () => (
  <section className="section-pad" id="espaco" style={{background:'var(--paper-warm)'}}>
    <div className="container">
      <div className="section-head reveal">
        <div className="section-head-num">04 — O espaço</div>
        <h2 className="display h2 reveal delay-1">
          Sofisticado, sereno,<br/>desenhado para <em>evoluir</em>.
        </h2>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(12,1fr)', gap: 24}}>
        <div className="reveal" style={{gridColumn:'1 / span 7'}}>
          <Field palette="blueWarm" className="space-img wide" label="Training Floor" style={{aspectRatio:'16/10'}}/>
          <div className="space-cap"><span>Salão de treino · 320m²</span><span className="num">N° 01</span></div>
        </div>
        <div className="reveal delay-1" style={{gridColumn:'8 / span 5'}}>
          <Field palette="deep" className="space-img" label="Cold Plunge"/>
          <div className="space-cap"><span>Tanque frio &amp; quente</span><span className="num">N° 02</span></div>
        </div>
        <div className="reveal" style={{gridColumn:'1 / span 4'}}>
          <Field palette="sand" className="space-img" label="Recovery Suite"/>
          <div className="space-cap"><span>Suíte de recuperação</span><span className="num">N° 03</span></div>
        </div>
        <div className="reveal delay-1" style={{gridColumn:'5 / span 4'}}>
          <Field palette="glow" className="space-img" label="Sauna · Ofurô"/>
          <div className="space-cap"><span>Sauna e ofurô</span><span className="num">N° 04</span></div>
        </div>
        <div className="reveal delay-2" style={{gridColumn:'9 / span 4'}}>
          <Field palette="smoke" className="space-img" label="Lounge"/>
          <div className="space-cap"><span>Lounge &amp; convivência</span><span className="num">N° 05</span></div>
        </div>
      </div>
    </div>
  </section>
);

const team = [
  {
    name: "Nílcio Flávio",
    role: "Co-fundador e fisioterapeuta",
    imageSrc: "assets/Nilcio.jpg",
    instagram: "https://www.instagram.com/nilcio.fisio/",
  },
  {
    name: "Bruno Barbosa",
    role: "Treinador",
    imageSrc: "assets/Bruno-barbosa.png",
    instagram: "https://www.instagram.com/brunobarbosanl/",
  },
  {
    name: "Rodrigo Backes",
    role: "Treinador",
    imageSrc: "assets/Rodrigo-Backes.jpg",
    instagram: "https://www.instagram.com/rodrigombackes/",
  },
  {
    name: "Guilherme Menezes",
    role: "Treinador · condicionamento",
    imageSrc: "assets/guilherme-menezes.jpg",
    instagram: "https://www.instagram.com/gui.treinador/",
  },
];

const TeamSection = () => (
  <section className="section-pad" id="equipe">
    <div className="container">
      <div className="section-head reveal">
        <div className="section-head-num">05 — Equipe</div>
        <h2 className="display h2 reveal delay-1">
          Profissionais que<br/>cuidam com <em>profundidade</em>.
        </h2>
      </div>
      <div className="team-grid">
        {team.map((m, i) => (
          <div key={m.name} className={`team-card reveal delay-${(i%3)+1}`}>
            {m.imageSrc ? (
              <div className="field photo team-photo-img">
                <img src={m.imageSrc} alt={`Retrato de ${m.name}`} />
              </div>
            ) : (
              <Field palette={m.palette} className="photo"/>
            )}
            <h3 className="name" dangerouslySetInnerHTML={{__html: m.name}}/>
            <p className="role" dangerouslySetInnerHTML={{__html: m.role}}/>
            {m.instagram && (
              <a href={m.instagram} className="team-ig" target="_blank" rel="noopener noreferrer">
                Instagram <span className="arrow">→</span>
              </a>
            )}
          </div>
        ))}
      </div>
    </div>
  </section>
);

const ContactSection = () => (
  <section className="contact" id="contato">
    <Field palette="deep" style={{position:'absolute', inset: 0, zIndex: 1, opacity: 0.6}}/>
    <div className="container">
      <div className="contact-grid">
        <div className="reveal">
          <div className="eyebrow" style={{color:'rgba(245,242,236,0.65)', marginBottom: 32}}>
            <span className="dot" style={{background:'var(--azul-claro)'}}/>06 — Fale conosco
          </div>
          <h2 className="contact-headline">
            Sua nova era<br/>começa <em>aqui</em>.
          </h2>
          <div style={{marginTop: 48, display:'flex', gap: 12, flexWrap:'wrap'}}>
            <a href="https://api.whatsapp.com/send/?phone=5531998225812" target="_blank" rel="noopener" className="btn" style={{background:'var(--paper)', color:'var(--azul-escuro)'}}>
              Conversar no WhatsApp <span className="arrow">→</span>
            </a>
            <a href="tel:+5531998225812" className="btn btn-ghost" style={{borderColor:'rgba(245,242,236,0.3)', color:'var(--paper)'}}>
              +55 31 99822 5812
            </a>
          </div>
        </div>
        <div className="contact-info reveal delay-1">
          <div className="group">
            <strong>Endereço</strong>
            Rua Jornalista Djalma Andrade, 377<br/>
            Belo Horizonte · MG · 30320-540
          </div>
          <div className="group">
            <strong>Contato</strong>
            <a href="tel:+5531998225812">+55 31 99822 5812</a><br/>
            <a href="https://instagram.com/persera.wellness" target="_blank" rel="noopener">@persera.wellness</a>
          </div>
          <div className="group">
            <strong>Horário</strong>
            Seg–Sex · 06h00 — 22h00<br/>
            Sáb · 08h00 — 14h00
          </div>
        </div>
      </div>
      <div className="container foot" style={{padding: '32px 0'}}>
        <div style={{display:'flex', alignItems:'center', gap: 16}}>
          <Wordmark size={14} color="rgba(245,242,236,0.7)"/>
        </div>
        <div>© 2026 Persera Wellness · Saúde em sua potência</div>
      </div>
    </div>
  </section>
);

window.Marquee = Marquee;
window.ManifestoSection = ManifestoSection;
window.MethodSection = MethodSection;
window.ServicesSection = ServicesSection;
window.QuoteSection = QuoteSection;
window.SpaceSection = SpaceSection;
window.TeamSection = TeamSection;
window.ContactSection = ContactSection;