// Demo Tour — full dashboard mock with auto-rotating hotspots + descriptive side panel.

const TOUR_STEPS = [
  {
    id: "kpis",
    title: "KPIs vivos da empresa",
    body: "Obras ativas, equipe em campo, receita e resultado operacional do mês — sem você fechar planilha. Os números recalculam a cada novo lançamento.",
    bullets: ["Por consolidado, por obra ou por cliente", "Sem precisar 'fechar o mês' manualmente"],
    icon: <IconDashboard size={18} />,
  },
  {
    id: "obras-soft",
    title: "Margem por obra, sempre à vista",
    body: "Saiba — em segundos — qual obra está dando lucro e qual está sangrando. Margem bruta calculada automaticamente sobre as diárias e materiais lançados.",
    bullets: ["Identifique obra perdedora antes do fim", "Defenda seu preço com dado, não 'feeling'"],
    icon: <IconBuilding size={18} />,
  },
  {
    id: "dre",
    title: "DRE consolidado — automático",
    body: "O resultado da sua empresa em formato contábil de verdade. Pronto pro contador, pronto pro banco, pronto pra sua decisão de investir.",
    bullets: ["Receita, custos, lucro bruto e operacional", "Exportável em PDF auditado"],
    icon: <IconReport size={18} />,
  },
  {
    id: "chart",
    title: "Evolução dos últimos 6 meses",
    body: "Veja a curva da empresa por mês: receita de obras, assistência técnica, custos diretos e resultado. Pra saber se você está crescendo ou patinando.",
    bullets: ["Compare meses de pico vs. baixa", "Antecipe sazonalidade da construção"],
    icon: <IconSpark size={18} />,
  },
  {
    id: "obra-table",
    title: "Resultado por obra do mês",
    body: "A linha que importa: quanto cada obra rendeu este mês. Receita, custo da equipe e resultado, sem precisar abrir 3 abas pra somar.",
    bullets: ["Atualizado a cada check-in da equipe", "Histórico mantido pra sempre"],
    icon: <IconClipboard size={18} />,
  },
  {
    id: "nav-folha",
    title: "Folha de ponto no celular",
    body: "Mestre de obra faz check-in dos funcionários no celular. Geolocalizado, com foto. Vira diária no DRE no instante seguinte.",
    bullets: ["Funciona offline no canteiro", "Acabou a planilha de presença"],
    icon: <IconClock size={18} />,
  },
];

function DemoTour() {
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx(i => (i+1) % TOUR_STEPS.length), 5000);
    return () => clearInterval(t);
  }, [paused]);

  const step = TOUR_STEPS[idx];

  return (
    <section id="demo" style={{
      background: "linear-gradient(180deg, #fff 0%, #F7F8FB 100%)",
      paddingTop: 120,
    }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 24, alignItems: "end", marginBottom: 48, flexWrap: "wrap" }} className="demo-head">
          <div style={{ maxWidth: 720 }}>
            <div className="t-eyebrow" style={{ marginBottom: 16 }}>Demo guiada · sem cadastro</div>
            <h2 className="t-h1" style={{ margin: 0, marginBottom: 16 }}>
              O sistema inteiro,<br/>
              <span style={{ color: "var(--blue-600)" }}>destrinchado pra você.</span>
            </h2>
            <p className="t-lead">
              Esse é o BinGest de verdade — só que com dados de exemplo. Acompanhe
              o tour automático ou clique em qualquer parte do dashboard pra mergulhar.
            </p>
          </div>

          <div style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "10px 16px",
            background: "var(--ink)", color: "#fff",
            borderRadius: 999, fontSize: 13, fontWeight: 500,
          }}>
            <span style={{
              width: 7, height: 7, borderRadius: 999, background: "var(--green-500)",
              animation: "hotspot-pulse 1.6s ease-out infinite",
            }} />
            {paused ? "Pausado" : `Tour rodando · ${idx+1}/${TOUR_STEPS.length}`}
          </div>
        </div>

        <div
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
          style={{
            display: "grid",
            gridTemplateColumns: "1.55fr 1fr",
            gap: 24,
            alignItems: "stretch",
          }}
          className="demo-grid"
        >
          {/* Left: dashboard */}
          <div style={{ position: "relative" }}>
            <DashboardMock mode="full" highlight={step.id} animateValues={false} />
          </div>

          {/* Right: feature panel */}
          <aside style={{
            background: "#fff",
            border: "1px solid var(--border)",
            borderRadius: 20,
            padding: 28,
            display: "flex",
            flexDirection: "column",
            boxShadow: "var(--shadow-card)",
          }}>
            <div style={{
              display: "flex", alignItems: "center", justifyContent: "space-between",
              marginBottom: 22,
            }}>
              <span style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                padding: "6px 12px", borderRadius: 999,
                background: "var(--blue-50)", color: "var(--blue-700)",
                border: "1px solid var(--blue-100)",
                fontSize: 12, fontWeight: 600,
              }}>
                {step.icon} Etapa {idx+1} de {TOUR_STEPS.length}
              </span>
              <div style={{ display: "flex", gap: 4 }}>
                <button onClick={() => setIdx((idx-1+TOUR_STEPS.length)%TOUR_STEPS.length)}
                  aria-label="Anterior"
                  style={{
                    width: 32, height: 32, borderRadius: 999, border: "1px solid var(--border)",
                    background: "#fff", display: "grid", placeItems: "center",
                  }}>
                  <IconChevron size={15} style={{ transform: "rotate(180deg)" }} />
                </button>
                <button onClick={() => setIdx((idx+1)%TOUR_STEPS.length)}
                  aria-label="Próximo"
                  style={{
                    width: 32, height: 32, borderRadius: 999, border: "1px solid var(--border)",
                    background: "#fff", display: "grid", placeItems: "center",
                  }}>
                  <IconChevron size={15} />
                </button>
              </div>
            </div>

            {/* Animated content */}
            <div key={step.id} style={{ animation: "fade-up .5s ease both" }}>
              <h3 style={{
                margin: 0, marginBottom: 14,
                fontSize: 28, lineHeight: 1.1, letterSpacing: "-0.02em", fontWeight: 600,
              }}>
                {step.title}
              </h3>
              <p style={{
                margin: 0, marginBottom: 22,
                color: "var(--muted)", fontSize: 15.5, lineHeight: 1.55,
              }}>
                {step.body}
              </p>

              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 10, marginBottom: 24 }}>
                {step.bullets.map((b, i) => (
                  <li key={i} style={{
                    display: "flex", alignItems: "flex-start", gap: 10,
                    fontSize: 14, color: "var(--ink-2)",
                  }}>
                    <span style={{
                      flex: "0 0 22px", width: 22, height: 22, borderRadius: 999,
                      background: "var(--green-50)", color: "var(--green-700)",
                      display: "grid", placeItems: "center", marginTop: 1,
                      border: "1px solid var(--green-100)",
                    }}>
                      <IconCheck size={13} />
                    </span>
                    {b}
                  </li>
                ))}
              </ul>
            </div>

            {/* Step nav buttons */}
            <div style={{
              marginTop: "auto",
              borderTop: "1px solid var(--border)",
              paddingTop: 18,
              display: "grid",
              gap: 4,
            }}>
              {TOUR_STEPS.map((s, i) => (
                <button key={s.id}
                  onClick={() => setIdx(i)}
                  style={{
                    display: "flex", alignItems: "center", gap: 10,
                    padding: "8px 12px",
                    border: "none",
                    borderRadius: 10,
                    background: i === idx ? "var(--blue-50)" : "transparent",
                    color: i === idx ? "var(--blue-700)" : "var(--ink-2)",
                    fontSize: 13,
                    fontWeight: i === idx ? 600 : 500,
                    textAlign: "left",
                    cursor: "pointer",
                    transition: "background .2s",
                  }}>
                  <span className="mono" style={{ fontSize: 11, opacity: .6, width: 18 }}>0{i+1}</span>
                  <span style={{ flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                    {s.title}
                  </span>
                  {i === idx && (
                    <span style={{
                      width: 18, height: 18, borderRadius: 999,
                      background: "var(--blue-600)", color: "#fff",
                      display: "grid", placeItems: "center",
                    }}>
                      <IconPlay size={9} />
                    </span>
                  )}
                </button>
              ))}
            </div>
          </aside>
        </div>

        <div style={{
          marginTop: 36, display: "flex", justifyContent: "center", flexWrap: "wrap", gap: 14,
          alignItems: "center",
        }}>
          <a href="#precos" className="btn btn-primary">
            Quero esse controle na minha empresa <IconArrow size={15} />
          </a>
          <span style={{ color: "var(--muted)", fontSize: 14 }}>
            ou agende um treinamento ao vivo com nosso time
          </span>
        </div>
      </div>

      <style>{`
        @media (max-width: 1080px) {
          .demo-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 720px) {
          .demo-head { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.DemoTour = DemoTour;
