// agendamento.jsx — Booking page (high fidelity, with multi-step form)

const SERVICE_OPTIONS = [
  "Consulta integrativa",
  "Análise de sangue vivo",
  "Terapia capilar",
  "Metabolismo & emagrecimento",
  "Hormônios",
  "Soroterapia",
  "Estética íntima",
  "Não tenho certeza",
];

const TIME_SLOTS = ["09:00", "10:30", "13:00", "14:30", "16:00", "17:30"];

const AgendamentoPage = ({ navigate }) => {
  const [step, setStep] = React.useState(1);
  const [data, setData] = React.useState({
    service: "Consulta integrativa",
    professional: "Dra. Neusa Brisolla",
    date: "",
    time: "",
    name: "",
    phone: "",
    email: "",
    message: "",
    contact: "WhatsApp",
  });
  const [sent, setSent] = React.useState(false);

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));
  const submit = (e) => {
    e.preventDefault();
    const lines = [
      "*Nova solicitação de agendamento*",
      "",
      `*Nome:* ${data.name}`,
      `*Telefone:* ${data.phone}`,
      `*E-mail:* ${data.email}`,
      `*Tratamento:* ${data.service}`,
      `*Data preferida:* ${data.date || "—"}`,
      `*Horário preferido:* ${data.time || "—"}`,
      `*Profissional:* ${data.professional}`,
      `*Prefere contato por:* ${data.contact}`,
    ];
    if (data.message && data.message.trim()) {
      lines.push("", `*Observações:* ${data.message.trim()}`);
    }
    lines.push("", "_Enviado pelo site da Clínica Longevidade e Saúde._");
    const text = encodeURIComponent(lines.join("\n"));
    window.open(`https://wa.me/5562991323402?text=${text}`, "_blank", "noopener");
    setSent(true);
  };

  // Generate next 14 weekdays (Seg–Sex) for date picker
  const today = new Date();
  const days = [];
  {
    let cursor = new Date(today);
    while (days.length < 14) {
      cursor.setDate(cursor.getDate() + 1);
      const dow = cursor.getDay();
      if (dow !== 0 && dow !== 6) days.push(new Date(cursor));
    }
  }
  const formatDate = (d) => d.toLocaleDateString("pt-BR",{day:"2-digit",month:"2-digit"});
  const dayName = (d) => ["Dom","Seg","Ter","Qua","Qui","Sex","Sáb"][d.getDay()];

  return (
    <div className="page-enter" data-screen-label="02 Agendamento">
      {/* Banner */}
      <section className="banner">
        <div className="banner__inner">
          <nav className="banner__crumbs">
            <button onClick={() => navigate("home")}>Início</button>
            <span>/</span>
            <span>Agendamento</span>
          </nav>
          <h1>Reserve o seu <em>tempo</em> com a Dra. Neusa.</h1>
          <p>
            Em até um dia útil, alguém da clínica entra em contato para confirmar o
            seu horário e tirar dúvidas — com a calma que o seu cuidado merece.
          </p>
        </div>
      </section>

      {/* Booking form */}
      <section className="section" style={{paddingTop:64,paddingBottom:96}}>
        <div className="book">
          <div className="book__copy">
            <span className="eyebrow">Avaliação personalizada</span>
            <h2>Um cuidado pensado <em>para você</em>.</h2>
            <p>
              Conte um pouco sobre você. A primeira consulta dura até 90 minutos —
              tempo suficiente para entendermos o que faz sentido para a sua pele
              e o seu momento de vida.
            </p>
            <ul className="book__perks">
              <li className="book__perk">
                <div className="book__perk-icon"><Icon name="clock" size={16}/></div>
                <div>
                  <h4>Consulta longa & sem pressa</h4>
                  <p>Até 90 minutos para escutar, examinar e propor.</p>
                </div>
              </li>
              <li className="book__perk">
                <div className="book__perk-icon"><Icon name="calendar" size={16}/></div>
                <div>
                  <h4>Agendamento flexível</h4>
                  <p>Horários disponíveis de segunda a sexta-feira.</p>
                </div>
              </li>
              <li className="book__perk">
                <div className="book__perk-icon"><Icon name="shield" size={16}/></div>
                <div>
                  <h4>Privacidade & sigilo</h4>
                  <p>Seus dados ficam apenas com a equipe médica responsável.</p>
                </div>
              </li>
              <li className="book__perk">
                <div className="book__perk-icon"><Icon name="heart" size={16}/></div>
                <div>
                  <h4>Acompanhamento contínuo</h4>
                  <p>Retornos personalizados, sem custo no primeiro mês.</p>
                </div>
              </li>
            </ul>
          </div>

          <form className="book__form" onSubmit={submit}>
            {sent ? (
              <div className="book__sent">
                <div className="book__sent-icon"><Icon name="check" size={32}/></div>
                <span className="eyebrow">Quase lá!</span>
                <h3>Falta um toque, {data.name.split(" ")[0] || "querida"}.</h3>
                <p>
                  Abrimos uma conversa no WhatsApp da clínica com os seus dados já preenchidos.
                  É só tocar em <strong>enviar</strong> que recebemos a sua solicitação e
                  entramos em contato em até um dia útil para confirmar o seu horário
                  {data.date && ` de ${data.date}`}{data.time && ` às ${data.time}`}.
                </p>
                <div style={{marginTop:24,display:"flex",gap:12,flexWrap:"wrap",justifyContent:"center"}}>
                  <Btn variant="primary" icon="wa" onClick={submit}>
                    Reabrir WhatsApp
                  </Btn>
                  <Btn variant="outline" onClick={() => navigate("home")}>Voltar ao início</Btn>
                </div>
              </div>
            ) : (
              <>
                <div className="book__form-head">
                  <span style={{fontSize:11,letterSpacing:".18em",textTransform:"uppercase",
                                color:"var(--accent-gold)",fontWeight:500}}>
                    Etapa {step} de 3
                  </span>
                  <h3>{step === 1 ? "Sobre o atendimento" : step === 2 ? "Sua disponibilidade" : "Como te encontrar"}</h3>
                  <p>Você pode editar qualquer informação antes de confirmar.</p>
                  <div style={{display:"flex",gap:6,marginTop:16}}>
                    {[1,2,3].map(s => (
                      <div key={s} style={{
                        flex:1,height:3,borderRadius:999,
                        background: s <= step ? "var(--rosa-tempo)" : "var(--border)",
                        transition: "background .3s"
                      }}/>
                    ))}
                  </div>
                </div>

                {step === 1 && (
                  <>
                    <div className="field">
                      <label>Tratamento de interesse</label>
                      <div className="chip-row">
                        {SERVICE_OPTIONS.map(s => (
                          <button key={s} type="button" className="chip"
                                  data-on={data.service === s ? "1" : "0"}
                                  onClick={() => update("service", s)}>
                            {s}
                          </button>
                        ))}
                      </div>
                    </div>
                    <div className="field">
                      <label>Profissional de preferência</label>
                      <select value={data.professional} onChange={e => update("professional", e.target.value)}>
                        <option>Dra. Neusa Brisolla</option>
                        <option>Sem preferência</option>
                      </select>
                    </div>
                    <div className="field">
                      <label>Mensagem (opcional)</label>
                      <textarea
                        placeholder="Conte um pouco sobre você, o que motivou o agendamento, alguma dúvida específica…"
                        value={data.message}
                        onChange={e => update("message", e.target.value)}
                      />
                    </div>
                    <div style={{display:"flex",justifyContent:"flex-end",marginTop:8}}>
                      <Btn variant="primary" iconRight="arrow"
                           onClick={() => setStep(2)}>
                        Continuar
                      </Btn>
                    </div>
                  </>
                )}

                {step === 2 && (
                  <>
                    <div className="field">
                      <label>Escolha um dia</label>
                      <div style={{
                        display:"grid",
                        gridTemplateColumns:"repeat(auto-fill,minmax(76px,1fr))",
                        gap:8,
                      }}>
                        {days.map((d, i) => {
                          const dStr = formatDate(d);
                          const on = data.date === dStr;
                          return (
                            <button key={i} type="button"
                                    onClick={() => update("date", dStr)}
                                    style={{
                                      padding:"12px 6px",borderRadius:12,cursor:"pointer",
                                      border: on ? "2px solid var(--rosa-tempo)" : "1px solid var(--border)",
                                      background: on ? "var(--rosa-tempo-08)" : "#fff",
                                      display:"flex",flexDirection:"column",alignItems:"center",gap:4,
                                      fontFamily:"inherit",
                                    }}>
                              <span style={{fontSize:11,letterSpacing:".1em",textTransform:"uppercase",
                                             color:"var(--fg-muted)",fontWeight:500}}>
                                {dayName(d)}
                              </span>
                              <span style={{fontFamily:"var(--font-display)",fontSize:18,
                                             color:on?"var(--rosa-tempo)":"var(--vinho-profundo)",
                                             fontWeight:500,letterSpacing:".02em"}}>
                                {dStr}
                              </span>
                            </button>
                          );
                        })}
                      </div>
                    </div>
                    <div className="field">
                      <label>Horário disponível</label>
                      <div className="chip-row">
                        {TIME_SLOTS.map(t => (
                          <button key={t} type="button" className="chip"
                                  data-on={data.time === t ? "1" : "0"}
                                  onClick={() => update("time", t)}>
                            <Icon name="clock" size={13}/>&nbsp;{t}
                          </button>
                        ))}
                      </div>
                    </div>
                    <div style={{display:"flex",justifyContent:"space-between",marginTop:8}}>
                      <Btn variant="outline" onClick={() => setStep(1)}>Voltar</Btn>
                      <Btn variant="primary" iconRight="arrow"
                           onClick={() => setStep(3)}
                           {...(!data.date || !data.time ? {disabled:true,style:{opacity:.5}} : {})}>
                        Continuar
                      </Btn>
                    </div>
                  </>
                )}

                {step === 3 && (
                  <>
                    <div className="field">
                      <label>Nome completo</label>
                      <input value={data.name} onChange={e => update("name", e.target.value)}
                             placeholder="Seu nome" required />
                    </div>
                    <div className="row-2">
                      <div className="field">
                        <label>Telefone</label>
                        <input value={data.phone} onChange={e => update("phone", e.target.value)}
                               placeholder="(62) 0 0000-0000" required />
                      </div>
                      <div className="field">
                        <label>E-mail</label>
                        <input type="email" value={data.email} onChange={e => update("email", e.target.value)}
                               placeholder="seu@email.com" required />
                      </div>
                    </div>
                    <div className="field">
                      <label>Como prefere ser contatada?</label>
                      <div className="chip-row">
                        {["WhatsApp","Telefone","E-mail"].map(c => (
                          <button key={c} type="button" className="chip"
                                  data-on={data.contact === c ? "1" : "0"}
                                  onClick={() => update("contact", c)}>
                            {c}
                          </button>
                        ))}
                      </div>
                    </div>

                    {/* Summary */}
                    <div style={{
                      background:"var(--bg-soft)",borderRadius:16,padding:20,
                      display:"grid",gap:8,fontSize:13,
                    }}>
                      <div style={{
                        fontSize:11,letterSpacing:".18em",textTransform:"uppercase",
                        color:"var(--accent-gold)",fontWeight:500,marginBottom:4,
                      }}>Resumo</div>
                      <div style={{display:"flex",justifyContent:"space-between",gap:12}}>
                        <span style={{color:"var(--fg-muted)"}}>Serviço</span>
                        <strong style={{color:"var(--vinho-profundo)"}}>{data.service}</strong>
                      </div>
                      <div style={{display:"flex",justifyContent:"space-between",gap:12}}>
                        <span style={{color:"var(--fg-muted)"}}>Profissional</span>
                        <strong style={{color:"var(--vinho-profundo)"}}>{data.professional}</strong>
                      </div>
                      <div style={{display:"flex",justifyContent:"space-between",gap:12}}>
                        <span style={{color:"var(--fg-muted)"}}>Data & hora</span>
                        <strong style={{color:"var(--vinho-profundo)"}}>{data.date} · {data.time}</strong>
                      </div>
                    </div>

                    <div style={{display:"flex",justifyContent:"space-between",marginTop:8,gap:12}}>
                      <Btn variant="outline" onClick={() => setStep(2)}>Voltar</Btn>
                      <Btn variant="primary" type="submit" icon="check">
                        Confirmar agendamento
                      </Btn>
                    </div>
                  </>
                )}
              </>
            )}
          </form>
        </div>
      </section>

      {/* Trust elements */}
      <section className="section" style={{paddingTop:0,paddingBottom:96}}>
        <div style={{
          display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:24,
        }} className="trust-grid">
          <style>{`@media (max-width:760px){.trust-grid{grid-template-columns:1fr!important;}}`}</style>
          {[
            {icon:"shield",t:"Privacidade & sigilo",d:"Seus dados ficam apenas com a equipe médica responsável."},
            {icon:"heart",t:"Cuidado humanizado",d:"Atendimento individualizado, sem agenda corrida."},
            {icon:"sparkle",t:"Resultados naturais",d:"Protocolos que respeitam a sua identidade e o seu tempo."},
          ].map(it => (
            <div key={it.t} style={{
              padding:"32px 28px",borderRadius:"var(--tk-radius)",
              background:"var(--bg-soft)",display:"flex",gap:18,alignItems:"flex-start",
            }}>
              <div style={{
                flexShrink:0,width:48,height:48,borderRadius:999,
                background:"var(--rosa-tempo)",color:"var(--marfim-sereno)",
                display:"flex",alignItems:"center",justifyContent:"center",
              }}>
                <Icon name={it.icon} size={20}/>
              </div>
              <div>
                <h4 style={{margin:"6px 0 6px",fontSize:15,letterSpacing:".04em",
                            color:"var(--vinho-profundo)"}}>{it.t}</h4>
                <p style={{margin:0,fontSize:14,color:"var(--fg-muted)",lineHeight:1.55}}>{it.d}</p>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};

window.AgendamentoPage = AgendamentoPage;