/* global React, ReactDOM */
/* global Nav, Hero, Marquee, Services, Approach */
/* global Terrain, Horizon */
/* global TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, useTweaks */

const { useEffect, useState, useRef } = React;

/* ===== Company DNA ===== */
function DNA() {
  return (
    <section className="section dna" id="dna">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="eyebrow">[01] Company DNA</div>
            <h2>The shape <span className="ser">we move in</span>.</h2>
          </div>
          <div className="right">
            <p>
              A small enterprise with a clear point of view. We&rsquo;re not
              waiting for the next cycle. We work the one we&rsquo;re in.
            </p>
          </div>
        </div>

        <div className="dna-grid">
          <article className="dna-card">
            <header>
              <span className="eyebrow">// Who we are</span>
              <span className="dna-num">01</span>
            </header>
            <p className="dna-quote">
              We see the patterns a bit before the rest and look to the
              future down that path. We see the risks and the potential
              and weave them into reality. <span className="ser">We know the way and we go.</span>
            </p>
          </article>

          <article className="dna-card">
            <header>
              <span className="eyebrow">// What we are</span>
              <span className="dna-num">02</span>
            </header>
            <p className="dna-quote">
              <span className="ser">Frontier companies</span> are a concept that everyone talks about and we live.
              AI-first workflows are the only workflows.
              Everyone will get there eventually. We are here now.
            </p>
          </article>
        </div>
      </div>
    </section>
  );
}

/* ===== Principles (replaces fabricated stats) ===== */
function Principles() {
  const items = [
    {
      lbl: "[04A] Foundation",
      big: <>30<span className="plus">+</span></>,
      desc: "Years of combined engineering experience across our team. Brought to every engagement, top to bottom.",
    },
    {
      lbl: "[04B] Posture",
      big: <>Production<span className="ser">.</span></>,
      desc: "We build systems that have to work on a Tuesday morning. Not science fairs. Not pilots. Not pitch decks.",
    },
    {
      lbl: "[04C] Staffing",
      big: <>Senior<span className="ser">.</span></>,
      desc: "Every engagement is delivered by senior practitioners. No offshored squads, no learn-on-your-dime associates.",
    },
    {
      lbl: "[04D] Exit",
      big: <>Hand-off<span className="ser">.</span></>,
      desc: "A written exit plan from day one. We measure success by the day your team no longer needs us.",
    },
  ];
  return (
    <section className="section" style={{ paddingTop: 32, paddingBottom: 32 }}>
      <div className="shell">
        <div className="stats">
          {items.map((it, i) => (
            <div className="stat" key={i}>
              <div className="lbl">{it.lbl}</div>
              <div className="big">{it.big}</div>
              <div className="desc">{it.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== How an engagement closes — abstract, no fake quotes/numbers ===== */
function HowItCloses() {
  return (
    <section className="section" id="case">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="eyebrow">[05] Anatomy of a hand-off</div>
            <h2>What we <span className="ser">leave behind</span>.</h2>
          </div>
          <div className="right">
            <p>
              Every Crooker engagement ends with a system your platform team
              can own without us in the room. Not a deck, not a demo. A service, with the artifacts an engineering org actually needs to keep running it.
            </p>
          </div>
        </div>

        <div className="case">
          <div className="case-text">
            <span className="eyebrow">DELIVERABLES &middot; END OF ENGAGEMENT</span>
            <p className="quote">
              The deliverable is the team you didn’t have to hire and the
              system you didn’t have to scope twice.
            </p>
            <ul style={{
              listStyle: "none", padding: 0, margin: "8px 0 0",
              display: "grid", gap: 14, fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5,
            }}>
              <li><span className="mono muted" style={{ marginRight: 10 }}>01 /</span> Architecture decision records &amp; system diagrams</li>
              <li><span className="mono muted" style={{ marginRight: 10 }}>02 /</span> Eval harness, golden datasets, regression suite</li>
              <li><span className="mono muted" style={{ marginRight: 10 }}>03 /</span> On-call runbook, alarms, traced execution</li>
              <li><span className="mono muted" style={{ marginRight: 10 }}>04 /</span> Hiring rubric &amp; interview kit for your replacement team</li>
              <li><span className="mono muted" style={{ marginRight: 10 }}>05 /</span> A written exit plan, signed at kickoff, executed at close</li>
            </ul>
          </div>

          <div className="case-visual">
            <div className="tag">// hand-off checklist</div>
            <div className="title">Built to be<br />owned by you.</div>
            <div className="term">
              <span className="ln"><span className="ok">✓</span> architecture: <span className="pp">documented</span></span>
              <span className="ln"><span className="ok">✓</span> evals: <span className="pp">wired to ci</span></span>
              <span className="ln"><span className="ok">✓</span> guardrails: <span className="pp">attached</span></span>
              <span className="ln"><span className="ok">✓</span> tracing: <span className="pp">wired to your stack</span></span>
              <span className="ln"><span className="ok">✓</span> runbook: <span className="pp">authored</span></span>
              <span className="ln"><span className="ok">✓</span> on-call: <span className="pp">transferred</span></span>
              <span className="ln"><span className="ok">✓</span> hiring rubric: <span className="pp">delivered</span></span>
              <span className="ln cursor">&nbsp;</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== Founders — LinkedIn cards ===== */
function LinkedInGlyph() {
  return (
    <svg className="li-glyph" viewBox="0 0 24 24" aria-hidden>
      <rect x="2" y="2" width="20" height="20" rx="3" />
      <path
        className="li-mark"
        d="M7.6 9.5h2v7h-2v-7zm1-3a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2zM11.4 9.5h1.9v1h0c.27-.5 1-1.1 2.1-1.1 2.2 0 2.6 1.4 2.6 3.2v3.9h-2v-3.5c0-.8 0-1.9-1.2-1.9-1.2 0-1.4.9-1.4 1.8v3.6h-2v-7z"
      />
    </svg>
  );
}

function Founders() {
  const founders = [
    {
      name: "Winston Crooker",
      initials: "WC",
      role: "Chief Executive Officer",
      tag: "Founder &middot; CEO",
      blurb: "Sets the path. Walks it. Decides what counts as the way and what counts as noise.",
      href: "https://www.linkedin.com/in/winstoncrooker/",
      img: "uploads/winston.png",
    },
    {
      name: "CT Crooker",
      initials: "CT",
      role: "Chief Technology Officer",
      tag: "Founder &middot; CTO",
      blurb: "Builds the path. Designs the systems. Translates pattern into shipping software the day after we see it.",
      href: "https://www.linkedin.com/in/ctcrooker/",
      img: "uploads/ct.png",
    },
  ];
  return (
    <section className="section founders" id="team">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="eyebrow">[06] Founders</div>
            <h2>The two <span className="ser">at the helm</span>.</h2>
          </div>
          <div className="right">
            <p>
              Crooker is a family-named enterprise. Two founders, one point of view, no committee. Every engagement reports here.
            </p>
          </div>
        </div>
        <div className="founders-grid">
          {founders.map((f, i) => (
            <a
              key={i}
              className="founder-card"
              href={f.href}
              target="_blank"
              rel="noopener noreferrer"
              aria-label={`${f.name} on LinkedIn`}
            >
              <div className="founder-card-top">
                <div className="founder-avatar" aria-hidden>
                  {f.img && (
                    <img
                      src={f.img}
                      alt=""
                      onError={(e) => { e.currentTarget.style.display = "none"; }}
                    />
                  )}
                  <span className="founder-initials">{f.initials}</span>
                </div>
                <LinkedInGlyph />
              </div>
              <div className="founder-name">{f.name}</div>
              <div className="founder-role">{f.role}</div>
              <div className="founder-blurb">{f.blurb}</div>
              <div className="founder-cta">
                <span dangerouslySetInnerHTML={{ __html: f.tag }} />
                <span className="founder-link">
                  View on LinkedIn
                  <svg className="arrow" width="12" height="12" viewBox="0 0 12 12" fill="none">
                    <path d="M3 9L9 3M9 3H4M9 3V8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Studio — generic, no fake names ===== */
function Studio() {
  const tiles = [
    { lbl: "PRACTICE", h: "No-code custom SaaS", p: "Bespoke internal software, stood up at the pace operators actually need." },
    { lbl: "PRACTICE", h: "Security risk", p: "Evaluation, posture, threat modeling, and the remediation engineering work itself." },
    { lbl: "PRACTICE", h: "Adversarial agentic fabric", p: "Red-team-first multi-agent systems. Hardened against the failure modes that matter." },
    { lbl: "PRACTICE", h: "Engineering leadership", p: "Fractional architecture and technical diligence for teams that need senior judgment in the room." },
  ];
  return (
    <section className="section" id="studio">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="eyebrow">[06] The studio</div>
            <h2>Small <span className="ser">by design</span>.</h2>
          </div>
          <div className="right">
            <p>
              Crooker is a senior-only practitioner studio. We don’t run a
              pyramid, we don’t resell other people’s models, and we don’t
              bill associates at staff rates. The team that pitches is the
              team that ships.
            </p>
          </div>
        </div>
        <div className="team">
          {tiles.map((m, i) => (
            <div className="member" key={i}>
              <div className="avatar-ph">// senior practitioner</div>
              <div className="role">{m.lbl}</div>
              <div className="name">{m.h}</div>
              <div className="bio">{m.p}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== FAQ — softened, no fabricated specifics ===== */
function FAQ() {
  const rows = [
    {
      q: <>What <span className="ser">work</span> do you actually do?</>,
      a: "Three focused practices: no-code custom SaaS, security risk evaluation and remediation, and adversarial agentic fabric. Everything else is in support of those three.",
    },
    {
      q: <>Are you <span className="ser">a consultancy</span>, an agency, or an enterprise?</>,
      a: "An enterprise. We build products. We work on a small number of engagements at a time, with senior practitioners delivering the work end-to-end. No pyramid model, no juniors billed at staff rates, no offshoring.",
    },
    {
      q: <>Products or <span className="ser">services</span>?</>,
      a: "Products first. We build them, ship them, run them. We also adapt product deployments for customers when the fit calls for it — same senior team, same standards. Code is an implementation detail; we move at AI speed to pivot, expand, or drop with agility.",
    },
    {
      q: <>What does an <span className="ser">engagement</span> look like?</>,
      a: "Fixed scope, fixed senior team. We start with a short diagnostic, build the thinnest end-to-end slice that proves the system can win on your real data, then harden, instrument, and hand it off to your platform team.",
    },
    {
      q: <>Do you work in <span className="ser">regulated</span> environments?</>,
      a: "We design engagements for enterprise security and procurement from the start. VPC, on-prem, custom DPAs, custom MSAs. Talk to us about your specific posture and we’ll tell you honestly whether we’re a fit.",
    },
    {
      q: <>What <span className="ser">technology</span> do you build on?</>,
      a: "Whichever stack wins on your benchmark. We are model-agnostic and platform-agnostic by principle. Frontier closed-weights, open-weights, fine-tunes, distillations, and the no-code primitives that compose well with them.",
    },
    {
      q: <>How do we <span className="ser">start</span>?</>,
      a: "Send a paragraph about the system you’re trying to ship and the outcome you want. We’ll reply with a short, honest assessment of whether and how we can help.",
    },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="eyebrow">[07] Frequently asked</div>
            <h2>Things people <span className="ser">actually</span> ask.</h2>
          </div>
          <div className="right">
            <p>
              If your question isn’t here, the fastest path is a short note.
              We read everything that comes through and reply ourselves.
            </p>
          </div>
        </div>
        <div className="faq">
          {rows.map((r, i) => {
            const toggle = () => setOpen(open === i ? -1 : i);
            return (
              <div
                className="faq-row"
                key={i}
                onClick={toggle}
                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } }}
                role="button"
                tabIndex={0}
                aria-pressed={open === i}
              >
                <div className="n">{String(i + 1).padStart(2, "0")} /</div>
                <div className="q">{r.q}</div>
                <div className="a" style={{ opacity: open === i ? 1 : 0.55 }}>{r.a}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ===== CTA ===== */
function CTA() {
  return (
    <section className="cta" id="contact">
      <div className="shell">
        <div className="cta-card">
          <div className="eyebrow cta-eyebrow" style={{ position: "relative" }}>
            [08] // Get in touch
          </div>
          <h2>Let’s ship something <span className="ser">real</span>.</h2>
          <p>
            If you have a system that has to work, we should talk. Not a science fair. Not a pilot. Not a pitch deck. One short call, one
            written assessment, no obligation.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", position: "relative" }}>
            <a className="btn accent" href="mailto:hello@crooker.llc">
              hello@crooker.llc
              <svg className="arrow" width="12" height="12" viewBox="0 0 12 12" fill="none">
                <path d="M3 9L9 3M9 3H4M9 3V8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </a>
            <a className="btn ghost" href="#">Capabilities overview</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== Footer ===== */
function Footer() {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div>
            <h5>Crooker, LLC</h5>
            <p style={{ fontSize: 14, color: "var(--ink-2)", maxWidth: "36ch", margin: "0 0 16px" }}>
              A frontier AI products enterprise. We build, adapt, ship, and operate
              production-grade AI products at AI speed. Code is an implementation detail.
            </p>
          </div>
          <div>
            <h5>Enterprise</h5>
            <ul>
              <li><a href="#dna">DNA</a></li>
              <li><a href="#capabilities">Capabilities</a></li>
              <li><a href="#approach">Approach</a></li>
              <li><a href="#case">Hand-off</a></li>
              <li><a href="#team">Founders</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href="mailto:hello@crooker.llc">hello@crooker.llc</a></li>
              <li><a href="#contact">Schedule a call</a></li>
            </ul>
          </div>
          <div>
            <h5>Legal</h5>
            <ul>
              <li><a href="/terms.html">Terms</a></li>
              <li><a href="/privacy.html">Privacy</a></li>
            </ul>
          </div>
          <div>
            <h5>Index</h5>
            <ul>
              <li><a href="#top">Top</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
        </div>

        <div className="wordmark">
          Crooker<span className="ser">,&nbsp;</span><span className="acc">LLC.</span>
        </div>

        <div className="footer-bottom" id="bottom">
          <span>© CROOKER, LLC</span>
          <span>// FRONTIER AI PRODUCTS · BUILT, SHIPPED, OPERATED</span>
          <span>hello@crooker.llc</span>
        </div>
      </div>
    </footer>
  );
}

/* ===== App ===== */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "slate",
  "accent": "#9bc99c",
  "heroVariant": "a",
  "marquee": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme === "slate" ? "" : t.theme);
    document.documentElement.style.setProperty("--accent", t.accent);
  }, [t.theme, t.accent]);

  return (
    <>
      <a className="skip-link" href="#main">Skip to content</a>
      <Nav onContact={() => {
        const el = document.getElementById("contact");
        if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 64, behavior: "smooth" });
      }} />
      <main id="main">
      <Hero variant={t.heroVariant} />
      {t.marquee && <Marquee />}
      <DNA />
      <Services />
      <Horizon />
      <Approach />
      <Terrain />
      <Principles />
      <HowItCloses />
      <Founders />
      <FAQ />
      <CTA />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakRadio
            label="Palette"
            value={t.theme}
            options={[
              { value: "slate", label: "Slate" },
              { value: "frost", label: "Frost" },
              { value: "moss", label: "Moss" },
            ]}
            onChange={(v) => setTweak("theme", v)}
          />
          <TweakColor
            label="Accent"
            value={t.accent}
            options={["#9bc99c", "#7fb38e", "#a8d4be", "#bcd178", "#7fc7c7"]}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>
        <TweakSection label="Hero">
          <TweakRadio
            label="Headline"
            value={t.heroVariant}
            options={[
              { value: "a", label: "Edge" },
              { value: "b", label: "Decade" },
              { value: "c", label: "Taste" },
            ]}
            onChange={(v) => setTweak("heroVariant", v)}
          />
          <TweakToggle
            label="Capabilities marquee"
            value={t.marquee}
            onChange={(v) => setTweak("marquee", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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