/* ByteSiege Marketing — Nav, Hero, HeroMock, LogoCloud */
const { useState, useEffect } = React;
function useLucide() { useEffect(() => { if (window.lucide) window.lucide.createIcons(); }); }
function Icon({ name, cls = "ic" }) { return <i data-lucide={name} className={cls}></i>; }

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-inner">
        <img src="assets/logo.svg" alt="ByteSiege" />
        <div className="nav-links">
          <a href="#asm">Attack surface</a>
          <a href="#drp">Digital risk</a>
          <a href="#agentic">Automation</a>
          <a href="#how">How it works</a>
          <a href="#">Docs</a>
        </div>
        <div className="nav-spacer"></div>
        <div className="nav-cta">
          <a href="#" className="btn btn-secondary" style={{ fontSize:"14px", padding:"9px 16px" }}>Sign in</a>
          <a href="#cta" className="btn btn-primary" style={{ padding:"10px 18px", fontSize:"14px" }}>Start free assessment</a>
        </div>
      </div>
    </nav>
  );
}

/* ---- Miniature product dashboard shown in the hero browser frame ---- */
function HeroMock({ framed }) {
  const rows = [
    { h:"data-es-prod-01 · :9200", c:"#DC2626", s:"CRIT" },
    { h:"jump-win-02 · RDP exposed", c:"#EA580C", s:"HIGH" },
    { h:"vpn.acme-corp.com · TLS", c:"#D97706", s:"MED" },
    { h:"staging.acme-corp.com", c:"#EA580C", s:"HIGH" },
  ];
  return (
    <div className="hero-mock-wrap" style={framed ? { margin: 0, padding: 0, maxWidth: "none" } : null}>
      <div className={"browser" + (framed ? " framed" : "")}>
        <div className="browser-bar">
          <span className="d" style={{background:"#FF5F57"}}></span>
          <span className="d" style={{background:"#FEBC2E"}}></span>
          <span className="d" style={{background:"#28C840"}}></span>
          <span className="browser-url"><Icon name="lock" cls="ic-14" />app.bytesiege.com/dashboard</span>
        </div>
        <div className="mini">
          <div className="mini-sb">
            <img src="assets/icon-onnavy.svg" alt="" />
            <div className="si on"><Icon name="layout-dashboard" /></div>
            <div className="si"><Icon name="boxes" /></div>
            <div className="si"><Icon name="shield-alert" /></div>
            <div className="si"><Icon name="globe" /></div>
            <div className="si"><Icon name="bot" /></div>
            <div className="si"><Icon name="workflow" /></div>
          </div>
          <div className="mini-main">
            <div className="mini-top">
              <span className="mt">Security overview</span>
              <span className="pill"><Icon name="radar" cls="ic-14" />scanning · 1,204 assets</span>
            </div>
            <div className="mini-body">
              <div className="mini-kpis">
                <div className="mini-kpi"><div className="kn">1,204</div><div className="kl">Assets discovered</div></div>
                <div className="mini-kpi"><div className="kn" style={{color:"#DC2626"}}>7</div><div className="kl">Validated critical</div></div>
                <div className="mini-kpi"><div className="kn">48</div><div className="kl">Shadow IT</div></div>
                <div className="mini-kpi"><div className="kn">B+</div><div className="kl">Risk grade</div></div>
              </div>
              <div className="mini-cols">
                <div className="mini-card">
                  <div className="ch">Validated exposures</div>
                  {rows.map((r,i) => (
                    <div className="mini-row" key={i}>
                      <span className="bar" style={{background:r.c}}></span>
                      <span className="hn">{r.h}</span>
                      <span className="sv" style={{background:r.c}}>{r.s}</span>
                    </div>
                  ))}
                </div>
                <div className="mini-card">
                  <div className="ch">Risk posture</div>
                  <div className="mini-don">
                    <Donut size={86} score="B+"
                      segments={[{v:7,c:"#DC2626"},{v:16,c:"#EA580C"},{v:42,c:"#D97706"},{v:71,c:"#2563EB"}]} />
                    <div className="mini-leg">
                      <div className="li"><span className="sw" style={{background:"#DC2626"}}></span>Critical<span className="ct">7</span></div>
                      <div className="li"><span className="sw" style={{background:"#EA580C"}}></span>High<span className="ct">16</span></div>
                      <div className="li"><span className="sw" style={{background:"#D97706"}}></span>Medium<span className="ct">42</span></div>
                      <div className="li"><span className="sw" style={{background:"#2563EB"}}></span>Low<span className="ct">71</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Donut({ segments, score, size = 86 }) {
  const total = segments.reduce((s, x) => s + x.v, 0);
  const sw = size * 0.16, R = (size - sw) / 2, cx = size / 2, C = 2 * Math.PI * R;
  let off = 0;
  return (
    <div style={{ position:"relative", width:size, height:size, flex:"none" }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
        <circle cx={cx} cy={cx} r={R} fill="none" stroke="var(--slate-100)" strokeWidth={sw} />
        {segments.map((seg, i) => {
          const len = (seg.v / total) * C;
          const el = <circle key={i} cx={cx} cy={cx} r={R} fill="none" stroke={seg.c} strokeWidth={sw}
            strokeDasharray={`${len} ${C - len}`} strokeDashoffset={-off} transform={`rotate(-90 ${cx} ${cx})`} />;
          off += len; return el;
        })}
      </svg>
      <div style={{ position:"absolute", inset:0, display:"grid", placeContent:"center", fontSize: size*0.26+"px", fontWeight:800, color:"var(--fg-1)" }}>{score}</div>
    </div>
  );
}

function Hero() {
  return (
    <header className="hero">
      <div className="wrap hero-inner">
        <span className="announce" style={{ padding:"7px 16px" }}><Icon name="shield-check" cls="ic-14" />Attack surface management &amp; digital risk protection</span>
        <h1>Discover, test, and <span className="accent">defend</span> your external attack surface.</h1>
        <p className="sub">ByteSiege is a cloud platform that finds everything your business exposes online, tests it for weaknesses, and monitors social media for threats to your brand and executives.</p>
        <div className="hero-cta">
          <a href="#cta" className="btn btn-accent btn-lg"><Icon name="radar" cls="ic" />Start free assessment</a>
          <a href="#" className="btn btn-ghost-dark btn-lg"><Icon name="calendar" cls="ic-18" />Book a demo</a>
        </div>
        <div className="trust">
          <span className="t"><Icon name="cloud" cls="ic-16" />Agentless, nothing to install</span>
          <span className="t"><Icon name="zap" cls="ic-16" />Results in minutes</span>
          <span className="t"><Icon name="repeat" cls="ic-16" />Reliable, repeatable scans</span>
          <span className="t"><Icon name="scroll-text" cls="ic-16" />Audited every step</span>
        </div>
      </div>
      <HeroMock />
    </header>
  );
}

function LogoCloud() {
  const names = ["NorthBank", "Vantage", "Helix Health", "Orbit Logistics", "Meridian", "Bluewave"];
  return (
    <section className="logos">
      <div className="wrap">
        <p>Built for security teams &amp; MSSPs</p>
        <div className="logos-row">{names.map((n,i) => <span key={i} className="lg">{n}</span>)}</div>
      </div>
    </section>
  );
}

Object.assign(window, { useLucide, Icon, Donut, Nav, Hero, HeroMock, LogoCloud });