/* =========================================================
   NETRA — Marketing site
   Modern editorial layout — cream + saffron + dark statement
   ========================================================= */

/* ---------- small inline capability viz (light theme) ---------- */
const VizT = {
  Tailgate: () => (
    <svg viewBox="0 0 240 180" style={{ width: "100%", height: "100%" }}>
      <rect x="0" y="0" width="240" height="180" fill="#fbf8f2" />
      <line x1="0" y1="160" x2="240" y2="160" stroke="rgba(13,14,16,0.06)" />
      <line x1="40" y1="160" x2="100" y2="42" stroke="rgba(13,14,16,0.05)" strokeDasharray="2 3" />
      <line x1="200" y1="160" x2="140" y2="42" stroke="rgba(13,14,16,0.05)" strokeDasharray="2 3" />
      <rect x="98" y="40" width="44" height="100" fill="#ebe4d6" stroke="rgba(13,14,16,0.18)" />
      <rect x="146" y="78" width="5" height="14" fill="#c8541b" />
      {/* person A */}
      <g>
        <circle cx="80" cy="118" r="9" fill="#fbf8f2" stroke="#2f7a4f" strokeWidth="1.6" />
        <rect x="69" y="128" width="22" height="28" rx="3" fill="#fbf8f2" stroke="#2f7a4f" strokeWidth="1.6" />
      </g>
      {/* person B (animated, crit) */}
      <g style={{ animation: "tg-step 3.4s ease-in-out infinite" }}>
        <circle cx="44" cy="118" r="9" fill="#fbf8f2" stroke="#c8541b" strokeWidth="1.6" />
        <rect x="33" y="128" width="22" height="28" rx="3" fill="#fbf8f2" stroke="#c8541b" strokeWidth="1.6" />
      </g>
      {/* alert pulse */}
      <g style={{ animation: "tg-alert 3.4s ease-in-out infinite" }}>
        <circle cx="120" cy="88" r="24" fill="none" stroke="#c8541b" strokeWidth="1.2" opacity="0.5" />
        <text x="120" y="22" fill="#c8541b" fontSize="9" fontFamily="Geist Mono, monospace" textAnchor="middle" letterSpacing="2" fontWeight="500">TAILGATE</text>
      </g>
    </svg>
  ),
  Loiter: () => (
    <svg viewBox="0 0 240 180" style={{ width: "100%", height: "100%" }}>
      <rect x="0" y="0" width="240" height="180" fill="#fbf8f2" />
      <rect x="20" y="20" width="200" height="140" fill="none" stroke="#c8541b" strokeOpacity="0.45" strokeDasharray="4 4" />
      <text x="28" y="34" fill="#c8541b" fontSize="9" fontFamily="Geist Mono, monospace" letterSpacing="1.5" fontWeight="500">PERIMETER · DWELL 4M+</text>
      <path d="M 60 130 Q 80 110 100 120 T 140 100 Q 150 90 130 80 Q 110 70 100 90"
        fill="none" stroke="#c8541b" strokeOpacity="0.4" strokeWidth="1.4" strokeDasharray="3 3" />
      {[[60,130],[80,118],[100,120],[120,110],[140,100],[130,80],[110,75],[100,90]].map((p,i)=>(
        <circle key={i} cx={p[0]} cy={p[1]} r="2" fill="#c8541b" opacity={0.3+i*0.07} />
      ))}
      <g style={{ animation: "loiter-breath 3s ease-in-out infinite" }}>
        <circle cx="100" cy="90" r="9" fill="#fbf8f2" stroke="#c8541b" strokeWidth="1.6" />
        <rect x="89" y="100" width="22" height="28" rx="3" fill="#fbf8f2" stroke="#c8541b" strokeWidth="1.6" />
      </g>
      <g transform="translate(184 132)">
        <circle cx="0" cy="0" r="18" fill="none" stroke="rgba(200,84,27,0.18)" strokeWidth="2.5" />
        <circle cx="0" cy="0" r="18" fill="none" stroke="#c8541b" strokeWidth="2.5" strokeDasharray="113" strokeDashoffset="35" transform="rotate(-90)" strokeLinecap="round" />
        <text x="0" y="3" fill="#c8541b" fontSize="10" fontFamily="Geist Mono, monospace" textAnchor="middle" fontWeight="500">6m</text>
      </g>
    </svg>
  ),
  Object: () => (
    <svg viewBox="0 0 240 180" style={{ width: "100%", height: "100%" }}>
      <rect x="0" y="0" width="240" height="180" fill="#fbf8f2" />
      <line x1="0" y1="150" x2="240" y2="150" stroke="rgba(13,14,16,0.08)" />
      <g stroke="#7c7e87" strokeWidth="1.4" fill="none">
        <line x1="80" y1="120" x2="80" y2="150" />
        <line x1="130" y1="120" x2="130" y2="150" />
        <line x1="80" y1="120" x2="130" y2="120" />
        <line x1="80" y1="120" x2="80" y2="90" />
      </g>
      <g style={{ animation: "obj-pulse 2.2s ease-in-out infinite" }}>
        <path d="M 92 110 L 92 100 Q 92 95 97 95 L 113 95 Q 118 95 118 100 L 118 110 Z" fill="none" stroke="#1f2228" strokeWidth="1.6" />
        <rect x="86" y="110" width="38" height="22" rx="2" fill="#ebe4d6" stroke="#1f2228" strokeWidth="1.6" />
      </g>
      <g style={{ animation: "obj-detect 2.2s ease-in-out infinite" }}>
        <rect x="78" y="86" width="54" height="50" fill="none" stroke="#c8541b" strokeWidth="1.4" />
        <rect x="78" y="86" width="14" height="2" fill="#c8541b" />
        <rect x="78" y="86" width="2" height="14" fill="#c8541b" />
        <rect x="118" y="86" width="14" height="2" fill="#c8541b" />
        <rect x="130" y="86" width="2" height="14" fill="#c8541b" />
        <text x="78" y="80" fill="#c8541b" fontSize="9" fontFamily="Geist Mono, monospace" fontWeight="500">UNATTENDED · 9m</text>
      </g>
      <g opacity="0.35">
        <circle cx="180" cy="105" r="7" fill="none" stroke="#7c7e87" strokeWidth="1.2" />
        <rect x="172" y="112" width="16" height="22" rx="2" fill="none" stroke="#7c7e87" strokeWidth="1.2" />
      </g>
      <path d="M 130 130 Q 160 130 175 115" fill="none" stroke="#7c7e87" strokeWidth="1" strokeDasharray="2 3" />
    </svg>
  ),
  Mask: () => (
    <svg viewBox="0 0 240 180" style={{ width: "100%", height: "100%" }}>
      <rect x="0" y="0" width="240" height="180" fill="#fbf8f2" />
      <g transform="translate(120 90)">
        <defs>
          <clipPath id="m-clip"><circle cx="0" cy="0" r="42" /></clipPath>
          <pattern id="m-noise" width="6" height="6" patternUnits="userSpaceOnUse">
            <rect width="6" height="6" fill="#ebe4d6" />
            <rect width="3" height="3" fill="#d8d3c4" />
            <rect x="3" y="3" width="3" height="3" fill="#d8d3c4" />
          </pattern>
        </defs>
        <circle cx="0" cy="0" r="42" fill="#ebe4d6" stroke="rgba(13,14,16,0.18)" strokeWidth="1" />
        <g clipPath="url(#m-clip)">
          <circle cx="0" cy="0" r="42" fill="url(#m-noise)" />
        </g>
        <g stroke="#c8541b" strokeWidth="1.6" opacity="0.9">
          <line x1="-14" y1="-10" x2="-8" y2="-4" />
          <line x1="-14" y1="-4" x2="-8" y2="-10" />
          <line x1="14" y1="-10" x2="8" y2="-4" />
          <line x1="14" y1="-4" x2="8" y2="-10" />
          <line x1="-8" y1="14" x2="8" y2="14" />
        </g>
        <circle cx="0" cy="0" r="48" fill="none" stroke="#c8541b" strokeWidth="1.4" strokeDasharray="3 4" style={{ animation: "spin 8s linear infinite", transformOrigin: "0 0" }} />
      </g>
      <text x="120" y="160" fill="#c8541b" fontSize="10" fontFamily="Geist Mono, monospace" textAnchor="middle" letterSpacing="2" fontWeight="500">FACE NOT ENROLLED</text>
      <text x="120" y="32" fill="#7c7e87" fontSize="9" fontFamily="Geist Mono, monospace" textAnchor="middle">CONFIDENCE 0.92 · OBSCURED 32s</text>
    </svg>
  ),
  After: () => (
    <svg viewBox="0 0 240 180" style={{ width: "100%", height: "100%" }}>
      <rect x="0" y="0" width="240" height="180" fill="#fbf8f2" />
      <g transform="translate(120 90)">
        <circle cx="0" cy="0" r="58" fill="none" stroke="rgba(13,14,16,0.08)" strokeWidth="1" />
        <path d="M 0 -58 A 58 58 0 1 1 -41 41" fill="none" stroke="#2a6a8a" strokeWidth="3.5" opacity="0.45" />
        {Array.from({ length: 12 }).map((_, i) => {
          const a = (i / 12) * Math.PI * 2 - Math.PI / 2;
          const r2 = i % 3 === 0 ? 48 : 52;
          return <line key={i} x1={Math.cos(a)*58} y1={Math.sin(a)*58} x2={Math.cos(a)*r2} y2={Math.sin(a)*r2} stroke={i%3===0?"#1f2228":"rgba(13,14,16,0.2)"} strokeWidth={i%3===0?1.4:0.8} />;
        })}
        {[12,3,6,9].map((n, i) => {
          const a = (i/4)*Math.PI*2 - Math.PI/2;
          return <text key={n} x={Math.cos(a)*40} y={Math.sin(a)*40+4} fill="#7c7e87" fontSize="10" fontFamily="Geist Mono, monospace" textAnchor="middle">{n}</text>;
        })}
        <line x1="0" y1="0" x2="0" y2="-22" stroke="#1f2228" strokeWidth="2.4" strokeLinecap="round" transform="rotate(305)" />
        <line x1="0" y1="0" x2="0" y2="-34" stroke="#2a6a8a" strokeWidth="1.8" strokeLinecap="round" transform="rotate(84)" />
        <circle cx="0" cy="0" r="2.5" fill="#2a6a8a" />
        <g style={{ animation: "pulse 2s ease-in-out infinite" }}>
          <circle cx="32" cy="-32" r="4" fill="#c8541b" />
          <circle cx="32" cy="-32" r="9" fill="none" stroke="#c8541b" strokeWidth="1" opacity="0.45" />
        </g>
      </g>
      <text x="120" y="170" fill="#2a6a8a" fontSize="9" fontFamily="Geist Mono, monospace" textAnchor="middle" letterSpacing="2" fontWeight="500">22:14 · BADGE AB-2117 · SERVER ROOM</text>
    </svg>
  ),
  Crowd: () => (
    <svg viewBox="0 0 240 180" style={{ width: "100%", height: "100%" }}>
      <rect x="0" y="0" width="240" height="180" fill="#fbf8f2" />
      <defs>
        <radialGradient id="heat-l" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#c8541b" stopOpacity="0.45" />
          <stop offset="50%" stopColor="#e0834a" stopOpacity="0.22" />
          <stop offset="100%" stopColor="#c8541b" stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect x="20" y="20" width="200" height="140" fill="none" stroke="rgba(13,14,16,0.07)" />
      {Array.from({length:8}).map((_,i)=> <line key={"v"+i} x1={20+i*25} y1="20" x2={20+i*25} y2="160" stroke="rgba(13,14,16,0.04)" />)}
      {Array.from({length:6}).map((_,i)=> <line key={"h"+i} x1="20" y1={20+i*23.3} x2="220" y2={20+i*23.3} stroke="rgba(13,14,16,0.04)" />)}
      <ellipse cx="105" cy="90" rx="62" ry="42" fill="url(#heat-l)" />
      <ellipse cx="155" cy="115" rx="36" ry="26" fill="url(#heat-l)" opacity="0.7" />
      {[[80,70],[95,88],[110,78],[125,95],[100,110],[85,100],[120,70],[140,105],[155,115],[165,125],[150,100],[60,130],[70,145]].map((p,i)=>(
        <circle key={i} cx={p[0]} cy={p[1]} r="3" fill="#1f2228" opacity="0.7" style={{ animation: `crowdshift 2.6s ease-in-out infinite ${i*0.12}s` }} />
      ))}
      <text x="218" y="36" fill="#c8541b" fontSize="9" fontFamily="Geist Mono, monospace" textAnchor="end" letterSpacing="1" fontWeight="500">11 PERSONS · 6m²</text>
      <text x="218" y="48" fill="#7c7e87" fontSize="9" fontFamily="Geist Mono, monospace" textAnchor="end">CAP 8</text>
    </svg>
  ),
};

/* ---------- NAV ---------- */
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 30);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <nav className={`nav${scrolled ? " scrolled" : ""}`}>
      <div className="nav-row">
        <a href="#" className="nav-brand">
          <span className="iris-holder"><IrisMark size={32} animated /></span>
          <span className="wm">Netra</span>
          <span className="deva">नेत्र</span>
        </a>
        <div className="nav-links">
          <a href="#platform">Platform</a>
          <a href="#capabilities">Capabilities</a>
          <a href="#engine">How it works</a>
          <a href="#estate">Estate</a>
          <a href="#customers">Customers</a>
          <a href="#docs">Docs</a>
        </div>
        <div className="nav-spacer" />
        <div className="nav-right">
          <a href="Netra AI.html" className="nav-link-quiet">See the platform <span className="arr">↗</span></a>
        </div>
      </div>
    </nav>
  );
};

/* ---------- HERO ---------- */
const Hero = () => (
  <section className="hero">
    <div className="hero-inner">
      <div className="hero-top-mark">
        <span className="stamp">
          <span className="deva">नेत्र</span> · NETRA / 2026
        </span>
        <span className="stamp">Physical security intelligence</span>
      </div>

      <h1 className="h-display">
        One model.<br />
        Every camera.<br />
        <span className="saff">The eye that never blinks.</span>
      </h1>

      <div className="hero-sub">
        <p className="lede lg">
          Netra is the perception layer for your buildings. It watches every camera,
          badge reader and sensor — and reasons about what it sees in real time.
          From pixel to incident in 1.4 seconds.
        </p>
        <div className="cta">
          <a href="#demo" className="btn primary lg">Book a demo <span className="arr">→</span></a>
          <a href="Netra AI.html" className="btn lg">See the platform</a>
        </div>
      </div>

      <div className="hero-meta">
        <span><span className="live-dot" style={{ display: "inline-block", verticalAlign: "middle", marginRight: 8 }} /> <b>12,847</b> cameras live</span>
        <span>· <b>47</b> estates</span>
        <span>· <b>96.4%</b> precision</span>
        <span>· <b>1.42s</b> p95</span>
        <span style={{ marginLeft: "auto" }}>SOC 2 · ISO 27001 · GDPR</span>
      </div>

      <div className="hero-window">
        <div className="chrome">
          <span className="lights"><i /><i /><i /></span>
          <span className="addr">app.netra.ai &nbsp;<span>/ operations / live</span></span>
          <span style={{ width: 60 }} />
        </div>
        <div className="stage">
          <LiveTheater />
        </div>
      </div>
    </div>

    <div className="hero-tick">
      <div className="track">
        {[
          ["TAILGATE","East Entry · INC-4471 · 0.96"],
          ["LOITER 6m","Loading Dock · INC-4470"],
          ["UNATTENDED","Lobby · INC-4469"],
          ["AFTER-HOURS","Server Room · K. Rao"],
          ["FACE OBSCURED","North Lot · INC-4467"],
          ["DOOR HELD","Rooftop HVAC · INC-4466"],
          ["CROWD","South Gate · 11/8"],
          ["TAILGATE","East Entry · INC-4471 · 0.96"],
          ["LOITER 6m","Loading Dock · INC-4470"],
          ["UNATTENDED","Lobby · INC-4469"],
          ["AFTER-HOURS","Server Room · K. Rao"],
        ].map((it, i) => (
          <span key={i}><span className="dot" /><b>{it[0]}</b> {it[1]}</span>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- LOGOS ---------- */
const LOGOS = ["AXIS", "Hanwha", "Bosch", "Milestone", "Avigilon", "Genetec",
               "ONVIF", "HID Signo", "Honeywell", "AWS Panorama", "NVIDIA", "Azure IoT"];
const Logos = () => (
  <section className="logos-strip">
    <div className="wrap">
      <div className="lab">Working with the gear your estate already runs</div>
      <div className="logos-row">
        {LOGOS.map((l) => <div key={l} className="logo-cell">{l}</div>)}
      </div>
    </div>
  </section>
);

/* ---------- PHILOSOPHY SPLIT ---------- */
const Philosophy = () => (
  <section className="section" id="platform">
    <div className="wrap">
      <div className="split">
        <div className="split-copy">
          <span className="eyebrow"><b>01</b> The philosophy</span>
          <h2 className="h-section">
            We don't sell cameras.<br />
            We give your <span className="saff">existing ones</span> a mind.
          </h2>
          <p className="lede">
            For two decades, video security has been an archive. Hours of footage no one
            watches, scrubbed only after something has already happened. Netra makes that
            video <span className="serif">read itself.</span>
          </p>
          <div className="bullets">
            <div className="bul">
              <div className="n">01</div>
              <div>
                <div className="t">Vendor-neutral perception</div>
                <div className="d">Bring your Axis, Hanwha, Bosch, Avigilon or Milestone estate as-is. No rip-and-replace, no proprietary gateway.</div>
              </div>
            </div>
            <div className="bul">
              <div className="n">02</div>
              <div>
                <div className="t">Reasoning, not just detection</div>
                <div className="d">A badge swipe, a door event, and a person in a frame become one correlated story — not three orphan alarms.</div>
              </div>
            </div>
            <div className="bul">
              <div className="n">03</div>
              <div>
                <div className="t">Operator-first by design</div>
                <div className="d">Every alert ships with a clip, a confidence score, a chain of evidence, and one button to act.</div>
              </div>
            </div>
          </div>
        </div>
        <div className="split-visual">
          <PhilosophyVisual />
        </div>
      </div>
    </div>
  </section>
);

const PhilosophyVisual = () => (
  <div className="mockup" style={{ background: "#fbf8f2" }}>
    <div className="chrome">
      <span className="lights"><i /><i /><i /></span>
      <span className="addr">netra · correlation graph</span>
      <span style={{ width: 50 }} />
    </div>
    <div className="stage" style={{ background: "#fbf8f2", padding: 0, minHeight: 480 }}>
      <CorrelationGraph />
    </div>
  </div>
);

const CorrelationGraph = () => (
  <svg viewBox="0 0 600 480" style={{ width: "100%", height: "auto", display: "block" }}>
    <defs>
      <linearGradient id="cg-flow" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stopColor="#c8541b" stopOpacity="0.1" />
        <stop offset="100%" stopColor="#c8541b" stopOpacity="0.8" />
      </linearGradient>
    </defs>
    {/* signal nodes (left column) */}
    {[
      { y: 60, label: "CAM-003", sub: "person crosses", color: "#1f2228" },
      { y: 130, label: "RDR-007", sub: "badge AB-1042", color: "#2a6a8a" },
      { y: 200, label: "SNS-024", sub: "door open 2.1s", color: "#1f2228" },
      { y: 270, label: "CAM-003", sub: "second person", color: "#c8541b" },
      { y: 340, label: "CAM-001", sub: "no face match", color: "#c8541b" },
      { y: 410, label: "ROSTER", sub: "no schedule", color: "#1f2228" },
    ].map((n, i) => (
      <g key={i} transform={`translate(40 ${n.y})`}>
        <rect x="0" y="-22" width="170" height="44" rx="8" fill="#fff" stroke="rgba(13,14,16,0.12)" />
        <circle cx="14" cy="0" r="4" fill={n.color} />
        <text x="28" y="-3" fill="#0d0e10" fontSize="12" fontFamily="Geist Mono, monospace" fontWeight="500">{n.label}</text>
        <text x="28" y="13" fill="#7c7e87" fontSize="11" fontFamily="Geist, sans-serif">{n.sub}</text>
      </g>
    ))}
    {/* netra reasoning node (center) */}
    <g transform="translate(310 240)">
      <circle cx="0" cy="0" r="68" fill="#0d0e10" />
      <circle cx="0" cy="0" r="80" fill="none" stroke="#c8541b" strokeOpacity="0.25" strokeWidth="1" strokeDasharray="3 4" />
      <circle cx="0" cy="0" r="96" fill="none" stroke="#c8541b" strokeOpacity="0.12" strokeWidth="1" />
      <text x="0" y="-6" fill="#f4efe6" fontSize="14" fontFamily="Geist, sans-serif" fontWeight="500" textAnchor="middle">Netra</text>
      <text x="0" y="10" fill="#e0834a" fontSize="10" fontFamily="Geist Mono, monospace" textAnchor="middle" letterSpacing="2">REASONING</text>
      <text x="0" y="26" fill="#7c7e87" fontSize="9.5" fontFamily="Geist Mono, monospace" textAnchor="middle">1.42s</text>
    </g>
    {/* connections */}
    {[60,130,200,270,340,410].map((y, i) => (
      <g key={i}>
        <path d={`M 210 ${y} C 250 ${y} 250 240 244 240`} fill="none" stroke="#c8541b" strokeOpacity={0.3+i*0.05} strokeWidth="1.4" />
        <circle r="2.5" fill="#c8541b">
          <animateMotion path={`M 210 ${y} C 250 ${y} 250 240 244 240`} dur={`${2.5+i*0.2}s`} repeatCount="indefinite" />
        </circle>
      </g>
    ))}
    {/* output: incident card */}
    <g transform="translate(420 200)">
      <rect x="0" y="0" width="160" height="100" rx="10" fill="#0d0e10" />
      <rect x="0" y="0" width="160" height="100" rx="10" fill="none" stroke="#c8541b" strokeOpacity="0.5" />
      <text x="14" y="22" fill="#e0834a" fontSize="9" fontFamily="Geist Mono, monospace" letterSpacing="2">INC-4471 · CRIT</text>
      <text x="14" y="44" fill="#f4efe6" fontSize="13" fontFamily="Geist, sans-serif" fontWeight="500">Tailgate</text>
      <text x="14" y="59" fill="#a6a6a6" fontSize="11" fontFamily="Geist, sans-serif">East Entry — Bengaluru HQ</text>
      <text x="14" y="80" fill="#a6a6a6" fontSize="10" fontFamily="Geist Mono, monospace">conf 0.96 · paged S. Rao</text>
    </g>
    <path d="M 378 240 L 410 240" stroke="#c8541b" strokeWidth="1.4" />
    <polygon points="416,240 408,236 408,244" fill="#c8541b" />
  </svg>
);

/* ---------- CAPABILITIES ---------- */
const CAPS = [
  { n: "01", rule: "R-12", title: "Tailgate detection", desc: "Catch the second body through every controlled door — even when the badge swipes valid.", conf: "0.96", Viz: VizT.Tailgate },
  { n: "02", rule: "R-08", title: "Loiter & dwell", desc: "Time-aware perimeter zones flag people lingering past your tolerance, day or night.", conf: "0.88", Viz: VizT.Loiter },
  { n: "03", rule: "R-04", title: "Unattended objects", desc: "Bags, packages, tools — anything left without an owner nearby gets a name and a timer.", conf: "0.79", Viz: VizT.Object },
  { n: "04", rule: "R-17", title: "Identity obscured", desc: "Hooded, masked, occluded — Netra refuses to be confidence-zero. It holds access until you say so.", conf: "0.92", Viz: VizT.Mask },
  { n: "05", rule: "R-21", title: "After-hours access", desc: "Restricted zones get clock-aware policy. On-call windows respected, anomalies pinged.", conf: "1.00", Viz: VizT.After },
  { n: "06", rule: "R-15", title: "Crowd density", desc: "Heatmap-driven flow control on lobbies, gates and floors — before it becomes a queue.", conf: "0.83", Viz: VizT.Crowd },
];

const Capabilities = () => (
  <section className="section" id="capabilities">
    <div className="wrap">
      <div className="caps-head">
        <div>
          <span className="eyebrow"><b>02</b> Capabilities</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            Thirty detections out of the box.<br />
            <span className="saff">One model</span> that learns yours.
          </h2>
        </div>
        <p className="lede" style={{ marginTop: 0 }}>
          Every detection ships with a confidence score, a clip, a chain of evidence,
          and a path to an action. Tune thresholds and zones without writing code.
        </p>
      </div>

      <div className="caps-grid">
        {CAPS.map((c, i) => {
          const V = c.Viz;
          return (
            <div className="cap" key={i}>
              <div className="cap-viz"><V /></div>
              <div className="cap-no">{c.n} · {c.rule}</div>
              <h3>{c.title}</h3>
              <p>{c.desc}</p>
              <div className="cap-meta">
                <span className="conf">CONF {c.conf}</span>
                <span>·</span>
                <span>EVIDENCE · CLIP · ACTION</span>
                <span className="arr">→</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  </section>
);

/* ---------- DARK STATEMENT: PIPELINE ---------- */
const Engine = () => (
  <section className="dark" id="engine">
    <div className="wrap">
      <div className="caps-head">
        <div>
          <span className="eyebrow"><b>03</b> The perception engine</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            From <span className="saff">pixel</span> to incident.<br />
            Four hops. <span className="saff">80 milliseconds.</span>
          </h2>
        </div>
        <p className="lede" style={{ marginTop: 0 }}>
          Netra runs perception at the edge, fuses signals in the cloud, and reasons
          with an LLM that has the last 24 hours of your estate in context.
        </p>
      </div>

      <div className="pipe-frame">
        <Pipeline />
      </div>

      <div className="stat-row">
        <div className="stat-cell">
          <div className="num">96.4<small>%</small></div>
          <div className="lbl">Detection precision</div>
          <div className="sub">Benchmarked across 230 enterprise sites and 18 months of footage.</div>
        </div>
        <div className="stat-cell">
          <div className="num">1.42<small>s</small></div>
          <div className="lbl">Pixel to incident</div>
          <div className="sub">From frame ingest to operator pager — including LLM reasoning.</div>
        </div>
        <div className="stat-cell">
          <div className="num"><span className="pre">+</span>12.8<small>k</small></div>
          <div className="lbl">Cameras secured</div>
          <div className="sub">In production across data centers, manufacturing, retail and logistics.</div>
        </div>
        <div className="stat-cell">
          <div className="num">24<small>×7</small></div>
          <div className="lbl">SOC-grade operations</div>
          <div className="sub">Optional managed SOC tier with sub-minute escalation SLA.</div>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- ESTATE INTELLIGENCE (light) ---------- */
const Estate = () => (
  <section className="section" id="estate">
    <div className="wrap">
      <div className="caps-head">
        <div>
          <span className="eyebrow"><b>04</b> Estate intelligence</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            Every device on one <span className="serif">living</span> floor plan.
          </h2>
        </div>
        <p className="lede" style={{ marginTop: 0 }}>
          Drop in your CAD, and Netra binds cameras, sensors, badge readers and doors
          to the building. Incidents bloom in place. Operators see the floor think.
        </p>
      </div>

      <div className="estate-frame">
        <div className="estate-stage">
          <FloorPlan />
        </div>
        <div className="estate-side">
          <div className="estate-card">
            <h4><span style={{ width: 8, height: 8, background: "var(--saffron)", borderRadius: 999 }} /> Zone risk · live</h4>
            <div className="rowz">
              {[
                { z: "East Entry", r: 78 },
                { z: "Loading Dock", r: 62 },
                { z: "Server Hall", r: 22 },
                { z: "Main Lobby", r: 14 },
                { z: "North Lot", r: 48 },
                { z: "Rooftop HVAC", r: 35 },
              ].map((x, i) => (
                <div className="zrow" key={i}>
                  <span className="nm">{x.z}</span>
                  <span className="bar"><i style={{ width: `${x.r}%` }} /></span>
                  <span className="v">{x.r}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="estate-card">
            <h4>Open incidents</h4>
            {[
              { sev: "crit", t: "Tailgate — East Entry", id: "INC-4471", cam: "CAM-003", w: "2m ago", c: 0.96 },
              { sev: "warn", t: "Dwell 6m — Loading Dock", id: "INC-4470", cam: "CAM-004", w: "8m ago", c: 0.88 },
              { sev: "warn", t: "Unattended bag — Lobby", id: "INC-4469", cam: "CAM-001", w: "14m ago", c: 0.79 },
              { sev: "info", t: "After-hours access — Server", id: "INC-4468", cam: "RDR-002", w: "26m ago", c: 1.00 },
            ].map((a, i) => (
              <div key={i} className="alert-row">
                <span className="pip" style={{ background: a.sev === "crit" ? "var(--crit)" : a.sev === "warn" ? "var(--saffron)" : "var(--info)" }} />
                <div>
                  <div className="ti">{a.t}</div>
                  <div className="meta">{a.id} · {a.cam} · {a.w}</div>
                </div>
                <span className="c">{(a.c*100).toFixed(0)}%</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* light floor-plan SVG */
const FloorPlan = () => (
  <svg viewBox="0 0 720 420" style={{ width: "100%", height: "auto", display: "block" }}>
    <defs>
      <pattern id="fp-grid" width="30" height="30" patternUnits="userSpaceOnUse">
        <path d="M 30 0 L 0 0 0 30" fill="none" stroke="rgba(13,14,16,0.04)" strokeWidth="1" />
      </pattern>
    </defs>
    <rect width="720" height="420" fill="url(#fp-grid)" />
    {/* building outline */}
    <path d="M 40 50 L 600 50 L 600 220 L 680 220 L 680 380 L 40 380 Z" fill="#ebe4d6" stroke="#1f2228" strokeWidth="1.5" />
    {/* interior walls */}
    <line x1="40" y1="200" x2="600" y2="200" stroke="#1f2228" strokeWidth="1" />
    <line x1="240" y1="50" x2="240" y2="200" stroke="#1f2228" strokeWidth="1" />
    <line x1="420" y1="50" x2="420" y2="200" stroke="#1f2228" strokeWidth="1" />
    <line x1="200" y1="200" x2="200" y2="380" stroke="#1f2228" strokeWidth="1" />
    <line x1="420" y1="200" x2="420" y2="380" stroke="#1f2228" strokeWidth="1" />
    {/* room labels */}
    <text x="140" y="130" fill="#7c7e87" fontSize="11" fontFamily="Geist Mono, monospace" textAnchor="middle">LOBBY</text>
    <text x="330" y="130" fill="#7c7e87" fontSize="11" fontFamily="Geist Mono, monospace" textAnchor="middle">SERVER HALL</text>
    <text x="510" y="130" fill="#7c7e87" fontSize="11" fontFamily="Geist Mono, monospace" textAnchor="middle">OFFICE</text>
    <text x="640" y="305" fill="#7c7e87" fontSize="11" fontFamily="Geist Mono, monospace" textAnchor="middle">DOCK</text>
    <text x="120" y="305" fill="#7c7e87" fontSize="11" fontFamily="Geist Mono, monospace" textAnchor="middle">CAFE</text>
    <text x="310" y="305" fill="#7c7e87" fontSize="11" fontFamily="Geist Mono, monospace" textAnchor="middle">ASSEMBLY</text>
    {/* doors */}
    <rect x="234" y="195" width="12" height="10" fill="#1f2228" />
    <rect x="414" y="195" width="12" height="10" fill="#1f2228" />
    <rect x="600" y="370" width="14" height="4" fill="#1f2228" />
    {/* East Entry door (alert) */}
    <g>
      <rect x="34" y="195" width="12" height="10" fill="#c8541b" />
      <circle cx="40" cy="200" r="14" fill="none" stroke="#c8541b" strokeWidth="1.5">
        <animate attributeName="r" values="14;26;14" dur="1.8s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="1;0;1" dur="1.8s" repeatCount="indefinite" />
      </circle>
      <text x="58" y="205" fill="#c8541b" fontSize="10" fontFamily="Geist Mono, monospace" fontWeight="500">INC-4471 · TAILGATE</text>
    </g>
    {/* cameras (triangle FoV) */}
    {[
      { x: 120, y: 90, a: 90, c: "ok" },
      { x: 330, y: 80, a: 90, c: "ok" },
      { x: 510, y: 90, a: 90, c: "ok" },
      { x: 580, y: 290, a: 180, c: "warn" },
      { x: 130, y: 230, a: 270, c: "ok" },
      { x: 300, y: 320, a: 0, c: "ok" },
      { x: 540, y: 360, a: 270, c: "ok" },
    ].map((c, i) => (
      <g key={i} transform={`translate(${c.x} ${c.y}) rotate(${c.a})`}>
        <path d="M 0 0 L -22 28 L 22 28 Z" fill={c.c === "warn" ? "#c8541b" : "#2a6a8a"} fillOpacity="0.18" stroke={c.c === "warn" ? "#c8541b" : "#2a6a8a"} strokeOpacity="0.4" />
        <circle cx="0" cy="0" r="3.5" fill={c.c === "warn" ? "#c8541b" : "#2a6a8a"} />
      </g>
    ))}
    {/* sensors */}
    {[[260, 280], [380, 240], [480, 320], [80, 110], [560, 110]].map((p, i) => (
      <g key={i}>
        <rect x={p[0]-3} y={p[1]-3} width="6" height="6" fill="#1f2228" />
      </g>
    ))}
    {/* legend */}
    <g transform="translate(40 405)">
      <circle cx="0" cy="0" r="3.5" fill="#2a6a8a" />
      <text x="10" y="3" fill="#7c7e87" fontSize="10" fontFamily="Geist Mono, monospace">CAMERA</text>
      <rect x="86" y="-3" width="6" height="6" fill="#1f2228" />
      <text x="98" y="3" fill="#7c7e87" fontSize="10" fontFamily="Geist Mono, monospace">SENSOR</text>
      <rect x="166" y="-3" width="6" height="6" fill="#c8541b" />
      <text x="178" y="3" fill="#c8541b" fontSize="10" fontFamily="Geist Mono, monospace" fontWeight="500">INCIDENT</text>
    </g>
  </svg>
);

/* ---------- INDUSTRIES ---------- */
const INDUSTRIES = [
  { n: "Data centers", d: "Cage-level perception, mantraps, tailgate-zero policies for hyperscale facilities.", icon: "datacenter" },
  { n: "Manufacturing", d: "PPE compliance, hazard-zone enforcement, asset tracking across shop floors.", icon: "manufacturing" },
  { n: "Logistics", d: "Yard intelligence, dock-door dwell, chain-of-custody for high-value freight.", icon: "logistics" },
  { n: "Retail", d: "Loss prevention, queue intelligence, after-hours perimeter without staff scaling.", icon: "retail" },
  { n: "Energy & utilities", d: "Substation and pipeline perimeters with drone- and weather-aware perception.", icon: "energy" },
  { n: "Healthcare", d: "Restricted-wing access, infant safety, elopement alerts that respect privacy.", icon: "healthcare" },
  { n: "Campuses", d: "Open campuses with smart perimeters, weapon-detection priors, crowd flow.", icon: "education" },
  { n: "Transit", d: "Platform safety, fare-gate tailgate, abandoned-object detection at scale.", icon: "transit" },
];

const IndIcon = ({ name }) => {
  const c = { fill: "none", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" };
  const map = {
    datacenter: <><rect x="3" y="4" width="18" height="4" rx="1" /><rect x="3" y="10" width="18" height="4" rx="1" /><rect x="3" y="16" width="18" height="4" rx="1" /><circle cx="6" cy="6" r="0.7" fill="currentColor" /><circle cx="6" cy="12" r="0.7" fill="currentColor" /><circle cx="6" cy="18" r="0.7" fill="currentColor" /></>,
    manufacturing: <><path d="M3 20V10l5 3V10l5 3V10l5 3v7Z" /><path d="M3 20h18" /><circle cx="8" cy="16" r="0.8" fill="currentColor" /><circle cx="14" cy="16" r="0.8" fill="currentColor" /></>,
    logistics: <><rect x="2" y="8" width="11" height="8" rx="1" /><path d="M13 10h5l3 3v3h-8z" /><circle cx="6" cy="18" r="1.6" /><circle cx="17" cy="18" r="1.6" /></>,
    retail: <><path d="M4 8h16l-1 12H5Z" /><path d="M8 8V6a4 4 0 0 1 8 0v2" /></>,
    energy: <><path d="M12 3v6m-7 3 7-3 7 3m-14 6 7-3 7 3" /><circle cx="12" cy="12" r="0.8" fill="currentColor" /></>,
    healthcare: <><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M12 8v8M8 12h8" /></>,
    education: <><path d="M3 9 12 4l9 5-9 5Z" /><path d="M7 11v5c2 1.5 8 1.5 10 0v-5" /></>,
    transit: <><rect x="6" y="3" width="12" height="14" rx="2" /><path d="M9 17v3m6-3v3M9 7h6m-7 5h8" /><circle cx="9" cy="13" r="0.8" fill="currentColor" /><circle cx="15" cy="13" r="0.8" fill="currentColor" /></>,
  };
  return <svg viewBox="0 0 24 24" width="36" height="36" {...c}>{map[name]}</svg>;
};

const Industries = () => (
  <section className="section" id="customers">
    <div className="wrap">
      <div className="industries-head">
        <div>
          <span className="eyebrow"><b>05</b> Built for the perimeters that matter</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            From hyperscalers<br />to <span className="serif">high streets.</span>
          </h2>
        </div>
        <p className="lede" style={{ marginTop: 0 }}>
          Netra deploys on prem, in cloud, or hybrid. We ship the same model
          to a campus of forty and an estate of forty thousand.
        </p>
      </div>
      <div className="industries-grid">
        {INDUSTRIES.map((it, i) => (
          <div className="ind" key={i}>
            <div className="ico"><IndIcon name={it.icon} /></div>
            <h4>{it.n}</h4>
            <p>{it.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- QUOTE ---------- */
const Quote = () => (
  <section className="quote-section">
    <div className="wrap">
      <div className="quote">
        <div>
          <div className="lab">Customer story</div>
          <div className="mark">"</div>
        </div>
        <div>
          <blockquote>
            We retired four legacy VMS systems and let Netra read the cameras we
            already had. Inside six weeks our SOC was running on <em>incidents</em>,
            not footage — the day a tailgate happened, the operator already had the clip,
            the badge swipe, and the on-call paged. <span className="serif">It just knew.</span>
          </blockquote>
          <div className="who">
            <div className="av">SR</div>
            <div>
              <div className="nm">Shoaib Rahman</div>
              <div className="ro">Director, Physical Security · a Fortune 100 hyperscaler</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- CTA ---------- */
const CTA = () => (
  <section className="cta-section" id="demo">
    <div className="wrap">
      <div className="cta-card on-dark">
        <div>
          <span className="eyebrow"><b>नेत्र</b> Request access</span>
          <h2 className="h-section">
            See your estate <span className="saff">through Netra's eyes.</span>
          </h2>
          <p className="lede">
            Bring us a 24-hour window of footage from one site. We'll give you back
            an incident report you didn't know you needed — usually within a week.
          </p>
          <div className="cta-actions">
            <a href="#" className="btn primary lg">Book a private demo <span className="arr">→</span></a>
            <a href="#" className="btn lg">Talk to engineering</a>
          </div>
          <div className="footnote">
            <span>Deploy on prem · cloud · hybrid</span>
            <span>White-glove onboarding</span>
            <span>Pilot in 14 days</span>
          </div>
        </div>
        <div className="visual">
          <div className="ring r3" />
          <div className="ring r2" />
          <div className="ring r1" />
          <div className="iris-holder"><IrisMark size={220} animated /></div>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- FOOTER ---------- */
const Footer = () => (
  <footer className="foot">
    <div className="wrap">
      <div className="foot-top">
        <div className="foot-brand">
          <div className="wm">
            <IrisMark size={28} />
            Netra<span className="deva">नेत्र</span>
          </div>
          <p>Physical security intelligence for the world's most consequential perimeters. Built in Bengaluru. Watching everywhere.</p>
          <div className="badges">
            <span className="badge"><span className="d" /> All systems</span>
            <span className="badge">v 4.12.0</span>
          </div>
        </div>
        <div className="foot-col">
          <h5>Platform</h5>
          <a href="#">Live cameras</a>
          <a href="#">Alerts & incidents</a>
          <a href="#">Rule engine</a>
          <a href="#">Site map</a>
          <a href="#">Analytics</a>
        </div>
        <div className="foot-col">
          <h5>Build</h5>
          <a href="#">API & SDK</a>
          <a href="#">Webhooks</a>
          <a href="#">ONVIF bridge</a>
          <a href="#">CLI</a>
          <a href="#">Status</a>
        </div>
        <div className="foot-col">
          <h5>Company</h5>
          <a href="#">About</a>
          <a href="#">Research</a>
          <a href="#">Careers</a>
          <a href="#">Press</a>
          <a href="#">Contact</a>
        </div>
        <div className="foot-col">
          <h5>Trust</h5>
          <a href="#">SOC 2 Type II</a>
          <a href="#">ISO 27001</a>
          <a href="#">GDPR</a>
          <a href="#">Privacy</a>
          <a href="#">Security</a>
        </div>
      </div>
      <div className="foot-bot">
        <span>© 2026 Netra Vision Pvt. Ltd.</span>
        <span>·</span>
        <span>नेत्र · the eye</span>
        <div className="spacer" />
        <span>Bengaluru / SF</span>
      </div>
    </div>
  </footer>
);

/* ---------- DARK LIVE THEATER WRAPPER ---------- */
const LiveTheaterSection = () => (
  <section className="dark" id="see">
    <div className="wrap">
      <div className="caps-head">
        <div>
          <span className="eyebrow"><b>00</b> See it the way Netra does</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            Sixteen cameras. <span className="saff">One mind.</span>
          </h2>
        </div>
        <p className="lede" style={{ marginTop: 0 }}>
          Watch Netra correlate a badge swipe, a door event and a person crossing
          a threshold — in under two seconds, across cameras that have never seen
          each other before.
        </p>
      </div>
      <LiveTheater />
    </div>
  </section>
);

/* ---------- ROOT ---------- */
const Site = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver(
      (es) => {
        es.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
      },
      { threshold: 0.1, rootMargin: "0px 0px -40px 0px" }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
  return (
    <div className="page">
      <Nav />
      <Hero />
      <Logos />
      <Philosophy />
      <Capabilities />
      <Engine />
      <Estate />
      <Industries />
      <Quote />
      <CTA />
      <Footer />
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<Site />);
