/* HERO — chunky display type + interactive pixel-art hub */

const HUB_NODES = [
{
  x: 18, y: 22, label: "PRIORITIZE", color: "var(--orange)",
  body: "Sort the signal from the noise. Users triage competing requests, deadlines, and stakeholders to decide what matters most, and what can wait."
},
{
  x: 82, y: 18, label: "ANALYZE", color: "var(--blue)",
  body: "Work through messy data and ambiguous problems. Users interpret information, spot patterns, and reach defensible conclusions under time pressure."
},
{
  x: 86, y: 78, label: "COMMUNICATE", color: "var(--lime)",
  body: "Translate complexity into clarity. Users draft messages, brief stakeholders, and present recommendations to different audiences."
},
{
  x: 14, y: 78, label: "ADAPT", color: "var(--green)",
  body: "Use the right tool for the job. Users navigate AI assistants, software, and unfamiliar resources to get work done efficiently."
}];


function PixelHub() {
  const [hover, setHover] = React.useState(null); // index of hovered node
  const [tap, setTap] = React.useState(null); // tapped node (mobile)
  const active = tap !== null ? tap : hover;

  // Tooltip placement per quadrant — push outward from the card
  const tipPos = (n, i) => {
    const right = n.x > 50;
    const bottom = n.y > 50;
    return {
      left: right ? "auto" : "calc(100% + 14px)",
      right: right ? "calc(100% + 14px)" : "auto",
      top: bottom ? "auto" : "0",
      bottom: bottom ? "0" : "auto"
    };
  };

  return (
    <div className="relative w-full aspect-square max-w-[520px] mx-auto">
      <div className="absolute inset-0 border-2 border-ink bg-cream-2 hs overflow-visible">
        {/* grid */}
        <svg className="absolute inset-0 w-full h-full opacity-30" viewBox="0 0 100 100" preserveAspectRatio="none">
          {Array.from({ length: 10 }).map((_, i) =>
          <line key={"h" + i} x1="0" x2="100" y1={i * 10} y2={i * 10} stroke="#141214" strokeWidth="0.2" />
          )}
          {Array.from({ length: 10 }).map((_, i) =>
          <line key={"v" + i} y1="0" y2="100" x1={i * 10} x2={i * 10} stroke="#141214" strokeWidth="0.2" />
          )}
        </svg>

        {/* dashed paths */}
        <svg className="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
          {HUB_NODES.map((n, i) => {
            const isActive = active === i;
            return (
              <line key={i} x1="50" y1="50" x2={n.x} y2={n.y}
              stroke={isActive ? "#2EC2DB" : "#111214"}
              strokeWidth={isActive ? "1.4" : "0.8"}
              strokeDasharray="2 2"
              style={{ transition: "stroke .2s, stroke-width .2s" }} />);

          })}
        </svg>

        {/* nodes */}
        {HUB_NODES.map((n, i) => {
          const isActive = active === i;
          return (
            <div key={i}
            className="absolute -translate-x-1/2 -translate-y-1/2"
            style={{ left: `${n.x}%`, top: `${n.y}%`, zIndex: isActive ? 60 : 1 }}>
              <button
                type="button"
                onMouseEnter={() => setHover(i)}
                onMouseLeave={() => setHover(null)}
                onFocus={() => setHover(i)}
                onBlur={() => setHover(null)}
                onClick={() => setTap(tap === i ? null : i)}
                aria-label={n.label}
                className="flex flex-col items-center gap-1 outline-none"
                style={{
                  transform: isActive ? "scale(1.12)" : "scale(1)",
                  transition: "transform .2s ease"
                }}>
                <div className="w-10 h-10 border-2 border-ink hs-sm hop"
                style={{
                  background: n.color,
                  animationDelay: `${i * 0.2}s`,
                  boxShadow: isActive ? "3px 3px 0 0 #2EC2DB" : undefined
                }} />
                <div className="font-mono text-[10px] bg-ink text-cream px-1.5 py-0.5">{n.label}</div>
              </button>

              {/* tooltip */}
              {isActive &&
              <div
                role="tooltip"
                className="absolute z-50 w-[200px] sm:w-[220px] border-2 border-ink bg-cream p-3 hs-sm up-in"
                style={tipPos(n, i)}>
                  <div className="flex items-start justify-between gap-2 mb-1">
                    <div className="font-mono text-[10px] flex items-center gap-1.5">
                      <span className="w-2 h-2" style={{ background: n.color }} />
                      {n.label}
                    </div>
                    {tap === i &&
                  <button
                    onClick={(e) => {e.stopPropagation();setTap(null);}}
                    className="font-mono text-[10px] -mt-1 -mr-1 px-1 hover:bg-ink hover:text-cream"
                    aria-label="Close">×</button>
                  }
                  </div>
                  <p className="font-mono text-[11px] leading-relaxed text-ink-2">{n.body}</p>
                </div>
              }
            </div>);

        })}

        {/* hub = logo (interactive) */}
        {(() => {
          const isHubActive = active === "hub";
          return (
            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10"
              style={{ zIndex: isHubActive ? 60 : 10 }}>
              <button
                type="button"
                onMouseEnter={() => setHover("hub")}
                onMouseLeave={() => setHover(null)}
                onFocus={() => setHover("hub")}
                onBlur={() => setHover(null)}
                onClick={() => setTap(tap === "hub" ? null : "hub")}
                aria-label="cubicle"
                className="flex flex-col items-center outline-none"
                style={{
                  transform: isHubActive ? "scale(1.12)" : "scale(1)",
                  transition: "transform .2s ease"
                }}>
                <div className="border-2 border-ink bg-cream p-2 hs"
                  style={{ boxShadow: isHubActive ? "6px 6px 0 0 #2EC2DB" : undefined, transition: "box-shadow .2s ease" }}>
                  <img src={window.__resources.logo} className="w-24 h-24 md:w-28 md:h-28 pixelated" alt="" />
                </div>
                <div className="mt-2 font-mono text-[11px] bg-orange text-cream border-2 border-ink px-2 py-0.5">★ CUBICLE ★</div>
              </button>

            </div>);
        })()}

        {/* corner stamps */}
        <div className="absolute top-2 left-2 font-mono text-[10px] bg-ink text-cream px-1.5 py-0.5 z-10">TEST CANDIDATE'S ABILITY TO:</div>
        <div className="absolute top-2 right-2 font-mono text-[10px] text-ink z-10">⬤ LIVE</div>
        <div className="absolute bottom-2 left-2 font-mono text-[10px] text-ink/70 z-10">↳ hover nodes for details</div>
        <div className="absolute bottom-2 right-2 font-mono text-[10px] text-ink opacity-60 z-10">zoom 100%</div>
      </div>
    </div>);

}

function Hero() {
  return (
    <section id="hero" data-snap className="relative pt-28 md:pt-32 pb-16 md:pb-24">
      <div className="max-w-[1400px] mx-auto px-5 md:px-8 flex items-center justify-between font-mono text-sm md:text-base mb-8 md:mb-12" aria-hidden="true">
        <span>01 / HOME</span>
        <span className="flex items-center gap-2"><span className="w-2 h-2 bg-orange" />CAMBRIDGE, MA · MIT</span>
      </div>

      <div className="max-w-[1400px] mx-auto px-5 md:px-8 grid lg:grid-cols-12 gap-8 lg:gap-12 items-center">
        <div className="lg:col-span-7">
          <h1 className="font-display font-bold leading-[0.95] tracking-tight text-[44px] sm:text-[64px] lg:text-[88px] xl:text-[104px]">
            See how people <span className="relative inline-block">
              <span className="relative z-10">actually</span>
              <span className="absolute left-0 right-0 bottom-1 h-3 md:h-5 bg-orange -z-0" aria-hidden />
            </span> work with AI
          </h1>

          <p className="mt-6 md:mt-8 max-w-[640px] text-lg md:text-xl leading-relaxed text-ink-2">cubicle is a simulation-based assessment platform for evaluating AI skills, whether you're hiring for a new role or developing your existing team. Through short, scenario-based tasks, you see how people actually work.

          </p>

          <div className="mt-8 flex flex-wrap items-center gap-4">
            <a href="https://form.typeform.com/to/AQnu6FVK" target="_blank" rel="noopener noreferrer"
            className="inline-flex items-center gap-3 font-mono text-sm uppercase tracking-wider bg-ink text-cream border-2 border-ink px-5 py-4 hs-orange btn-chunky btn-chunky-cream">
              Book a demo <span className="arr">→</span>
            </a>
            <a href="#how" onClick={(e) => {e.preventDefault();document.getElementById('how').scrollIntoView({ behavior: 'smooth' });}}
            className="inline-flex items-center gap-3 font-mono text-sm uppercase tracking-wider border-2 border-ink px-5 py-4 hs-sm btn-chunky bg-cream">
              See how it works <span className="arr">→</span>
            </a>
          </div>

          <div className="mt-10 flex flex-wrap items-center gap-6 font-mono text-xs text-ink-2">
            <span className="flex items-center gap-2"><span className="w-3 h-3 bg-green" />Built at MIT</span>
            <span className="flex items-center gap-2"><span className="w-3 h-3 bg-orange" />Founded by ex-consultants</span>
            <span className="flex items-center gap-2"><span className="w-3 h-3 bg-blue" />Pilots now open</span>
          </div>
        </div>

        <div className="lg:col-span-5">
          <PixelHub />
        </div>
      </div>

      {/* marquee ticker */}
      <div className="mt-16 md:mt-24 border-y-2 border-ink bg-ink text-cream overflow-hidden">
        <div className="flex marq whitespace-nowrap py-3 font-mono text-sm">
          {Array.from({ length: 2 }).map((_, k) =>
          <div key={k} className="flex items-center gap-8 px-4 shrink-0">
              <span className="text-blue font-bold">◆ AUTOMATED SCORING</span>
              <span>◆ PERSONALIZED ASSESSMENTS</span>
              <span>◆ DETAILED RUBRICS</span>
              <span className="text-blue font-bold">◆ ROLE-SPECIFIC SIMULATIONS</span>
              <span>◆ REAL CLIENT SCENARIOS</span>
              <span>◆ INSTANT FEEDBACK</span>
              <span className="text-blue font-bold">◆ CUSTOM SCENARIO BUILDER</span>
              <span>◆ BENCHMARK REPORTS</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

window.Hero = Hero;