/* ============================================================
   Fagian — Sections: O Processo, Pacotes, FAQ, Bastidores,
   Hospitais, Reserva, Atendimento icons
   ============================================================ */

// ── Icons (inline SVG, currentColor) ─────────────────────────
function WhatsAppIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M19.05 4.91A9.82 9.82 0 0 0 12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21h.01c5.46 0 9.91-4.45 9.91-9.91a9.82 9.82 0 0 0-2.91-7.01zM12.05 20.15h-.01a8.23 8.23 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.21 8.21 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24 2.2 0 4.27.86 5.83 2.42a8.18 8.18 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.24 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.55.12-.16.25-.64.81-.78.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-2-1.23-.74-.66-1.24-1.48-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.55-1.33-.76-1.82-.2-.48-.4-.41-.55-.42l-.47-.01a.9.9 0 0 0-.65.31c-.22.25-.85.83-.85 2.03 0 1.2.88 2.36 1 2.52.12.16 1.71 2.61 4.15 3.66.58.25 1.03.4 1.39.51.58.18 1.11.16 1.53.1.47-.07 1.47-.6 1.68-1.18.21-.58.21-1.08.14-1.18-.06-.1-.22-.16-.47-.28z"/>
    </svg>
  );
}
function InstagramIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
      <rect x="3" y="3" width="18" height="18" rx="5"></rect>
      <circle cx="12" cy="12" r="4"></circle>
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"></circle>
    </svg>
  );
}
window.WhatsAppIcon = WhatsAppIcon;
window.InstagramIcon = InstagramIcon;

// ── O PROCESSO ───────────────────────────────────────────────
function ProcessSection() {
  const steps = [
    {
      n: " 01",
      t: "Primeiro contato",
      b: " Você me manda mensagem com sua   data prevista. Conversamos sobre o   hospital, o tipo de parto e suas   expectativas."
    },
    {
      n: " 02",
      t: " Planejamento",
      b: " Acerto de detalhes, plano do dia e   checklist do que levar."
    },
    {
      n: " 03",
      t: " O dia",
      b: " Cesárea: te encontro no pré-parto, 20   a 15 minutos antes do horário   marcado.   Parto normal: Acompanhamento online desde os primeiros sinais. Eu chego quando estiver com dilatação entre 6 e 7cm na fase ativa.   Madrugada, fim   de semana, feriado."
    },
    {
      n: " 04",
      t: " A entrega",
      b: " Galeria privada online, vídeo   emocional e álbum impresso opcional.   Cada arquivo entregue em alta   resolução, para você reviver sempre   que quiser."
    }
  ];
  return (
    <section className="proc" id="processo" data-tone="light" data-screen-label="08 Processo">
      <div className="proc__head reveal">
        <div>
          <p className="eyebrow" style={{ color: "var(--color-terracotta)", marginBottom: 16 }}>— O processo</p>
          <h2 className="display-lg proc__title">Do primeiro oi à última foto.</h2>
        </div>
        <p className="body-lg proc__intro">
          Um caminho simples, planejado com calma e cuidado — para que no dia
          do parto, você só precise estar presente.
        </p>
      </div>
      <div className="proc__steps reveal">
        {steps.map((s) => (
          <div className="proc__step" key={s.n}>
            <div className="proc__step__num">{s.n}</div>
            <h3 className="proc__step__title">{s.t}</h3>
            <p className="proc__step__body">{s.b}</p>
          </div>
        ))}
      </div>
    </section>
  );
}
window.ProcessSection = ProcessSection;

// ── PACOTES ──────────────────────────────────────────────────
function PackagesSection({ waLink }) {
  const packages = [
    {
      num: "01",
      eyebrow: "Plano · principal",
      title: "Maternidade",
      lede: "A cobertura completa do nascimento — desde o trabalho de parto até o álbum impresso entregue na sua casa.",
      items: [
        "Fotos em arquivo digital · alta resolução",
        "100 a 200 fotos editadas",
        "Vídeo reels do parto",
        "Momentos registrados e editados",
        "Fotos e vídeos entregues no dia do parto",
        "Álbum físico entregue 20 dias após a escolha das fotos"
      ]
    },
    {
      num: "02",
      eyebrow: "Plano · essencial",
      title: "Berçário",
      lede: "A delicadeza do dia do parto em arquivo digital — para guardar, compartilhar e reviver.",
      items: [
        "Fotos em arquivo digital · alta resolução",
        "Entre 100 e 200 fotos editadas",
        "Vídeo reels do parto",
        "Momentos registrados e editados",
        "Fotos entregues no dia do parto"
      ]
    }
  ];
  return (
    <section className="pkg" id="pacotes" data-tone="light" data-screen-label="09 Pacotes">
      <div className="pkg__head reveal">
        <div>
          <p className="eyebrow" style={{ color: "var(--color-terracotta)", marginBottom: 16 }}>— Pacotes</p>
          <h2 className="display-lg pkg__title">Planos pensados para cada momento.</h2>
        </div>
        <p className="body-lg pkg__intro">
          Dois caminhos, uma intenção: eternizar a chegada. Combine os planos
          para uma cobertura completa, ou escolha apenas o que faz sentido
          para a sua história.
        </p>
      </div>
      <div className="pkg__grid">
        {packages.map((p) => (
          <article className="pkg__card reveal" key={p.num}>
            <span className="pkg__card__num">{p.num}</span>
            <p className="pkg__card__eyebrow">{p.eyebrow}</p>
            <h3 className="pkg__card__title">{p.title}</h3>
            <p className="pkg__card__lede">{p.lede}</p>
            <ul className="pkg__card__list">
              {p.items.map((it, i) => <li key={i}>{it}</li>)}
            </ul>
            <div className="pkg__card__price">
              <span className="pkg__card__price__label">Investimento</span>
              <span className="pkg__card__price__value">Valores sob consulta</span>
            </div>
            <a className="pkg__card__cta" href={waLink} target="_blank" rel="noopener noreferrer">
              Consultar valores →
            </a>
          </article>
        ))}
      </div>
    </section>
  );
}
window.PackagesSection = PackagesSection;

// ── FAQ ──────────────────────────────────────────────────────
function FAQSection({ items }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq" id="faq" data-tone="light" data-screen-label="10 FAQ">
      <div className="faq__inner">
        <div className="faq__title reveal">
          <p className="eyebrow" style={{ color: "var(--color-terracotta)", marginBottom: 16 }}>— Dúvidas</p>
          <h2 className="display-lg">Perguntas que toda mãe faz.</h2>
          <p className="faq__sub">As respostas que costumo dar — antes mesmo de você precisar perguntar.</p>
        </div>
        <ul className="faq__list reveal">
          {items.map((q, i) => (
            <li className={`faq__item ${i === open ? "is-open" : ""}`} key={i}>
              <button
                className="faq__q"
                onClick={() => setOpen(i === open ? -1 : i)}
                aria-expanded={i === open}
              >
                <span>{q.q}</span>
                <span className="faq__q__icon" aria-hidden="true"></span>
              </button>
              <div className="faq__a">
                {q.a.map((para, k) => <p key={k}>{para}</p>)}
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
window.FAQSection = FAQSection;

// ── BASTIDORES ───────────────────────────────────────────────
function BehindSection() {
  return (
    <section className="behind" id="bastidores" data-tone="dark" data-screen-label="06 Bastidores">
      <div className="behind__inner">
        <div className="behind__copy reveal">
          <p className="eyebrow" style={{ color: "var(--color-terracotta)" }}>— Bastidores</p>
          <h2 className="display-md">
            Máscara, privativo, terço no bolso — e silêncio quando é preciso.
          </h2>
          <p>
            Sempre tento ser o mais discreta possível, para que minha presença
            não interfira na forma como vocês vão agir ou reagir. O parto é seu.
            Eu só registro.
          </p>
          <p>
            Estou credenciada nas principais maternidades de Sorocaba e região,
            e atendo São Paulo capital sob agenda. Quando o bebê chama, eu vou —
            madrugada, fim de semana, feriado.
          </p>
          <div className="behind__list">
            <span>Equipamento profissional · paramentação hospitalar</span>
            <span>Presença discreta · sem direção, sem pose</span>
            <span>Plantão de 24h a partir da semana 37</span>
            <span>Ética e sigilo absoluto com cada família</span>
          </div>
        </div>
        <div className="behind__media reveal">
          <figure><img src="assets/heloisa-1.jpeg" alt="Stephany trabalhando" loading="lazy" /></figure>
          <figure><img src="assets/jose-1.jpeg" alt="Bastidores" loading="lazy" /></figure>
          <figure><img src="assets/vicente-1.jpeg" alt="Bastidores" loading="lazy" /></figure>
        </div>
      </div>
    </section>
  );
}
window.BehindSection = BehindSection;

// ── HOSPITAIS ────────────────────────────────────────────────
function HospitalsSection() {
  const hospitals = [
    { src: "assets/hosp-unimed.png",       alt: "Unimed Sorocaba" },
    { src: "assets/hosp-santalucinda.png", alt: "Hospital Santa Lucinda" },
    { src: "assets/hosp-notredame.png",    alt: "NotreDame Intermédica · Hospital Modelo" },
    { src: "assets/hosp-saoluiz.png",      alt: "São Luiz Star Maternidade" },
    { src: "assets/hosp-promatre.png",     alt: "Pro Matre Paulista" },
    { src: "assets/hosp-santajoana.png",   alt: "Santa Joana" }
  ];
  return (
    <section className="hosp" data-tone="light" data-screen-label="12 Hospitais">
      <div className="hosp__inner">
        <div className="hosp__label">
          <strong>Credenciada</strong>
          Nas principais maternidades de Sorocaba, região e São Paulo capital.
        </div>
        <div className="hosp__row">
          {hospitals.map((h) => (
            <div className="hosp__logo" key={h.alt} title={h.alt}>
              <img src={h.src} alt={h.alt} loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HospitalsSection = HospitalsSection;

// ── RESERVA (form pré-preenche WhatsApp) ─────────────────────
function ReservaSection() {
  const [name, setName] = React.useState("");
  const [date, setDate] = React.useState("");
  const [type, setType] = React.useState("");
  const [hospital, setHospital] = React.useState("");

  const formatDate = (iso) => {
    if (!iso) return "";
    try {
      const [y, m, d] = iso.split("-");
      return `${d}/${m}/${y}`;
    } catch { return iso; }
  };

  const buildLink = () => {
    const lines = [
      `Olá Stephany! ${name ? `Sou ${name}.` : ""}`,
      date ? `Minha data prevista é ${formatDate(date)}.` : "",
      type ? `Estou planejando um ${type.toLowerCase()}.` : "",
      hospital ? `O parto será no ${hospital}.` : "",
      "Gostaria de conversar sobre seu trabalho. ❤️"
    ].filter(Boolean);
    return `https://wa.me/5511973758973?text=${encodeURIComponent(lines.join(" "))}`;
  };

  const submit = (e) => {
    e.preventDefault();
    window.open(buildLink(), "_blank", "noopener,noreferrer");
  };

  return (
    <section className="resv" id="reserva" data-tone="light" data-screen-label="14 Reserva">
      <div className="resv__inner">
        <div className="resv__copy reveal">
          <p className="eyebrow" style={{ color: "var(--color-terracotta)", marginBottom: 16 }}>— Reserva</p>
          <h2 className="display-lg">Vamos agendar o seu dia.</h2>
          <p>
            Conte com calma o que você tem em mente. Ao enviar, você é
            direcionada para uma conversa no WhatsApp já com suas informações
            preenchidas — sem formulário robotizado.
          </p>
        </div>
        <form className="resv__form reveal" onSubmit={submit}>
          <div className="resv__field">
            <label htmlFor="r-name">Seu nome</label>
            <input
              id="r-name"
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Como devo te chamar?"
              autoComplete="name"
            />
          </div>
          <div className="resv__field--row">
            <div className="resv__field">
              <label htmlFor="r-date">Data prevista do parto (DDP)</label>
              <input
                id="r-date"
                type="date"
                value={date}
                onChange={(e) => setDate(e.target.value)}
              />
            </div>
            <div className="resv__field">
              <label htmlFor="r-type">Tipo de parto</label>
              <select
                id="r-type"
                value={type}
                onChange={(e) => setType(e.target.value)}
              >
                <option value="">Selecionar</option>
                <option value="Parto normal">Parto normal</option>
                <option value="Cesariana agendada">Cesariana agendada</option>
                <option value="Ainda não decidi">Ainda não decidi</option>
              </select>
            </div>
          </div>
          <div className="resv__field">
            <label htmlFor="r-hosp">Hospital / maternidade (opcional)</label>
            <input
              id="r-hosp"
              type="text"
              value={hospital}
              onChange={(e) => setHospital(e.target.value)}
              placeholder="Unimed Sorocaba, São Luiz Star, Pro Matre…"
            />
          </div>
          <button type="submit" className="resv__submit">
            <span>Enviar pelo WhatsApp</span>
            <span className="resv__submit__arrow">→</span>
          </button>
          <p className="resv__hint">
            Você será redirecionada para o WhatsApp com a mensagem já pronta.
          </p>
        </form>
      </div>
    </section>
  );
}
window.ReservaSection = ReservaSection;