/* global React, ReactDOM, Nav, Footer, Mark, Wordmark, useReveal, fmtBRL, HeroDashboard, HeroDashboardMobile, ProblemSection, HowItWorks, Processes, Connectors, Proof, Principle, Plans, FAQ, FinalCTA, HEADLINES, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakSelect, TweakToggle */
const { useEffect, useState, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#818CF8",
  "headline": 0,
  "density": "comfortable",
  "alertsLive": true
}/*EDITMODE-END*/;

function Page() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", tweaks.accent);
    r.style.setProperty("--accent-hover", tweaks.accent);
    if (tweaks.density === "compact") {
      r.style.setProperty("--gutter", "20px");
      document.body.style.fontSize = "15px";
    } else {
      r.style.setProperty("--gutter", "24px");
      document.body.style.fontSize = "16px";
    }
  }, [tweaks]);

  const headline = HEADLINES[tweaks.headline] || HEADLINES[0];

  return (
    <React.Fragment>
      <Nav active="home"/>

      {/* HERO */}
      <section className="section-dark grid-bg" style={{ position: "relative", overflow: "hidden", paddingTop: "clamp(56px, 7vw, 96px)", paddingBottom: "clamp(64px, 8vw, 104px)", minHeight: "90vh", display: "flex", alignItems: "center" }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(800px 600px at 50% 40%, rgba(99,102,241,0.12), transparent 70%)", pointerEvents: "none" }}/>
        <div className="container-wide" style={{ position: "relative", width: "100%" }}>
          <div className="grid hero-cols" style={{ gridTemplateColumns: "1fr 1.05fr", gap: 64, alignItems: "center" }}>
            <div className="reveal in">
              {/* Eyebrow badge */}
              <div style={{ marginBottom: 28 }}>
                <span style={{
                  display: "inline-flex", alignItems: "center", gap: 8,
                  padding: "7px 14px", borderRadius: 999,
                  border: "1px solid rgba(129,140,248,0.3)",
                  background: "rgba(129,140,248,0.08)",
                  color: "#818CF8",
                  fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 500,
                  letterSpacing: "0.04em",
                }}>
                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#2DD4BF", animation: "pulse-dot 1.6s infinite", display: "inline-block" }}/>
                  Inteligência Operacional · IA
                </span>
              </div>
              <h1 style={{ fontSize: "clamp(2.5rem, 5vw, 4rem)", fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.1, margin: 0, color: "#E8EAF1" }}>
                {headline[0]}
                <span style={{
                  background: "linear-gradient(135deg, #818CF8, #2DD4BF)",
                  WebkitBackgroundClip: "text",
                  WebkitTextFillColor: "transparent",
                  backgroundClip: "text",
                }}>{headline[1]}</span>
              </h1>
              <p style={{ fontSize: 18, color: "#A0A6B8", marginTop: 28, maxWidth: 540, lineHeight: 1.65 }}>
                A ARCTMIND monitora faturamento, cancelamentos, logística, conversão e inadimplência — e te avisa quando algo sai do padrão, com o impacto financeiro estimado em R$.
              </p>
              <p style={{ fontSize: 15, color: "#6B7185", marginTop: 10, maxWidth: 500 }}>
                Sem código. Sem consultoria. Funciona com o ERP que você já tem.
              </p>
              <div className="row gap-12" style={{ marginTop: 36, flexWrap: "wrap" }}>
                <a href="pages/contato.html" className="btn btn-primary btn-lg">
                  Ver demonstração
                  <svg className="arr" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </a>
                <a href="pages/como-funciona.html" className="btn btn-ghost btn-lg">
                  Como funciona →
                </a>
              </div>
              {/* Social proof */}
              <div style={{ marginTop: 32, display: "flex", alignItems: "center", gap: 12 }}>
                <div style={{ display: "flex" }}>
                  {["RV","AM","CS","LP","BK"].map((init, i) => (
                    <div key={init} style={{
                      width: 30, height: 30, borderRadius: "50%",
                      background: `hsl(${220 + i * 25}, 60%, 35%)`,
                      border: "2px solid #0F1117",
                      display: "grid", placeItems: "center",
                      fontFamily: "var(--font-mono)", fontSize: 9, fontWeight: 600, color: "#fff",
                      marginLeft: i === 0 ? 0 : -8,
                    }}>{init}</div>
                  ))}
                </div>
                <span style={{ fontSize: 13, color: "#6B7185", fontFamily: "var(--font-mono)" }}>
                  +42 empresas monitorando operações em tempo real
                </span>
              </div>
              {/* mobile-only dashboard — hidden on ≥769px via CSS */}
              <div className="hero-dashboard-mobile" style={{ marginTop: 40 }}>
                <HeroDashboardMobile/>
              </div>
            </div>
            <div className="reveal in hero-dashboard" style={{ position: "relative" }}>
              <HeroDashboard/>
            </div>
          </div>

          {/* logo strip */}
          <div style={{ marginTop: 88, paddingTop: 40, borderTop: "1px solid rgba(255,255,255,0.06)" }}>
            <div className="caption mono" style={{ color: "var(--text-3)", textAlign: "center", marginBottom: 24, letterSpacing: "0.16em" }}>
              CONECTA NATIVAMENTE COM
            </div>
            <div className="row" style={{ justifyContent: "center", gap: 48, flexWrap: "wrap", opacity: 0.5 }}>
              {["TOTVS Protheus", "SAP Business One", "Sankhya", "Senior", "HubSpot", "Salesforce", "RD Station"].map(n => (
                <span key={n} style={{ color: "var(--text-2)", fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 500, letterSpacing: "-0.01em" }}>{n}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      <ProblemSection/>
      <HowItWorks/>
      <Processes/>
      <Connectors/>
      <Proof/>
      <Principle/>
      <Plans/>
      <FAQ/>
      <FinalCTA/>

      <Footer/>

      <TweaksPanel title="Tweaks · Home">
        <TweakSection title="Cor de acento">
          <TweakColor
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#818CF8", "#6366F1", "#0EA5E9", "#7C3AED", "#2DD4BF"]}
          />
        </TweakSection>
        <TweakSection title="Headline do hero">
          <TweakSelect
            value={tweaks.headline}
            onChange={(v) => setTweak("headline", Number(v))}
            options={HEADLINES.map((h, i) => ({ value: i, label: h.join("").slice(0, 60) + (h.join("").length > 60 ? "…" : "") }))}
          />
        </TweakSection>
        <TweakSection title="Densidade">
          <TweakRadio
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "comfortable", label: "Confortável" },
              { value: "compact", label: "Compacta" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Page/>);