// features.jsx — Feature blocks: Digital Twin / Lab / Biz Dev / Memory
const { useEffect: _fxUE, useRef: _fxUR } = React;

/* Mini-decoration: cockpit corner brackets + telemetry strip on photo */
function MediaFrame({ src, alt, label, code, kind = 'image', children }) {
  return (
    <div className="feature__media">
      {kind === 'image' && src && <img src={src} alt={alt} loading="lazy" />}
      {kind === 'visual' && children}
      <span className="corner tl"></span>
      <span className="corner tr"></span>
      <span className="corner bl"></span>
      <span className="corner br"></span>
      <div className="feature__media-overlay">
        <span><span style={{ color: 'var(--mw-magenta)' }}>●</span> {label}</span>
        <span>{code}</span>
      </div>
    </div>
  );
}

/* ============================================================
   Digital Twin — actual real-time twin visual (CSS/SVG)
   ============================================================ */
function TwinVisual() {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: 'linear-gradient(135deg, #160A28 0%, #1E1233 100%)',
      overflow: 'hidden',
    }}>
      {/* Hairline 3D grid */}
      <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <defs>
          <linearGradient id="twinLine" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#F51EE1" stopOpacity="0.0" />
            <stop offset="50%" stopColor="#F51EE1" stopOpacity="0.7" />
            <stop offset="100%" stopColor="#6419E1" stopOpacity="0.0" />
          </linearGradient>
          <radialGradient id="twinGlow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#F51EE1" stopOpacity="0.5" />
            <stop offset="100%" stopColor="#F51EE1" stopOpacity="0" />
          </radialGradient>
        </defs>
        {/* perspective grid */}
        {Array.from({ length: 14 }).map((_, i) => {
          const y = 280 + i * 18 + i * i * 1.2;
          return (
            <line key={'h' + i} x1="-100" x2="500" y1={y} y2={y} stroke="rgba(180,160,220,0.16)" strokeWidth="1" />
          );
        })}
        {Array.from({ length: 18 }).map((_, i) => {
          const x = 200 + (i - 9) * 32;
          return (
            <line key={'v' + i} x1={x} x2={200 + (i - 9) * 90} y1="280" y2="540" stroke="rgba(180,160,220,0.12)" strokeWidth="1" />
          );
        })}
        {/* Machine node */}
        <circle cx="200" cy="220" r="90" fill="url(#twinGlow)" />
        <g transform="translate(200 220)">
          <polygon points="0,-60 52,-30 52,30 0,60 -52,30 -52,-30" fill="none" stroke="url(#twinLine)" strokeWidth="1.5" />
          <polygon points="0,-30 26,-15 26,15 0,30 -26,15 -26,-15" fill="rgba(245,30,225,0.10)" stroke="#F51EE1" strokeWidth="1.2" />
          <circle r="4" fill="#F51EE1" />
        </g>
        {/* Sensor nodes */}
        {[{x:90,y:160},{x:310,y:140},{x:120,y:300},{x:300,y:300},{x:200,y:80}].map((p,i) => (
          <g key={i}>
            <line x1="200" y1="220" x2={p.x} y2={p.y} stroke="rgba(245,30,225,0.4)" strokeWidth="0.5" strokeDasharray="2 3" />
            <circle cx={p.x} cy={p.y} r="3" fill="#F51EE1">
              <animate attributeName="opacity" values="0.3;1;0.3" dur={`${2 + i * 0.3}s`} repeatCount="indefinite" />
            </circle>
          </g>
        ))}
        {/* Readout */}
        <g transform="translate(20 460)" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(255,255,255,0.7)" letterSpacing="0.15em">
          <text>UNIT-A14 · OPERATIONAL</text>
          <text y="14" fill="rgba(255,255,255,0.4)">TEMP 64.2°C · RPM 1840 · LOAD 71%</text>
        </g>
      </svg>
    </div>
  );
}

/* ============================================================
   Visual Agentic Memory — graph visual
   ============================================================ */
function MemoryVisual() {
  // graph
  const nodes = [
    { x: 200, y: 230, r: 14, main: true },
    { x: 90, y: 130 }, { x: 310, y: 130 },
    { x: 60, y: 280 }, { x: 340, y: 280 },
    { x: 140, y: 380 }, { x: 260, y: 380 },
    { x: 200, y: 80 }, { x: 200, y: 440 },
    { x: 130, y: 230 }, { x: 270, y: 230 },
  ];
  const edges = [[0,1],[0,2],[0,3],[0,4],[0,5],[0,6],[0,7],[0,8],[0,9],[0,10],[1,2],[3,5],[4,6],[7,1],[7,2],[8,5],[8,6]];
  return (
    <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 50%, #1E1233, #0F051E)', overflow: 'hidden' }}>
      <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <defs>
          <radialGradient id="memGlow"><stop offset="0%" stopColor="#F51EE1" stopOpacity="0.45" /><stop offset="100%" stopColor="#F51EE1" stopOpacity="0" /></radialGradient>
        </defs>
        <circle cx="200" cy="230" r="100" fill="url(#memGlow)" />
        {edges.map((e, i) => {
          const a = nodes[e[0]], b = nodes[e[1]];
          return <line key={i} x1={a.x} y1={a.y} x2={b.x} y2={b.y} stroke="rgba(245,30,225,0.32)" strokeWidth="1" />;
        })}
        {nodes.map((n, i) => (
          <g key={i}>
            {n.main && <circle cx={n.x} cy={n.y} r={n.r + 8} fill="none" stroke="#F51EE1" strokeOpacity="0.3" strokeWidth="1">
              <animate attributeName="r" values={`${n.r+4};${n.r+14};${n.r+4}`} dur="3s" repeatCount="indefinite" />
              <animate attributeName="stroke-opacity" values="0.5;0;0.5" dur="3s" repeatCount="indefinite" />
            </circle>}
            <circle cx={n.x} cy={n.y} r={n.r || 5} fill={n.main ? '#F51EE1' : '#6419E1'}>
              {!n.main && <animate attributeName="opacity" values="0.4;1;0.4" dur={`${2 + i * 0.25}s`} repeatCount="indefinite" />}
            </circle>
          </g>
        ))}
      </svg>
    </div>
  );
}

/* ============================================================
   Feature row
   ============================================================ */
function Feature({ reverse, kicker, num, title, accent, body, chips, image, alt, code, visual, ctaHref, ctaLabel }) {
  return (
    <div className={`feature ${reverse ? 'feature--reverse' : ''}`}>
      <MediaFrame
        src={image}
        alt={alt}
        label={kicker}
        code={code}
        kind={visual ? 'visual' : 'image'}
      >
        {visual}
      </MediaFrame>
      <div className="feature__body">
        <span className="eyebrow">{num} · {kicker}</span>
        <h2>
          {title} <span className="it">{accent}.</span>
        </h2>
        <p className="lede">{body}</p>
        {chips && (
          <div className="feature__chips">
            {chips.map((c) => (
              <span key={c} className="chip"><span className="dot" /> {c}</span>
            ))}
          </div>
        )}
        {ctaLabel && (
          <a href={ctaHref || '#contact'} className="btn btn--ghost" style={{ marginTop: 12, alignSelf: 'flex-start' }}>
            {ctaLabel}
            <i data-lucide="arrow-up-right"></i>
          </a>
        )}
      </div>
    </div>
  );
}

function FeatureBlocks() {
  return (
    <section id="systems" className="section-pad">
      <div className="container">
        <div className="sec-head">
          <h2 className="sec-head__title">
            What we <span className="it">build.</span>
          </h2>
          <p className="sec-head__sub">
            Four operational systems Mindwaves engineers end-to-end — from sensor integration through edge deployment to closed-loop control. Not slide decks. Infrastructure.
          </p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(80px, 9vw, 144px)' }}>

          <Feature
            num="01"
            kicker="DIGITAL TWIN SYSTEMS"
            code="// SIM-TO-REAL"
            title="Mirror the plant."
            accent="Predict before failure"
            body="High-fidelity virtual replicas of physical assets — running in real time, calibrated by sensor streams, and accelerated by Physics-Informed Neural Networks. Test changes, predict failures, and optimise operations before a single change hits production."
            chips={['PINNs', 'Sensor integration', 'Predictive analytics', 'Scenario planning']}
            ctaLabel="See the architecture"
            visual={<TwinVisual />}
          />

          <Feature
            reverse
            num="02"
            kicker="AUTONOMOUS LABORATORY"
            code="// 24/7 RESEARCH"
            title="The lab that runs itself."
            accent="Months → days"
            body="Self-operating research environments powered by AI. Automated experimentation, real-time data acquisition, and intelligent analysis — all running 24/7 without manual intervention. From pharmaceutical screening to material science, autonomous labs compress research timelines from months into days."
            chips={['Robotic experimentation', 'Real-time analysis', 'Closed-loop control', 'Sub-100ms inference']}
            ctaLabel="Inside the lab"
            image="https://images.unsplash.com/photo-1581093588401-fbb62a02f120?w=1200&q=80&auto=format&fit=crop"
            alt="Autonomous laboratory with robotic arms"
          />

          <Feature
            num="03"
            kicker="ON-SITE / EDGE AI"
            code="// AIR-GAPPED"
            title="AI where your"
            accent="data lives"
            body="On-premise, air-gapped, sovereignty-compliant. AI inference at the edge — sub-100ms latency on Raspberry Pi 5 + Hailo-8L NPU, Coral, or custom accelerators. Computer vision (YOLOv8, DINOv2), anomaly detection, and autonomous robotics control deployed directly to the operational floor."
            chips={['Hailo / Coral NPU', 'YOLOv8 · DINOv2', 'Sub-100ms inference', 'Data sovereignty']}
            ctaLabel="Deployment specs"
            image="https://images.unsplash.com/photo-1518770660439-4636190af475?w=1200&q=80&auto=format&fit=crop"
            alt="Edge AI hardware and circuit boards"
          />

          <Feature
            reverse
            num="04"
            kicker="VISUAL AGENTIC MEMORY"
            code="// COGNITIVE LAYER"
            title="Memory for"
            accent="autonomous agents"
            body="AI agents are only as powerful as what they remember. Mindwaves builds structured visual memory architectures that give autonomous agents persistent context, spatial reasoning, and long-term recall — turning stateless models into systems that learn, adapt, and perform at scale across sessions, environments, and tasks."
            chips={['Persistent context', 'Spatial reasoning', 'Graph memory', 'Multi-agent recall']}
            ctaLabel="Research direction"
            visual={<MemoryVisual />}
          />

        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Feature, FeatureBlocks, MediaFrame, TwinVisual, MemoryVisual });