// Hero — pure impact: massive typography + animated phone mockup of BinGest mobile.

const HERO_EVENTS = [
{ t: "diária", title: "Diária registrada", sub: "Carlos Souza · R$ 180,00", color: "var(--green-600)", icon: <IconCheck size={12} /> },
{ t: "dre", title: "DRE atualizado", sub: "Margem subiu pra 57,9%", color: "var(--blue-600)", icon: <IconBolt size={12} /> },
{ t: "pag", title: "Pagamento processado", sub: "Filipe Freitas · R$ 1.250,00", color: "var(--purple-500)", icon: <IconWallet size={12} /> },
{ t: "checkin", title: "Check-in no canteiro", sub: "Fernando Jose · 07h12", color: "var(--green-600)", icon: <IconClock size={12} /> },
{ t: "fat", title: "Fatura emitida", sub: "Construtora FGR · R$ 8.000,00", color: "var(--blue-600)", icon: <IconReport size={12} /> },
{ t: "obra", title: "Obra recebeu lançamento", sub: "Acácias · 2001-T2 · pintura", color: "var(--amber-500) ", icon: <IconBuilding size={12} /> },
{ t: "serv", title: "Vistoria concluída", sub: "Unidade 2001 · R$ 8.000,00", color: "var(--blue-600)", icon: <IconClipboard size={12} /> }];


function Hero() {
  return (
    <section id="top" className="hero" style={{ paddingTop: 50, paddingBottom: 100 }}>
      <div className="container relative" style={{
        display: "grid",
        gridTemplateColumns: "1.5fr 1fr",
        gap: 56,
        alignItems: "center",
        minHeight: "min(82vh, 760px)"
      }} id="hero-grid">

        {/* LEFT */}
        <div>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "6px 14px 6px 8px", borderRadius: 999,
            background: "rgba(255,255,255,.05)", border: "1px solid rgba(255,255,255,.10)",
            fontSize: 12.5, fontWeight: 500, color: "rgba(255,255,255,.85)",
            backdropFilter: "blur(8px)",
            marginBottom: 30
          }}>
            <span style={{
              display: "inline-flex", alignItems: "center", gap: 6,
              background: "rgba(34,197,94,.18)", color: "#7BE89A",
              padding: "3px 10px", borderRadius: 999, fontSize: 11, fontWeight: 600,
              letterSpacing: ".04em"
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: 999, background: "var(--green-500)",
                animation: "hotspot-pulse 1.6s ease-out infinite"
              }} />
              AO VIVO
            </span>
            Teste grátis · 7 dias · sem cartão
          </div>

          <h1 className="t-display" style={{
            marginTop: 0, marginBottom: 26,
            fontSize: "clamp(54px, 7.6vw, 116px)",
            color: "#fff"
          }}>
            O controle real<br />
            da sua obra<br />
            <span style={{ color: "rgba(255,255,255,.45)" }}></span>{" "}
            <span style={{
              color: "#7DA7FF"
            }}>

            </span>
          </h1>

          <p className="t-lead" style={{ maxWidth: 540, marginBottom: 38, color: "rgba(255,255,255,.65)" }}>BinGest substitui suas planilhas. Lance diárias, controle equipe, acompanhe obras e veja o Relatório da empresa atualizado — tudo em um só lugar, feito pra construção civil brasileira.



          </p>

          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center", marginBottom: 36 }}>
            <a href="#demo" className="btn btn-primary" style={{ height: 56, padding: "0 26px", fontSize: 15.5 }}>
              <IconPlay size={14} /> Ver demo ao vivo
            </a>
            <a href="#precos" className="btn btn-ghost" style={{ height: 56, padding: "0 22px", fontSize: 15.5 }}>
              Teste 7 dias grátis <IconArrow size={15} />
            </a>
          </div>

          <div style={{ display: "flex", gap: 12, alignItems: "center", color: "rgba(255,255,255,.65)", fontSize: 13.5, flexWrap: "wrap" }}>
            <div style={{ display: "flex" }}>
              {["#2A5BFF", "#16A34A", "#F59E0B", "#7C5BD8"].map((c, i) =>
              <span key={i} style={{
                width: 30, height: 30, borderRadius: 999,
                background: c, border: "2.5px solid #0E1A3A",
                marginLeft: i ? -10 : 0, display: "inline-block",
                boxShadow: "0 2px 6px rgba(0,0,0,.25)"
              }} />
              )}
            </div>
            <span><strong style={{ color: "#fff", fontWeight: 600 }}>+320 obras</strong> já gerenciadas no BinGest</span>
          </div>

          <a href="#demo" style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            marginTop: 48,
            color: "rgba(255,255,255,.55)", textDecoration: "none",
            fontSize: 12.5, fontWeight: 500, letterSpacing: ".08em", textTransform: "uppercase"
          }}>
            <span style={{
              width: 36, height: 36, borderRadius: 999,
              border: "1px solid rgba(255,255,255,.15)",
              display: "grid", placeItems: "center",
              animation: "float-y 2.4s ease-in-out infinite"
            }}>
              <IconArrowDown size={14} />
            </span>
            Experimente o sistema agora
          </a>
        </div>

        {/* RIGHT — phone with live BinGest mobile preview */}
        <div style={{
          position: "relative", display: "flex", justifyContent: "center",
          alignItems: "center", minHeight: 600
        }} className="hero-right">
          <PhonePreview />
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          #hero-grid { grid-template-columns: 1fr !important; min-height: 0 !important; }
          .hero-right { display: none; }
        }
      `}</style>
    </section>);

}

// ============================================================================
// PhonePreview — Android device with mocked BinGest mobile UI
// ============================================================================

function PhonePreview() {
  return (
    <div style={{
      position: "relative",
      transform: "scale(0.78)",
      transformOrigin: "center"
    }}>
      <AndroidDevice width={360} height={740}>
        <BingestMobileApp />
      </AndroidDevice>

      {/* Floating context badges around the phone */}
      <FloatingBadge
        top={20} left={-90}
        text="+320"
        sub="obras"
        color="var(--blue-600)"
        icon={<IconBuilding size={14} />}
        delay={0} />
      
      <FloatingBadge
        bottom={170} left={-110}
        text="R$ 12M"
        sub="em DRE"
        color="var(--green-600)"
        icon={<IconReport size={14} />}
        delay={1.6} />
      
      <FloatingBadge
        bottom={70} right={-100}
        text="<1h"
        sub="suporte"
        color="var(--purple-500)"
        icon={<IconBolt size={14} />}
        delay={0.8} />
      
      <FloatingBadge
        top={120} right={-110}
        text="57,9%"
        sub="margem"
        color="var(--amber-500)"
        icon={<IconSpark size={14} />}
        delay={2.2} />
      
    </div>);

}

// ----------------------------------------------------------------------------
// BinGest mobile app mock (renders inside the AndroidDevice)
// ----------------------------------------------------------------------------

function BingestMobileApp() {
  const [events, setEvents] = React.useState(() =>
  HERO_EVENTS.slice(0, 4).map((e, i) => ({ ...e, id: i }))
  );
  const counterRef = React.useRef(events.length);

  React.useEffect(() => {
    const id = setInterval(() => {
      setEvents((prev) => {
        const next = HERO_EVENTS[counterRef.current % HERO_EVENTS.length];
        counterRef.current += 1;
        return [{ ...next, id: counterRef.current }, ...prev].slice(0, 5);
      });
    }, 2400);
    return () => clearInterval(id);
  }, []);

  return (
    <div style={{
      background: "#FBFCFE",
      width: "100%", minHeight: "100%",
      display: "flex", flexDirection: "column",
      fontFamily: "var(--font-sans)",
      color: "#0B132A",
      position: "relative"
    }}>
      {/* Top bar — dark navy like the desktop sidebar */}
      <div style={{
        background: "#0D1A3A",
        padding: "14px 16px 16px",
        color: "#fff"
      }}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          marginBottom: 14
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <IconLogo size={22} />
            <span style={{ fontWeight: 600, fontSize: 14, letterSpacing: "-0.01em" }}>BinGest</span>
          </div>
          <div style={{
            width: 30, height: 30, borderRadius: 999,
            background: "#2A5BFF", color: "#fff",
            display: "grid", placeItems: "center",
            fontSize: 11, fontWeight: 600
          }}>ED</div>
        </div>

        <div style={{ fontSize: 12, color: "#8C97B8", letterSpacing: ".02em" }}>
          Pimba Construções · maio 2026
        </div>
        <h3 style={{
          margin: "2px 0 0 0",
          fontSize: 20, fontWeight: 600, letterSpacing: "-0.02em"
        }}>Olá, Eduardo</h3>
      </div>

      {/* Curved content area */}
      <div style={{
        background: "#FBFCFE",
        borderRadius: "20px 20px 0 0",
        marginTop: -12,
        padding: 16,
        flex: 1,
        zIndex: 1,
        position: "relative"
      }}>
        {/* KPI cards */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 8,
          marginBottom: 16
        }}>
          <MobileKpi
            label="Receita do mês"
            value={19500}
            tint="green"
            icon={<IconWallet size={11} />} />
          
          <MobileKpi
            label="Margem op."
            value={57.9}
            suffix="%"
            decimals={1}
            tint="blue"
            icon={<IconSpark size={11} />} />
          
        </div>

        {/* Section header */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          marginBottom: 10, marginTop: 4
        }}>
          <div style={{ fontSize: 11.5, fontWeight: 600, letterSpacing: ".06em", textTransform: "uppercase", color: "#5C6680" }}>
            Atividade recente
          </div>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 5,
            padding: "2px 8px", borderRadius: 999,
            background: "#ECFDF5", color: "#15803D",
            fontSize: 10, fontWeight: 600, letterSpacing: ".04em"
          }}>
            <span style={{
              width: 5, height: 5, borderRadius: 999, background: "#22C55E",
              animation: "hotspot-pulse 1.6s ease-out infinite"
            }} />
            AO VIVO
          </div>
        </div>

        {/* Event list */}
        <div style={{
          position: "relative",
          display: "flex", flexDirection: "column", gap: 8,
          overflow: "hidden",
          minHeight: 320
        }}>
          {events.map((ev, i) =>
          <MobileEventCard key={ev.id} ev={ev} idx={i} />
          )}
          {/* Fade-out bottom */}
          <div style={{
            position: "absolute",
            bottom: 0, left: 0, right: 0, height: 50,
            background: "linear-gradient(to bottom, transparent, #FBFCFE 80%)",
            pointerEvents: "none"
          }} />
        </div>
      </div>

      {/* FAB */}
      <div style={{
        position: "absolute",
        bottom: 70, right: 16,
        width: 52, height: 52, borderRadius: 16,
        background: "#2A5BFF", color: "#fff",
        display: "grid", placeItems: "center",
        boxShadow: "0 12px 24px -8px rgba(42,91,255,.5)",
        zIndex: 3
      }}>
        <IconPlus size={20} />
      </div>

      {/* Bottom tab bar */}
      <div style={{
        background: "#fff",
        borderTop: "1px solid #E3E7EF",
        padding: "10px 4px 8px",
        display: "grid",
        gridTemplateColumns: "repeat(4, 1fr)",
        gap: 4
      }}>
        {[
        { Icon: IconDashboard, l: "Início", active: true },
        { Icon: IconBuilding, l: "Obras" },
        { Icon: IconClock, l: "Ponto" },
        { Icon: IconWallet, l: "$" }].
        map((it, i) =>
        <div key={i} style={{
          display: "flex", flexDirection: "column", alignItems: "center",
          padding: "6px 0",
          color: it.active ? "#2A5BFF" : "#8892A8"
        }}>
            <span style={{
            width: 40, height: 22, borderRadius: 999,
            background: it.active ? "#E9F0FE" : "transparent",
            display: "grid", placeItems: "center",
            marginBottom: 3
          }}>
              <it.Icon size={16} />
            </span>
            <span style={{ fontSize: 10, fontWeight: it.active ? 600 : 500 }}>{it.l}</span>
          </div>
        )}
      </div>
    </div>);

}

function MobileKpi({ label, value, suffix = "", decimals = 0, tint = "blue", icon }) {
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    let raf, t0;
    const dur = 1400;
    const step = (t) => {
      if (!t0) t0 = t;
      const p = Math.min(1, (t - t0) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setN(value * eased);
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [value]);

  const display = decimals ?
  n.toLocaleString("pt-BR", { minimumFractionDigits: decimals, maximumFractionDigits: decimals }) :
  Math.round(n).toLocaleString("pt-BR");

  const colors = {
    green: { bg: "#ECFDF5", border: "#BCEAD4", fg: "#15803D" },
    blue: { bg: "#EEF3FF", border: "#D7E2FA", fg: "#1E4FD8" }
  }[tint];

  return (
    <div style={{
      background: colors.bg,
      border: `1px solid ${colors.border}`,
      borderRadius: 12,
      padding: "10px 12px"
    }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 5,
        fontSize: 9.5, color: colors.fg,
        letterSpacing: ".06em", textTransform: "uppercase", fontWeight: 600,
        marginBottom: 4
      }}>
        {icon} {label}
      </div>
      <div className="mono tabular" style={{
        fontSize: 16, fontWeight: 600, letterSpacing: "-0.02em",
        color: colors.fg
      }}>
        {tint === "green" ? "R$ " : ""}{display}{suffix}
      </div>
    </div>);

}

function MobileEventCard({ ev, idx }) {
  const opacity = Math.max(0.5, 1 - idx * 0.13);
  return (
    <div style={{
      display: "flex", alignItems: "center", gap: 10,
      padding: "10px 12px",
      background: "#fff",
      border: "1px solid #E3E7EF",
      borderRadius: 12,
      opacity,
      animation: idx === 0 ? "event-in .45s cubic-bezier(.3,.1,.2,1) both" : "none",
      boxShadow: idx === 0 ? "0 4px 12px -6px rgba(15,26,58,.12)" : "none",
      transition: "opacity .4s",
      flex: "0 0 auto"
    }}>
      <span style={{
        width: 28, height: 28, borderRadius: 9,
        background: ev.color, color: "#fff",
        display: "grid", placeItems: "center",
        flex: "0 0 28px"
      }}>{ev.icon}</span>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: "-0.01em", marginBottom: 1 }}>
          {ev.title}
        </div>
        <div style={{ fontSize: 11, color: "#5C6680", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
          {ev.sub}
        </div>
      </div>
      {idx === 0 &&
      <span style={{
        padding: "2px 6px", borderRadius: 999,
        background: "#ECFDF5", color: "#15803D",
        fontSize: 9, fontWeight: 700, letterSpacing: ".04em"
      }}>NOVO</span>
      }

      <style>{`
        @keyframes event-in {
          from { opacity: 0; transform: translateY(-6px) scale(0.96); }
          to   { opacity: 1; transform: translateY(0) scale(1); }
        }
      `}</style>
    </div>);

}

function FloatingBadge({ top, bottom, left, right, text, sub, color, icon, delay = 0 }) {
  return (
    <div style={{
      position: "absolute",
      top, bottom, left, right,
      background: "#fff",
      border: "1px solid var(--border)",
      borderRadius: 14,
      padding: "10px 14px",
      display: "flex", alignItems: "center", gap: 10,
      boxShadow: "var(--shadow-pop)",
      zIndex: 5,
      animation: `float-y 4.4s ease-in-out infinite`,
      animationDelay: `${delay}s`
    }}>
      <span style={{
        width: 30, height: 30, borderRadius: 10,
        background: color, color: "#fff",
        display: "grid", placeItems: "center",
        flex: "0 0 30px"
      }}>{icon}</span>
      <div>
        <div className="mono tabular" style={{ fontSize: 16, fontWeight: 600, letterSpacing: "-0.02em", lineHeight: 1 }}>{text}</div>
        <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 2 }}>{sub}</div>
      </div>
    </div>);

}

window.Hero = Hero;