/* ByteSiege Marketing — Agentic band, Enterprise, Deploy strip, How, CTA, Footer */

function AgenticBand() {
  const guards = [
    { icon:"repeat", b:"Deterministic core", s:"Repeatable scans that give the same results every run" },
    { icon:"sparkles", b:"AI-assisted triage", s:"AI helps rank and explain findings, so you act faster" },
    { icon:"flask-conical", b:"Autonomous testing", s:"Experimental AI that probes deeper, opt-in beta" },
    { icon:"user-check", b:"You stay in control", s:"Sensitive actions always wait for your sign-off" },
  ];
  return (
    <section className="section agentic" id="agentic">
      <div className="wrap agentic-grid">
        <div>
          <span className="eyebrow on-dark">Automation &amp; AI</span>
          <h2>Reliable by default. Smarter with AI.</h2>
          <p className="lead">Most of ByteSiege runs on deterministic, repeatable scans you can count on. On top of that, AI helps triage and prioritize findings, and our experimental autonomous testing digs deeper, always with you in control.</p>
          <div className="guards">
            {guards.map((g,i) => (
              <div className="g" key={i}>
                <Icon name={g.icon} cls="ic-18" />
                <div><b>{g.b}{g.beta && <span style={{ marginLeft:"7px", fontSize:"9.5px", fontWeight:800, letterSpacing:".06em", color:"var(--navy-950)", background:"var(--cyan-300)", padding:"1px 6px", borderRadius:"var(--r-pill)", verticalAlign:"middle" }}>BETA</span>}</b><span>{g.s}</span></div>
              </div>
            ))}
          </div>
        </div>
        <div className="trace">
          <div className="trace-h"><Icon name="activity" cls="ic-18" />Live activity · CTEM cycle<span className="live">● running</span></div>
          <div className="trace-body">
            <div className="trace-step"><span className="mark done"><Icon name="check" cls="ic-14" /></span><div><div className="tt">Discovered 1,204 assets across 18 domains</div><div className="ts">Discovery · automated</div></div></div>
            <div className="trace-step"><span className="mark done"><Icon name="check" cls="ic-14" /></span><div><div className="tt">Validated 38 exposures for exploitability</div><div className="ts">Validation · automated</div></div></div>
            <div className="trace-step"><span className="mark run"><Icon name="sparkles" cls="ic-14" /></span><div><div className="tt">AI prioritized 9 confirmed-exploitable exposures</div><div className="ts">Prioritization · AI-assisted</div></div></div>
            <div className="trace-step"><span className="mark gate"><Icon name="user-check" cls="ic-14" /></span><div><div className="tt">Waiting for your approval to mobilize remediation</div><div className="ts">Needs your sign-off</div></div></div>
            <div className="trace-step"><span className="mark wait"><Icon name="clock" cls="ic-14" /></span><div><div className="tt">Re-validate once fixes are deployed</div><div className="ts">Up next</div></div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ValueStrip() {
  const items = [
    { big:"Agentless", l:"Nothing to install, connect a domain and go" },
    { big:"Minutes", l:"From sign-up to your first validated results", accent:true },
    { big:"Continuous", l:"The full CTEM loop runs around the clock" },
    { big:"Audited", l:"Every action logged and accountable" },
  ];
  return (
    <section className="stats-band">
      <div className="wrap stats-row">
        {items.map((s,i) => (
          <div key={i} className="stat-b">
            <div className="n">{s.accent ? <span className="accent">{s.big}</span> : s.big}</div>
            <div className="l">{s.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Enterprise() {
  const items = [
    { icon:"lock", b:"Encrypted by default", s:"Your data and secrets stay protected" },
    { icon:"fingerprint", b:"Single sign-on", s:"Log in with Google or Okta" },
    { icon:"users", b:"Role-based access", s:"Decide who can see and do what" },
    { icon:"sliders-horizontal", b:"Your data, your rules", s:"Set the retention policies you need" },
  ];
  return (
    <section className="section alt">
      <div className="wrap">
        <div className="section-head center">
          <span className="eyebrow">Trust &amp; control</span>
          <h2>Enterprise-grade security, by default.</h2>
        </div>
        <div className="ent-grid">
          {items.map((e,i) => (
            <div className="ent" key={i}>
              <div className="ei"><Icon name={e.icon} cls="ic-18" /></div>
              <div><b>{e.b}</b><span>{e.s}</span></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n:"01", t:"Scope & discover", d:"Add a root domain or seed asset, no agents. ByteSiege scopes what matters and discovers your exposures across your perimeter and brand in minutes." },
    { n:"02", t:"Prioritize & validate", d:"ByteSiege validates which exposures are actually exploitable and ranks them by real risk, with AI helping you focus on what matters most." },
    { n:"03", t:"Mobilize & re-test", d:"Drive fixes and takedowns to closure, export audit-ready reports, then re-validate, with you in control of every action." },
  ];
  return (
    <section className="section" id="how">
      <div className="wrap">
        <div className="section-head center">
          <span className="eyebrow">How CTEM works</span>
          <h2>Run the exposure loop, continuously.</h2>
        </div>
        <div className="steps">
          {steps.map((s,i) => (
            <div key={i} className="step">
              {i < steps.length-1 && <div className="line"></div>}
              <div className="num">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="section" id="cta">
      <div className="wrap">
        <div className="cta">
          <div className="cta-in">
            <h2>Validate your exposures before attackers do.</h2>
            <p>Run a free external exposure assessment. No agents, no commitment. Validated results in minutes.</p>
            <div style={{ display:"flex", gap:"14px", justifyContent:"center", flexWrap:"wrap" }}>
              <a href="start-free-assessment.html" className="btn btn-accent btn-lg"><Icon name="radar" cls="ic" />Start free assessment</a>
              <a href="#" className="btn btn-ghost-dark btn-lg">Book a demo</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const links = [
    { l:"Exposure discovery", href:"#asm" },
    { l:"Exposure validation", href:"#how" },
    { l:"Digital risk protection", href:"#drp" },
    { l:"Automation & AI", href:"#agentic" },
  ];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid" style={{ gridTemplateColumns: "1.8fr 1fr" }}>
          <div>
            <img src="assets/logo-reversed.svg" alt="ByteSiege" />
            <p className="tag">Continuous threat exposure management: discover, validate, and mobilize against the exposures that put your perimeter and brand at risk.</p>
          </div>
          <div>
            <h4>Platform</h4>
            <ul>{links.map((c,j) => <li key={j}><a href={c.href}>{c.l}</a></li>)}</ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 ByteSiege, Inc. · Continuous threat exposure management</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { AgenticBand, ValueStrip, Enterprise, HowItWorks, CTA, Footer });