/* global React */
/* Kestrel — terminal bodies for all 10 monitors + footer.
   Content is verbatim from brand-spec.md. Exposed on window for app.jsx. */

const P  = ({ children }) => <span className="prompt">{children}</span>;
const Sp = () => <span className="spacer"></span>;

const Bodies = {
  /* 01 — HERO / dispatch.no.i */
  "01": () => (
    <React.Fragment>
      <div className="line"><P>$ </P><span className="cmd">cat dispatch-no-i.txt</span></div>
      <Sp />
      <span className="txt lead">Your business has an attack surface.</span>
      <span className="txt lead">We watch it.</span>
      <Sp />
      <span className="rule">----------------------------------------</span>
      <Sp />
      <span className="txt">Every day, from the outside, no software</span>
      <span className="txt">to install. Same recon attackers run.</span>
      <Sp />
      <span className="rule">----------------------------------------</span>
      <Sp />
      <span className="meta">founded 2026   ·   semper observans</span>
    </React.Fragment>
  ),

  /* 02 — ABOUT / about.txt */
  "02": () => (
    <React.Fragment>
      <div className="line"><P>$ </P><span className="cmd">whoami</span></div>
      <Sp />
      <span className="txt lead">Kestrel is external attack-surface</span>
      <span className="txt lead">monitoring for small businesses.</span>
      <Sp />
      <span className="txt">Built by a bug bounty hunter who got</span>
      <span className="txt">tired of seeing SMBs breached by</span>
      <span className="txt">mistakes attackers spot in 20 minutes.</span>
      <Sp />
      <span className="txt">We package the workflow that pays out</span>
      <span className="txt">on HackerOne, for the businesses too</span>
      <span className="txt">small to hire someone to run it.</span>
    </React.Fragment>
  ),

  /* 03 — ORIGIN / origin.log */
  "03": () => (
    <React.Fragment>
      <div className="line"><P>$ </P><span className="cmd">git log --reverse --oneline | head -5</span></div>
      <Sp />
      <div className="line"><span className="accent">2025-12-04</span>  <span className="txt" style={{ display: "inline" }}>thought: "every SMB gets owned</span></div>
      <div className="line"><span className="note">{"            "}</span><span>by stuff that takes 20 min to spot"</span></div>
      <div className="line"><span className="accent">2026-01-08</span>  first crawler running locally</div>
      <div className="line"><span className="accent">2026-06-15</span>  this site, this dispatch</div>
      <div className="line"><span className="accent">{"          "}</span>  <span className="note">— watchtower opens —</span></div>
    </React.Fragment>
  ),

  /* 04 — WHAT WE WATCH / daily-sweep.sh */
  "04": () => {
    const checks = [
      ["subdomain_inventory", "every name you own + the ones you forgot"],
      ["cert_transparency_logs", "expiring or freshly issued in your name"],
      ["open_ports_external", "anything reachable from the internet"],
      ["vuln_known_cves", "exposed software with public exploits"],
      ["lookalike_domains", "typosquats phishing your customers"],
      ["leaked_credentials", "your domain in breach dumps"],
      ["exposed_storage", "S3 / GCS / Azure buckets gone public"],
      ["exposed_admin_panels", "/admin, /actuator, swagger, kibana"],
      ["dns_change_diff", "records edited since yesterday"],
      ["sender_reputation", "blocklists + DMARC drift"],
    ];
    return (
      <React.Fragment>
        <div className="line"><P>$ </P><span className="cmd">./sweep --target acme.example --daily</span></div>
        <Sp />
        {checks.map(([name, note]) => (
          <div className="chk" key={name}>
            <span className="ok">[✓]</span>
            <span className="chk__name">{name}</span>
            <span className="note">· {note}</span>
          </div>
        ))}
        <Sp />
        <span className="note">// 14 checks queued for tomorrow 04:00 UTC</span>
      </React.Fragment>
    );
  },

  /* 05 — HOW ALERTS ARRIVE / inbox/03:47.eml */
  "05": () => (
    <React.Fragment>
      <div className="eml__h"><span className="label">From:</span><span className="val">kestrel &lt;alerts@kestrel-sec.com&gt;</span></div>
      <div className="eml__h"><span className="label">To:</span><span className="val">you &lt;hello@acme.example&gt;</span></div>
      <div className="eml__h"><span className="label">Subject:</span><span className="subj">A new database server appeared on the internet.</span></div>
      <div className="eml__h"><span className="label">At:</span><span className="val">03:47:12 UTC</span></div>
      <Sp />
      <div className="line"><span className="label">host: </span><span className="lead">db-staging.acme.example</span><span className="label">   port 3306</span></div>
      <Sp />
      <span className="txt">That's a MariaDB 10.0.36 sitting open. Either</span>
      <span className="txt">an admin meant to wall it off, or someone just</span>
      <span className="txt">turned it on. Either way, attackers will see</span>
      <span className="txt">it within the hour.</span>
      <Sp />
      <span className="findbtn">[ open finding → ]</span>
    </React.Fragment>
  ),

  /* 06 — WHY PLAIN ENGLISH / why.txt */
  "06": () => (
    <React.Fragment>
      <div className="line"><span className="warn">BAD</span> <span className="note">(other tools):</span></div>
      <span className="txt note">{"  \"CVE-2018-XXXX — MariaDB 10.0.36 vulnerability,"}</span>
      <span className="txt note">{"   CVSS 7.5, exploitation possible via XYZ...\""}</span>
      <Sp />
      <div className="line"><span className="ok">GOOD</span> <span className="note">(kestrel):</span></div>
      <span className="txt lead">{"  \"A new database server appeared on the internet."}</span>
      <span className="txt lead">{"   Attackers will see it within the hour.\""}</span>
      <Sp />
      <span className="rule">----------------------------------------</span>
      <Sp />
      <span className="txt">No CVSS jargon. No false-positive noise. Just</span>
      <span className="txt">what changed, what it means, what to do.</span>
    </React.Fragment>
  ),

  /* 07 — WHAT WE DON'T DO / boundaries.txt */
  "07": () => (
    <React.Fragment>
      <div className="line"><P>$ </P><span className="cmd">cat not-this.txt</span></div>
      <Sp />
      <span className="txt">We don't install anything on your boxes.</span>
      <span className="txt">We don't ask for API keys or credentials.</span>
      <span className="txt">We don't run active exploits.</span>
      <span className="txt">We don't sell findings to the highest bidder.</span>
      <span className="txt">We don't fabricate alerts to look busy.</span>
      <Sp />
      <span className="txt lead">Most weeks, nothing changes. That's good.</span>
      <span className="txt">You'll get a one-line note that says so.</span>
    </React.Fragment>
  ),

  /* 08 — PRICING / pricing.tsv */
  "08": () => (
    <React.Fragment>
      <div className="line"><P>$ </P><span className="cmd">cat pricing.tsv</span></div>
      <Sp />
      <div className="ptab">
        <span className="h">plan</span><span className="h">price</span><span className="h">for</span>
        <span className="ptab__div">─────────────────────────────────────────────</span>
        <span className="pname">watch</span><span className="pprice">€20/mo</span><span className="pfor">one domain · solo shop</span>
        <span className="pname reco-row">watchtower</span><span className="pprice reco-row">€50/mo</span>
        <span className="pfor reco-row">up to 5 domains · team  <span className="reco">◀ recommended</span></span>
      </div>
      <Sp />
      <div className="line"><P>$ </P><span className="note"># both plans run the same recon</span></div>
      <div className="line"><P>$ </P><span className="note"># 7-day free trial · cancel anytime</span></div>
    </React.Fragment>
  ),

  /* 09 — ROADMAP / roadmap.md */
  "09": () => (
    <React.Fragment>
      <div className="line"><P>$ </P><span className="cmd">cat roadmap.md</span></div>
      <Sp />
      <div className="line"><span className="crit">## Q3 2026</span></div>
      <span className="txt">- slack delivery for watchtower+</span>
      <span className="txt">- csv + json exports</span>
      <span className="txt">- quarterly founder call</span>
      <Sp />
      <div className="line"><span className="crit">## Q4 2026</span></div>
      <span className="txt">- per-domain subaccounts</span>
      <span className="txt">- shared dashboard for agencies</span>
      <Sp />
      <div className="line"><span className="note">## not on the roadmap</span></div>
      <span className="txt note">- mobile app · we email you when it matters</span>
      <span className="txt note">- "platform" features · we're opinionated</span>
      <span className="txt note">- ai chatbot · we're the ai, you're the human</span>
    </React.Fragment>
  ),

  /* 10 — BEGIN A WATCH / sign-up.sh
     The ASCII box is interactive: clicking it dispatches the same
     kestrel:opensignup event the sticky CTA does, so either entry
     point opens the signup modal. */
  "10": () => {
    const openSignup = (e) => {
      if (e) e.preventDefault();
      document.dispatchEvent(new CustomEvent("kestrel:opensignup"));
    };
    return (
      <React.Fragment>
        <div className="line"><P>$ </P><span className="cmd">./begin-watch.sh --domain your-domain.example</span></div>
        <Sp />
        <div className="line"><span className="note">&gt; resolving DNS . . . . . . . . . . . . . . . . . . . . </span><span className="ok">[ ok ]</span></div>
        <div className="line"><span className="note">&gt; certificate transparency lookup . . . . . . . . . . . </span><span className="ok">[ ok ]</span></div>
        <div className="line"><span className="note">&gt; shodan + censys baseline . . . . . . . . . . . . . . . </span><span className="ok">[ ok ]</span></div>
        <div className="line"><span className="note">&gt; queued for the next sweep window . . . . . . . . . . </span><span className="ok">[ ok ]</span></div>
        <Sp />
        <div
          className="box nowrap signup-box"
          role="button"
          tabIndex={0}
          onClick={openSignup}
          onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") openSignup(e); }}
        >
          <div className="line">┌─────────────────────────────────────────────┐</div>
          <div className="line">│  <span className="accent">▸ begin a watch</span>  ·  <span className="head">€20 / month</span>            │</div>
          <div className="line">│     7-day trial   ·   cancel anytime        │</div>
          <div className="line">└─────────────────────────────────────────────┘</div>
        </div>
      </React.Fragment>
    );
  },
};

function Footer() {
  const cols = [
    ["product", [["pricing", "#"], ["sign in", "#"]]],
    ["company", [["about", "#"], ["contact", "#"]]],
  ];
  return (
    <footer className="footer">
      <div className="footer__status">
        <span className="led__dot"></span>
        <span>● kestrel.sweep · standby · semper observans</span>
      </div>
      <div className="footer__grid">
        <div className="footer__brand">
          <div className="footer__mark">
            <img src="assets/kestrel-logo.png" alt="Kestrel shield" />
            <div>
              <div className="footer__word">Kestrel-Sec</div>
              <div className="footer__sub">sec · the watchtower</div>
            </div>
          </div>
          <p className="footer__tag">
            External attack-surface monitoring for small businesses. Built by a
            bug bounty hunter.
          </p>
        </div>
        {cols.map(([title, links]) => (
          <div className="footer__col" key={title}>
            <h4>{title}</h4>
            <ul>
              {links.map(([label, href]) => (
                <li key={label}><a href={href} onClick={(e) => e.preventDefault()}>{label}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div className="footer__rule">
        <span>semper observans · MMXXVI</span>
        <span>kestrel-sec.com</span>
      </div>
    </footer>
  );
}

window.KestrelBodies = Bodies;
window.KestrelFooter = Footer;