// Variation C — Noir editorial
function HeroNoir() {
  const format = (typeof window !== "undefined" && window.COC_STATE?.taglineFormat) || "editorial";
  const blocking = (typeof window !== "undefined" && window.COC_STATE?.blocking) || "A";

  const Eyebrow = () => (
    <div className="noir-eyebrow">
      <span className="noir-dot" />
      <span>hacking the Gibson · since 2015</span>
    </div>
  );

  const Title = () => (
    <div className={`noir-title-wrap noir-fmt-${format}`}>
      <TaglineFormat format={format} />
    </div>
  );

  const Lede = () => (
    <div className="noir-lede">
      <p className="noir-lede-lead">
        We are a boutique offensive security firm retained by organizations to conduct assessments of the systems they most depend on.
      </p>
      <p className="noir-lede-body">
        Rooted in the hacker ethos of the 80s and 90s, we leverage a relentless technical curiosity — a refusal to accept a system at face value — and direct it, under contract, at the defenses orgs have paid to trust.
      </p>
      <p className="noir-lede-coda">
        The same impulse that was once criminalized is, in practice, the most reliable way to identify the exposures security teams care about.
      </p>
    </div>
  );

  const Meta = () => (
    <div className="noir-meta">
      <div className="noir-meta-row">
        <span className="noir-k">operating</span>
        <span className="noir-v">11 years · since 2015</span>
      </div>
      <div className="noir-meta-row">
        <span className="noir-k">sectors</span>
        <span className="noir-v noir-v-stack">
          <span>finance · defense · healthcare</span>
          <span>gov · saas · retail · media</span>
          <span>education · logistics</span>
        </span>
      </div>
    </div>
  );

  const Cta = () => (
    <div className="noir-cta">
      <a className="noir-btn" href="#contact">Request an engagement</a>
      <a className="noir-link" href="#services">View the practice →</a>
    </div>
  );

  const Footline = () => (
    <div className="noir-footline">
      <span className="noir-foot-quote">“ my <span className="noir-foot-mark">crime</span> is that <span className="noir-foot-mark">of</span> <span className="noir-foot-mark">curiosity</span> ”</span>
      <span className="noir-foot-cite">— the hacker's manifesto, 1986</span>
    </div>
  );

  return (
    <section className="hero-noir">
      <div className={`noir-grid noir-block-${blocking}`}>
        <div className="noir-rule noir-rule-top" />
        <Eyebrow />

        {blocking === "A" && (
          <>
            <div className="nb-left">
              <Title />
              <Meta />
            </div>
            <div className="nb-right">
              <Lede />
              <Cta />
            </div>
          </>
        )}

        {blocking === "B" && (
          <>
            <div className="nb-full"><Title /></div>
            <div className="nb-left"><Meta /><Cta /></div>
            <div className="nb-right"><Lede /></div>
          </>
        )}

        {blocking === "C" && (
          <>
            <div className="nb-left">
              <Title />
              <Cta />
            </div>
            <div className="nb-right">
              <Lede />
            </div>
            <div className="nb-band"><Meta /></div>
          </>
        )}

        {blocking === "D" && (
          <>
            <div className="nb-full nb-center"><Title /></div>
            <div className="nb-col-a"><Meta /></div>
            <div className="nb-col-b"><Lede /></div>
            <div className="nb-col-c"><Cta /></div>
          </>
        )}

        <div className="noir-rule noir-rule-bottom" />
        <Footline />
      </div>
    </section>
  );
}

function TaglineFormat({ format }) {
  if (format === "serif") {
    return (
      <h1 className="noir-title tg-serif">
        We identify the <span className="noir-italic" style={{ color: "var(--accent)" }}>weaknesses</span><br />
        your adversaries<br />
        are counting on.
      </h1>
    );
  }
  if (format === "mono") {
    return (
      <h1 className="noir-title tg-mono">
        <span className="tg-mono-tag">// tagline</span>
        <span className="tg-mono-line">we identify the weaknesses</span>
        <span className="tg-mono-line">your adversaries</span>
        <span className="tg-mono-line">are counting on.</span>
      </h1>
    );
  }
  if (format === "display") {
    return (
      <h1 className="noir-title tg-display">
        <span>we identify</span>
        <span>the <em className="tg-display-accent">weaknesses</em></span>
        <span>your adversaries</span>
        <span>are counting on</span>
      </h1>
    );
  }
  if (format === "inline") {
    return (
      <h1 className="noir-title tg-inline">
        <span className="tg-inline-brack">[</span>
        <span className="tg-inline-body">we identify the weaknesses your adversaries are counting on</span>
        <span className="tg-inline-brack">]</span>
      </h1>
    );
  }
  if (format === "manifesto") {
    return (
      <h1 className="noir-title tg-manifesto">
        <span className="tg-m-num">01 —</span>
        <span className="tg-m-body">
          We identify the <span className="tg-m-hl">weaknesses</span> your adversaries are counting on.
        </span>
      </h1>
    );
  }
  // editorial (default)
  return (
    <h1 className="noir-title tg-editorial">
      <span className="noir-mono">We identify</span><br />
      <span className="noir-serif">the weaknesses</span><br />
      <span className="noir-serif noir-italic">your adversaries</span><br />
      <span className="noir-serif">are counting on.</span>
    </h1>
  );
}

window.HeroNoir = HeroNoir;
window.TaglineFormat = TaglineFormat;