/* global React */
/* global Aurora, HeroTopo, Stars, HeroHUD, BrandMark, Icons */
const { useEffect, useState, useRef } = React;

/* ===== Nav ===== */
function Nav({ onContact }) {
  return (
    <header className="nav">
      <div className="shell nav-inner">
        <a href="#top" className="brand">
          <BrandMark />
          <span>Crooker<span style={{ color: "var(--ink-3)", fontWeight: 400 }}>, LLC</span></span>
        </a>
        <nav className="nav-links">
          <a href="#dna">DNA</a>
          <a href="#capabilities">Capabilities</a>
          <a href="#approach">Approach</a>
          <a href="#case">Hand-off</a>
          <a href="#faq">FAQ</a>
          <a href="#bottom">Bottom</a>
        </nav>
        <span className="nav-spacer" />
        <span className="status-pill">
          <span className="live-dot" />
          ALREADY HERE
        </span>
        <button className="btn" onClick={onContact}>
          Get in touch
          <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>
        </button>
      </div>
    </header>
  );
}

/* ===== Hero ===== */
function Hero({ variant }) {
  const heads = {
    a: (
      <h1 className="hero-headline">
        We see <span className="ser">the patterns</span><br />
        a bit before the rest.<br />
        <span className="acc">We go.</span>
      </h1>
    ),
    b: (
      <h1 className="hero-headline">
        Everyone will get here<br />
        <span className="ser">eventually.</span><br />
        We are here <span className="acc">now.</span>
      </h1>
    ),
    c: (
      <h1 className="hero-headline">
        <span className="ser">Frontier</span> is a concept.<br />
        We <span className="acc">live it.</span>
      </h1>
    ),
  };

  return (
    <section className="hero" id="top">
      <div className="hero-bg">
        <HeroTopo />
        <Aurora />
        <Stars count={90} />
      </div>
      <HeroHUD />
      <div className="shell">
        <div className="hero-eyebrow-row">
          <span className="eyebrow">Crooker, LLC</span>
          <span className="tick">/</span>
          <span className="eyebrow">Frontier company</span>
          <span className="tick">/</span>
          <span className="eyebrow accent-eyebrow">Already here</span>
        </div>
        {heads[variant] || heads.a}
        <p className="hero-sub">
          Pattern. Risk. Reality. We read the next move a step early,
          weigh what it costs, and weave both into software that ships.
          Crooker is the frontier-AI enterprise for the few who refuse to wait
          for the cycle to turn.
        </p>
        <div className="hero-cta">
          <a href="#dna" className="btn">
            Read our DNA
            <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>
          </a>
          <a href="#contact" className="btn ghost">Start a conversation</a>
        </div>

        <div className="hero-meta">
          <div>
            <div className="v">Pattern<span className="acc-dot">.</span></div>
            <div className="k">Seen a bit before the rest</div>
          </div>
          <div>
            <div className="v">Risk<span className="acc-dot">.</span></div>
            <div className="k">Named, weighed, never elided</div>
          </div>
          <div>
            <div className="v">Reality<span className="acc-dot">.</span></div>
            <div className="k">Woven from both and shipped</div>
          </div>
          <div>
            <div className="v">Now<span className="acc-dot">.</span></div>
            <div className="k">Already here. Not getting there.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== Marquee ===== */
function Marquee() {
  const items = [
    "No-code custom SaaS", "Security risk evaluation", "Adversarial agentic fabric",
    "Threat modeling", "Red-team automation", "Continuous remediation",
    "LLM orchestration", "Tool-use protocols", "Evals &amp; guardrails",
    "Multi-agent simulation", "Policy-as-code", "Observability",
    "Identity &amp; access", "Secret hygiene", "Supply-chain integrity",
  ];
  const row = (
    <span>
      {items.map((s, i) => (
        <React.Fragment key={i}>
          <span>{s}</span>
          <span className="dot" />
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">
        {row}{row}
      </div>
    </div>
  );
}

/* ===== Logos ===== */
function Logos() {
  const fams = [
    { name: "Halcyon", kind: "FORTUNE 500 · FINANCIAL" },
    { name: "Northstar Robotics", kind: "ROBOTICS · SERIES C" },
    { name: "Meridian Health", kind: "HEALTHCARE · PUBLIC" },
    { name: "Vectorpath", kind: "DEVTOOLS · SERIES B" },
    { name: "Olive & Stone", kind: "RETAIL · GLOBAL" },
    { name: "Civic OS", kind: "GOVTECH · STATE" },
  ];
  return (
    <section className="logos">
      <div className="shell">
        <div className="logos-label">
          <span className="eyebrow">[01] // Trusted by operators at</span>
          <span className="eyebrow muted">// six of nine engagements under NDA</span>
        </div>
        <div className="logos-grid">
          {fams.map((f, i) => (
            <div key={i}>
              <div className="logo-ph">
                <span className="pname">{f.name}</span>
                <span>{f.kind}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Services ===== */
function Services() {
  const cards = [
    {
      n: "[CAP-01]",
      icon: "saas",
      title: "No-code custom",
      ser: "SaaS",
      body: "Software that meets you where you are, bends to how you work, and disappears into the doing, because real intelligence is invisible. Experience your passion, don’t fumble through screens. Just the system you needed, already there.",
      tags: ["Meets you where you are", "Bends to how you work", "Disappears into the doing"],
    },
    {
      n: "[CAP-02]",
      icon: "security",
      title: "Security risk",
      ser: "evaluation &amp; remediation",
      body: "See the threats hiding in plain sight, close the gaps before they’re exploited, and outpace attackers who never sleep. Security that finally moves first, runs fast, and wins.",
      tags: ["Threats in plain sight", "Close before exploit", "Outpace attackers"],
    },
    {
      n: "[CAP-03]",
      icon: "agentic",
      title: "Adversarial",
      ser: "agentic fabric",
      body: "Pursuit and resistance. Ask, counter, close. Find the fit, hold the line, feel the rush of everything falling into place. Wherever the participants are more than the sum of their parts, the payoff is waiting in the friction between them.",
      tags: ["Ask", "Counter", "Close", "Hold the line"],
    },
  ];
  return (
    <section className="section" id="capabilities">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="eyebrow">[02] Capabilities</div>
            <h2>What we <span className="ser">do</span>.</h2>
          </div>
          <div className="right">
            <p>
              Three focused practices, composed against your stack. We do not
              run boot camps, we do not resell other people’s software, and we
              do not bill juniors at staff rates. Every engagement is delivered
              by senior practitioners, end to end.
            </p>
          </div>
        </div>
        <div className="services services-3">
          {cards.map((c, i) => {
            const Icon = Icons[c.icon];
            return (
              <div className="service-card" key={i}>
                <div className="service-card-top">
                  <div className="num">{c.n}</div>
                  {Icon && <Icon />}
                </div>
                <h3>{c.title} <span className="ser" dangerouslySetInnerHTML={{ __html: c.ser }} /></h3>
                <p>{c.body}</p>
                <ul>
                  {c.tags.map((t, j) => <li key={j} dangerouslySetInnerHTML={{ __html: t }} />)}
                </ul>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ===== Approach ===== */
function Approach() {
  const steps = [
    {
      n: "STEP 01 · WEEK 0",
      h: "Listen.",
      p: "Architecture review, repo walkthrough, one offsite with your top engineers. We leave with a written hypothesis, not a deck.",
    },
    {
      n: "STEP 02 · WEEKS 1-2",
      h: "Prototype.",
      p: "We build the thinnest end-to-end slice that proves the system can win on your real data. No mocks, no synthetic vibes.",
    },
    {
      n: "STEP 03 · WEEKS 3-8",
      h: "Harden.",
      p: "Evals, tracing, cost guardrails, IaC, on-call runbook. The prototype becomes a service your platform team can actually own.",
    },
    {
      n: "STEP 04 · ONGOING",
      h: "Hand off.",
      p: "We staff your replacement: hiring loops, interview kits, architecture decision records. We measure success by the day you stop needing us.",
    },
  ];
  return (
    <section className="section" id="approach">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="eyebrow">[03] Operating system</div>
            <h2>An <span className="ser">opinionated</span> way to land AI in production.</h2>
          </div>
          <div className="right">
            <p>
              We borrowed the cadence from elite product orgs and the rigor from SRE.
              Four phases, sharp deliverables at every gate, and a written exit plan
              from day one. Nothing is precious; everything is reviewed.
            </p>
          </div>
        </div>
        <div className="approach">
          {steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="n">{s.n}</div>
              <h4>{s.h}</h4>
              <p>{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Marquee, Logos, Services, Approach });