// Hero section — floating cards / chat mockup / minimal

const HEADLINES = {
  A: { line1: "Sua agenda lotada,", line2: "sem você grudado no WhatsApp." },
  B: { line1: "A secretária 24 horas", line2: "que sua clínica não precisa contratar." },
  C: {
    line1: "Sua agenda da semana que vem pode estar cheia",
    line2: <span style={{ color: "var(--brand-green)" }}>sem você responder uma mensagem sequer.</span>
  }
};

// Hero variant: "floating" — like the reference (default)
const HeroFloating = ({ headlineKey = "C", onCta }) => {
  const h = HEADLINES[headlineKey] || HEADLINES.C;

  // Scroll parallax — rails drift in opposite directions as user scrolls past hero.
  // Honors prefers-reduced-motion.
  React.useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const hero = document.querySelector(".hero-floating");
    const left = document.querySelector(".hero-rail-left");
    const right = document.querySelector(".hero-rail-right");
    const center = document.querySelector(".hero-center .hero-brand-tile");
    const connectors = document.querySelector(".hero-connectors");
    if (!hero || !left || !right) return;

    let raf = 0;
    const apply = () => {
      const heroH = hero.offsetHeight || 1;
      const y = Math.max(0, Math.min(window.scrollY, heroH));
      const p = y / heroH;
      left.style.transform = `translate3d(${-p * 28}px, ${-p * 60}px, 0) rotate(${-p * 2}deg)`;
      right.style.transform = `translate3d(${p * 28}px, ${-p * 36}px, 0) rotate(${p * 2}deg)`;
      if (center) center.style.transform = `translateY(${-p * 24}px) scale(${1 - p * 0.05})`;
      if (connectors) connectors.style.opacity = String(1 - p * 0.8);
      raf = 0;
    };
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(apply);
    };
    apply();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <section className="section hero-floating" style={{ paddingTop: 24, paddingBottom: 80, position: "relative", overflow: "hidden" }}>
      <div className="container" style={{ position: "relative" }}>
        {/* CONNECTORS — thin dashed lines linking the floating tiles through the brand mark */}
        <svg className="hero-connectors" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
          {/* lines from center brand tile to each side tile */}
          <path d="M 50 18 C 38 14, 28 12, 18 12" />
          <path d="M 50 18 C 32 22, 16 28, 6 38" />
          <path d="M 50 18 C 30 30, 22 46, 18 58" />
          <path d="M 50 18 C 28 36, 14 62, 8 82" />

          <path d="M 50 18 C 62 14, 72 12, 82 12" />
          <path d="M 50 18 C 68 22, 84 28, 94 38" />
          <path d="M 50 18 C 70 30, 78 46, 82 58" />
          <path d="M 50 18 C 72 36, 86 62, 92 82" />

          {/* connector nodes at the brand tile and tile anchors */}
          <circle cx="50" cy="18" r="0.7" />
          <circle cx="18" cy="12" r="0.5" />
          <circle cx="6" cy="38" r="0.5" />
          <circle cx="18" cy="58" r="0.5" />
          <circle cx="8" cy="82" r="0.5" />
          <circle cx="82" cy="12" r="0.5" />
          <circle cx="94" cy="38" r="0.5" />
          <circle cx="82" cy="58" r="0.5" />
          <circle cx="92" cy="82" r="0.5" />
        </svg>

        <div className="hero-grid">
          {/* LEFT RAIL — its own column, tiles positioned within */}
          <div className="hero-rail hero-rail-left" aria-hidden="true">
            <IconTile glyph="Spark" bg="#FFF1A8" color="#7A5A00"
            style={{ right: 0, top: "8%" }} className="drift" />
            <AvatarTile initials="LC" tint="#FFD8A8" w={88} h={104} label="Lívia C."
            style={{ left: 0, top: "30%" }} />
            <IconTile glyph="WhatsApp" bg="#DCFBE7" color="#0B7A3B"
            style={{ right: 8, top: "54%" }} className="drift-2" />
            <ChatBubble them style={{ left: 0, bottom: "8%", maxWidth: 200 }} time="22:14">
              Oi, vocês têm horário sexta? Me indicaram 🙏
            </ChatBubble>
          </div>

          {/* CENTER — headline column, capped width, has its own positioned context */}
          <div className="hero-center">
            <div className="float-tile drift-3 hero-brand-tile"
            style={{
              position: "relative", margin: "0 auto 28px",
              background: "var(--brand-green)",
              borderColor: "color-mix(in srgb, var(--brand-green) 70%, black 12%)",
              width: 96, height: 96, borderRadius: 24,
              boxShadow: "0 14px 36px -12px color-mix(in srgb, var(--brand-green) 60%, transparent), 0 1px 0 rgba(255,255,255,.2) inset"
            }}>
              {/* Allora chat-bubble glyph — matches the brand logo */}
              <svg width={52} height={52} viewBox="0 0 20 20" fill="white" aria-hidden="true">
                <path d="M3.5 2.5h13a1.5 1.5 0 0 1 1.5 1.5v9.5a1.5 1.5 0 0 1-1.5 1.5h-4l-3.2 2.6a.5.5 0 0 1-.8-.4V15H3.5A1.5 1.5 0 0 1 2 13.5V4a1.5 1.5 0 0 1 1.5-1.5Z" />
              </svg>
              {/* tiny status dot */}
              <span style={{
                position: "absolute", right: 8, top: 8,
                width: 22, height: 22, borderRadius: "50%",
                background: "var(--bg-card)",
                border: "1px solid var(--line)",
                boxShadow: "var(--shadow-sm)",
                display: "grid", placeItems: "center", fontWeight: "400", fontSize: "16px"
              }}>
                <span className="pulse-dot" style={{ background: "var(--accent)" }} />
              </span>
            </div>
            <h1 className="display hero-h1" style={{ margin: 0, fontSize: "clamp(34px, 4.2vw, 54px)", lineHeight: 1.05, textWrap: "balance", maxWidth: "20ch" }}>
              {h.line1} {h.line2}
            </h1>
            <p className="body hero-sub">Conheça sua secretária digital 24 horas por dia,
7 dias na semana.
            </p>
            <div className="hero-ctas">
              <a className="btn btn-primary btn-lg" href="#cta" onClick={onCta}>
                Assine agora <span aria-hidden style={{ fontSize: 18, marginLeft: 2 }}>→</span>
              </a>
              <a className="btn btn-ghost btn-lg" href="#como-funciona">Quero ver funcionando</a>
            </div>
            <div className="small hero-micro">
              <span>Cancela com 1 clique</span><span style={{ color: "var(--muted-2)" }}>•</span>
              <span>No ar em até 48h</span>
            </div>

            {/* trust strip */}
            <div className="hero-trust">
              <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                <span className="pulse-dot" />
                <b style={{ color: "var(--ink)" }}>online:</b> respondendo em ~14s
              </span>
              <span style={{ color: "var(--muted-2)" }}>·</span>
              <span><b style={{ color: "var(--ink)" }}>148</b> mensagens hoje</span>
              <span style={{ color: "var(--muted-2)" }}>·</span>
              <span><b style={{ color: "var(--ink)" }}>32</b> agendamentos/semana</span>
            </div>
          </div>

          {/* RIGHT RAIL */}
          <div className="hero-rail hero-rail-right" aria-hidden="true">
            <IconTile glyph="Calendar" bg="#E8E1FF" color="#3B2A7A"
            style={{ left: 0, top: "8%" }} className="drift" />
            <IconTile glyph="Clock" bg="#FFE3D6" color="#9B3A12"
            style={{ right: 0, top: "28%" }} className="drift-2" />
            <AvatarTile initials="DR" tint="#C9F0DB" w={88} h={104} label="Dr. R. Lima"
            style={{ right: 0, top: "52%" }} />
            <ChatBubble style={{ right: 0, bottom: "8%", maxWidth: 210 }} time="22:14 ✓✓">
              Tenho sexta 14h ou 16h30. Qual prefere?
            </ChatBubble>
          </div>
        </div>
      </div>
    </section>);

};

// Hero variant: chat mockup beside copy
const HeroChat = ({ headlineKey = "C", onCta }) => {
  const h = HEADLINES[headlineKey] || HEADLINES.C;
  return (
    <section className="section" style={{ paddingTop: 32, paddingBottom: 32 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 32, alignItems: "center" }}>
          <div style={{ gridColumn: "span 7" }}>
            <div className="chip-tiny accent" style={{ marginBottom: 20 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)" }} />
              Beta aberta · 22 clínicas usando
            </div>
            <h1 className="display display-xl" style={{ margin: "0 0 22px" }}>
              {h.line1}<br />{h.line2}
            </h1>
            <p className="lede" style={{ marginBottom: 28 }}>
              A Allora atende, agenda, confirma e reativa pelo WhatsApp da sua clínica. No ar em 48 horas, sem você apertar um botão depois disso.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 16 }}>
              <a className="btn btn-primary btn-lg" href="#cta" onClick={onCta}>Assine agora →</a>
              <a className="btn btn-ghost btn-lg" href="#como-funciona">Quero ver funcionando</a>
            </div>
            <div className="small">Cancela com 1 clique · No ar em até 48h</div>
          </div>
          <div style={{ gridColumn: "span 5" }}>
            <PhoneChat />
          </div>
        </div>
      </div>
    </section>);

};

// Phone mockup with WhatsApp-style thread
const PhoneChat = () =>
<div style={{
  position: "relative",
  width: "min(360px, 100%)",
  margin: "0 auto",
  aspectRatio: "9 / 18",
  background: "#0e0e10",
  borderRadius: 44,
  padding: 10,
  boxShadow: "var(--shadow-lg)",
  border: "1px solid #2a2a2c"
}}>
    <div style={{
    width: "100%", height: "100%", borderRadius: 36, overflow: "hidden",
    background: "#ECE5DD",
    display: "flex", flexDirection: "column",
    position: "relative"
  }}>
      {/* header */}
      <div style={{
      background: "#0B7A53", color: "white", padding: "14px 16px 12px",
      display: "flex", alignItems: "center", gap: 10
    }}>
        <div style={{ width: 36, height: 36, borderRadius: "50%", background: "#fff", display: "grid", placeItems: "center", color: "#0B7A53", fontWeight: 700, fontFamily: "Bricolage Grotesque" }}>A</div>
        <div style={{ flex: 1, lineHeight: 1.2 }}>
          <div style={{ fontSize: 14, fontWeight: 600 }}>Clínica Lume · Allora</div>
          <div style={{ fontSize: 11, opacity: 0.8 }}>online · digitando…</div>
        </div>
      </div>
      {/* messages */}
      <div style={{ flex: 1, padding: "14px 12px", display: "flex", flexDirection: "column", gap: 8, fontSize: 13.5, lineHeight: 1.35, overflow: "hidden" }}>
        <Msg time="22:14">Boa noite! Vocês ainda atendem? Vi a indicação da Ana.</Msg>
        <Msg time="22:14" mine>Boa noite, Camila 🙂 Atendemos sim. A Dra. Júlia tem horário sexta às 14h ou 16h30. Qual fica melhor?</Msg>
        <Msg time="22:15">16h30 perfeito. Atende plano Sulamerica?</Msg>
        <Msg time="22:15" mine>Atendemos reembolso. A sessão é R$ 280 e a gente envia o recibo nominal pra você dar entrada. Confirmo sexta 16h30?</Msg>
        <Msg time="22:16">Confirmado! Obrigada pela atenção 💚</Msg>
        <Msg time="22:16" mine>Maravilha. Mando um lembrete 24h antes. Até sexta!</Msg>
      </div>
      <div style={{ padding: "8px 12px", background: "#F4F2EE", display: "flex", gap: 8, alignItems: "center", borderTop: "1px solid #d8d4cb" }}>
        <div style={{ flex: 1, background: "white", borderRadius: 999, padding: "10px 14px", color: "#999", fontSize: 12 }}>Mensagem</div>
        <div style={{ width: 32, height: 32, borderRadius: "50%", background: "#0B7A53" }} />
      </div>
    </div>
    {/* floating badge */}
    <div style={{
    position: "absolute", top: -8, right: -16, transform: "rotate(4deg)",
    padding: "8px 12px", background: "var(--bg-card)", borderRadius: 12,
    border: "1px solid var(--line)", boxShadow: "var(--shadow-md)",
    display: "flex", alignItems: "center", gap: 8,
    fontSize: 12
  }}>
      <span className="pulse-dot" /> agendamento confirmado
    </div>
  </div>;

const Msg = ({ children, mine, time }) =>
<div style={{ alignSelf: mine ? "flex-end" : "flex-start", maxWidth: "82%" }}>
    <div style={{
    background: mine ? "#DCF8C6" : "white",
    color: "#111",
    padding: "8px 11px 6px",
    borderRadius: mine ? "14px 14px 4px 14px" : "14px 14px 14px 4px",
    boxShadow: "0 1px 1px rgba(0,0,0,.08)"
  }}>
      <div>{children}</div>
      <div style={{ fontSize: 9.5, color: "#888", textAlign: "right", marginTop: 2 }}>{time} {mine ? "✓✓" : ""}</div>
    </div>
  </div>;


// Hero variant: minimal editorial
const HeroMinimal = ({ headlineKey = "C", onCta }) => {
  const h = HEADLINES[headlineKey] || HEADLINES.C;
  return (
    <section className="section" style={{ paddingTop: 48, paddingBottom: 32 }}>
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 1000, margin: "0 auto", display: "flex", flexDirection: "column", gap: 28, alignItems: "center" }}>
          <div className="chip-tiny accent">
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)" }} />
            Atende, agenda, confirma · 24h no WhatsApp
          </div>
          <h1 className="display display-xl" style={{ margin: 0 }}>
            {h.line1}<br />{h.line2}
          </h1>
          <p className="lede" style={{ margin: 0, textAlign: "center" }}>
            A Allora atende, agenda, confirma e reativa pelo WhatsApp da sua clínica. No ar em 48 horas, sem você apertar um botão depois disso.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "center" }}>
            <a className="btn btn-primary btn-lg" href="#cta" onClick={onCta}>Assine agora →</a>
            <a className="btn btn-ghost btn-lg" href="#como-funciona">Quero ver funcionando</a>
          </div>
          <div className="small">Cancela com 1 clique · No ar em até 48h</div>
        </div>
      </div>
    </section>);

};

const Hero = ({ variant = "floating", headlineKey = "C", onCta }) => {
  if (variant === "chat") return <HeroChat headlineKey={headlineKey} onCta={onCta} />;
  if (variant === "minimal") return <HeroMinimal headlineKey={headlineKey} onCta={onCta} />;
  return <HeroFloating headlineKey={headlineKey} onCta={onCta} />;
};

// Opening vignette — 22h cena
const OpeningVignette = () =>
<section className="section" id="abertura" style={{ paddingTop: 40 }}>
    <div className="container">
      <div className="card" style={{ padding: "clamp(40px, 6vw, 80px)", display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 32, alignItems: "center", background: "var(--bg-elev)" }}>
        <div style={{ gridColumn: "span 7", minWidth: 0 }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>22h de uma terça-feira</div>
          <p className="display display-sm" style={{ margin: "0 0 24px", fontWeight: 600, letterSpacing: "-0.02em", lineHeight: 1.15 }}>
            Você acabou de sair de sessão. Abre o WhatsApp e tem <span style={{ color: "var(--accent-deep)" }}>7 mensagens novas</span>, 
três pedindo horário, duas remarcando, uma cancelando em cima da hora.
          </p>
          <p className="body" style={{ margin: 0, maxWidth: "52ch" }}>
            Você responde tudo agora ou deixa pra amanhã e arrisca perder o paciente pra clínica que respondeu primeiro? <br />
            <strong style={{ color: "var(--ink)" }}>A Allora é o terceiro caminho:</strong> um agente de IA que conversa pelo WhatsApp da sua clínica como uma secretária treinada. Marca, confirma, reagenda e ainda traz de volta paciente que sumiu, 24 horas por dia.
          </p>
          <p className="small" style={{ marginTop: 18, color: "var(--muted)" }}>
            Sem você no meio. Sem cara de robô. Sem custo de funcionário.
          </p>
        </div>
        <div style={{ gridColumn: "span 5", display: "flex", justifyContent: "center", minWidth: 0 }}>
          <UnreadStack />
        </div>
      </div>
    </div>
  </section>;


const UnreadStack = () => {
  const items = [
  { name: "Camila", msg: "Vocês têm horário sexta de tarde?", time: "22:14", unread: true },
  { name: "Ricardo", msg: "Preciso remarcar a de amanhã 😬", time: "21:58", unread: true },
  { name: "Ana Beatriz", msg: "Quanto fica avaliação?", time: "21:43", unread: true },
  { name: "Joana", msg: "Não vou conseguir hoje, desculpe", time: "21:12", unread: false },
  { name: "Marcos", msg: "Vocês atendem reembolso?", time: "20:55", unread: false }];

  return (
    <div style={{ width: "100%", maxWidth: 380, display: "flex", flexDirection: "column", gap: 6 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "0 4px 8px" }}>
        <div style={{ fontFamily: "Bricolage Grotesque", fontWeight: 700, fontSize: 18, letterSpacing: "-0.01em" }}>WhatsApp · Clínica</div>
        <div className="chip-tiny" style={{ background: "color-mix(in srgb, #ef4444 15%, var(--bg-card))", color: "#b91c1c", borderColor: "transparent" }}>3 não lidas</div>
      </div>
      {items.map((it, i) =>
      <div key={i} style={{
        display: "flex", gap: 12, alignItems: "center",
        padding: "12px 14px", background: "var(--bg-card)",
        borderRadius: 14, border: "1px solid var(--line)",
        opacity: it.unread ? 1 : 0.6
      }}>
          <div style={{ width: 36, height: 36, borderRadius: "50%", background: `hsl(${i * 47 % 360} 60% 88%)`, display: "grid", placeItems: "center", fontSize: 13, fontWeight: 700, color: "#1d1224", flexShrink: 0 }}>{it.name[0]}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, marginBottom: 2 }}>
              <strong style={{ fontWeight: 600 }}>{it.name}</strong>
              <span style={{ color: "var(--muted)", fontSize: 11 }}>{it.time}</span>
            </div>
            <div style={{ fontSize: 12.5, color: "var(--muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{it.msg}</div>
          </div>
          {it.unread && <div style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--accent)" }} />}
        </div>
      )}
    </div>);

};

Object.assign(window, { Hero, OpeningVignette, HEADLINES });