/* Nav + Hero + HeroReport + LogoStrip + Marquee */

const CTA_URL    = "https://nexthire-org.vercel.app/";
const DEMO_URL   = "https://calendly.com/ajayaditya-dev/30min";
const CONTACT_EMAIL = "ajayaditya.dev@gmail.com";

const PRIMARY_CTA   = "Hire with confidence";
const SECONDARY_CTA = "Book a 30-min demo";

function MarkSVG({ size = 28 }) {
  return (
    <svg className="mark-svg" style={{ width: size, height: size }} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="32" height="32" rx="7" fill="#FF6A00" />
      <path d="M9.5 22.5V9.5h2.4l8.2 9V9.5h2.4v13h-2.4l-8.2-9v9H9.5z" fill="#FFE8D6" />
    </svg>
  );
}

function CTAs({ align = "left", inverted = false, primaryLabel = PRIMARY_CTA, secondaryLabel = SECONDARY_CTA }) {
  const justify = align === "center" ? "center" : "flex-start";
  return (
    <div className="ctas" >
      <a
        className={`nh-btn ${inverted ? "nh-btn--ember-on-dark" : "nh-btn--primary"}`}
        href={CTA_URL}
        target="_blank"
        rel="noopener"
      >
        {primaryLabel} <span className="nh-btn__arrow">→</span>
      </a>
    </div>
  );
}

/* Nav — no anchor links, sans-serif wordmark, 2 CTAs ─────────── */
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav className={`nh-nav ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="nh-container">
        <div className="nh-nav__inner">
          <div className="nh-nav__left">
            <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
              <MarkSVG size={26} />
              <span className="nh-wordmark" style={{ fontSize: 19 }}>NextHire</span>
            </a>
          </div>
          <div className="nh-nav__right">
            <a
              className="nh-btn nh-btn--ghost nh-btn--small nh-btn--nav-cta"
              href={DEMO_URL}
              target="_blank"
              rel="noopener"
              aria-label={SECONDARY_CTA}
              title={SECONDARY_CTA}
            >
              <svg className="nh-btn__icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <rect x="3" y="4" width="18" height="18" rx="2" />
                <line x1="16" y1="2" x2="16" y2="6" />
                <line x1="8" y1="2" x2="8" y2="6" />
                <line x1="3" y1="10" x2="21" y2="10" />
              </svg>
              <span className="nh-btn__label">{SECONDARY_CTA}</span>
            </a>
            <a
              className="nh-btn nh-btn--primary nh-btn--small nh-btn--nav-cta nh-btn--nav-cta--primary"
              href={CTA_URL}
              target="_blank"
              rel="noopener"
              aria-label={PRIMARY_CTA}
              title={PRIMARY_CTA}
            >
              <span className="nh-btn__label-short" aria-hidden="true">Try now</span>
              <span className="nh-btn__label">{PRIMARY_CTA}</span>
              <span className="nh-btn__arrow" aria-hidden="true">→</span>
            </a>
          </div>
        </div>
      </div>
    </nav>
  );
}

/* Hero — centered, lightly rephrased, 2 CTAs, no meta, no side visual ─ */
function Hero() {
  return (
    <section className="hero hero--centered" id="top">
      <div className="nh-container">
        <div className="hero__copy hero__copy--centered">
          <span className="nh-pill">
            <span className="nh-pill__dot"></span>
            Founding-customer offer · 50% off every plan
          </span>
          <h1 className="display-2xl hero__h1 hero__h1--centered">
            Hire the engineer who{" "}
            <span className="italic-emphasis">
              fixes the 2&nbsp;AM prod bug.
            </span>{" "}
            Not the one who shipped it.
          </h1>
          <p className="lead body-xl">
            NextHire hands candidates a bug fix, their environment, no constraints. See how they'd engineer on your team on day&nbsp;0.
          </p>
          <CTAs align="center" />
        </div>
      </div>
    </section>
  );
}

/* HeroReport — radar left, areas right, full-bleed below the hero ─── */
const REPORT_AREAS = [
  {
    nm: 'Hypothesis Formation',
    band: 'STRONG',
    lvl: 3,
    summary: 'Read the failure trace before touching code · ruled out three plausible causes from logs alone · landed on the right one in two reads.',
  },
  {
    nm: 'Tool Metacognition',
    band: 'STRONG',
    lvl: 3,
    summary: "Caught Claude's wrong import path on first read · re-prompted with narrower scope · fixed manually rather than re-prompting until green.",
  },
  {
    nm: 'Mental Model',
    band: 'STRONG',
    lvl: 3,
    summary: 'Traced data flow across two services before editing either · explained the retry loop in their own words before changing it.',
  },
  {
    nm: 'Fix Design',
    band: 'COMPETENT',
    lvl: 2,
    summary: 'Chose idempotency over circuit-breaking · scoped the change to the boundary · acceptable tradeoffs left as code comments for review.',
  },
  {
    nm: 'Testing & Verification',
    band: 'COMPETENT',
    lvl: 2,
    summary: 'Wrote a regression test before the commit · covered the timeout path · missed the partial-write path until prompted.',
  },
  {
    nm: 'Code Review',
    band: 'COMPETENT',
    lvl: 2,
    summary: "Self-flagged two assumptions in the PR description · didn't accept the AI's first diff · pushed back on a suggestion that ignored the schema.",
  },
  {
    nm: 'Safety & Robustness',
    band: 'DEVELOPING',
    lvl: 1,
    summary: 'Hardcoded a Stripe key in an .env tracked file · noticed and rotated, but only on the second pass · would benefit from secret-scan habits.',
  },
  {
    nm: 'Process Discipline',
    band: 'DEVELOPING',
    lvl: 1,
    summary: 'Skipped the failing test rather than fixing it on first run · came back to it after the build failed · pattern repeated twice in session.',
  },
];

function HeroReport() {
  const { RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, ResponsiveContainer, Legend } = window.Recharts || {};

  const radarData = [
    { k: 'hyp', candidate: 1.0,  baseline: 0.75 },
    { k: 'tm',  candidate: 1.0,  baseline: 0.5  },
    { k: 'mm',  candidate: 1.0,  baseline: 0.5  },
    { k: 'fd',  candidate: 0.75, baseline: 0.75 },
    { k: 'tv',  candidate: 0.75, baseline: 0.5  },
    { k: 'cr',  candidate: 0.75, baseline: 0.5  },
    { k: 'sr',  candidate: 0.5,  baseline: 0.5  },
    { k: 'pd',  candidate: 0.5,  baseline: 0.75 },
  ];

  return (
    <section className="hero-report" id="report">
      <div className="nh-container">
        <div className="hero-report__card">
          <div className="hero-report__head">
            <div>
              <span className="hero-report__title">candidate-9af3 · Senior Backend</span>
              <span className="hero-report__sub">live report · 5-minute read · async session</span>
            </div>
            <span className="hero-report__tag">SAMPLE</span>
          </div>

          <div className="hero-report__body">
            <div className="hero-report__chart">
              {RadarChart ? (
                <ResponsiveContainer width="100%" height={420}>
                  <RadarChart data={radarData} cx="50%" cy="52%" outerRadius="78%">
                    <PolarGrid stroke="#D8D5CD" strokeOpacity={0.7} />
                    <PolarAngleAxis dataKey="k" tick={false} />
                    <PolarRadiusAxis angle={90} domain={[0, 1]} tick={false} axisLine={false} />
                    <Radar name="Senior baseline" dataKey="baseline" stroke="#5A6270" fill="#5A6270" fillOpacity={0.06} strokeWidth={1.25} />
                    <Radar name="This candidate" dataKey="candidate" stroke="#FF6A00" fill="#FF6A00" fillOpacity={0.18} strokeWidth={2} />
                    <Legend wrapperStyle={{ fontSize: 11, paddingTop: 12, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.04em' }} />
                  </RadarChart>
                </ResponsiveContainer>
              ) : (
                <div className="radar-loading">Loading evidence chart…</div>
              )}
            </div>

            <ul className="hero-report__areas">
              {REPORT_AREAS.map((a) => (
                <li key={a.nm} className={`hra lvl-${a.lvl}`}>
                  <div className="hra__row">
                    <span className="hra__name">{a.nm}</span>
                    <span className={`hra__band band-${a.lvl}`}>{a.band}</span>
                  </div>
                  <p className="hra__summary">{a.summary}</p>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Logo strip — built for any team that hires reliable devs ──── */
function LogoStrip() {
  return (
    <div className="logo-strip">
      <div className="nh-container">
        <p className="eyebrow logo-strip__eyebrow">
          Built for any team that wants reliable engineers, not vibe coders sneaking through the hiring pipeline noise.
        </p>
        <div className="logo-strip__row">
          <span>SENIOR-LED HIRING</span>
          <span>POST-AI ENGINEERING</span>
          <span>EVIDENCE OVER VIBES</span>
          <span>SHIP-READY ON DAY 0</span>
        </div>
      </div>
    </div>
  );
}

/* Marquee — replaced lookbook quote with painful unanswered questions ─ */
function Marquee() {
  const phrases = [
    <span key="a">what do they do <span className="em">when their tools produce wrong code?</span></span>,
    <span key="b">are they <span className="em">in charge of the system</span>, or is the system in charge of them?</span>,
    <span key="c">when prod breaks at <span className="em">2&nbsp;a.m.</span>, do they reach for the runbook or the prompt?</span>,
    <span key="d">do they catch the <span className="em">silent regression</span> before review does?</span>,
    <span key="e">can they tell when the AI is <span className="em">confidently wrong</span>?</span>,
    <span key="f">would you put them on call <span className="em">in week three?</span></span>,
  ];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee__track">
        {[...phrases, ...phrases, ...phrases].map((p, i) => <span key={i}>{p}</span>)}
      </div>
    </div>
  );
}

Object.assign(window, {
  Nav, Hero, HeroReport, LogoStrip, Marquee, MarkSVG, CTAs,
  CTA_URL, DEMO_URL, CONTACT_EMAIL, PRIMARY_CTA, SECONDARY_CTA,
});