/* Case study previews + AI section + Delivery model + Contact CTA */

const CASES = [
{
  id: 'amorim',
  client: 'Corticeira Amorim',
  sector: 'CORK · MULTI-SITE',
  title: '25 sites. One template. Paper to digital.',
  summary: 'A single-instance, multi-site MOM deployment on TrakSYS across 25+ Amorim sites — global standardization with local flexibility, paperless manufacturing execution, real-time visibility, and lot genealogy at scale.',
  metrics: [
  { label: 'SITES LIVE', value: '25+' },
  { label: 'INSTANCE', value: '1' },
  { label: 'YEARS RUNNING', value: '11' }],

  href: 'case-studies/amorim.html',
  flagship: true
},
{
  id: 'caetano',
  client: 'Caetano Bus',
  sector: 'AUTOMOTIVE · ASSEMBLY',
  title: 'Production-assembly MES with parameter historian.',
  summary: 'Line logic, automatic real-time data collection, OEE tracking, traceability system, parameter historian, and operator task management on a complex bus-assembly environment.',
  metrics: [
  { label: 'LINES', value: '6' },
  { label: 'OPERATORS', value: '380' },
  { label: 'DATA POINTS/H', value: '14k' }],

  href: 'case-studies.html#caetano'
},
{
  id: 'lactogal',
  client: 'Lactogal',
  sector: 'DAIRY · RECIPES',
  title: 'Recipe operations and filling performance.',
  summary: 'Recipe operations, filling performance tracking with OEE attribution, digital quality control, paperless manufacturing, planning-execution synchronization, and product-family templates.',
  metrics: [
  { label: 'PRODUCT FAMILIES', value: '4' },
  { label: 'FILLING LINES', value: '12' },
  { label: 'OEE LIFT', value: '+illustrative' }],

  href: 'case-studies.html#lactogal'
}];


function CaseStudies() {
  return (
    <section className="kt-section">
      <div className="kt-container">
        <div className="kt-divider">
          <span className="kt-divider-label">04 · MES IMPLEMENTATION RESULTS</span>
          <span className="kt-divider-line"></span>
        </div>
        <div className="kt-sechead">
          <h2 className="kt-section-title">Case studies, not<br />capability decks.</h2>
          <p className="kt-section-lede">
            Each engagement is documented as a narrative — context, the operational problem, our approach, implementation scope, and measurable outcomes. Benchmark figures are illustrative; client-specific assessment required.
          </p>
        </div>
        <div className="kt-case-grid">
          {CASES.map((c) =>
          <a key={c.id} href={c.href} className={`kt-case-card ${c.flagship ? 'is-flagship' : ''}`}>
              <div className="kt-case-card-head">
                <span className="kt-mono kt-case-sector">{c.sector}</span>
                {c.flagship && <span className="kt-tag">FLAGSHIP</span>}
              </div>
              <div className="kt-case-client">{c.client}</div>
              <h3 className="kt-case-title">{c.title}</h3>
              <p className="kt-case-summary">{c.summary}</p>
              <div className="kt-case-metrics">
                {c.metrics.map((m) =>
              <div key={m.label} className="kt-case-metric">
                    <div className="kt-case-metric-label">{m.label}</div>
                    <div className="kt-case-metric-value kt-data">{m.value}</div>
                  </div>
              )}
              </div>
              <div className="kt-case-cta">Read case study →</div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

/* ── AI-First section ──────────────────────────────────── */
function AISection() {
  return (
    <section className="kt-section kt-section-dark kt-ai-section">
      <div className="kt-ai-bg-grid"></div>
      <div className="kt-container" style={{ position: 'relative' }}>
        <div className="kt-divider">
          <span className="kt-divider-label">05 · AI-FIRST OPERATIONS</span>
          <span className="kt-divider-line"></span>
        </div>
        <div className="kt-split2">
          <div>
            <h2 className="kt-section-title" style={{ fontSize: 'clamp(36px, 5vw, 64px)' }}>
              Not dashboards.<br /><span style={{ color: 'var(--kt-cyan-300)' }}>Decisions.</span>
            </h2>
            <p className="kt-section-lede" style={{ marginTop: 24, fontSize: 19 }}>
              AI in operations is only as good as the data backbone underneath it. We start with architecture and integration — then make AI useful at the line, not the boardroom.
            </p>
            <div style={{ marginTop: 36, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <a href="ai.html" className="kt-btn kt-btn-cyan">Read the AI Manifesto</a>
              <a href="capabilities.html#ai" className="kt-btn kt-btn-ghost" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.2)' }}>Capability stack</a>
            </div>
            <div style={{ marginTop: 48, padding: '20px 0', borderTop: '1px solid rgba(255,255,255,0.1)', fontSize: 13, color: 'var(--kt-gray-400)', lineHeight: 1.6 }}>
              <span className="kt-mono" style={{ color: 'var(--kt-cyan-300)', fontSize: 11, letterSpacing: '0.1em' }}>HONESTY CLAUSE · </span>
              Predictive maintenance and advanced analytics are a <strong style={{ color: '#fff' }}>maturing capability stack</strong>. Real value requires client-specific assessment of the operational data backbone.
            </div>
          </div>
          <div className="kt-ai-pillars">
            {[
            { n: '01', t: 'Continuous monitoring', d: 'Operational signals, not weekly reports.' },
            { n: '02', t: 'Issue prioritization', d: 'Faster triage on the loss reasons that matter.' },
            { n: '03', t: 'Insight extraction', d: 'Automated, contextualized, and shopfloor-readable.' },
            { n: '04', t: 'Root-cause analysis', d: 'Tied back to master data, not orphaned charts.' },
            { n: '05', t: 'Decision support', d: 'Recommendations operators can act on in their flow.' }].
            map((p) =>
            <div key={p.n} className="kt-ai-pillar">
                <span className="kt-mono kt-ai-pillar-n">{p.n}</span>
                <div>
                  <div className="kt-ai-pillar-t">{p.t}</div>
                  <div className="kt-ai-pillar-d">{p.d}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ── Delivery model — visual diagram ────────────────────── */
function DeliveryModel() {
  return (
    <section className="kt-section">
      <div className="kt-container">
        <div className="kt-divider">
          <span className="kt-divider-label">06 · DELIVERY MODEL</span>
          <span className="kt-divider-line"></span>
        </div>
        <div className="kt-sechead">
          <h2 className="kt-section-title">Discovery → Pilot → Waves → Optimize.</h2>
          <p className="kt-section-lede">
            Enterprise programs fail when they're scoped wrong on day one. We design before we build, prove it on a lighthouse site, scale in waves across geographies and product families, and run improvement and support as a discipline.
          </p>
        </div>

        <div className="kt-delivery-diagram">
          {/* Discovery & Design */}
          <div className="kt-delivery-stage kt-delivery-discovery">
            <div className="kt-delivery-stage-head">
              <span className="kt-mono kt-delivery-stage-n">PHASE 01</span>
              <span className="kt-tag">4–8 WEEKS</span>
            </div>
            <h3 className="kt-delivery-stage-title">Discovery &amp; Design</h3>
            <p className="kt-delivery-stage-blurb">Map current-state operations and design the target architecture, MES template, and success criteria before a line of config is written.</p>
            <ul className="kt-delivery-list">
              <li>Current-state assessment</li>
              <li>Target architecture</li>
              <li>Solution design</li>
              <li>Success criteria</li>
            </ul>
          </div>

          {/* Pilot / Lighthouse Factory */}
          <div className="kt-delivery-stage kt-delivery-lighthouse">
            <div className="kt-delivery-stage-head">
              <span className="kt-mono kt-delivery-stage-n">PHASE 02</span>
              <span className="kt-tag">~12 WEEKS</span>
            </div>
            <h3 className="kt-delivery-stage-title">Pilot / Lighthouse Factory</h3>
            <p className="kt-delivery-stage-blurb">First site selected for representativeness, complexity, readiness, and replication potential — the template proven in production.</p>
            <ul className="kt-delivery-list">
              <li>Site selection criteria</li>
              <li>Reference architecture</li>
              <li>Local template</li>
              <li>Hypercare to steady-state</li>
            </ul>
          </div>

          {/* Waves */}
          <div className="kt-delivery-stage kt-delivery-waves">
            <div className="kt-delivery-stage-head">
              <span className="kt-mono kt-delivery-stage-n">PHASE 03</span>
              <span className="kt-tag">N WAVES</span>
            </div>
            <h3 className="kt-delivery-stage-title">Wave-Based Rollout</h3>
            <p className="kt-delivery-stage-blurb">Scale across geographies and product families with a global template that survives local divergence.</p>
            <ul className="kt-delivery-list">
              <li>Wave planning</li>
              <li>Template + local config</li>
              <li>Site-readiness gates</li>
              <li>Knowledge transfer</li>
            </ul>
          </div>

          {/* Continuous Improvement & Support */}
          <div className="kt-delivery-stage kt-delivery-governance">
            <div className="kt-delivery-stage-head">
              <span className="kt-mono kt-delivery-stage-n">CONTINUOUS</span>
              <span className="kt-tag">PROGRAM</span>
            </div>
            <h3 className="kt-delivery-stage-title">Continuous Improvement &amp; Support</h3>
            <p className="kt-delivery-stage-blurb">Process optimization and program governance run as a discipline — steering, solution architecture, OT/IT, and change management, not a meeting.</p>
            <ul className="kt-delivery-list">
              <li>Process optimization</li>
              <li>Steering &amp; PMO</li>
              <li>OT/IT &amp; support</li>
              <li>Change &amp; adoption</li>
            </ul>
          </div>
        </div>

        <div className="kt-delivery-foot">
          <span className="kt-mono">DE-RISK BY DESIGN</span>
          <span>We document the program structure on day one — not in retrospect.</span>
        </div>
      </div>
    </section>);

}

/* ── Final CTA ─────────────────────────────────────────── */
function FinalCTA() {
  return (
    <section className="kt-section-tight" style={{ background: 'var(--kt-navy-900)', color: '#fff', padding: '80px 0' }}>
      <div className="kt-container">
        <div className="kt-ctaband">
          <div>
            <div className="kt-mono" style={{ fontSize: 11, color: 'var(--kt-cyan-300)', letterSpacing: '0.18em', marginBottom: 16 }}>● START HERE</div>
            <h2 style={{ fontFamily: 'var(--kt-font-sans)', fontSize: 'clamp(32px, 4.5vw, 56px)', fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.02em', margin: 0 }}>
              Start with a diagnostic,<br />not a sales pitch.
            </h2>
            <p style={{ fontSize: 18, color: 'var(--kt-gray-300)', maxWidth: 560, marginTop: 20, lineHeight: 1.5 }}>
              30 minutes, one operational pain point, an honest read on what it would take to fix it. No deck. No funnel.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' }}>
            <a href="contact.html" className="kt-btn kt-btn-cyan" style={{ padding: '18px 28px', fontSize: 15 }}>Request a 30-Minute Operational Assessment</a>
            <a href="case-studies.html" className="kt-btn-link" style={{ color: 'var(--kt-cyan-300)' }}>Or read how we did it elsewhere</a>
          </div>
        </div>
      </div>
    </section>);

}

window.CaseStudies = CaseStudies;
window.AISection = AISection;
window.DeliveryModel = DeliveryModel;
window.FinalCTA = FinalCTA;