// research.jsx — News + AUTOBIO-KI deep dive + VisInspect.AI

function News() {
  return (
    <section id="news" className="section-pad">
      <div className="container">
        <div className="sec-head">
          <h2 className="sec-head__title">
            From the <span className="it">lab.</span>
          </h2>
          <p className="sec-head__sub">
            Field notes from active builds, research direction, and applied AI in operational environments.
          </p>
        </div>

        <div className="news-grid">

          <article className="news-card news-card--featured">
            <div className="news-card__media">
              <span className="news-card__tag">A · KI · R&D Focus</span>
              <img
                src="https://images.unsplash.com/photo-1567427017947-545c5f8d16ad?w=1400&q=80&auto=format&fit=crop"
                alt="Autonomous bioproduction system"
                loading="lazy"
              />
            </div>
            <div className="news-card__body">
              <span className="news-card__kicker">May 2026 · 4 min read</span>
              <h3 className="news-card__title">AUTOBIO-KI: Mindwaves builds AI capabilities for autonomous bioproduction</h3>
              <p className="news-card__desc">Developing Edge-AI vision, Physics-Informed Digital Twins, and autonomous robotics for next-generation biomass production systems — a closed-loop sim-to-real architecture under BMBF "Zukunft der Wertschöpfung".</p>
              <div className="news-card__foot">
                <span>Research</span>
                <a className="arrow" href="#research">Read more <i data-lucide="arrow-up-right"></i></a>
              </div>
            </div>
          </article>

          <article className="news-card">
            <div className="news-card__media" style={{ aspectRatio: '16/9' }}>
              <span className="news-card__tag">Digital Twin</span>
              <img
                src="https://images.unsplash.com/photo-1581090464777-f3220bbe1b8b?w=1200&q=80&auto=format&fit=crop"
                alt="Industrial machinery"
                loading="lazy"
              />
            </div>
            <div className="news-card__body">
              <span className="news-card__kicker">April 2026 · 5 min read</span>
              <h3 className="news-card__title">Predictive systems: how digital twins reshape industrial operations</h3>
              <div className="news-card__foot">
                <span>Article</span>
                <a className="arrow" href="#">Read <i data-lucide="arrow-up-right"></i></a>
              </div>
            </div>
          </article>

          <article className="news-card">
            <div className="news-card__media" style={{ aspectRatio: '16/9' }}>
              <span className="news-card__tag">Cybersecurity</span>
              <img
                src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=1200&q=80&auto=format&fit=crop"
                alt="Cybersecurity"
                loading="lazy"
              />
            </div>
            <div className="news-card__body">
              <span className="news-card__kicker">Coming soon</span>
              <h3 className="news-card__title">AI-powered threat detection: reactive to predictive</h3>
              <div className="news-card__foot">
                <span>Draft</span>
                <a className="arrow" href="#">Notify me <i data-lucide="bell"></i></a>
              </div>
            </div>
          </article>

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

function Research() {
  return (
    <section id="research" className="section-pad">
      <div className="container">
        <div className="sec-head">
          <h2 className="sec-head__title">
            R&D <span className="it">pipeline.</span>
          </h2>
          <p className="sec-head__sub">
            We translate cutting-edge research into scalable deployments. From collaborative academic partnerships to early-stage development, Mindwaves bridges the gap between paper and production line.
          </p>
        </div>

        <article className="research-panel">
          <div className="research-panel__head">
            <div>
              <span className="eyebrow accent">RESEARCH FOCUS · AUTONOMOUS BIOPRODUCTION</span>
              <h3 className="research-panel__title" style={{ marginTop: 16 }}>
                AUTOBIO<span className="it">-KI</span>
              </h3>
              <p className="lede" style={{ marginTop: 16, maxWidth: '60ch' }}>
                Scalable evaluation and robotics system for automated high-performance biomass production through AI integration.
              </p>
            </div>
            <span className="chip" style={{ alignSelf: 'flex-start' }}>
              <span className="dot" /> Active · 2026
            </span>
          </div>

          <div className="research-panel__meta">
            <div className="cell">
              <span className="lbl">Target programme</span>
              <span className="val">BMBF — "Zukunft der Wertschöpfung" / Future of Value Creation</span>
            </div>
            <div className="cell">
              <span className="lbl">Role</span>
              <span className="val">Lead Research Partner — Edge-AI Vision & Autonomous Control</span>
            </div>
          </div>

          <div className="research-panel__body">
            <div className="research-panel__prose">
              <p>
                Mindwaves is developing research capabilities for fully AI-controlled biological production — combining <span className="em">Physics-Informed Neural Networks (PINNs)</span>, real-time <span className="em">Computer Vision</span>, and autonomous <span className="em">Edge-AI robotics</span> into a closed-loop "Sim-to-Real" architecture for industrial biomass cultivation.
              </p>
              <p>
                Mindwaves leads the development of the Edge-AI vision pipeline (YOLOv8 / DINOv2) and the autonomous control logic deployed directly on edge hardware (Raspberry Pi 5 + Hailo-8L NPU).
              </p>
            </div>

            <div className="research-panel__side">
              <div className="research-block">
                <h4>Mindwaves contribution</h4>
                <ul>
                  <li>Edge-AI Computer Vision pipeline (biomass classification, anomaly detection)</li>
                  <li>Autonomous control logic for robotic sensor systems</li>
                  <li>Real-time inference at sub-100 ms latency on edge devices</li>
                  <li>Research coordination & technical leadership</li>
                </ul>
              </div>

              <div className="research-block">
                <h4>Research network</h4>
                <ul>
                  <li><b>Energaia Labs GmbH</b> — Industrial bioconversion & system validation</li>
                  <li><b>Gemino GmbH</b> — Cloud infrastructure & data architecture</li>
                  <li><b>Epic Technologies UG</b> — Mechatronic gantry systems & sensor integration</li>
                  <li><b>Robert Boyle Institut e.V.</b> — PINNs, Digital Twin & scientific leadership</li>
                </ul>
              </div>
            </div>
          </div>

          <div className="innovation">
            <span className="innovation__lbl">Key Innovation</span>
            <div className="innovation__body">
              The <span className="em">"Sim-to-Real Loop"</span> — a closed feedback cycle where Physics-Informed Neural Networks continuously calibrate against real sensor data, enabling predictive resource optimisation that purely data-driven models cannot achieve.
            </div>
          </div>

          <div className="r-stats">
            <div className="r-stat">
              <div className="r-stat__num">&gt;30%</div>
              <div className="r-stat__lbl">Increase in biomass productivity vs. non-AI baseline</div>
            </div>
            <div className="r-stat">
              <div className="r-stat__num">&gt;25%</div>
              <div className="r-stat__lbl">Reduction in water and nutrient consumption</div>
            </div>
            <div className="r-stat">
              <div className="r-stat__num">&lt;100<span style={{ fontSize: '0.5em' }}>ms</span></div>
              <div className="r-stat__lbl">Edge inference latency for autonomous robot commands</div>
            </div>
          </div>
        </article>

        <article className="r-side">
          <div>
            <span className="eyebrow accent">R&D PIPELINE · INDUSTRIAL VISION</span>
            <h3 className="r-side__title">VisInspect<span className="it" style={{ fontStyle: 'italic', background: 'var(--mw-gradient)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>.AI</span></h3>
            <p className="r-side__sub">
              Mindwaves is expanding its computer-vision work into <em style={{ color: 'var(--mw-fg)', fontStyle: 'normal', fontWeight: 500 }}>few-shot industrial anomaly detection</em> for bioenergy and thermal-process environments. The pathway explores vision-language models, industrial image benchmarking and edge-AI deployment to make visual inspection practical for SME operators with limited labelled defect data.
            </p>
            <div className="r-side__chips">
              <span className="chip"><span className="dot" /> Few-shot detection</span>
              <span className="chip"><span className="dot" /> Vision-language models</span>
              <span className="chip"><span className="dot" /> Edge-AI deployment</span>
              <span className="chip"><span className="dot" /> Bioenergy & thermal</span>
            </div>
          </div>
          <div style={{ alignSelf: 'flex-end' }}>
            <a href="#contact" data-action="contact" className="btn btn--ghost">
              Collaborate
              <i data-lucide="arrow-up-right"></i>
            </a>
          </div>
        </article>

      </div>
    </section>
  );
}

Object.assign(window, { News, Research });