/* ByteSiege Marketing — Two products + Showcase deep-dives */

function TwoProducts() {
  return (
    <section className="section" id="platform">
      <div className="wrap">
        <div className="section-head center">
          <span className="eyebrow">One continuous program</span>
          <h2>From exposure to validated fix, continuously.</h2>
          <p>ByteSiege delivers continuous threat exposure management across everything you expose, from your perimeter to your brand, in a single console.</p>
        </div>
        <div className="products">
          <div className="product" id="asm">
            <div className="phead">
              <div className="picon" style={{ background:"var(--slate-100)", color:"var(--navy-700)" }}><Icon name="radar" cls="ic-28" /></div>
              <div>
                <div className="plabel" style={{ color:"var(--navy-600)" }}>Exposure management &amp; validation</div>
                <h3>Discover and validate your exposures</h3>
              </div>
            </div>
            <p className="ptag">Continuously discover what you expose, validate what's actually exploitable, and mobilize the fixes that matter first.</p>
            <ul>
              <li><Icon name="check" cls="ic-16" />Continuously map your assets: domains, sites, services and shadow IT</li>
              <li><Icon name="check" cls="ic-16" />Validate exposures with safe, evidence-backed exploit testing</li>
              <li><Icon name="check" cls="ic-16" />Prioritize by real risk and mobilize fixes to closure</li>
            </ul>
            <a href="#asm-detail" className="plink">Explore exposure management<Icon name="arrow-right" cls="ic-16" /></a>
          </div>

          <div className="product" id="drp">
            <div className="phead">
              <div className="picon" style={{ background:"var(--cyan-100)", color:"var(--cyan-600)" }}><Icon name="globe" cls="ic-28" /></div>
              <div>
                <div className="plabel" style={{ color:"var(--cyan-600)" }}>Digital risk protection</div>
                <h3>Protect your brand beyond it</h3>
              </div>
            </div>
            <p className="ptag">Monitor social media for threats to your brand, your executives and your customers, then act fast.</p>
            <ul>
              <li><Icon name="check" cls="ic-16" />Track brand &amp; VIP mentions across Facebook, Instagram, X, LinkedIn &amp; YouTube</li>
              <li><Icon name="check" cls="ic-16" />Spot impersonation, fake profiles and lookalike domains</li>
              <li><Icon name="check" cls="ic-16" />Drive removals through a built-in takedown workflow</li>
            </ul>
            <a href="#drp-detail" className="plink">Explore digital risk protection<Icon name="arrow-right" cls="ic-16" /></a>
          </div>
        </div>

        <div className="shared">
          <div className="lbl">Across every stage of the loop</div>
          <div className="chips">
            <span className="chip"><Icon name="sparkles" cls="ic-16" />Automation &amp; AI assist</span>
            <span className="chip"><Icon name="clipboard-check" cls="ic-16" />Unified findings &amp; reporting</span>
            <span className="chip"><Icon name="plug" cls="ic-16" />Integrations</span>
            <span className="chip"><Icon name="shield-check" cls="ic-16" />Enterprise-grade security</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Mocks ---- */
function AsmMock() {
  const rows = [
    { h:"data-es-prod-01", c:"#DC2626", s:"CRIT" },
    { h:"jump-win-02", c:"#EA580C", s:"HIGH" },
    { h:"vpn.acme-corp.com", c:"#D97706", s:"MED" },
    { h:"api.acme-corp.com", c:"#2563EB", s:"LOW" },
  ];
  return (
    <div className="mock">
      <div className="mock-bar"><span className="d" style={{background:"#FF5F57"}}></span><span className="d" style={{background:"#FEBC2E"}}></span><span className="d" style={{background:"#28C840"}}></span><span className="t">asset inventory</span></div>
      <div className="mock-body" style={{ padding:0 }}>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", padding:"14px 18px", borderBottom:"1px solid var(--border-1)" }}>
          <span style={{ fontSize:"13px", fontWeight:700, color:"var(--navy-900)" }}>Discovered assets</span>
          <span style={{ fontFamily:"var(--font-mono)", fontSize:"11px", color:"var(--fg-4)" }}>1,204 · 18 domains</span>
        </div>
        {rows.map((r,i) => (
          <div key={i} style={{ display:"flex", alignItems:"center", gap:"12px", padding:"12px 18px", borderBottom: i<rows.length-1?"1px solid var(--border-1)":"none" }}>
            <span style={{ width:"4px", alignSelf:"stretch", borderRadius:"4px", background:r.c }}></span>
            <span style={{ fontFamily:"var(--font-mono)", fontSize:"12.5px", color:"var(--navy-800)", fontWeight:500, flex:1 }}>{r.h}</span>
            <span style={{ fontFamily:"var(--font-mono)", fontSize:"10px", fontWeight:700, color:"#fff", background:r.c, padding:"2px 7px", borderRadius:"var(--r-sm)" }}>{r.s}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function DastMock() {
  const finds = [
    { t:"Reflected XSS · /search", sev:"High", c:"#EA580C" },
    { t:"Missing security headers", sev:"Medium", c:"#D97706" },
    { t:"Outdated TLS configuration", sev:"Medium", c:"#D97706" },
    { t:"Verbose error disclosure", sev:"Low", c:"#2563EB" },
  ];
  return (
    <div className="mock">
      <div className="mock-bar"><span className="d" style={{background:"#FF5F57"}}></span><span className="d" style={{background:"#FEBC2E"}}></span><span className="d" style={{background:"#28C840"}}></span><span className="t">security testing</span></div>
      <div className="mock-body">
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:"14px" }}>
          <span style={{ fontSize:"13px", fontWeight:700, color:"var(--navy-900)" }}>Validated exposures</span>
          <span style={{ fontFamily:"var(--font-mono)", fontSize:"11px", color:"var(--cyan-600)", display:"inline-flex", alignItems:"center", gap:"6px" }}><Icon name="loader" cls="ic-14" />signed-in · 2 roles</span>
        </div>
        <div style={{ display:"flex", flexDirection:"column", gap:"8px" }}>
          {finds.map((f,i) => (
            <div key={i} style={{ display:"flex", alignItems:"center", gap:"11px", padding:"10px 12px", border:"1px solid var(--border-1)", borderRadius:"var(--r-md)" }}>
              <Icon name="bug" cls="ic-16" />
              <span style={{ fontSize:"12.5px", color:"var(--navy-900)", fontWeight:500, flex:1 }}>{f.t}</span>
              <span style={{ fontFamily:"var(--font-mono)", fontSize:"10px", fontWeight:700, color:"#fff", background:f.c, padding:"2px 8px", borderRadius:"var(--r-sm)" }}>{f.sev.toUpperCase()}</span>
            </div>
          ))}
        </div>
        <div style={{ marginTop:"12px", fontSize:"11.5px", color:"var(--fg-4)", display:"flex", alignItems:"center", gap:"6px" }}><Icon name="file-search" cls="ic-14" />Evidence captured, nothing exploited</div>
      </div>
    </div>
  );
}

function DrpMock() {
  const cols = [
    { h:"New", items:[{t:"Fake @acme_ceo", k:"Impersonation · X", c:"#EA580C"},{t:"acme-c0rp.com", k:"Lookalike domain", c:"#D97706"}] },
    { h:"In review", items:[{t:"VIP mention · CEO", k:"LinkedIn", c:"#DC2626"}] },
    { h:"Takedown", items:[{t:"Fake brand page", k:"Instagram", c:"#16A34A"}] },
  ];
  return (
    <div className="mock">
      <div className="mock-bar"><span className="d" style={{background:"#FF5F57"}}></span><span className="d" style={{background:"#FEBC2E"}}></span><span className="d" style={{background:"#28C840"}}></span><span className="t">takedown board</span></div>
      <div className="mock-body">
        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:"10px" }}>
          {cols.map((col,i) => (
            <div key={i}>
              <div style={{ fontSize:"11px", fontWeight:700, textTransform:"uppercase", letterSpacing:".05em", color:"var(--fg-4)", marginBottom:"8px" }}>{col.h}</div>
              <div style={{ display:"flex", flexDirection:"column", gap:"8px" }}>
                {col.items.map((it,j) => (
                  <div key={j} style={{ borderLeft:"3px solid "+it.c, background:"var(--bg-sunken)", borderRadius:"var(--r-sm)", padding:"9px 10px" }}>
                    <div style={{ fontSize:"12px", fontWeight:600, color:"var(--navy-900)" }}>{it.t}</div>
                    <div style={{ fontSize:"10.5px", color:"var(--fg-4)", marginTop:"2px" }}>{it.k}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Showcase() {
  return (
    <section className="section alt">
      <div className="wrap">
        <div className="showcase" id="asm-detail">
          <div className="copy">
            <span className="eyebrow">Threat exposure management · discovery</span>
            <h3>Know your perimeter better than your attackers.</h3>
            <p>Build a live, agentless inventory of everything you expose to the internet: the scoped foundation the rest of the loop validates against.</p>
            <ul>
              <li><Icon name="check" cls="ic-16 ck" />Agentless discovery of domains, subdomains and services</li>
              <li><Icon name="check" cls="ic-16 ck" />Automatic shadow-IT and forgotten-asset detection</li>
              <li><Icon name="check" cls="ic-16 ck" />A connected map of your assets, tracked as it changes</li>
            </ul>
          </div>
          <AsmMock />
        </div>

        <div className="showcase flip" id="validate">
          <div className="copy">
            <span className="eyebrow">Threat exposure management · validation</span>
            <h3>Validate what's actually exploitable, safely.</h3>
            <p>Prove which exposures are truly exploitable, with captured evidence, so your team acts on validated risk, not raw scanner output. ByteSiege confirms exploitability without ever attacking your systems.</p>
            <ul>
              <li><Icon name="check" cls="ic-16 ck" />Safely confirms the exploitability of high-impact exposures</li>
              <li><Icon name="check" cls="ic-16 ck" />Signed-in testing across different user roles</li>
              <li><Icon name="check" cls="ic-16 ck" />Every validated exposure comes with the evidence behind it</li>
            </ul>
          </div>
          <DastMock />
        </div>

        <div className="showcase" id="drp-detail">
          <div className="copy">
            <span className="eyebrow">Digital risk protection · scope</span>
            <h3>Watch the threats aimed at your brand.</h3>
            <p>Monitor social media for impersonation, fake accounts and mentions of your brand and executives, then drive removals through a built-in takedown workflow.</p>
            <ul>
              <li><Icon name="check" cls="ic-16 ck" />Brand &amp; VIP monitoring across Facebook, Instagram, X, LinkedIn &amp; YouTube</li>
              <li><Icon name="check" cls="ic-16 ck" />Impersonation, fake profiles &amp; lookalike domains</li>
              <li><Icon name="check" cls="ic-16 ck" />Analyst triage queue with a takedown board</li>
            </ul>
          </div>
          <DrpMock />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TwoProducts, Showcase, AsmMock, DastMock, DrpMock });