/* global React */
/*
  Site V3 — sections grounded in the LOMIENS PDFs:
  - Apresentação_Comercial_LOMIENS
  - Sistema_LOMIENS
*/

const { useReveal, useCountUp } = window;

/* ============ MARKET RESEARCH — 6 STATS GRID ============ */

const RESEARCH = [
  { n: "01", value: 88.5, label: "tiveram problemas com pedidos feitos ao hotel", tag: "Problemas nos pedidos" },
  { n: "02", value: 96.2, label: "querem agendar spa, quadras e restaurantes pelo app", tag: "Alta demanda por agendamentos" },
  { n: "03", value: 65.4, label: "escolheriam o hotel que oferece controle total via app", tag: "Preferência por hotéis com app" },
  { n: "04", value: 76.9, label: "preferem WebApp via QR Code, sem instalar nada", tag: "Aceitação do WebApp" },
  { n: "05", value: 69.2, label: "já deixaram de pedir no quarto por preguiça de ligar", tag: "Room service subutilizado" },
  { n: "06", value: 38.5, label: "pediriam mais com cardápio visual no celular", tag: "Cardápio visual aumenta vendas" },
];

function MarketResearch() {
  const ref = useReveal();
  return (
    <section ref={ref} className="section" id="pesquisa">
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "0 56px" }}>
        <div className="reveal" style={{ marginBottom: 56, display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 64, alignItems: "end" }}>
          <div>
            <span className="lh-badge" style={{ marginBottom: 22 }}>
              <span className="dot"></span>
              <span>Pesquisa de mercado</span>
            </span>
            <h2
              style={{
                fontSize: 64,
                fontWeight: 900,
                letterSpacing: "-0.045em",
                lineHeight: 0.95,
                margin: 0,
                color: "#fff",
                textWrap: "balance",
              }}
            >
              A <span style={{ color: "#5b8cff" }}>demanda existe</span>. Os hóspedes já pediram.
            </h2>
          </div>
          <p style={{ color: "rgba(255,255,255,0.65)", fontSize: 16, fontWeight: 300, lineHeight: 1.6, margin: 0 }}>
            Principais pontos da pesquisa em relação à demanda dos clientes ao frequentar hotéis, resorts e pousadas.
          </p>
        </div>

        <div className="reveal delay-1" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
          {RESEARCH.map((r) => <ResearchCard key={r.n} item={r} />)}
        </div>
      </div>
    </section>
  );
}

function ResearchCard({ item }) {
  const [v, ref] = useCountUp(Math.round(item.value * 10));
  const displayed = (v / 10).toFixed(1);
  return (
    <div ref={ref} className="lh-card kpi-card" style={{ borderRadius: 28, padding: 28, display: "flex", flexDirection: "column", gap: 18 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontSize: 12, fontWeight: 900, color: "#2f6bff", letterSpacing: "0.32em" }}>
          {item.n}
        </span>
        <span style={{ fontSize: 9, fontWeight: 900, color: "rgba(255,255,255,0.4)", letterSpacing: "0.3em", textTransform: "uppercase", textAlign: "right", maxWidth: 160 }}>
          {item.tag}
        </span>
      </div>
      <div className="lh-laser counter" style={{ fontSize: 80, fontWeight: 900, letterSpacing: "-0.05em", lineHeight: 1 }}>
        {displayed}%
      </div>
      <p style={{ color: "rgba(255,255,255,0.65)", fontSize: 14, fontWeight: 300, lineHeight: 1.5, margin: 0 }}>
        {item.label}
      </p>
    </div>
  );
}

/* ============ FLOW DIAGRAM — 4 STEPS ============ */

const FLOW_STEPS = [
  {
    n: "01",
    actor: "Hóspede",
    icon: "fa-mobile-screen",
    title: "Realiza o pedido pelo app",
    desc: "Aponta o QR Code, escolhe e confirma. Sem ligar. Sem instalar.",
    color: "#7aa8ff",
  },
  {
    n: "02",
    actor: "Funcionário",
    icon: "fa-display",
    title: "Recebe a demanda no painel",
    desc: "Cada pedido cai direto no setor correto, com prioridade e timer.",
    color: "#5b8cff",
  },
  {
    n: "03",
    actor: "Dados",
    icon: "fa-database",
    title: "Classificação automática",
    desc: "Pedidos são organizados e separados de forma automática.",
    color: "#2f6bff",
  },
  {
    n: "04",
    actor: "Gestão · IA",
    icon: "fa-chart-pie",
    title: "Painel de gestão com IA",
    desc: "A IA identifica problemas e sugere soluções, em tempo real.",
    color: "#7aa8ff",
  },
];

function FlowDiagram() {
  const ref = useReveal();
  return (
    <section ref={ref} className="section bg-deeper" id="fluxo">
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "0 56px" }}>
        <div className="reveal" style={{ marginBottom: 56, textAlign: "center" }}>
          <span className="lh-badge" style={{ marginBottom: 22 }}>
            <span className="dot"></span>
            <span>Fluxo de funcionamento</span>
          </span>
          <h2 style={{ fontSize: 64, fontWeight: 900, letterSpacing: "-0.045em", lineHeight: 0.95, margin: "0 auto", color: "#fff", maxWidth: 980, textWrap: "balance" }}>
            Inteligência que une as <span style={{ color: "#5b8cff" }}>duas pontas</span> da sua operação.
          </h2>
          <p style={{ color: "rgba(255,255,255,0.65)", fontSize: 17, fontWeight: 300, lineHeight: 1.55, margin: "24px auto 0", maxWidth: 720 }}>
            De um lado, autonomia total para o hóspede controlar sua estadia. Do outro, visibilidade total para o gestor controlar sua operação.
          </p>
        </div>

        {/* Steps row with connecting line */}
        <div className="reveal delay-1" style={{ position: "relative", marginTop: 56 }}>
          {/* Line */}
          <div
            className="flow-rail"
            style={{
              position: "absolute",
              top: 76,
              left: "8%",
              right: "8%",
              height: 2,
              background:
                "linear-gradient(to right, transparent 0%, rgba(47,107,255,0.6) 8%, rgba(47,107,255,0.6) 92%, transparent 100%)",
              zIndex: 0,
            }}
          ></div>
          {/* Animated pulse traveling along the line */}
          <div
            className="flow-rail"
            style={{
              position: "absolute",
              top: 73,
              left: "8%",
              width: 12,
              height: 8,
              borderRadius: 4,
              background: "#fff",
              boxShadow: "0 0 20px #2f6bff, 0 0 40px #2f6bff",
              animation: "flowPulse 4s ease-in-out infinite",
            }}
          ></div>
          <style>{`
            @keyframes flowPulse {
              0% { left: 8%; opacity: 0; }
              10% { opacity: 1; }
              50% { left: 92%; opacity: 1; }
              60% { opacity: 0; }
              100% { left: 92%; opacity: 0; }
            }
          `}</style>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, position: "relative", zIndex: 1 }}>
            {FLOW_STEPS.map((s, i) => (
              <FlowStepCard key={s.n} step={s} arrow={i < FLOW_STEPS.length - 1} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FlowStepCard({ step, arrow }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
      {/* Big circle with icon */}
      <div
        style={{
          width: 152,
          height: 152,
          borderRadius: "50%",
          background: "linear-gradient(180deg, #16284d 0%, #0b1730 100%)",
          border: "2px solid rgba(47,107,255,0.4)",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexDirection: "column",
          gap: 6,
          marginBottom: 20,
          boxShadow: "0 30px 60px -20px rgba(0,0,0,0.6), 0 0 40px rgba(47,107,255,0.3), inset 0 1px 0 rgba(255,255,255,0.1)",
          position: "relative",
        }}
      >
        <div
          style={{
            position: "absolute",
            inset: -8,
            borderRadius: "50%",
            border: "1px solid rgba(47,107,255,0.3)",
            animation: "pulse-ring 3s ease-out infinite",
          }}
        ></div>
        <i className={`fa-solid ${step.icon}`} style={{ fontSize: 36, color: step.color }}></i>
        <span style={{ fontSize: 10, fontWeight: 900, color: "rgba(255,255,255,0.9)", letterSpacing: "0.3em", textTransform: "uppercase" }}>
          {step.actor}
        </span>
      </div>

      {/* Step number on rail */}
      <div
        style={{
          width: 36,
          height: 36,
          borderRadius: "50%",
          background: "#0a1f4a",
          border: "2px solid #2f6bff",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          boxShadow: "0 0 20px rgba(47,107,255,0.5)",
          marginTop: -32,
          marginBottom: 18,
          fontSize: 12,
          fontWeight: 900,
          color: "#fff",
          letterSpacing: "0.05em",
          position: "relative",
          zIndex: 2,
        }}
      >
        {step.n}
      </div>

      <h4 style={{ fontSize: 20, fontWeight: 900, letterSpacing: "-0.02em", margin: "0 0 8px", color: "#fff", textAlign: "center", lineHeight: 1.15 }}>
        {step.title}
      </h4>
      <p style={{ color: "rgba(255,255,255,0.6)", fontSize: 13, fontWeight: 300, lineHeight: 1.5, margin: 0, textAlign: "center", maxWidth: 240 }}>
        {step.desc}
      </p>
    </div>
  );
}

/* ============ PRODUCT GALLERY ============ */

const GUEST_SCREENS = [
  { label: "Home", note: "Primeiro contato simples, elegante e intuitivo.", img: "assets/LOMIENS_APP_home.png" },
  { label: "Pedidos", note: "Pedidos visuais, claros e rápidos.", img: "assets/colaborador_lomiens.png" },
  { label: "Área do Hóspede", note: "Todos os serviços do hotel em um só lugar.", img: "assets/menu_app_lomiens.png" },
];
const STAFF_VIEWS = [
  { label: "Painel da equipe", note: "Solicitações centralizadas em um único painel.", img: "assets/area_colaborador.png" },
  { label: "IA Solucionadora", note: "Mapeia, classifica e sugere soluções.", img: "assets/lomiens_AI.png" },
  { label: "Dashboard", note: "Monitora todos os indicadores em tempo real.", img: "assets/lomiens_dash.png" },
];

function ProductGallery() {
  const ref = useReveal();
  return (
    <section ref={ref} className="section" id="produto">
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "0 56px" }}>
        {/* Guest */}
        <div className="reveal" style={{ marginBottom: 64 }}>
          <div className="divider-label"><span>Para o hóspede · WebApp via QR Code</span></div>
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 56, alignItems: "end", marginBottom: 40 }}>
            <h2 style={{ fontSize: 56, fontWeight: 900, letterSpacing: "-0.04em", lineHeight: 0.95, margin: 0, color: "#fff", textWrap: "balance" }}>
              Tudo o que o hóspede precisa, <span style={{ color: "#5b8cff" }}>na palma da mão</span>.
            </h2>
            <p style={{ color: "rgba(255,255,255,0.65)", fontSize: 16, fontWeight: 300, lineHeight: 1.6, margin: 0 }}>
              Acesso rápido e sem fricção. Sem aplicativos, sem cadastros longos, sem barreiras.
            </p>
          </div>
        </div>

        <div className="reveal delay-1" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, marginBottom: 96 }}>
          {GUEST_SCREENS.map((s, i) => (
            <PhoneScreen key={i} screen={s} index={i + 1} />
          ))}
        </div>

        {/* Staff */}
        <div className="reveal" style={{ marginBottom: 40 }}>
          <div className="divider-label"><span>Para a equipe & gestor · mais agilidade, menos ruído</span></div>
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 56, alignItems: "end" }}>
            <h2 style={{ fontSize: 56, fontWeight: 900, letterSpacing: "-0.04em", lineHeight: 0.95, margin: 0, color: "#fff", textWrap: "balance" }}>
              Painel único + <span style={{ color: "#5b8cff" }}>IA Solucionadora</span> + Dashboard.
            </h2>
            <p style={{ color: "rgba(255,255,255,0.65)", fontSize: 16, fontWeight: 300, lineHeight: 1.6, margin: 0 }}>
              A I.A mapeia e classifica os problemas, sugere soluções e suas aplicações. Treinada pelo time, em tempo real.
            </p>
          </div>
        </div>

        <div className="reveal delay-1" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
          {STAFF_VIEWS.map((s, i) => (
            <StaffView key={i} screen={s} index={i + 1} />
          ))}
        </div>
      </div>
    </section>
  );
}

function PhoneScreen({ screen, index }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
      <div style={{ position: "relative", marginBottom: 20 }}>
        <div
          style={{
            position: "absolute",
            inset: "-10%",
            borderRadius: "50%",
            background: "rgba(47,107,255,0.25)",
            filter: "blur(60px)",
            zIndex: 0,
          }}
        ></div>
        <div
          className="bob"
          style={{
            position: "relative",
            zIndex: 1,
            width: 260,
            height: 540,
            borderRadius: 40,
            background: "linear-gradient(180deg, #16284d 0%, #101e3d 60%, #0b1730 100%)",
            border: "1px solid rgba(255,255,255,0.15)",
            padding: 8,
            boxShadow: "0 40px 80px -20px rgba(0,0,0,0.8), 0 0 60px -20px rgba(47,107,255,0.45)",
            animationDelay: `${index * 0.4}s`,
          }}
        >
          <div
            style={{
              position: "absolute",
              top: 14,
              left: "50%",
              transform: "translateX(-50%)",
              width: 90,
              height: 22,
              borderRadius: 999,
              background: "#001529",
              zIndex: 3,
            }}
          ></div>
          <div style={{ width: "100%", height: "100%", borderRadius: 32, overflow: "hidden", background: "#0a1830" }}>
            <img className="zoomable" src={screen.img} alt={screen.label} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }} />
          </div>
        </div>
      </div>
      <div style={{ textAlign: "center" }}>
        <span style={{ fontSize: 9, fontWeight: 900, color: "#2f6bff", letterSpacing: "0.32em", textTransform: "uppercase" }}>
          Tela 0{index}
        </span>
        <h4 style={{ fontSize: 22, fontWeight: 900, letterSpacing: "-0.02em", margin: "6px 0 6px", color: "#fff" }}>
          {screen.label}
        </h4>
        <p style={{ color: "rgba(255,255,255,0.6)", fontSize: 13, fontWeight: 300, lineHeight: 1.5, margin: 0, maxWidth: 240, marginInline: "auto" }}>
          {screen.note}
        </p>
      </div>
    </div>
  );
}

function StaffView({ screen, index }) {
  return (
    <div className="lh-card" style={{ borderRadius: 28, padding: 18, display: "flex", flexDirection: "column", gap: 16 }}>
      <div style={{ background: "#0a1830", borderRadius: 18, overflow: "hidden", aspectRatio: "16 / 10", border: "1px solid rgba(255,255,255,0.06)" }}>
        <img className="zoomable" src={screen.img} alt={screen.label} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }} />
      </div>
      <div style={{ padding: "0 8px 8px" }}>
        <span style={{ fontSize: 9, fontWeight: 900, color: "#7aa8ff", letterSpacing: "0.32em", textTransform: "uppercase" }}>
          Visão 0{index}
        </span>
        <h4 style={{ fontSize: 22, fontWeight: 900, letterSpacing: "-0.02em", margin: "6px 0 6px", color: "#fff" }}>
          {screen.label}
        </h4>
        <p style={{ color: "rgba(255,255,255,0.6)", fontSize: 13, fontWeight: 300, lineHeight: 1.5, margin: 0 }}>
          {screen.note}
        </p>
      </div>
    </div>
  );
}

Object.assign(window, {
  MarketResearch, FlowDiagram, ProductGallery,
});