// More.jsx — Process + Testimonials + FAQ + CTA

/* ── Process ─────────────────────────────────────── */
const STEPS = [
{ n: "01", title: "Análise do rosto", desc: "Avaliação completa das proporções e características únicas do seu rosto para criar um design harmônico." },
{ n: "02", title: "Mapeamento facial", desc: "Técnica precisa para mapear os pontos ideais das sobrancelhas conforme a anatomia do seu rosto." },
{ n: "03", title: "Escolha da técnica ideal", desc: "Juntas, definimos qual procedimento melhor atende o seu objetivo — design, volume, coloração ou curvatura." },
{ n: "04", title: "Execução com precisão", desc: "Cada fio, cada traçado é realizado com cuidado e atenção para garantir o resultado perfeito." },
{ n: "05", title: "Finalização e cuidados", desc: "Orientação completa sobre os cuidados pós-procedimento para manter o resultado por mais tempo." }];


function Process() {
  const lineRef = React.useRef(null);
  const wrapRef = React.useRef(null);
  const [activeStep, setActiveStep] = React.useState(-1);

  React.useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          if (lineRef.current) lineRef.current.style.height = "100%";
          STEPS.forEach((_, i) => {
            setTimeout(() => setActiveStep(i), i * 300 + 200);
          });
          observer.disconnect();
        }
      },
      { threshold: 0.2 }
    );
    if (wrapRef.current) observer.observe(wrapRef.current);
    return () => observer.disconnect();
  }, []);

  return (
    <section id="process">
      <div className="container">
        <div className="section-header">
          <div className="eyebrow reveal" style={{ justifyContent: "center" }}>Sua experiência</div>
          <h2 className="section-title reveal d1">
            Como funciona sua{" "}
            <span className="hl" style={{ fontSize: "45px" }}>visita.</span>
          </h2>
          <p className="section-sub reveal d2">
            Do primeiro contato ao resultado final, cada etapa é pensada para
            proporcionar conforto e confiança.
          </p>
        </div>

        <div className="process-steps" ref={wrapRef}>
          <div className="process-line" />
          <div className="process-line-fill" ref={lineRef} style={{ transition: "height 1.5s ease" }} />
          {STEPS.map((s, i) =>
          <div className={`process-step${i <= activeStep ? " active" : ""}`} key={s.n}>
              <div className="process-num">{s.n}</div>
              <div className="process-content">
                <div className="process-step-title">{s.title}</div>
                <div className="process-step-desc">{s.desc}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ── Testimonials ────────────────────────────────── */
const TESTIMONIALS = [
{
  text: "A Beatriz é incrível! Minhas sobrancelhas nunca ficaram tão harmônicas. Ela realmente sabe respeitar o formato natural do rosto.",
  name: "Ana Luíza M.",
  service: "Design de Sobrancelhas",
  stars: 5
},
{
  text: "Fiz o brow lamination e amei o resultado. Natural, encorpado e duradouro. Sem dúvida o melhor que já fiz na vida.",
  name: "Camila F.",
  service: "Brow Lamination",
  stars: 5
},
{
  text: "Atendimento impecável, ambiente acolhedor e resultado que superou minhas expectativas. Indico de olhos fechados!",
  name: "Juliana R.",
  service: "Henna + Mapeamento",
  stars: 5
},
{
  text: "Fiz o lash lifting e simplesmente não largo mais. Meu olhar ficou muito mais aberto e natural. Amo a Essenza!",
  name: "Mariana S.",
  service: "Lash Lifting",
  stars: 5
},
{
  text: "A Bia tem um talento incrível para entender o que cada cliente precisa. O resultado sempre fica muito natural e elegante.",
  name: "Fernanda T.",
  service: "Tintura + Design",
  stars: 5
},
{
  text: "Sempre saio de lá me sentindo ainda mais bonita. O cuidado com cada detalhe é o que diferencia a Essenza Glow.",
  name: "Gabriela P.",
  service: "Design de Sobrancelhas",
  stars: 5
}];


function Testimonials() {
  return (
    <section id="testimonials">
      <div className="container">
        <div className="section-header">
          <div className="eyebrow reveal" style={{ justifyContent: "center" }}>Depoimentos</div>
          <h2 className="section-title reveal d1">
            O que nossas clientes{" "}
            <span className="hl" style={{ fontSize: "45px" }}>dizem.</span>
          </h2>
        </div>
        <div className="testimonials-grid">
          {TESTIMONIALS.map((t, i) =>
          <div className={`testimonial-card reveal d${i % 3 + 1}`} key={i}>
              <div className="t-quote">"</div>
              <div className="t-stars">{"★".repeat(t.stars)}</div>
              <p className="t-text">"{t.text}"</p>
              <div className="t-name">{t.name}</div>
              <div className="t-service">{t.service}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ── FAQ ─────────────────────────────────────────── */
const FAQS = [
{ q: "Quanto tempo dura o design de sobrancelhas?", a: "O resultado do design com pinça dura em média de 3 a 6 semanas, dependendo do crescimento dos fios. Para manter o resultado impecável, recomendo retornar dentro desse período." },
{ q: "A henna fica muito marcada?", a: "A henna proporciona um resultado natural e delicado na pele, durando entre 5 e 15 dias dependendo do tipo de pele. Nos fios, o efeito dura de 3 a 4 semanas. Nada exagerado — o efeito é de preenchimento suave." },
{ q: "O brow lamination danifica os fios?", a: "Quando feito corretamente com produtos de qualidade, o brow lamination é seguro. Na Essenza Glow, utilizamos produtos específicos para o procedimento e fornecemos orientações completas de hidratação pós-procedimento." },
{ q: "O lash lifting substitui a extensão de cílios?", a: "São propostas diferentes. O lash lifting cria uma curvatura natural e duradoura nos seus próprios cílios (3 a 6 semanas), sem adição de fios postiços. É uma opção mais natural, de baixa manutenção e muito elegante." },
{ q: "Como faço para agendar?", a: "O agendamento é feito exclusivamente pelo WhatsApp. É só clicar no botão de agendamento em qualquer lugar do site e eu retorno em breve para confirmar seu horário." },
{ q: "Quais cuidados devo ter depois do procedimento?", a: "As orientações variam conforme o serviço realizado, mas em geral: evitar água e maquiagem nas primeiras 24h, não esfregar a região e usar produtos hidratantes específicos quando indicado. Você receberá um guia completo no dia do atendimento." }];


function FAQItem({ f, i, open, setOpen }) {
  const [visible, setVisible] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setVisible(true);
        observer.disconnect();
      }
    }, { threshold: 0.1 });
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  const isOpen = open === i;

  return (
    <div
      ref={ref}
      className={`faq-item ${visible ? "visible" : "reveal"} d${i % 3 + 1}${isOpen ? " open" : ""}`}
    >
      <button className="faq-q" onClick={() => setOpen(isOpen ? null : i)}>
        <span>{f.q}</span>
        <span className="faq-icon">+</span>
      </button>
      <div className="faq-a" style={{ maxHeight: isOpen ? 300 : 0 }}>
        <div className="faq-a-inner">{f.a}</div>
      </div>
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(null);

  return (
    <section id="faq">
      <div className="container">
        <div className="section-header">
          <div className="eyebrow reveal" style={{ justifyContent: "center" }}>Dúvidas frequentes</div>
          <h2 className="section-title reveal d1">
            Perguntas e{" "}
            <span className="hl" style={{ fontSize: "45px" }}>respostas.</span>
          </h2>
        </div>
        <div className="faq-wrap">
          {FAQS.map((f, i) => (
            <FAQItem key={i} f={f} i={i} open={open} setOpen={setOpen} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── CTA ─────────────────────────────────────────── */
function CTA() {
  return (
    <section id="cta">
      {/* Botanical decorations */}
      <div className="cta-botanical" style={{ bottom: "-10%", left: "-4%", transform: "rotate(30deg)" }}>
        <Leaf size={280} />
      </div>
      <div className="cta-botanical" style={{ top: "-15%", right: "-5%", transform: "rotate(200deg)" }}>
        <Leaf size={220} />
      </div>

      <div className="container cta-inner">
        <div className="cta-eyebrow reveal">
          <div className="eyebrow" style={{ justifyContent: "center", color: "var(--gold)" }}>
            Essenza Glow Studio
          </div>
        </div>
        <h2 className="cta-title reveal d1">
          Pronta para realçar{" "}
          <span className="hl" style={{ fontSize: "55px" }}>seu olhar?</span>
        </h2>
        <p className="cta-sub reveal d2">
          Agende seu horário e descubra como um design bem-feito pode transformar
          sua expressão com naturalidade e elegância.
        </p>
        <div className="reveal d3">
          <a href={WA_LINK} target="_blank" rel="noopener" className="cta-btn">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
            </svg>
            Agendar pelo WhatsApp
          </a>
        </div>
        <p className="reveal d4" style={{ marginTop: 24, fontSize: 13, color: "rgba(255,255,255,0.45)" }}>
          Instagram: @essenzaglowbs
        </p>
      </div>
    </section>);

}

Object.assign(window, { Process, Testimonials, FAQ, CTA });