/* global React */

// ---------- Implementation ----------
function Implementation() {
  const phases = [
  { w: 'Phase 1 · W1–4', n: '01', t: 'Commercials & Scope', d: 'Kick-off, OEM dependencies confirmed, scope locked. Everyone aligned on what is in and what is not' },
  { w: 'Phase 2–3 · W5–8', n: '02', t: 'Knowledge Base', d: 'Factory structure, roles and access configured. Documentation, schematics and training videos uploaded' },
  { w: 'Phase 4–5 · W9–12', n: '03', t: 'Factory Connectivity', d: 'Gateway installed, secure ping confirmed, security signed off. OT network isolated. DMZ bridge established. TLS 1.2+ on 443' },
  { w: 'Phase 6 · W13–20', n: '04', t: 'Line Telemetry', d: 'NVIDIA Jetson installed inside control cabinets. Machine signals mapped via Modbus, OPC-UA, MQTT' },
  { w: 'Phase 7 · W17–24', n: '05', t: 'Go-Live with Hypercare', d: 'Alert thresholds tuned. Every alert validated in real production. UAT sign-off. The line is yours' }];

  return (
    <section className="section" id="implementation">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="num">08 /</span> Implementation</span>
          <h2 className="h2">From contract to go-live in <span className="it">24 weeks</span></h2>
          <p className="lead">We don't hand you software and walk away. PackGuru is installed, configured and validated inside your factory by engineers who understand both IT/OT security and the realities of a production floor</p>
        </div>

        <div className="roadmap">
          {phases.map((p) =>
          <div className="phase" key={p.n}>
              <span className="step-num">STEP {p.n}</span>
              <span className="week">{p.w}</span>
              <span className="name">{p.t}</span>
              <span className="desc">{p.d}</span>
            </div>
          )}
        </div>

        <div className="spotlight" style={{ marginTop: 56 }}>
          <div className="row" style={{ gap: 12, marginBottom: 20 }}>
            <Icon name="lock" />
            <span className="tag">Security architecture</span>
          </div>
          <h3 className="h2" style={{ fontSize: 'clamp(28px, 3vw, 44px)', maxWidth: '20ch' }}>Your PLCs <span className="it">never talk to the internet</span></h3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 24, marginTop: 36 }} className="sec-grid">
            {[
            { t: 'Zero inbound ports', d: 'PackGuru connects to your machines without opening a single inbound port' },
            { t: 'One-way data flow', d: 'Information leaves the factory through a secure DMZ bridge. Nothing comes back' },
            { t: 'Encrypted everywhere', d: 'All data over TLS 1.2+ on standard port 443. No custom firewall rules' },
            { t: 'Audit-ready', d: 'ISA/IEC 62443, SOC 2, GDPR. ISO 27001 on the roadmap' }].
            map((c) =>
            <div key={c.t}>
                <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 8 }}>{c.t}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.55 }}>{c.d}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ---------- Pricing ----------
function Pricing() {
  return (
    <section className="section" id="pricing">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="num">09 /</span> Investment</span>
          <h2 className="h2">Transparent pricing — <span className="it">measurable return</span></h2>
          <p className="lead">A single proactive maintenance intervention — one robot spring replacement done before failure — saves over 6,000 bottles. The numbers work from the first production shift</p>
        </div>

        {/* Impact strip */}
        <div className="card" style={{ marginBottom: 32 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)' }}>
            {[
            { v: '960 b/hr', l: 'Cap Sorter recovery' },
            { v: '6,000+ b', l: 'Per proactive spring fix' },
            { v: '31%', l: 'Performance recovery' },
            { v: '17 min', l: 'Speed loss eliminated /hr' }].
            map((s, i) =>
            <div key={i} style={{ padding: '24px 28px', borderRight: i < 3 ? '1px solid var(--line)' : 'none' }}>
                <div style={{ fontSize: 22, letterSpacing: '-0.02em' }}>{s.v}</div>
                <div className="tiny" style={{ marginTop: 6 }}>{s.l}</div>
              </div>
            )}
          </div>
        </div>

        <div className="price-grid">
          <div className="price">
            <div className="row" style={{ justifyContent: 'space-between' }}>
              <h3>One-Time Setup</h3>
              <span className="tiny">First 3 units</span>
            </div>
            <div className="amt">€103,900</div>
            <ul>
              <li>PackGuru AI integration · €30,080</li>
              <li>4 weeks senior AI engineer — voice agent, PackML nav, camera pipeline</li>
              <li>On-site commissioning (Jefferson City, MO) · €73,820</li>
              <li>1 engineer × 4 days × 4 visits — flights, mapping, KPI patrol points, training</li>
              <li>Additional factories: €18,450 setup fee each</li>
            </ul>
          </div>

          <div className="price featured">
            <div className="row" style={{ justifyContent: 'space-between' }}>
              <h3 style={{ color: 'var(--ink)' }}>Hardware · Per Unit</h3>
              <span className="tag">Most popular</span>
            </div>
            <div className="amt">€15,000<small> / Roberta</small></div>
            <ul>
              <li>OrionStar GreetingBot Nova platform</li>
              <li>NVIDIA Edge computing module</li>
              <li>14" FHD touchscreen, 3D LiDAR navigation</li>
              <li>12–14 hour battery, factory-grade configuration</li>
              <li>No repeated integration fees</li>
            </ul>
          </div>

          <div className="price">
            <div className="row" style={{ justifyContent: 'space-between' }}>
              <h3>Annual Subscription</h3>
              <span className="tiny">Per robot · billed yearly</span>
            </div>
            <div className="amt">€9,600<small> / unit / yr</small></div>
            <ul>
              <li>AI model updates &amp; continuous learning</li>
              <li>Cross-factory knowledge synchronisation</li>
              <li>Fleet management dashboard</li>
              <li>Remote diagnostics &amp; support</li>
              <li>Extended warranty &amp; performance analytics</li>
            </ul>
          </div>
        </div>

        <div className="row" style={{ justifyContent: 'space-between', marginTop: 28, padding: '18px 24px', borderRadius: 14, background: 'rgba(255,255,255,0.025)', border: '1px solid var(--line)' }}>
          <div style={{ fontSize: 14, color: 'var(--ink-2)' }}>
            <b style={{ color: 'var(--ink)' }}>Year 1 total · 3 units:</b> €177,700 &nbsp;·&nbsp; <b style={{ color: 'var(--ink)' }}>Year 2+ per unit:</b> €9,600/yr
          </div>
          <a className="btn" href="#cta">Request a custom ROI analysis <Icon name="arrow" /></a>
        </div>
      </div>
    </section>);

}

// ---------- EU AI Act ----------
function EUAIAct() {
  return (
    <section className="section" id="compliance">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="num">09 /</span> Compliance &amp; Trust</span>
          <h2 className="h2">Built in the EU — <span className="it">audited for August 2026</span></h2>
          <p className="lead">PackGuru is engineered against EU AI Act high-risk system requirements. Data lineage, human oversight, and traceability are not bolt-ons — they are part of the architecture</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24, marginBottom: 48 }} className="sec-grid">
          {[
            {
              label: 'EU AI Act · August 2026',
              title: 'High-risk system compliant',
              body: 'PackGuru operates in a regulated production environment. Audit trail on every AI output. Human operator remains the decision point. Full documentation package available on request'
            },
            {
              label: 'Data residency',
              title: 'Your data stays yours',
              body: 'EU-hosted infrastructure. Customer-owned factory data. No cross-tenant model training. Golden recipes and operator knowledge belong to your factory — PackGuru is the safe, not the source'
            },
            {
              label: 'Existing certifications',
              title: 'ISA/IEC 62443 · SOC 2 · GDPR',
              body: 'OT/IT security architecture certified. Zero inbound ports to the production network. ISO 27001 in progress. Full security documentation provided at contract stage'
            },
          ].map(c => (
            <div key={c.label} className="feature" style={{ minHeight: 220 }}>
              <span className="tiny" style={{ color: 'var(--accent)', marginBottom: 8, display: 'block' }}>{c.label}</span>
              <h3 style={{ fontSize: 17, marginBottom: 10 }}>{c.title}</h3>
              <p style={{ fontSize: 13 }}>{c.body}</p>
            </div>
          ))}
        </div>
        <div className="spotlight">
          <div className="row" style={{ gap: 16, marginBottom: 20, flexWrap: 'wrap' }}>
            {['EU AI Act · Aug 2026', 'ISA/IEC 62443', 'SOC 2', 'GDPR', 'EU-hosted', 'ISO 27001 in progress'].map(t => (
              <span key={t} className="tag">{t}</span>
            ))}
          </div>
          <h3 className="h2" style={{ fontSize: 'clamp(22px, 2.5vw, 36px)', maxWidth: '30ch' }}>
            Questions from your IT security or legal team? <span className="it">We have the documentation</span>
          </h3>
          <div style={{ marginTop: 24 }}>
            <a className="btn btn-primary" href="/company/security.html" style={{ color: '#fff' }}>Security architecture →</a>
            <a className="btn" href="/demo.html" style={{ marginLeft: 12 }}>Request compliance pack →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Final CTA ----------
function FinalCTA() {
  return (
    <section className="section" id="cta">
      <div className="container">
        <div className="final-cta">
          <span className="tag" style={{ marginBottom: 24 }}><Icon name="spark" size={11} /> Book a 45-minute live demo</span>
          <h2 className="h2" style={{ fontSize: 'clamp(40px, 5.5vw, 80px)', maxWidth: '18ch', margin: '0 auto' }}>
            Ready to <span className="it">transform</span> your operations?
          </h2>
          <p className="lead" style={{ margin: '24px auto 0', textAlign: 'center' }}>
            We'll show you exactly how PackGuru would work with your machines, your operators, and your production challenges.
          </p>
          <div className="row" style={{ justifyContent: 'center', marginTop: 36 }}>
            <a className="btn btn-primary" href="/demo.html" style={{ color: "rgb(255, 255, 255)" }}>Request walkthrough <Icon name="arrow" /></a>
            <a className="btn" href="https://wa.me/48691914226?text=Hi%20PackGuru%20%E2%80%94%20I%27d%20like%20to%20know%20more"><Icon name="wa" size={16} /> Talk on WhatsApp</a>
            <a className="btn btn-ghost" href="/resources/roi.html" style={{ padding: "14px 22px" }}>ROI calculator <span className="arrow">→</span></a>
          </div>
        </div>
      </div>
    </section>);

}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <img src="assets/packguru-logo.svg" alt="PackGuru.Ai" style={{ height: 28, marginBottom: 18 }} />
            <p style={{ color: 'var(--ink-3)', fontSize: 14, lineHeight: 1.5, maxWidth: '34ch' }}>
              Production excellence in cosmetics manufacturing. Built from the factory floor up.
            </p>
            <div style={{ marginTop: 20, fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-3)' }}>
              <div>app.packguru.ai</div>
              <div>wz@packguru.ai</div>
            </div>
          </div>
          <div>
            <h5>Platform</h5>
            <ul>
              <li><a href="/platform/knowledge.html">Knowledge</a></li>
              <li><a href="/platform/operations.html">Operations</a></li>
              <li><a href="/platform/maintenance.html">Maintenance</a></li>
              <li><a href="/platform/analytics.html">Analytics</a></li>
              <li><a href="/platform/roberta.html">Roberta</a></li>
            </ul>
          </div>
          <div>
            <h5>The line</h5>
            <ul>
              <li><a href="/line/unilogo.html">Unilogo</a></li>
              <li><a href="/line/partners.html">Partners</a></li>
              <li><a href="/line/integrations.html">Integrations</a></li>
              <li><a href="/solutions/">Solutions</a></li>
              <li><a href="/customers/">Customers</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="/company/about.html">About</a></li>
              <li><a href="/company/security.html">Security</a></li>
              <li><a href="/company/privacy.html">Privacy</a></li>
              <li><a href="/company/dpa.html">DPA</a></li>
              <li><a href="/demo.html">Request walkthrough</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-base">
          <span>© 2026 PackGuru.Ai · All rights reserved</span>
          <span>SOC 2 · GDPR · ISA/IEC 62443</span>
        </div>
      </div>
    </footer>);

}

window.Implementation = Implementation;window.Pricing = Pricing;window.EUAIAct = EUAIAct;window.FinalCTA = FinalCTA;window.Footer = Footer;