/* ============================================================
   FAGIAN — App composition
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#b85a2c",
  "speed": 28,
  "showCaptions": true,
  "background": "cream"
} /*EDITMODE-END*/;

// ----- DATA --------------------------------------------------

const CINE_SLIDES = [
{ src: "assets/serena-2.jpeg", variant: "landscape", caption: "Serena · primeira respiração" },
{ src: "assets/miguel-1.jpeg", variant: "portrait", caption: "Miguel · primeiro encontro" },
{ src: "assets/heloisa-1.jpeg", variant: "tall", caption: "Heloísa · oração silenciosa" },
{ src: "assets/sophie-0.jpeg", variant: "portrait", caption: "Sophie · descanso" },
{ src: "assets/vicente-2.jpeg", variant: "landscape", caption: "Vicente · risos no parto" },
{ src: "assets/miguel-3.jpeg", variant: "portrait", caption: "Miguel · pele com pele" },
{ src: "assets/jose-1.jpeg", variant: "tall", caption: "José · silêncio do depois" },
{ src: "assets/serena-1.jpeg", variant: "portrait", caption: "Serena · pés pequenos" },
{ src: "assets/heloisa-3.jpeg", variant: "landscape", caption: "Heloísa · sorriso da chegada" },
{ src: "assets/sophie-2.jpeg", variant: "portrait", caption: "Sophie · primeiro choro" },
{ src: "assets/vicente-4.jpeg", variant: "tall", caption: "Vicente · cumplicidade" },
{ src: "assets/jose-3.jpeg", variant: "portrait", caption: "José · primeiro olhar" },
{ src: "assets/miguel-4.jpeg", variant: "landscape", caption: "Miguel · de mãos dadas" },
{ src: "assets/heloisa-2.jpeg", variant: "portrait", caption: "Heloísa · alegria pura" }];

const TESTIMONIALS = [
{
  body: "Você eternizou um momento único pra nós. Joguei no escuro, não te conhecia, te chamei nos 45 do segundo tempo — e acertei. Foi simplesmente maravilhoso.",
  meta: "Mãe do Leonardo · 2023"
},
{
  body: "É uma mistura de dor com felicidade com gratidão. Só as fotos fazem a gente reviver todos esses momentos. Se não fossem elas, eu nem lembrava.",
  meta: "Mãe · 2023"
},
{
  body: "Muito obrigada por eternizar esse momento. Você foi perfeita em todas as fotos e no vídeo — posso viver várias vezes graças ao seu trabalho incrível.",
  meta: "Mãe · 2023"
},
{
  body: "O álbum ficou demais. Pura emoção reviver esse momento tão lindo na minha vida. Deus te abençoe sempre.",
  meta: "Mãe · 2023"
},
{
  body: "Que trabalho mais lindo. Estou vendo as fotos e muito emocionada — quanta sensibilidade. De verdade mesmo, estou sem palavras.",
  meta: "Mãe · 2023"
},
{
  body: "Obrigada por registrar tão lindamente esse momento que esperamos tanto, por 7 anos. Que Deus guie sempre seu coração e seu caminho.",
  meta: "Mãe · 2023"
},
{
  body: "Somente lembrar não é suficiente. Toda vez que assisto o vídeo do parto do Miguel, eu falo: ter contratado a Sté foi a melhor coisa que eu fiz.",
  meta: "Mãe do Miguel · 2025"
},
{
  body: "Você não faz ideia — nos ajudou hoje trazendo calma e palavras. Impactou muito mais do que a prestação de serviço que contratamos.",
  meta: "Família · 2024"
},
{
  body: "Transformou um parto em uma história. Ficamos vendo o vídeo e revivendo o momento. Obrigada.",
  meta: "Mãe · 2025"
}];


const FAQ = [
{
  q: "Como funciona um parto cesariana?",
  a: [
  "A cesárea normalmente é agendada com data e hora, de acordo com a agenda do médico e do hospital.",
  "Eu te encontro no pré-parto, sempre 20 a 15 minutos antes do horário marcado. A equipe médica prepara a sala e segue os horários à risca — fique tranquila, é tudo bem organizado e cumprido no horário.",
  "Estaremos em contato direto no dia, e sempre dá tudo certo."]

},
{
  q: "E o parto normal? Como saber a hora?",
  a: [
  "Mesmo sendo algo imprevisível, o bebê tem uma data limite para nascer — e é essa data que usamos como base do agendamento.",
  "Assim que os primeiros sinais aparecerem, você me chama, eu organizo tudo e vou."]

},
{
  q: "Em quais hospitais você atende?",
  a: [
  "Sou credenciada nas principais maternidades de Sorocaba e região — Unimed Sorocaba, Unimed São Roque, Santa Lucinda e Hospital Modelo (NotreDame Intermédica) — além de São Luiz Star, Pro Matre e Santa Joana em São Paulo capital.",
  "Em outros hospitais o atendimento pode ser feito sob consulta. Me chama no WhatsApp que confirmamos."]

},
{
  q: "E se for uma emergência? Madrugada, fim de semana, feriado?",
  a: [
  "O bebê escolhe a hora — eu já sei disso. A partir da semana 37 fico de plantão 24h, com mochila pronta e celular sempre por perto.",
  "Madrugada, sábado, domingo, feriado — quando chamar, eu vou."]

},
{
  q: "E se eu te chamar nos 45 do segundo tempo?",
  a: [
  "Acontece muito mais do que você imagina — e o melhor: dá certo.",
  "Se a data ainda não chegou e tenho disponibilidade, conseguimos encaixar mesmo com pouco tempo de antecedência. Me manda mensagem que conversamos."]

},
{
  q: "Você atende fora de Sorocaba e São Paulo?",
  a: [
  "Sim, mediante consulta. Para partos no interior ou em outros estados, planejamento e logística são acertados com antecedência."]

},
{
  q: "Posso reservar enquanto ainda estou no início da gestação?",
  a: [
  "O ideal é reservar quando estiver de 25 a 30 semanas."]

},
{
  q: "Quanto tempo leva para receber as fotos e o vídeo?",
  a: [
  "Você recebe suas fotos no mesmo dia do parto. Esse é o nosso diferencial."]

}];


const FAMILIES = [
{
  id: "serena", name: "Serena",
  cells: [
  { src: "assets/serena-0.jpeg", col: "1 / span 5", row: "span 4" },
  { src: "assets/serena-2.jpeg", col: "6 / span 7", row: "span 3" },
  { src: "assets/serena-1.jpeg", col: "6 / span 3", row: "span 3" },
  { src: "assets/serena-3.jpeg", col: "9 / span 4", row: "span 3" }]

},
{
  id: "miguel", name: "Miguel",
  cells: [
  { src: "assets/miguel-1.jpeg", col: "1 / span 4", row: "span 5" },
  { src: "assets/miguel-3.jpeg", col: "5 / span 4", row: "span 5" },
  { src: "assets/miguel-0.jpeg", col: "9 / span 4", row: "span 3" },
  { src: "assets/miguel-2.jpeg", col: "9 / span 4", row: "span 2" },
  { src: "assets/miguel-4.jpeg", col: "1 / span 12", row: "span 4" }]

},
{
  id: "sophie", name: "Sophie",
  cells: [
  { src: "assets/sophie-1.jpeg", col: "1 / span 6", row: "span 5" },
  { src: "assets/sophie-2.jpeg", col: "7 / span 6", row: "span 3" },
  { src: "assets/sophie-0.jpeg", col: "7 / span 3", row: "span 2" },
  { src: "assets/sophie-3.jpeg", col: "10 / span 3", row: "span 2" }]

},
{
  id: "vicente", name: "Vicente",
  cells: [
  { src: "assets/vicente-2.jpeg", col: "1 / span 5", row: "span 5" },
  { src: "assets/vicente-1.jpeg", col: "6 / span 4", row: "span 3" },
  { src: "assets/vicente-5.jpeg", col: "10 / span 3", row: "span 3" },
  { src: "assets/vicente-3.jpeg", col: "6 / span 4", row: "span 2" },
  { src: "assets/vicente-4.jpeg", col: "10 / span 3", row: "span 2" }]

},
{
  id: "heloisa", name: "Heloísa",
  cells: [
  { src: "assets/heloisa-3.jpeg", col: "1 / span 7", row: "span 4" },
  { src: "assets/heloisa-0.jpeg", col: "8 / span 5", row: "span 4" },
  { src: "assets/heloisa-1.jpeg", col: "1 / span 4", row: "span 3" },
  { src: "assets/heloisa-2.jpeg", col: "5 / span 4", row: "span 3" },
  { src: "assets/heloisa-4.jpeg", col: "9 / span 4", row: "span 3" }]

},
{
  id: "jose", name: "José",
  cells: [
  { src: "assets/jose-1.jpeg", col: "1 / span 5", row: "span 4" },
  { src: "assets/jose-3.jpeg", col: "6 / span 4", row: "span 4" },
  { src: "assets/jose-0.jpeg", col: "10 / span 3", row: "span 2" },
  { src: "assets/jose-2.jpeg", col: "10 / span 3", row: "span 2" }]

}];


// ----- LINKS -------------------------------------------------
const WA_NUMBER = "5511973758973";
const WA_DISPLAY = "(11) 97375-8973";
const IG_HANDLE = "fagianfotografia";
const IG_URL = `https://www.instagram.com/${IG_HANDLE}`;
const WA_URL = `https://wa.me/${WA_NUMBER}`;
const WA_URL_CONSULTA = `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(
  "Olá Stephany, gostaria de conversar sobre fotografia de parto."
)}`;

// ----- REVEAL ON SCROLL --------------------------------------
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("is-in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.15 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ----- NAV TONE SWITCHER -------------------------------------
function useNavTone() {
  React.useEffect(() => {
    const nav = document.querySelector(".nav");
    if (!nav) return;
    const sections = document.querySelectorAll("[data-tone]");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && e.intersectionRatio > 0.4) {
          const tone = e.target.getAttribute("data-tone");
          nav.classList.toggle("is-dark", tone === "dark");
        }
      });
    }, { threshold: [0.4, 0.6] });
    sections.forEach((s) => io.observe(s));
    return () => io.disconnect();
  }, []);
}

// ----- APP ---------------------------------------------------
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();
  useNavTone();

  // Apply tweak values to CSS vars
  React.useEffect(() => {
    document.documentElement.style.setProperty("--color-terracotta", t.accent);
  }, [t.accent]);

  const scrollTo = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY;
    window.scrollTo({ top, behavior: "smooth" });
  };

  return (
    <React.Fragment>
      <nav className="nav is-dark">
        <div className="nav__group">
          <a href="#trabalho" className="nav__link" onClick={scrollTo("trabalho")}>Trabalho</a>
          <a href="#sobre" className="nav__link hide-mobile" onClick={scrollTo("sobre")}>Sobre</a>
          <a href="#pacotes" className="nav__link hide-mobile" onClick={scrollTo("pacotes")}>Pacotes</a>
          <a href="#faq" className="nav__link hide-mobile" onClick={scrollTo("faq")}>Dúvidas</a>
        </div>
        <a href="#top" className="nav__brand" onClick={scrollTo("top")}>FAGIAN</a>
        <div className="nav__group nav__group--right">
          <a href="#depoimentos" className="nav__link hide-mobile" onClick={scrollTo("depoimentos")}>Depoimentos</a>
          <a href="#historias" className="nav__link hide-mobile" onClick={scrollTo("historias")}>Histórias</a>
          <a href="#reserva" className="nav__link" onClick={scrollTo("reserva")}>Reservar</a>
        </div>
      </nav>

      {/* HERO */}
      <section id="top" className="hero" data-tone="dark" data-screen-label="01 Hero">
        <img className="hero__img" src="assets/hero.jpeg" alt="Recém-nascido sendo recebido" />
        <div className="hero__veil"></div>
        <a href="#top" className="hero__mark" aria-label="Fagian Fotografia">
          <img src="assets/logo-fagian-light.png" alt="Fagian Fotografia" />
        </a>
        <div className="hero__content">
          <div className="hero__top">
            <p className="eyebrow" style={{ marginBottom: 12, color: "rgba(241,235,222,0.7)" }}>
              — Fotografia de parto · Sorocaba · São Paulo
            </p>
          </div>
          <div className="hero__bottom">
            <div>
              <h1 className="display-xl hero__title">
                O primeiro<br />encontro<br />de uma vida<br />inteira.
              </h1>
              <div className="hero__scroll">
                <span className="hero__scroll-line"></span>
                <span>Role para sentir</span>
              </div>
            </div>
            <div className="hero__meta">
              <span className="label">Stephany Fagian</span>
              <span className="eyebrow" style={{ opacity: 0.7 }}>+250 partos · +1000 vidas impactadas</span>
            </div>
          </div>
        </div>
      </section>

      {/* MANIFESTO */}
      <section className="manifesto" data-tone="light" id="trabalho" data-screen-label="02 Manifesto">
        <div className="manifesto__inner">
          <div className="manifesto__intro reveal">
            <p className="eyebrow" style={{ color: "var(--color-terracotta)" }}>— Manifesto</p>
            <h2 className="display-lg manifesto__quote">
              Sem vaidades. Com todo o amor do mundo.
            </h2>
          </div>
          <div className="manifesto__stats reveal">
            <div className="stat">
              <div className="stat__num">+250</div>
              <div className="stat__label">Partos registrados</div>
            </div>
            <div className="stat">
              <div className="stat__num">+1000</div>
              <div className="stat__label">VIDAS IMPACTADAS</div>
            </div>
            <div className="stat">
              <div className="stat__num">∞</div>
              <div className="stat__label">Histórias que não se repetem</div>
            </div>
          </div>
        </div>
      </section>

      {/* CINEMATIC CAROUSEL */}
      <section className="cine" data-tone="dark" id="carrossel" data-screen-label="03 Carrossel">
        <div className="cine__head reveal">
          <div>
            <p className="eyebrow" style={{ color: "var(--color-terracotta)", marginBottom: 16 }}>
              — Galeria viva
            </p>
            <h2 className="display-lg cine__title">Um filme em quadros parados.</h2>
          </div>
          <p className="body-lg cine__caption">
            Imagens que continuam respirando. Passe o mouse, arraste, deixe que o tempo se acomode.
          </p>
        </div>
        <CinematicCarousel slides={CINE_SLIDES} speed={t.speed} />
      </section>

      {/* ABOUT */}
      <section className="about" data-tone="light" id="sobre" data-screen-label="04 Sobre">
        <div className="about__inner">
          <div className="about__media reveal">
            <img src="assets/heloisa-3.jpeg" alt="Trabalho de Stephany Fagian" />
            <span className="about__media__label">Stephany · em ação</span>
          </div>
          <div className="about__copy reveal">
            <p className="eyebrow" style={{ color: "var(--color-terracotta)" }}>— Quem fotografa</p>
            <h2 className="display-md">
              A fotografia de parto chegou pra mim como um presente.
            </h2>
            <p>
              Sou Stephany Fagian. Em três anos, já registrei mais de 250 novas vidas.
              A curiosidade em assistir um parto, misturada com a emoção de eternizar
              esse momento único — afinal, só se nasce uma vez —, me trouxe até aqui.
            </p>
            <p>
              Ali, no evento mais incrível que já presenciei, decidi
              que era isso que queria fazer: registrar o único momento da vida
              que não dá pra repetir.
            </p>
            <p>
              Com os anos, conheci famílias lindas realizando sonhos, vivenciando
              milagres, na quarta ou quinta tentativa, cada uma com sua história.
              Entre meninas, meninos, gêmeos, trigêmeos, cesarianas, partos normais,
              emergências e madrugadas em claro, procuro captar a emoção de cada
              chegada — sem vaidades, com todo o amor do mundo.
            </p>
            <div className="about__sign">
              <span className="about__sign__name">Stephany Fagian</span>
              <span className="about__sign__role">· Fotógrafa de partos</span>
            </div>
          </div>
        </div>
      </section>

      {/* GALLERIES — histórias por família */}
      <section className="gal" data-tone="light" id="historias" data-screen-label="05 Galerias">
        <Galleries families={FAMILIES} />
      </section>

      {/* BASTIDORES */}
      <BehindSection />

      {/* AWARD */}
      <section className="award" data-tone="dark" id="premiacao" data-screen-label="07 Premiação">
        <div className="award__inner">
          <div className="award__media reveal">
            <img src="assets/award.jpeg" alt="Outstanding Maternity Award — Season 29" />
          </div>
          <div className="award__copy reveal">
            <p className="eyebrow award__eyebrow">— Reconhecimento internacional</p>
            <h2 className="display-md award__title">
              Outstanding Maternity Award · Season 29.
            </h2>
            <p>
              Um dos prêmios mais relevantes da fotografia de maternidade no mundo.
              Stephany foi reconhecida entre fotógrafas de diversos países —
              representando o Brasil, e cada família que confiou a ela seu
              instante mais íntimo.
            </p>
            <div style={{ marginTop: 16, display: "flex", gap: 24, color: "rgba(241,235,222,0.6)" }}>
              <span className="label">Season 29</span>
              <span className="label">Brasil</span>
            </div>
          </div>
        </div>
      </section>

      {/* PROCESSO */}
      <ProcessSection />

      {/* PACOTES */}
      <PackagesSection waLink={WA_URL_CONSULTA} />

      {/* FAQ */}
      <FAQSection items={FAQ} />

      {/* TESTIMONIALS */}
      <section className="testi" data-tone="light" id="depoimentos" data-screen-label="11 Depoimentos">
        <div className="testi__head reveal">
          <div>
            <p className="eyebrow" style={{ color: "var(--color-terracotta)", marginBottom: 16 }}>
              — Em suas palavras
            </p>
            <h2 className="display-lg testi__title">O que ficou depois.</h2>
          </div>
          <p className="body-lg testi__caption">
            Mensagens de mães e famílias que reviveram o seu nascimento
            através das fotos e vídeos de Stephany.
          </p>
        </div>
        <Testimonials items={TESTIMONIALS} />
      </section>

      {/* HOSPITAIS */}
      <HospitalsSection />

      {/* CONTACT */}
      <section className="contact" data-tone="dark" id="contato" data-screen-label="13 Contato">
        <div className="contact__inner">
          <p className="eyebrow reveal" style={{ color: "var(--color-terracotta)", marginBottom: 32 }}>
            — Vamos conversar
          </p>
          <h2 className="display-xl contact__title reveal">
            Eternize o seu único momento.
          </h2>

          <div className="contact__grid reveal">
            <div className="contact__col">
              <h4>Atendimento direto</h4>
              <div className="atend">
                <a
                  className="atend__card"
                  href={WA_URL_CONSULTA}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Conversar pelo WhatsApp">
                  
                  <span className="atend__icon"><WhatsAppIcon /></span>
                  <span className="atend__main">
                    <span className="atend__handle">{WA_DISPLAY}</span>
                    <span className="atend__label">WhatsApp · resposta rápida</span>
                  </span>
                  <span className="atend__arrow">↗</span>
                </a>
                <a
                  className="atend__card"
                  href={IG_URL}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Ver no Instagram">
                  
                  <span className="atend__icon"><InstagramIcon /></span>
                  <span className="atend__main">
                    <span className="atend__handle">@{IG_HANDLE}</span>
                    <span className="atend__label">Instagram · trabalhos recentes</span>
                  </span>
                  <span className="atend__arrow">↗</span>
                </a>
              </div>
              <a
                className="contact__cta"
                href="#reserva"
                onClick={scrollTo("reserva")}>
                
                Reservar minha data →
              </a>
            </div>
            <div className="contact__col">
              <h4>Áreas de atendimento</h4>
              <p style={{ color: "rgba(241,235,222,0.78)", maxWidth: "36ch", fontWeight: 300, lineHeight: 1.7 }}>
                Sorocaba e região, São Paulo capital e interior. Atendimentos em
                outros estados sob consulta e com planejamento antecipado.
              </p>
              <h4 style={{ marginTop: 40 }}>O que está incluso</h4>
              <p style={{ color: "rgba(241,235,222,0.78)", maxWidth: "36ch", fontWeight: 300, lineHeight: 1.7 }}>
                Cobertura do parto ·
                vídeo emocional · galeria privada em alta resolução ·
                álbum impresso opcional.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* RESERVA — form com pré-preenchimento WhatsApp */}
      <ReservaSection />

      <footer className="foot">
        <span className="foot__brand">
          <img src="assets/logo-fagian-light.png" alt="Fagian" />
        </span>
        <span>© Fagian Fotografia · Stephany Fagian · todos os direitos reservados</span>
        <span>Sorocaba · São Paulo</span>
      </footer>

      {/* TWEAKS */}
      <TweaksPanel>
        <TweakSection label="Movimento" />
        <TweakSlider
          label="Velocidade do carrossel"
          value={t.speed}
          min={8} max={80} step={2}
          unit=" px/s"
          onChange={(v) => setTweak("speed", v)} />
        
        <TweakSection label="Cor de acento" />
        <TweakColor
          label="Terracota"
          value={t.accent}
          options={["#b85a2c", "#8e3f1c", "#d97757", "#7a3a1f", "#c98155"]}
          onChange={(v) => setTweak("accent", v)} />
        
      </TweaksPanel>
    </React.Fragment>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);