// App entry — composes the home page

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "motion": "standard",
  "density": "standard",
  "heroVariant": 0
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    document.documentElement.dataset.motion = tweaks.motion;
    document.documentElement.dataset.density = tweaks.density;
  }, [tweaks.motion, tweaks.density]);

  const variantNames = ["Spectrum Orb", "Waveform", "Lifecycle Ring"];

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
  };

  return (
    <>
      <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
        <a className="nav-logo" href="#">
          <span className="nav-logo-mark"></span>
          <span>CHROMA</span>
        </a>
        <div className="nav-links">
          <a href="#services" onClick={(e) => { e.preventDefault(); scrollTo("services"); }}>Services</a>
          <a href="#case-studies" onClick={(e) => { e.preventDefault(); scrollTo("case-studies"); }}>Case Studies</a>
          <a href="#compare" onClick={(e) => { e.preventDefault(); scrollTo("compare"); }}>Why us</a>
          <a href="#faq" onClick={(e) => { e.preventDefault(); scrollTo("faq"); }}>FAQ</a>
        </div>
        <button className="nav-cta" onClick={() => scrollTo("book")}>
          Book a call ↗
        </button>
      </nav>

      {/* HERO */}
      <section className="hero">
        <div className="hero-grid"></div>
        <div className="hero-orb-wrap">
          <HeroOrb variant={tweaks.heroVariant} motion={tweaks.motion} />
        </div>
        <div className="hero-eyebrow">
          <span className="hero-eyebrow-dot"></span>
          <span>Diamond HubSpot Partner · Booking Q3 2026</span>
        </div>
        <h1>
          Your HubSpot,<br/>
          <em>finally</em> working.
        </h1>
        <p className="hero-sub">
          Lead routing is broken. Attribution doesn't work. You need a partner who speaks workflows, not vibes.
          We're a senior HubSpot engineering team for B2B SaaS — implementation, migration, custom dev, and the cleanup nobody else wants to do.
        </p>
        <div className="hero-cta-row">
          <button className="btn-primary" onClick={() => scrollTo("book")}>
            Book a 30-min discovery call →
          </button>
          <button className="btn-ghost" onClick={() => scrollTo("services")}>
            See services
          </button>
        </div>
        <div className="hero-meta">
          <span className="hero-meta-item">120+ portals built</span>
          <span className="hero-meta-item">$140M pipeline routed</span>
          <span className="hero-meta-item">Diamond partner</span>
          <span className="hero-meta-item">14× certified</span>
        </div>
      </section>

      <LogoStrip />

      {/* WORKFLOW DIAGRAM SECTION */}
      <section className="block" id="diagram">
        <div className="container">
          <div className="section-header">
            <div>
              <div className="section-eyebrow"><span className="section-eyebrow-num">00 ·</span> What working looks like</div>
              <h2 className="section-title">A workflow that <em>fires</em>.</h2>
            </div>
            <p className="section-desc">
              Every line in this diagram is something we've shipped this quarter — form-to-fire-to-CRM in under 200 milliseconds,
              with the audit trail your CFO can actually reconcile.
            </p>
          </div>
          <WorkflowDiagram motion={tweaks.motion} />
        </div>
      </section>

      <Services />
      <CaseStudies />
      <Testimonial />
      <Compare />
      <FAQ />
      <BookCall />

      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Motion">
          <TweakRadio
            label="Intensity"
            value={tweaks.motion}
            options={[
              { value: "calm", label: "Calm" },
              { value: "standard", label: "Standard" },
              { value: "hyper", label: "Hyper" },
            ]}
            onChange={(v) => setTweak("motion", v)}
          />
        </TweakSection>
        <TweakSection label="Density">
          <TweakRadio
            label="Section padding"
            value={tweaks.density}
            options={[
              { value: "compact", label: "Compact" },
              { value: "standard", label: "Standard" },
              { value: "airy", label: "Airy" },
            ]}
            onChange={(v) => setTweak("density", v)}
          />
        </TweakSection>
        <TweakSection label="Hero variant">
          <TweakRadio
            label="Background"
            value={String(tweaks.heroVariant)}
            options={[
              { value: "0", label: "Neon" },
              { value: "1", label: "Bars" },
              { value: "2", label: "Cycle" },
            ]}
            onChange={(v) => setTweak("heroVariant", Number(v))}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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