// services.jsx — 9 services grid + 9 industries grid + accreditations

const SERVICES = [
  { num: '01', icon: 'box', title: 'Digital Twin Systems', tag: 'Virtual Replicas', desc: 'High-fidelity virtual models that mirror physical assets and processes in real time. Test, predict failures, and optimise operations without touching production.' },
  { num: '02', icon: 'cpu', title: 'On-Site AI Systems', tag: 'Edge Intelligence', desc: 'AI that runs where your operations live — on-premise, air-gapped, and compliant. Real-time inference at the edge with full data sovereignty.' },
  { num: '03', icon: 'workflow', title: 'Digital Outsourcing', tag: 'Managed AI Operations', desc: 'End-to-end digital process management. We take over repetitive workflows, automate them, and deliver measurable efficiency gains.' },
  { num: '04', icon: 'flask-conical', title: 'Simulation & Testing', tag: 'Validate Before Deploy', desc: 'Rigorous simulation environments for stress-testing systems, validating algorithms, and de-risking deployments before they go live.' },
  { num: '05', icon: 'shield', title: 'Cybersecurity', tag: 'AI-Powered Defence', desc: 'Intelligent threat detection, vulnerability assessment, and continuous monitoring. Security that adapts as fast as the threats evolve.' },
  { num: '06', icon: 'layers', title: 'System Implementation', tag: 'Blueprint to Production', desc: 'Full-stack digital transformation delivery. From architecture design through deployment and training — we build, integrate, and operate.' },
  { num: '07', icon: 'megaphone', title: 'Marketing & Media', tag: 'AI-Driven Growth', desc: 'Data-driven marketing strategies, AI-generated content, social automation, and performance analytics that turn impressions into revenue.' },
  { num: '08', icon: 'code-2', title: 'Custom AI Software', tag: 'Bespoke Intelligence', desc: 'Bespoke AI software for your specific use case. From ML models to intelligent automation — tailored, tested, and deployed.' },
  { num: '09', icon: 'users', title: 'CRM Solutions', tag: 'Relationship Intelligence', desc: 'AI-enhanced customer relationship management. Predictive lead scoring, automated outreach, and intelligent segmentation that keeps your pipeline full.' },
];

const INDUSTRIES = [
  { num: '01', glyph: '⬡', name: 'FinTech', desc: 'Payments, compliance, fraud detection, algorithmic trading.' },
  { num: '02', glyph: '⊕', name: 'HealthTech', desc: 'Diagnostics, patient data, autonomous lab systems.' },
  { num: '03', glyph: '◈', name: 'E-Commerce', desc: 'Recommendation engines, inventory, dynamic pricing.' },
  { num: '04', glyph: '⬢', name: 'SaaS', desc: 'Product analytics, churn prediction, AI features.' },
  { num: '05', glyph: '△', name: 'EdTech', desc: 'Adaptive learning, content generation, assessment.' },
  { num: '06', glyph: '▣', name: 'PropTech', desc: 'Smart buildings, digital twins, energy optimisation.' },
  { num: '07', glyph: '⏣', name: 'AgriTech', desc: 'Precision agriculture, yield prediction, autonomous bioproduction.' },
  { num: '08', glyph: '❋', name: 'BioTech', desc: 'Bioeconomy, autonomous bioproduction, biomass optimisation.' },
  { num: '09', glyph: '◉', name: 'Startups', desc: 'MVP development, AI integration, go-to-market.' },
];

const ACCREDITATIONS = [
  { mark: 'BAFA', org: 'Bundesamt', desc: 'Accredited consulting partner for federal subsidy programmes.' },
  { mark: 'go-inno', org: 'Innovation', desc: 'Innovation programme for SME digital transformation.' },
  { mark: 'WIPANO', org: 'BMWi Förderprogramm', desc: 'Patent & IP protection funding programme.' },
  { mark: 'BMBF', org: 'Bundesministerium', desc: 'Federal Ministry of Education and Research — Zukunft der Wertschöpfung.' },
];

function ServiceCard({ s, idx }) {
  const ref = React.useRef(null);
  const onMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    el.style.setProperty('--mx', ((e.clientX - r.left) / r.width * 100) + '%');
    el.style.setProperty('--my', ((e.clientY - r.top) / r.height * 100) + '%');
  };
  return (
    <article ref={ref} className="service-card" onMouseMove={onMove}>
      <div className="service-card__head">
        <span className="num">{s.num} / SERVICE</span>
        <span className="service-card__icon"><i data-lucide={s.icon}></i></span>
      </div>
      <div>
        <span className="service-card__tag">{s.tag}</span>
        <h3 className="service-card__title" style={{ marginTop: 6 }}>{s.title}</h3>
      </div>
      <p className="service-card__desc">{s.desc}</p>
      <span className="service-card__cta">
        Read more <i data-lucide="arrow-right"></i>
      </span>
    </article>
  );
}

function Services() {
  return (
    <section id="services" className="section-pad">
      <div className="container">
        <div className="sec-head">
          <h2 className="sec-head__title">
            Nine systems. <span className="it">One stack.</span>
          </h2>
          <p className="sec-head__sub">
            From virtual replicas to managed operations — every service is a building block in the same industrial-AI architecture. Pick the layer that's missing; we'll engineer it in.
          </p>
        </div>

        <div className="services-grid">
          {SERVICES.map((s) => <ServiceCard key={s.num} s={s} />)}
        </div>
      </div>
    </section>
  );
}

function Industries() {
  return (
    <section id="industries" className="section-pad" style={{ background: 'linear-gradient(180deg, var(--mw-bg) 0%, rgba(30,18,51,0.4) 100%)' }}>
      <div className="container">
        <div className="sec-head">
          <h2 className="sec-head__title">
            Where we <span className="it">operate.</span>
          </h2>
          <p className="sec-head__sub">
            Domain expertise across nine verticals — each with dedicated solution frameworks, industry-specific AI models, and a track record of moving from prototype to production.
          </p>
        </div>

        <div className="industries-grid">
          {INDUSTRIES.map((it) => (
            <article key={it.num} className="industry-card">
              <div className="industry-card__row">
                <span className="industry-card__glyph">{it.glyph}</span>
                <span className="industry-card__num">{it.num} / VERTICAL</span>
              </div>
              <h3 className="industry-card__name">{it.name}</h3>
              <p className="industry-card__desc">{it.desc}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Accreditations() {
  return (
    <section id="accreditations" className="section-pad" style={{ paddingTop: 'calc(var(--section-pad) / 2)' }}>
      <div className="container">
        <div className="sec-head" style={{ marginBottom: 40 }}>
          <h2 className="sec-head__title" style={{ fontSize: 'clamp(28px, 3vw, 44px)' }}>
            Accredited <span className="it">& funded.</span>
          </h2>
          <p className="sec-head__sub">
            Recognised partner across federal German innovation, IP, and R&D programmes — from BAFA-accredited consulting to active BMBF research.
          </p>
        </div>
        <div className="accred">
          {ACCREDITATIONS.map((a) => (
            <div key={a.mark} className="accred__cell">
              <span className="accred__org">{a.org}</span>
              <span className="accred__mark">{a.mark}</span>
              <p className="accred__desc">{a.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services, Industries, Accreditations, ServiceCard });