// 60Seconds — main app

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "hero": "console",
  "accent": ["#7A52FF", "#FF5A1F"]
}/*EDITMODE-END*/;

function useTheme(initial) {
  const [theme, setThemeState] = React.useState(() => {
    try {
      const stored = localStorage.getItem("60s-theme");
      if (stored === "dark" || stored === "light") return stored;
    } catch {}
    return initial || "light";
  });
  const setTheme = (t) => {
    setThemeState(t);
    try { localStorage.setItem("60s-theme", t); } catch {}
  };
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
  }, [theme]);
  return [theme, setTheme];
}

// Map tweak accent options → CSS vars
const ACCENT_PRESETS = {
  "purple+orange":  { p: "#7A52FF", p2: "#5A2DF4", glow: "rgba(122,82,255,0.32)", o: "#FF5A1F" },
  "blue+green":     { p: "#24A1DE", p2: "#1764D8", glow: "rgba(36,140,222,0.32)", o: "#2BD974" },
  "gold+pink":      { p: "#FFB000", p2: "#FF7A45", glow: "rgba(255,122,69,0.32)", o: "#F118B2" },
};
function accentKeyFromArr(a) {
  if (!a) return "purple+orange";
  const k = a.join("|").toLowerCase();
  if (k === "#7a52ff|#ff5a1f") return "purple+orange";
  if (k === "#24a1de|#2bd974") return "blue+green";
  if (k === "#ffb000|#f118b2") return "gold+pink";
  return "purple+orange";
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [theme, setTheme] = useTheme(t.theme);

  // Sync theme tweak with localStorage state
  React.useEffect(() => {
    if (t.theme !== theme) setTweak("theme", theme);
  }, [theme]);

  // Apply accent
  React.useEffect(() => {
    const ac = ACCENT_PRESETS[accentKeyFromArr(t.accent)];
    const root = document.documentElement;
    root.style.setProperty("--purple-2", ac.p);
    root.style.setProperty("--purple",   ac.p2);
    root.style.setProperty("--purple-glow", ac.glow);
    root.style.setProperty("--orange",   ac.o);
    root.style.setProperty("--orange-glow", "rgba(255,90,31,0.32)");
  }, [t.accent]);

  // Reveal-on-scroll
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { rootMargin: "-50px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  // Hero variant picker
  let heroVisual;
  let heroEyebrow;
  let heroTitle;
  let heroSub;

  if (t.hero === "console") {
    heroVisual = <LaunchConsoleVisual/>;
    heroEyebrow = "Prop in 60 Seconds · Now in public beta";
    heroTitle = <>Launch a prop firm in <span className="gradient-text">60&nbsp;seconds.</span></>;
    heroSub = (
      <>Plug in a domain and a PSP key — 60Seconds ships a branded website, client area, CRM and a bridge to your trading provider, white-labelled and operated by AI agents. <strong style={{ color: "var(--text)" }}>Built by the founders of antelopeOS.ai.</strong></>
    );
  } else if (t.hero === "agent") {
    heroVisual = <AgentConsoleVisual/>;
    heroEyebrow = "Prop in 60 Seconds · AI-Operated";
    heroTitle = <>Launch a prop firm in <span className="gradient-text">60&nbsp;seconds.</span><br/>Run it with <span className="gradient-text">one prompt.</span></>;
    heroSub = (
      <>Plug in a domain and a PSP key — 60Seconds ships a branded website, client area and CRM, all operated by AI agents instead of 47 dashboards. <strong style={{ color: "var(--text)" }}>Built by the founders of antelopeOS.ai.</strong></>
    );
  } else {
    // inputs
    heroVisual = <TwoInputsHeroVisual/>;
    heroEyebrow = "Prop in 60 Seconds";
    heroTitle = <>Two inputs. <span className="gradient-text">One live firm.</span></>;
    heroSub = (
      <>Domain + PSP key → website, client area, CRM and trading apps, white-labelled, on your subdomain, in 60 seconds. <strong style={{ color: "var(--text)" }}>Then your AI operators take over.</strong></>
    );
  }

  return (
    <>
      <div className="site-bg"/>
      <TopNav theme={theme} setTheme={setTheme}/>

      <section className="page-hero" id="top">
        <div className="container">
          <div className="page-hero-grid">
            <div className="hero-copy">
              <div className="hero-tag">
                <span className="hero-tag-dot"/>
                <span className="mono">{heroEyebrow}</span>
              </div>
              <h1>{heroTitle}</h1>
              <p className="page-hero-sub">{heroSub}</p>
              <div className="page-hero-cta">
                <a className="btn btn-primary" href="#cta">
                  Book launch call
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </a>
                <a className="btn btn-ghost" href="#flow">See the 60-second flow</a>
              </div>
              <div className="hero-trust mono">
                Trusted infra · <span className="hero-trust-strong">200+ prop firms</span> already run on the engine
              </div>
            </div>
            <div className="hero-visual-wrap">{heroVisual}</div>
          </div>
        </div>
        <style>{`
          .hero-tag {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 5px 12px; border-radius: 999px;
            background: var(--surface-2); border: 1px solid var(--line);
            font-size: 11px; color: var(--text-dim);
            letter-spacing: 0.1em; text-transform: uppercase;
            margin-bottom: 22px; font-weight: 500;
          }
          .hero-tag-dot {
            width: 6px; height: 6px; border-radius: 999px;
            background: var(--orange);
            box-shadow: 0 0 8px var(--orange);
            animation: pulse 1.6s infinite ease-out;
          }
          .hero-trust { margin-top: 28px; font-size: 12px; color: var(--text-mute); letter-spacing: 0.04em; }
          .hero-trust-strong { color: var(--text); font-weight: 600; }
          .hero-visual-wrap { position: relative; min-width: 0; max-width: 100%; }
          .hero-visual-wrap > * { max-width: 100%; }
          .hero-visual-wrap::before {
            content: ""; position: absolute; inset: -30px;
            background: radial-gradient(60% 60% at 50% 50%, var(--purple-glow), transparent 70%);
            filter: blur(40px); z-index: 0;
          }
          .hero-visual-wrap > * { position: relative; z-index: 1; }
          @media (max-width: 700px) { .hero-visual-wrap { display: none; } }
        `}</style>
      </section>

      <StatRow items={[
        { v: "60s",  l: "Median deploy, from sign-in to live firm" },
        { v: "2",    l: "Inputs needed — domain & PSP key" },
        { v: "0",    l: "Engineers required. Zero" },
        { v: "24/7", l: "AI operators on shift" },
      ]}/>

      <TwoInputsFlowSection/>
      <ChatOpsSection/>
      <AgentsSection/>
      <InTheBox/>
      <TemplatesGallery/>
      <SixtySecondTimeline/>
      <PlatformsBlock/>
      <BuiltForBlock/>
      <CompareTable/>
      <FAQ/>
      <CTASection/>

      <SiteFooter/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakRadio
            label="Mode"
            value={theme}
            onChange={(v) => setTheme(v)}
            options={[
              { value: "dark",  label: "Dark"  },
              { value: "light", label: "Light" },
            ]}
          />
          <TweakColor
            label="Brand palette"
            value={t.accent || ["#7A52FF", "#FF5A1F"]}
            onChange={(v) => setTweak("accent", v)}
            options={[
              ["#7A52FF", "#FF5A1F"],
              ["#24A1DE", "#2BD974"],
              ["#FFB000", "#F118B2"],
            ]}
          />
        </TweakSection>
        <TweakSection title="Hero variant">
          <TweakRadio
            label="Visual"
            value={t.hero || "agent"}
            onChange={(v) => setTweak("hero", v)}
            options={[
              { value: "console", label: "Clock"   },
              { value: "agent",   label: "Agent"   },
              { value: "inputs",  label: "Inputs"  },
            ]}
          />
          <div style={{ fontSize: 11.5, color: "var(--text-mute, #777)", marginTop: 4, lineHeight: 1.45 }}>
            <strong style={{ color: "var(--text-dim)" }}>Clock</strong> — animated 60s countdown with deploy stages (default).<br/>
            <strong style={{ color: "var(--text-dim)" }}>Agent</strong> — operator chats with the AI ops agent.<br/>
            <strong style={{ color: "var(--text-dim)" }}>Inputs</strong> — pared-down domain + PSP form.
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);