// Tweaks panel for ContractControl

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "purple",
  "density": "comfortable",
  "heroVariant": "product"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.documentElement.setAttribute("data-accent", tweaks.accent);
    document.documentElement.setAttribute("data-density", tweaks.density);
  }, [tweaks.accent, tweaks.density]);

  const page = window.__CC_PAGE__ || "home";

  const isKnownPage = [
    "home", "intake", "platform", "power-modules", "workspaces", "permissions",
    "drafting", "review", "negotiation", "signature", "repository", "analytics", "obligations",
    "solutions", "pricing", "customers", "security", "resources", "company", "dataroom",
    "document-hub", "legal-hub", "viewer-seats", "unlimited-viewer", "sales-agent", "bulk-signatures", "dealroom", "clickwrap", "complaint-hub",
    "team-legal", "team-sales", "team-procurement", "team-hr", "team-finance", "team-revops",
    "use-case-monitoring", "use-case-autonomy", "use-case-negotiation",
    "press", "contact",
    "industry-saas", "industry-finserv", "industry-realestate",
    "blog", "blog-simplesign", "guides", "webinars", "webinar-simplesign", "templates", "glossary", "health-check",
    "compare",
    "compare-oneflow",
    "compare-scrive",
    "compare-juro",
    "compare-ironclad",
    "compare-house-of-control",
    "compare-spotdraft"
  ].includes(page);

  const darkHeroPages = [
    "power-modules", "dataroom", "viewer-seats", "unlimited-viewer", "sales-agent",
    "workspaces", "permissions", "bulk-signatures", "dealroom", "clickwrap", "complaint-hub"
  ];
  const darkHero = darkHeroPages.includes(page);

  return (
    <>
      <Nav current={page} darkHero={darkHero} />
      <main>
      {!isKnownPage && <NotFoundPage />}
      {page === "home" && <HomePage heroVariant={tweaks.heroVariant} setHeroVariant={(v) => setTweak("heroVariant", v)} />}
      {page === "intake" && <IntakePage />}
      {page === "platform" && <PlatformPage />}
      {page === "power-modules" && <PowerModulesPage />}
      {page === "workspaces" && <WorkspacesPage />}
      {page === "permissions" && <PermissionsPage />}
      {page === "drafting" && ccModulePage("drafting")}
      {page === "review" && ccModulePage("review")}
      {page === "negotiation" && ccModulePage("negotiation")}
      {page === "signature" && ccModulePage("signature")}
      {page === "repository" && ccModulePage("repository")}
      {page === "analytics" && ccModulePage("analytics")}
      {page === "obligations" && ccModulePage("obligations")}
      {page === "solutions" && <SolutionsPage />}
      {page === "pricing" && <PricingPage />}
      {page === "customers" && <CustomersPage />}
      {page === "security" && <SecurityPage />}
      {page === "resources" && <ResourcesPage />}
      {page === "health-check" && <HealthCheckPage />}
      {page === "company" && <CompanyPage />}
      {page === "dataroom" && <DataroomPage />}
      {page === "document-hub" && <GenericModulePage slug="document-hub" />}
      {page === "legal-hub" && <GenericModulePage slug="legal-hub" />}
      {page === "viewer-seats" && <ViewerSeatsPage />}
      {page === "unlimited-viewer" && <ViewerSeatsPage />}
      {page === "sales-agent" && <SalesAgentPage />}
      {page === "bulk-signatures" && <GenericModulePage slug="bulk-signatures" />}
      {page === "dealroom" && <GenericModulePage slug="dealroom" />}
      {page === "clickwrap" && <GenericModulePage slug="clickwrap" />}
      {page === "complaint-hub" && <GenericModulePage slug="complaint-hub" />}
      {page === "team-legal" && <TeamSolutionPage slug="legal" />}
      {page === "team-sales" && <TeamSolutionPage slug="sales" />}
      {page === "team-procurement" && <TeamSolutionPage slug="procurement" />}
      {page === "team-hr" && <TeamSolutionPage slug="hr" />}
      {page === "team-finance" && <TeamSolutionPage slug="finance" />}
      {page === "team-revops" && <TeamSolutionPage slug="revops" />}
      {page === "press" && <PressPage />}
      {page === "contact" && <ContactPage />}
      {page === "use-case-monitoring" && <UseCasePage slug="contract-monitoring" />}
      {page === "use-case-autonomy" && <UseCasePage slug="autonomy-control" />}
      {page === "use-case-negotiation" && <UseCasePage slug="collaborative-negotiation" />}
      {page === "industry-saas" && <IndustrySolutionPage slug="saas" />}
      {page === "industry-finserv" && <IndustrySolutionPage slug="finserv" />}
      {page === "industry-realestate" && <IndustrySolutionPage slug="realestate" />}
      {page === "blog" && <BlogPage />}
      {page === "blog-simplesign" && <BlogPostSimpleSignPage />}
      {page === "guides" && <GuidesPage />}
      {page === "webinars" && <WebinarsPage />}
      {page === "webinar-simplesign" && <WebinarDetailSimpleSignPage />}
      {page === "templates" && <TemplatesPage />}
      {page === "glossary" && <GlossaryPage />}
      {page === "compare" && <AllAlternativesPage />}
      {page === "compare-oneflow" && <CompareOneflowPage />}
      {page === "compare-scrive" && <CompareScrivePage />}
      {page === "compare-juro" && <CompareJuroPage />}
      {page === "compare-ironclad" && <CompareIroncladPage />}
      {page === "compare-house-of-control" && <CompareHouseOfControlPage />}
      {page === "compare-spotdraft" && <CompareSpotdraftPage />}
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent">
          <TweakRadio
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              { value: "purple", label: "Purple" },
              { value: "purple-warm", label: "Soft" },
              { value: "indigo", label: "Indigo" },
              { value: "ink", label: "Mono" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Density">
          <TweakRadio
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "comfortable", label: "Comfortable" },
              { value: "compact", label: "Compact" },
            ]}
          />
        </TweakSection>
        {page === "home" && (
          <TweakSection title="Hero variant">
            <TweakRadio
              value={tweaks.heroVariant}
              onChange={(v) => setTweak("heroVariant", v)}
              options={[
                { value: "product", label: "Product UI" },
                { value: "editorial", label: "Editorial" },
                { value: "cinematic", label: "Cinematic" },
              ]}
            />
          </TweakSection>
        )}
      </TweaksPanel>
    </>
  );
}

function HeroSwitcher({ current, onChange }) {
  const options = [
    { value: "product", label: "Product UI" },
    { value: "cinematic", label: "Cinematic" },
    { value: "editorial", label: "Editorial" },
  ];
  return (
    <div style={{ position: "fixed", bottom: 24, left: "50%", transform: "translateX(-50%)", zIndex: 9999, display: "flex", gap: 4, background: "rgba(14,14,16,0.85)", backdropFilter: "blur(12px)", border: "1px solid rgba(255,255,255,0.12)", borderRadius: 99, padding: "4px", boxShadow: "0 8px 32px rgba(0,0,0,0.3)" }}>
      <span style={{ fontSize: 11, fontWeight: 600, color: "rgba(255,255,255,0.35)", letterSpacing: "0.06em", alignSelf: "center", paddingLeft: 10, paddingRight: 4 }}>HERO</span>
      {options.map(o => (
        <button key={o.value} onClick={() => onChange(o.value)} style={{ fontSize: 12, fontWeight: 500, padding: "5px 14px", borderRadius: 99, border: "none", cursor: "pointer", transition: "background 150ms, color 150ms", background: current === o.value ? "white" : "transparent", color: current === o.value ? "#0D0C10" : "rgba(255,255,255,0.5)" }}>
          {o.label}
        </button>
      ))}
    </div>
  );
}

function HomePage({ heroVariant, setHeroVariant }) {
  return (
    <div>
      {heroVariant === "cinematic" ? <HeroCinematic /> : heroVariant === "editorial" ? <HeroEditorial /> : <Hero />}
      <LogoStrip />
      <EmpathyBanner />
      <Metrics />
      <HowItWorks />
      <WhyContractControl />
      <Testimonial />
      <DepartmentShowcase />
      <FinalCTA />
    </div>
  );
}

function HeroEditorial() {
  return (
    <section style={{ padding: "120px 0 96px" }}>
      <div className="container">
        <div style={{ maxWidth: 1080, margin: "0 auto" }}>
          <span className="eyebrow fade-up">Contract control · v4 launching</span>
          <h1 className="display fade-up" style={{ marginTop: 24, animationDelay: "0.05s", fontSize: "clamp(56px, 8vw, 112px)", lineHeight: 0.98 }}>
            The legal <em>front door</em><br/>
            your business<br/>
            <span className="accent">actually uses</span>.
          </h1>
          <div className="fade-up" style={{ marginTop: 48, display: "flex", gap: 64, alignItems: "flex-end", flexWrap: "wrap", animationDelay: "0.1s" }}>
            <p className="lede" style={{ flex: "1 1 360px", maxWidth: 460 }}>
              A modern contract platform for teams that move fast - request, draft, review, sign, and track. Without the legal back-and-forth.
            </p>
            <div style={{ display: "flex", gap: 12 }}>
              <a className="btn btn-primary btn-lg" href="/book-demo">Book demo <Icon name="arrow" size={14} /></a>
              <a className="btn btn-ghost btn-lg" href="/book-demo">Watch 3-min tour</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function NotFoundPage() {
  const [query, setQuery] = React.useState("");

  const searchableLinks = [
    { title: "Intake", desc: "Self-serve contract requests", href: "/platform/intake", category: "Lifecycle", icon: "intake" },
    { title: "Drafting", desc: "Automated template drafting", href: "/platform/drafting", category: "Lifecycle", icon: "drafting" },
    { title: "Review", desc: "AI contract review & playbooks", href: "/platform/review", category: "Lifecycle", icon: "review" },
    { title: "Negotiation", desc: "Counterparty collaboration", href: "/platform/negotiation", category: "Lifecycle", icon: "negotiation" },
    { title: "eSignature", desc: "eIDAS AES & QES signatures", href: "/platform/esignature", category: "Lifecycle", icon: "sign" },
    { title: "Repository", desc: "Smart contract repository", href: "/platform/repository", category: "Lifecycle", icon: "repository" },
    { title: "Analytics", desc: "Cycle-time & contract leakage", href: "/platform/analytics", category: "Lifecycle", icon: "analytics" },
    { title: "Obligations", desc: "Proactive renewal alerts", href: "/platform/obligations", category: "Lifecycle", icon: "obligations" },
    { title: "Dataroom", desc: "Secure M&A deal rooms", href: "/platform/power-modules/dataroom", category: "Power Module", icon: "dataroom" },
    { title: "Document Hub", desc: "Branded policy & terms portal", href: "/platform/power-modules/document-hub", category: "Power Module", icon: "docs" },
    { title: "Intake AI Agent", desc: "Chat-based contract drafting", href: "/platform/power-modules/sales-agent", category: "Power Module", icon: "review" },
    { title: "Pricing & Plans", desc: "Explore subscription tiers", href: "/pricing", category: "Company", icon: "docs" },
    { title: "Book a Demo", desc: "Schedule a live product tour", href: "/book-demo", category: "Company", icon: "arrow" },
  ];

  const filteredLinks = query.trim() === ""
    ? searchableLinks.slice(0, 4)
    : searchableLinks.filter(l =>
        l.title.toLowerCase().includes(query.toLowerCase()) ||
        l.desc.toLowerCase().includes(query.toLowerCase()) ||
        l.category.toLowerCase().includes(query.toLowerCase())
      );

  return (
    <section className="section" style={{
      position: "relative",
      minHeight: "75vh",
      display: "flex",
      alignItems: "center",
      overflow: "hidden",
      background: "var(--bg)",
      color: "var(--ink-1)"
    }}>
      {/* Decorative Glows */}
      <div style={{
        position: "absolute",
        top: "20%",
        left: "50%",
        transform: "translateX(-50%)",
        width: 800,
        height: 400,
        background: "radial-gradient(ellipse at center, rgba(124,92,211,0.08) 0%, transparent 65%)",
        pointerEvents: "none"
      }} />

      <div className="container" style={{ position: "relative", zIndex: 2, maxWidth: 1000 }}>
        <div className="mob-stack" style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 80, alignItems: "center" }}>
          
          {/* Left Column: Message & Search Terminal */}
          <div>
            <span className="eyebrow" style={{ color: "var(--accent)", letterSpacing: "0.15em" }}>CLAUSE 404 · EXCEPTION</span>
            <h1 className="display" style={{
              fontSize: "clamp(36px, 4.8vw, 60px)",
              marginTop: 16,
              marginBottom: 18,
              lineHeight: 1.1,
              fontWeight: 600,
              letterSpacing: "-0.03em"
            }}>
              Page has been <br />
              <span style={{
                background: "linear-gradient(90deg, var(--accent) 0%, #B65532 100%)",
                WebkitBackgroundClip: "text",
                WebkitTextFillColor: "transparent"
              }}>archived or revoked</span>.
            </h1>
            <p className="lede" style={{ color: "var(--ink-3)", marginBottom: 36, fontSize: 16.5, lineHeight: 1.6 }}>
              We searched every folder, database, and archive in the repository. The requested path is missing, invalid, or has been relocated.
            </p>

            {/* Search Terminal */}
            <div style={{
              background: "var(--bg-elevated)",
              border: "1px solid var(--line-strong)",
              borderRadius: 16,
              padding: 24,
              boxShadow: "0 10px 30px rgba(0,0,0,0.03)"
            }}>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 12 }}>
                ContractControl Navigation Terminal
              </div>
              <div style={{ position: "relative", marginBottom: 16 }}>
                <input
                  type="text"
                  placeholder="Search repository (e.g. Dataroom, eSignature...)"
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  style={{
                    width: "100%",
                    padding: "12px 16px 12px 40px",
                    borderRadius: 8,
                    border: "1.5px solid var(--line)",
                    background: "var(--bg)",
                    color: "var(--ink-1)",
                    fontSize: 14,
                    outline: "none",
                    transition: "border-color 150ms ease"
                  }}
                  onKeyDown={(e) => {
                    if (e.key === "Escape") setQuery("");
                  }}
                />
                {/* Search Icon */}
                <span style={{ position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)", color: "var(--ink-4)" }}>
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                </span>
                {query && (
                  <button
                    onClick={() => setQuery("")}
                    style={{
                      position: "absolute",
                      right: 12,
                      top: "50%",
                      transform: "translateY(-50%)",
                      background: "none",
                      border: "none",
                      color: "var(--ink-4)",
                      cursor: "pointer",
                      fontSize: 12
                    }}
                  >
                    Clear
                  </button>
                )}
              </div>

              {/* Suggestions */}
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <div style={{ fontSize: 11, fontWeight: 500, color: "var(--ink-4)", marginBottom: 4 }}>
                  {query ? `Found ${filteredLinks.length} matches` : "Quick Links"}
                </div>
                {filteredLinks.length > 0 ? (
                  filteredLinks.map((l) => (
                    <a
                      key={l.title}
                      href={l.href}
                      style={{
                        display: "flex",
                        alignItems: "center",
                        gap: 12,
                        padding: "10px 12px",
                        borderRadius: 8,
                        background: "var(--bg)",
                        border: "1px solid var(--line)",
                        textDecoration: "none",
                        color: "inherit",
                        transition: "all 120ms ease"
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.borderColor = "var(--accent)";
                        e.currentTarget.style.background = "var(--accent-soft)";
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.borderColor = "var(--line)";
                        e.currentTarget.style.background = "var(--bg)";
                      }}
                    >
                      <span style={{
                        width: 24, height: 24,
                        borderRadius: 6,
                        background: "var(--bg-soft)",
                        color: "var(--accent)",
                        display: "grid",
                        placeItems: "center"
                      }}>
                        <Icon name={l.icon} size={12} />
                      </span>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 13, fontWeight: 600 }}>{l.title}</div>
                        <div style={{ fontSize: 11.5, color: "var(--ink-4)" }}>{l.desc}</div>
                      </div>
                      <span className="tag" style={{ fontSize: 10, padding: "2px 6px", margin: 0 }}>
                        {l.category}
                      </span>
                    </a>
                  ))
                ) : (
                  <div style={{ fontSize: 13, color: "var(--ink-4)", textAlign: "center", padding: "16px 0" }}>
                    No modules match "{query}". Try searching for "dataroom" or "esignature".
                  </div>
                )}
              </div>
            </div>

            {/* Back Home CTA */}
            <div style={{ marginTop: 32, display: "flex", gap: 12 }}>
              <a className="btn btn-primary" href="/">Go back home <Icon name="arrow" size={14} /></a>
              <a className="btn btn-ghost" href="/platform">View platform overview</a>
            </div>
          </div>

          {/* Right Column: Visual illustration */}
          <div style={{ display: "flex", justifyContent: "center" }}>
            <div style={{
              width: "100%",
              maxWidth: 380,
              height: 380,
              background: "var(--bg-elevated)",
              border: "1px solid var(--line)",
              borderRadius: 24,
              boxShadow: "0 24px 50px rgba(0,0,0,0.06)",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center",
              position: "relative",
              overflow: "hidden"
            }}>
              {/* Grid Background */}
              <div style={{
                position: "absolute",
                inset: 0,
                opacity: 0.12,
                backgroundImage: "linear-gradient(var(--line-strong) 1px, transparent 1px), linear-gradient(90deg, var(--line-strong) 1px, transparent 1px)",
                backgroundSize: "20px 20px"
              }} />

              {/* Floating Document Visual */}
              <div style={{
                position: "relative",
                zIndex: 2,
                animation: "float 4s ease-in-out infinite"
              }}>
                <style>{`
                  @keyframes float {
                    0% { transform: translateY(0px) rotate(0deg); }
                    50% { transform: translateY(-15px) rotate(2deg); }
                    100% { transform: translateY(0px) rotate(0deg); }
                  }
                  @keyframes pulseRed {
                    0% { box-shadow: 0 0 0 0 rgba(196, 84, 53, 0.4); }
                    70% { box-shadow: 0 0 0 10px rgba(196, 84, 53, 0); }
                    100% { box-shadow: 0 0 0 0 rgba(196, 84, 53, 0); }
                  }
                `}</style>
                <div style={{
                  width: 130,
                  height: 170,
                  background: "white",
                  border: "2px solid var(--line-strong)",
                  borderRadius: 12,
                  padding: 16,
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "space-between",
                  boxShadow: "0 15px 30px rgba(0,0,0,0.08)",
                  position: "relative"
                }}>
                  {/* Lines to represent text */}
                  <div>
                    <div style={{ height: 6, width: "60%", background: "var(--line)", borderRadius: 3, marginBottom: 12 }} />
                    <div style={{ height: 4, width: "100%", background: "var(--line-strong)", opacity: 0.3, borderRadius: 2, marginBottom: 8 }} />
                    <div style={{ height: 4, width: "90%", background: "var(--line-strong)", opacity: 0.3, borderRadius: 2, marginBottom: 8 }} />
                    <div style={{ height: 4, width: "95%", background: "var(--line-strong)", opacity: 0.3, borderRadius: 2, marginBottom: 8 }} />
                    <div style={{ height: 4, width: "40%", background: "var(--line-strong)", opacity: 0.3, borderRadius: 2, marginBottom: 8 }} />
                  </div>

                  {/* Stamp */}
                  <div style={{
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    transform: "translate(-50%, -50%) rotate(-15deg)",
                    border: "3px solid #C45435",
                    borderRadius: 6,
                    padding: "6px 12px",
                    color: "#C45435",
                    fontFamily: "var(--font-mono)",
                    fontWeight: 700,
                    fontSize: 13,
                    letterSpacing: "0.05em",
                    background: "white",
                    boxShadow: "0 4px 10px rgba(0,0,0,0.05)",
                    zIndex: 3
                  }}>
                    404 VOID
                  </div>

                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <div style={{ height: 12, width: 36, background: "var(--line)", borderRadius: 2 }} />
                    <div style={{
                      width: 14,
                      height: 14,
                      borderRadius: "50%",
                      background: "#C45435",
                      animation: "pulseRed 2s infinite"
                    }} />
                  </div>
                </div>
              </div>

              {/* Status Code Label */}
              <div style={{
                marginTop: 28,
                fontFamily: "var(--font-mono)",
                fontSize: 12.5,
                color: "var(--ink-4)",
                background: "var(--bg-soft)",
                padding: "6px 14px",
                borderRadius: 99,
                border: "1px solid var(--line)"
              }}>
                REQUISITION_LOST_IN_TRANSLATION
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}

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