/* global React, Icon, Eyebrow, Button, navTo */
// Page sections for the Thays Fernandes home page

// Photo with hover-zoom frame
function RImg({ src, alt, ratio = "4 / 5", radius = "var(--r-xl)", className = "", children }) {
  return (
    <div className={"tf-rimg " + className} style={{ aspectRatio: ratio, borderRadius: radius }}>
      <img src={src} alt={alt} loading="lazy" />
      {children}
    </div>
  );
}

// --- HERO ----------------------------------------------------------------
function Hero({ onBook }) {
  return (
    <section className="tf-hero tf-glow" id="topo">
      <div className="tf-hero-halo" />
      <div className="tf-hero-grid">
        <div className="tf-hero-copy" data-reveal>
          <Eyebrow>Tricologia · Terapia capilar</Eyebrow>
          <h1 className="tf-hero-title">A saúde do seu cabelo começa no <em>diagnóstico.</em></h1>
          <p className="tf-hero-lead">
            Avaliação tricológica completa e protocolos personalizados para
            queda, calvície e fios danificados — com acompanhamento profissional
            em cada etapa.
          </p>
          <div className="tf-hero-actions">
            <Button variant="primary" size="lg" icon="calendar-check" onClick={onBook}>Agendar avaliação</Button>
            <Button variant="ghost" size="lg" iconRight="arrow-right" href="#tratamentos">Conhecer tratamentos</Button>
          </div>
          <div className="tf-hero-trust">
            <div className="tf-avatars"><span/><span/><span/><span/></div>
            <div>
              <strong>+800 atendimentos</strong>
              <span>acompanhamento individual e baseado em evidência</span>
            </div>
          </div>
        </div>
        <div className="tf-hero-media" data-reveal>
          <RImg src="assets/photos/web/p1.jpg" alt="Thays Fernandes, tricologista" ratio="4 / 5" />
          <div className="tf-hero-chip">
            <div className="ic"><Icon name="microscope" size={20} /></div>
            <div>
              <strong>Diagnóstico por imagem</strong>
              <span>análise do couro cabeludo</span>
            </div>
          </div>
          <div className="tf-hero-badge"><Icon name="shield-check" size={16}/> Profissional certificada</div>
        </div>
      </div>
    </section>
  );
}

function StatStrip() {
  const stats = [
    { n: "+800", l: "atendimentos realizados" },
    { n: "98%", l: "satisfação no acompanhamento" },
    { n: "5", l: "anos de experiência clínica" },
    { n: "24h", l: "tempo médio de resposta" },
  ];
  return (
    <section className="tf-stats" data-reveal>
      {stats.map((s) => (
        <div className="tf-stat" key={s.l}>
          <div className="n">{s.n}</div>
          <div className="l">{s.l}</div>
        </div>
      ))}
    </section>
  );
}

// --- SERVICES ------------------------------------------------------------
function Services() {
  const items = [
    { id: "avaliacao", ic: "microscope", eye: "Diagnóstico", t: "Avaliação tricológica", d: "Análise detalhada do couro cabeludo e dos fios com tecnologia de imagem para entender a causa." },
    { id: "terapia", ic: "droplet", eye: "Tratamento", t: "Terapia capilar", d: "Protocolos personalizados que estimulam o couro cabeludo e fortalecem a fibra capilar." },
    { id: "queda", ic: "trending-down", eye: "Queda & calvície", t: "Controle da queda", d: "Estratégias para reduzir a queda e estimular o crescimento de forma segura e acompanhada." },
    { id: "fios", ic: "sparkles", eye: "Recuperação", t: "Fios danificados", d: "Reconstrução e hidratação profunda para devolver saúde, brilho e resistência aos fios." },
  ];
  return (
    <section className="tf-services tf-glow" id="tratamentos">
      <div className="tf-section-head" data-reveal>
        <Eyebrow center>O que oferecemos</Eyebrow>
        <h2 className="tf-h2 center">Tratamentos sob medida para<br/>cada fase do seu cabelo</h2>
      </div>
      <div className="tf-services-grid">
        {items.map((it, i) => (
          <a className={"tf-service-card" + (it.feat ? " feat" : "")} key={it.t} href={"tratamento.html?id=" + it.id} data-reveal style={{ transitionDelay: i * 70 + "ms" }}>
            <div className="ic"><Icon name={it.ic} size={24} /></div>
            <div className="eye">{it.eye}</div>
            <h3>{it.t}</h3>
            <p>{it.d}</p>
            <span className="tf-card-link">Saiba mais <Icon name="arrow-right" size={16} /></span>
          </a>
        ))}
      </div>
    </section>
  );
}

// --- TECHNOLOGY ----------------------------------------------------------
function Technology() {
  const points = [
    { ic: "scan-line", t: "Diagnóstico por imagem", d: "Couro cabeludo e fios analisados em alta ampliação." },
    { ic: "zap", t: "Tecnologia ECCO HAIR", d: "Estímulo e tratamento com equipamento profissional." },
    { ic: "clipboard-list", t: "Protocolo guiado por dados", d: "Cada sessão registrada e ajustada pela evolução." },
  ];
  return (
    <section className="tf-tech tf-glow" id="tecnologia">
      <div className="tf-tech-grid">
        <div className="tf-tech-media" data-reveal>
          <RImg src="assets/photos/web/p7.jpg" alt="Equipamento ECCO HAIR" ratio="4 / 5" />
          <div className="tf-tech-float">
            <RImg src="assets/photos/web/p3.jpg" alt="Aplicação de alta frequência" ratio="3 / 4" radius="var(--r-lg)" />
          </div>
        </div>
        <div className="tf-tech-copy" data-reveal>
          <Eyebrow>Tecnologia &amp; precisão</Eyebrow>
          <h2 className="tf-h2">Ciência e tecnologia<br/>a favor do seu cabelo</h2>
          <p className="tf-tech-lead">
            Unimos avaliação por imagem e equipamentos profissionais para tratar
            a causa com precisão — e medir cada resultado ao longo do caminho.
          </p>
          <ul className="tf-tech-list">
            {points.map((p) => (
              <li key={p.t}>
                <span className="ic"><Icon name={p.ic} size={20} /></span>
                <div><strong>{p.t}</strong><span>{p.d}</span></div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

// --- METHOD --------------------------------------------------------------
function Method() {
  const steps = [
    { n: "01", ic: "calendar-check", t: "Agendamento", d: "Você marca a avaliação pelo WhatsApp ou pelo site, em poucos minutos." },
    { n: "02", ic: "microscope", t: "Diagnóstico", d: "Analisamos couro cabeludo e fios para identificar a causa real do problema." },
    { n: "03", ic: "clipboard-list", t: "Protocolo", d: "Você recebe um plano de tratamento personalizado e realista para o seu caso." },
    { n: "04", ic: "heart-pulse", t: "Acompanhamento", d: "Acompanhamos cada etapa, ajustando o protocolo conforme os resultados." },
  ];
  return (
    <section className="tf-method tf-glow tf-glow-gold" id="metodo">
      <div className="tf-method-halo" />
      <div className="tf-method-head" data-reveal>
        <Eyebrow light>Como funciona</Eyebrow>
        <h2 className="tf-h2 on-dark">Um método claro, do<br/>diagnóstico ao resultado</h2>
      </div>
      <div className="tf-method-grid">
        {steps.map((s, i) => (
          <div className="tf-step" key={s.n} data-reveal style={{ transitionDelay: i * 80 + "ms" }}>
            <div className="tf-step-top">
              <span className="num">{s.n}</span>
              <div className="ic"><Icon name={s.ic} size={22} /></div>
            </div>
            <h3>{s.t}</h3>
            <p>{s.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// --- ABOUT ---------------------------------------------------------------
function About({ onBook }) {
  const points = [
    "Atendimento individual e humanizado",
    "Protocolos baseados em evidência",
    "Acompanhamento próximo em cada etapa",
  ];
  return (
    <section className="tf-about tf-glow" id="sobre">
      <div className="tf-about-media" data-reveal>
        <RImg src="assets/photos/web/p4.jpg" alt="Thays Fernandes" ratio="3 / 4" />
        <div className="tf-about-quote">
          <Icon name="quote" size={22} />
          <p>Cada cabelo conta uma história. Meu trabalho começa por entender a sua.</p>
        </div>
      </div>
      <div className="tf-about-copy" data-reveal>
        <Eyebrow>Sobre a Thays</Eyebrow>
        <h2 className="tf-h2">Cuidado profissional,<br/>resultado real</h2>
        <p className="tf-about-lead">
          Especialista em tricologia e terapia capilar, a Thays Fernandes une
          ciência e cuidado para tratar a causa — não apenas o sintoma — da queda,
          da calvície e dos fios danificados.
        </p>
        <ul className="tf-checklist">
          {points.map((p) => (
            <li key={p}><span className="ck"><Icon name="check" size={14} /></span>{p}</li>
          ))}
        </ul>
        <Button variant="primary" icon="calendar-check" onClick={onBook}>Agendar minha avaliação</Button>
      </div>
    </section>
  );
}

// --- TESTIMONIALS --------------------------------------------------------
function Testimonials() {
  const items = [
    { q: "Em três meses minha queda reduziu muito. O acompanhamento fez toda a diferença.", n: "Mariana L.", r: "Tratamento de queda" },
    { q: "Diagnóstico sério e honesto. Pela primeira vez entendi o que acontecia com meu cabelo.", n: "Patrícia R.", r: "Avaliação tricológica" },
    { q: "Meus fios estão muito mais fortes e com brilho. Atendimento impecável.", n: "Camila S.", r: "Fios danificados" },
  ];
  return (
    <section className="tf-testi tf-glow">
      <div className="tf-section-head" data-reveal>
        <Eyebrow center>Quem já cuidou com a gente</Eyebrow>
        <h2 className="tf-h2 center">Resultados que se veem<br/>e se sentem</h2>
      </div>
      <div className="tf-testi-grid">
        {items.map((t, i) => (
          <figure className="tf-testi-card" key={t.n} data-reveal style={{ transitionDelay: i * 80 + "ms" }}>
            <div className="stars">{Array.from({length:5}).map((_,k)=><Icon key={k} name="star" size={15} />)}</div>
            <blockquote>"{t.q}"</blockquote>
            <figcaption>
              <span className="av" />
              <div><strong>{t.n}</strong><span>{t.r}</span></div>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}

// --- CONTACT -------------------------------------------------------------
function Contact({ onBook }) {
  return (
    <section className="tf-contact tf-glow" id="contato">
      <div className="tf-contact-grid">
        <div className="tf-contact-copy" data-reveal>
          <Eyebrow>Onde atendo</Eyebrow>
          <h2 className="tf-h2">Atendimento na<br/>Clínica Med Clin</h2>
          <p className="tf-contact-lead">Agende sua avaliação e dê o primeiro passo para a saúde do seu cabelo.</p>
          <ul className="tf-contact-list">
            <li><span className="ic"><Icon name="map-pin" size={18}/></span><div><strong>Clínica Med Clin · Serro/MG</strong><span>Rua Padre João Moreira, nº 80 — Centro, Serro/MG</span></div></li>
            <li><span className="ic"><Icon name="clock" size={18}/></span><div><strong>Horário</strong><span>Segunda a sábado · das 9h às 19h</span></div></li>
            <li><span className="ic"><Icon name="message-circle" size={18}/></span><div><strong>WhatsApp</strong><span>Resposta em até 24h</span></div></li>
          </ul>
          <div className="tf-contact-actions">
            <Button variant="primary" size="lg" icon="calendar-check" onClick={onBook}>Agendar avaliação</Button>
            <Button variant="ghost" size="lg" icon="message-circle" href={(window.TF_CONTACT&&window.TF_CONTACT.whatsapp)||"#"}>Falar no WhatsApp</Button>
          </div>
        </div>
        <div className="tf-contact-map tf-glow tf-glow-gold" data-reveal>
          <div className="tf-map-inner">
            <Icon name="map-pin" size={30} />
            <strong>Clínica Med Clin</strong>
            <span>R. Padre João Moreira, 80 · Centro · Serro/MG</span>
            <a className="tf-map-link" href="https://www.google.com/maps/search/?api=1&query=Rua+Padre+João+Moreira+80+Centro+Serro+MG" target="_blank" rel="noreferrer">Ver no mapa <Icon name="external-link" size={15}/></a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { RImg, Hero, StatStrip, Services, Technology, Method, About, Testimonials, Contact });