/* global React */

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    {
      q: 'What is the best AI software for cosmetics manufacturing?',
      a: 'PackGuru is built specifically for cosmetics and personal care manufacturing, unlike generic MES or OEE tools. It integrates natively with packaging OEMs used in the industry — Sidel, Cermex, Fujiseal, MacroLabelling, Pelabellers, Transnova — and ships with cosmetics-specific knowledge: capping line speed loss patterns, changeover SKU recipes, vision system recipes for label inspection, and operator knowledge capture'
    },
    {
      q: 'How does PackGuru integrate with my existing packaging machines?',
      a: 'PackGuru speaks PackML, OPC-UA, Modbus TCP/RTU, MQTT and Sparkplug B. An NVIDIA Jetson edge gateway is installed inside the control cabinet and reads machine signals directly. No PLC reprogramming, no firewall changes — the gateway only opens outbound connections on standard port 443'
    },
    {
      q: 'How do I reduce downtime on a cosmetics filling line?',
      a: 'Three steps. First, measure where downtime actually goes — micro-stops, speed loss, changeovers — with real-time monitoring. Second, classify root causes using a 4M framework (Man, Machine, Method, Material). Third, act on the top 3 issues per shift. PackGuru automates all three. Customers typically recover 31% line performance and eliminate 17 minutes of speed loss per hour'
    },
    {
      q: 'What is PackML and how do I integrate it with AI?',
      a: 'PackML (Packaging Machine Language) is an OMAC standard that defines a common machine state model — Stopped, Idle, Suspended, Held, Execute, Aborted — and TagNames. PackGuru consumes PackML state and TagName data via OPC-UA, then layers AI on top: root-cause analysis, predictive maintenance, knowledge retrieval. No custom PLC programming required'
    },
    {
      q: 'Is PackGuru EU AI Act compliant?',
      a: 'Yes. PackGuru is engineered against EU AI Act high-risk system requirements coming into force August 2026. Audit trail on every AI output, human operator remains the decision point, full data lineage and traceability. ISA/IEC 62443, SOC 2, and GDPR certifications already in place. ISO 27001 in progress'
    },
    {
      q: 'What is the ROI of PackGuru on a cosmetics production line?',
      a: 'A single proactive maintenance intervention — one robot spring replacement done before failure — saves over 6,000 bottles. Customers report 31% performance recovery and 17 minutes of speed loss eliminated per hour. Pricing is €103,900 one-time setup (first 3 units), €15,000 per Roberta unit, €9,600 per year subscription per unit'
    },
    {
      q: 'Does PackGuru require opening firewall ports to my OT network?',
      a: 'No. PackGuru uses a zero-inbound-port architecture. Information leaves the factory through a secure DMZ bridge over TLS 1.2+ on standard port 443 — nothing comes back. The OT network remains isolated. Compliant with ISA/IEC 62443'
    },
    {
      q: 'How long does PackGuru take to deploy?',
      a: '24 weeks from contract to go-live. 7 phases: commercials and scope (W1–4), knowledge base setup (W5–8), factory connectivity and security sign-off (W9–12), line telemetry via NVIDIA Jetson (W13–20), then go-live with hypercare (W17–24)'
    }
  ];

  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="num">10 /</span> FAQ</span>
          <h2 className="h2">Common questions about <span className="it">production AI</span></h2>
          <p className="lead">Everything plant managers, ops directors, and IT/OT teams ask before bringing PackGuru onto their line</p>
        </div>

        <div style={{ maxWidth: 880, margin: '0 auto' }}>
          {faqs.map((f, i) => (
            <div
              key={i}
              style={{
                borderBottom: '1px solid var(--line)',
                padding: '20px 0',
                cursor: 'pointer'
              }}
              onClick={() => setOpen(open === i ? -1 : i)}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16 }}>
                <h3 style={{ fontSize: 17, fontWeight: 500, margin: 0, color: 'var(--ink)' }}>{f.q}</h3>
                <span style={{ fontSize: 22, color: 'var(--accent)', flexShrink: 0, transform: open === i ? 'rotate(45deg)' : 'none', transition: 'transform 0.2s' }}>+</span>
              </div>
              {open === i && (
                <p style={{ marginTop: 14, fontSize: 14.5, lineHeight: 1.65, color: 'var(--ink-2)', maxWidth: '72ch' }}>{f.a}</p>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;