/* Sections: UrgencyBar, Hero, Benefits */
const { useState, useEffect, useRef } = React;

/* ---------- Countdown hook ---------- */
function useCountdown(initialSeconds = 23 * 3600 + 47 * 60 + 12) {
  const [s, setS] = useState(initialSeconds);
  useEffect(() => {
    const id = setInterval(() => setS((v) => (v > 0 ? v - 1 : 0)), 1000);
    return () => clearInterval(id);
  }, []);
  const h = String(Math.floor(s / 3600)).padStart(2, "0");
  const m = String(Math.floor((s % 3600) / 60)).padStart(2, "0");
  const sec = String(s % 60).padStart(2, "0");
  return { h, m, sec };
}

/* ---------- Reveal on scroll ---------- */
function Reveal({ children, delay = 0, as: As = "div", className = "", ...rest }) {
  const ref = useRef(null);
  const [on, setOn] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setOn(true); io.disconnect(); } },
      { threshold: 0.15 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <As ref={ref} className={`reveal ${on ? "on" : ""} ${className}`} style={{ transitionDelay: `${delay}ms` }} {...rest}>
      {children}
    </As>
  );
}

/* ---------- Urgency Bar ---------- */
function UrgencyBar() {
  const { h, m, sec } = useCountdown();
  return (
    <div style={{
      background: "linear-gradient(90deg, #1B1610, #2A2218)",
      color: "#FAF6EE",
      padding: "10px 16px",
      textAlign: "center",
      fontSize: 13,
      fontWeight: 500,
      position: "relative",
      zIndex: 10,
      borderBottom: "1px solid rgba(255,255,255,.06)"
    }}>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 14, flexWrap: "wrap", justifyContent: "center" }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          <span style={{
            display: "inline-block", width: 8, height: 8, borderRadius: "50%",
            background: "#C04A26", boxShadow: "0 0 0 0 rgba(192,74,38,.7)",
            animation: "pulse 1.6s infinite"
          }} />
          <strong style={{ letterSpacing: ".08em", color: "#FFCDA8" }}>OFERTA RELÂMPAGO</strong>
        </span>
        <span style={{ opacity: .85 }}>
          70% OFF + 4 bônus exclusivos. Encerra em
        </span>
        <span style={{
          fontFamily: "JetBrains Mono, ui-monospace, monospace",
          background: "rgba(255,255,255,.08)",
          padding: "4px 10px",
          borderRadius: 6,
          letterSpacing: ".06em",
          fontVariantNumeric: "tabular-nums"
        }}>
          {h}:{m}:{sec}
        </span>
      </div>
    </div>
  );
}

/* ---------- Hero ---------- */
function Hero() {
  return (
    <section style={{ paddingTop: 48, paddingBottom: 80, background: "var(--cream)" }}>
      <div className="container">
        {/* logo / brand */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          marginBottom: 56
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{
              width: 28, height: 28, borderRadius: "50%",
              background: "radial-gradient(circle at 35% 30%, #E8765A, #9A3A1D)"
            }} />
            <span className="serif" style={{ fontSize: 22, letterSpacing: ".02em" }}>Mãe Leve</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 20, fontSize: 13, color: "var(--muted)" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg>
              Compra 100% segura
            </span>
            <span className="hide-mobile" style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <span className="stars">★★★★★</span> 4.9
            </span>
          </div>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "1.1fr 1fr",
          gap: 56,
          alignItems: "center"
        }} className="hero-grid">
          {/* Left: copy */}
          <div>
            <Reveal>
              <div style={{ display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 24 }}>
                <span className="tag sage">
                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#6B7F5B", display: "inline-block" }} />
                  Aprovado por nutricionistas
                </span>
              </div>
            </Reveal>
            <Reveal delay={80}>
              <h1 className="serif" style={{
                fontSize: "clamp(40px, 6.2vw, 78px)",
                lineHeight: 0.98,
                marginBottom: 24,
                letterSpacing: "-0.02em"
              }}>
                Perca até{" "}
                <span style={{ position: "relative", display: "inline-block" }}>
                  <span className="serif-it" style={{ color: "var(--rust)" }}>2kg por semana</span>
                  <svg viewBox="0 0 300 14" style={{ position: "absolute", left: 0, right: 0, bottom: -6, width: "100%", height: 14 }}>
                    <path d="M3 8 Q 80 1, 150 7 T 297 5" fill="none" stroke="var(--rust)" strokeWidth="2.5" strokeLinecap="round" opacity=".55"/>
                  </svg>
                </span>{" "}
                amamentando<br />com total segurança.
              </h1>
            </Reveal>
            <Reveal delay={160}>
              <p style={{ fontSize: 19, color: "var(--ink-2)", marginBottom: 36, maxWidth: 540 }}>
                O <strong>Cardápio Infalível para Mães Lactantes</strong> é o método criado para você emagrecer rápido — sem prejudicar a produção de leite e sem passar fome.
              </p>
            </Reveal>

            <Reveal delay={240}>
              <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap", marginBottom: 32 }}>
                <a href="#oferta" className="btn-primary large pulse">
                  Quero meu cardápio agora
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                </a>
                <div style={{ fontSize: 13, color: "var(--muted)" }}>
                  <div style={{ fontWeight: 600, color: "var(--ink)" }}>De R$ 297 por R$ 47</div>
                  <div>ou 5x de R$ 10,84 sem juros</div>
                </div>
              </div>
            </Reveal>

            <Reveal delay={320}>
              <div style={{ display: "flex", alignItems: "center", gap: 16, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
                <div style={{ display: "flex" }}>
                  {[1,2,3,4].map((i) => (
                    <div key={i} style={{
                      width: 36, height: 36, borderRadius: "50%",
                      background: ["#E8765A","#C99A3F","#6B7F5B","#8C2E3A"][i-1],
                      border: "2px solid var(--cream)",
                      marginLeft: i === 1 ? 0 : -10,
                      display: "flex", alignItems: "center", justifyContent: "center",
                      color: "#fff", fontWeight: 700, fontSize: 13
                    }}>
                      {["JM","CR","AS","LP"][i-1]}
                    </div>
                  ))}
                </div>
                <div style={{ fontSize: 13.5, color: "var(--ink-2)" }}>
                  <strong style={{ color: "var(--ink)" }}>+12.847 mães</strong> já transformaram seu corpo<br />
                  <span style={{ color: "var(--muted)" }}>e a saúde do bebê com o método.</span>
                </div>
              </div>
            </Reveal>
          </div>

          {/* Right: image stack */}
          <Reveal delay={200} className="hero-image-wrap">
            <div style={{ position: "relative", aspectRatio: "4/5" }}>
              <div className="ph" style={{
                position: "absolute", inset: 0,
                borderRadius: 24,
                fontSize: 12,
                boxShadow: "var(--shadow-lg)"
              }}>
                Foto principal · Mãe com bebê preparando refeição saudável · 4:5
              </div>

              {/* Floating card 1: weight loss */}
              <div style={{
                position: "absolute", left: -28, bottom: 48,
                background: "var(--warm-white)",
                borderRadius: 16,
                padding: "14px 18px",
                boxShadow: "var(--shadow-md)",
                border: "1px solid var(--line)",
                display: "flex", alignItems: "center", gap: 12,
                minWidth: 200
              }} className="float-card">
                <div style={{
                  width: 40, height: 40, borderRadius: 12,
                  background: "var(--sage-soft)",
                  display: "flex", alignItems: "center", justifyContent: "center"
                }}>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#4A5C3D" strokeWidth="2"><path d="M7 17l5-5 5 5M7 7l5 5 5-5"/></svg>
                </div>
                <div>
                  <div style={{ fontSize: 22, fontWeight: 700, lineHeight: 1, fontVariantNumeric: "tabular-nums" }}>-2kg</div>
                  <div style={{ fontSize: 12, color: "var(--muted)" }}>na primeira semana</div>
                </div>
              </div>

              {/* Floating card 2: milk */}
              <div style={{
                position: "absolute", right: -20, top: 60,
                background: "var(--warm-white)",
                borderRadius: 16,
                padding: "12px 16px",
                boxShadow: "var(--shadow-md)",
                border: "1px solid var(--line)",
                display: "flex", alignItems: "center", gap: 10
              }} className="float-card">
                <div style={{
                  width: 36, height: 36, borderRadius: "50%",
                  background: "var(--rust-soft)",
                  display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18
                }}>🍼</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 700, lineHeight: 1.1 }}>Produção de leite</div>
                  <div style={{ fontSize: 11, color: "var(--sage)", fontWeight: 600 }}>+ AUMENTA EM 87% DOS CASOS</div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .hide-mobile { display: none !important; }
        }
      `}</style>
    </section>
  );
}

/* ---------- Benefits ---------- */
function Benefits() {
  const items = [
    {
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
          <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
        </svg>
      ),
      title: "Até 2kg eliminados por semana",
      body: "Combinações de alimentos pensadas para acelerar o metabolismo no pós-parto."
    },
    {
      icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 21s-7-4.5-7-10a5 5 0 0 1 7-4 5 5 0 0 1 7 4c0 5.5-7 10-7 10z"/></svg>,
      title: "Produção de leite protegida",
      body: "Receitas lactogênicas que aumentam a oferta de leite materno enquanto você emagrece."
    },
    {
      icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M6 7h12M6 12h12M6 17h8"/><rect x="3" y="3" width="18" height="18" rx="3"/></svg>,
      title: "+200 receitas práticas",
      body: "Cardápios de 5, 15 e 30 minutos para quem não tem tempo entre mamadas e fraldas."
    },
    {
      icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg>,
      title: "Fim das cólicas do bebê",
      body: "Lista completa dos alimentos que causam desconforto — e o que comer no lugar."
    },
    {
      icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/></svg>,
      title: "Mais energia o dia todo",
      body: "Combinações que sustentam o corpo cansado da rotina noturna sem picos de açúcar."
    },
    {
      icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>,
      title: "Autoestima resgatada",
      body: "Volte a se reconhecer no espelho — e a vestir as roupas que adormeceram no armário."
    },
  ];

  return (
    <section className="section" style={{ background: "var(--warm-white)" }}>
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 64 }}>
          <Reveal><span className="eyebrow">Por que funciona</span></Reveal>
          <Reveal delay={60}>
            <h2 className="serif" style={{ fontSize: "clamp(36px, 5vw, 60px)", lineHeight: 1.02, marginTop: 16, marginBottom: 20 }}>
              Um cardápio que cuida de você <span className="serif-it" style={{ color: "var(--rust)" }}>e do seu bebê</span> — ao mesmo tempo.
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <p style={{ fontSize: 18, color: "var(--ink-2)", maxWidth: 600 }}>
              Cada refeição foi calculada para fazer duas coisas ao mesmo tempo: queimar a gordura acumulada no pós-parto e sustentar a qualidade do seu leite. Nada de chá milagroso, nada de jejum disfarçado.
            </p>
          </Reveal>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
          gap: 1,
          background: "var(--line)",
          border: "1px solid var(--line)",
          borderRadius: 20,
          overflow: "hidden"
        }}>
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 60}>
              <div style={{
                background: "var(--warm-white)",
                padding: "32px 28px",
                height: "100%",
                display: "flex",
                flexDirection: "column",
                gap: 16,
                transition: "background .25s"
              }}
              onMouseEnter={(e) => e.currentTarget.style.background = "var(--cream)"}
              onMouseLeave={(e) => e.currentTarget.style.background = "var(--warm-white)"}>
                <div style={{
                  width: 48, height: 48, borderRadius: 12,
                  background: "var(--rust-soft)", color: "var(--rust-deep)",
                  display: "flex", alignItems: "center", justifyContent: "center"
                }}>
                  {it.icon}
                </div>
                <h3 className="serif" style={{ fontSize: 24, lineHeight: 1.1 }}>{it.title}</h3>
                <p style={{ color: "var(--muted)", fontSize: 15 }}>{it.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.UrgencyBar = UrgencyBar;
window.Hero = Hero;
window.Benefits = Benefits;
window.Reveal = Reveal;
window.useCountdown = useCountdown;
