/* global React, Link, Counter, Icon, useReveal, LatticeHero */

/* ============================================================
   HOME PAGE
   ============================================================ */
function HomePage() {
  useReveal();
  return (
    <div className="page">
      {/* HERO */}
      <section className="hero">
        <div className="hero-canvas-wrap">
          <LatticeHero />
          <div className="hero-grad" />
        </div>
        <div className="container hero-inner">
          <div className="reveal hero-eyebrow">
            <span className="eyebrow">Latticore — Lattice + Core</span>
          </div>
          <h1 className="h-display reveal reveal-d1">
            End-to-end <span className="highlight">AI and CRM</span><br />
            solutions for intelligent<br />
            customer operations.
          </h1>
          <p className="lede reveal reveal-d2" style={{ marginTop: 28, maxWidth: 620 }}>
            Latticore AI delivers outcome-based Agentic AI and CRM solutions that transform
            customer service operations — from strategy through deployment to ongoing management.
          </p>
          <div className="row reveal reveal-d3" style={{ marginTop: 36, gap: 14 }}>
            <Link to="/contact" className="btn btn-primary">
              Get started <Icon.Arrow />
            </Link>
            <Link to="/services" className="btn btn-secondary">
              Explore our services
            </Link>
          </div>
          <div className="hero-tickers reveal reveal-d4">
            <div className="hero-ticker"><span className="dot dot-blue"></span>Live deployments across 4 industries</div>
            <div className="hero-ticker"><span className="dot dot-green"></span>Avg 6-week time-to-deploy</div>
            <div className="hero-ticker"><span className="dot dot-amber"></span>Outcome-based commercials</div>
          </div>
        </div>

      </section>

      {/* WHAT WE DO */}
      <section className="section" id="what-we-do">
        <div className="container">
          <div className="reveal" style={{ marginBottom: 'var(--space-8)' }}>
            <span className="eyebrow">01 / What we do</span>
            <p className="lede" style={{ marginTop: 24, maxWidth: '80ch' }}>
              We help mid-sized enterprises modernise their customer service operations through two
              core solutions — each delivered end-to-end with flexible, outcome-based commercials.
            </p>
          </div>

          <div className="service-grid">
            <article className="service-card reveal reveal-d1">
              <div className="service-card-head">
                <span className="service-num mono">01</span>
                <div className="service-icon"><Icon.Voice /></div>
              </div>
              <h3 className="h-2" style={{ fontSize: 32 }}>Agentic AI for Customer Service</h3>
              <p style={{ marginTop: 14, fontSize: 15.5, lineHeight: 1.6 }}>
                Autonomous AI agents that handle customer interactions across voice, chat, and email —
                resolving queries, reducing wait times, and freeing your team to focus on what matters.
              </p>
              <div className="service-meta">
                <span className="tag"><span className="tag-dot"></span>Powered by Yellow.ai</span>
                <span className="tag">Voice · Chat · Email</span>
              </div>
              <div className="service-stats">
                <div><strong>70–90%</strong><span>routine interactions automated</span></div>
                <div><strong>6 wks</strong><span>typical go-live timeline</span></div>
                <div><strong>135+</strong><span>languages supported</span></div>
              </div>
              <Link to="/services" className="btn-link" style={{ marginTop: 24 }}>
                See how it works <Icon.ArrowUpRight />
              </Link>
            </article>

            <article className="service-card reveal reveal-d2">
              <div className="service-card-head">
                <span className="service-num mono">02</span>
                <div className="service-icon"><Icon.Diagram /></div>
              </div>
              <h3 className="h-2" style={{ fontSize: 32 }}>CRM Solutions</h3>
              <p style={{ marginTop: 14, fontSize: 15.5, lineHeight: 1.6 }}>
                Hosted customer service CRM platforms — designed, customised, configured, deployed,
                and managed across the full lifecycle. Affordable, scalable, industry-tailored.
              </p>
              <div className="service-meta">
                <span className="tag"><span className="tag-dot"></span>Zoho Desk · Freshdesk · Microsoft Dynamics</span>
                <span className="tag">Mid-market</span>
              </div>
              <div className="service-stats">
                <div><strong>Full</strong><span>lifecycle ownership</span></div>
                <div><strong>Omni</strong><span>email · chat · phone · social</span></div>
                <div><strong>SLA</strong><span>configured & tracked</span></div>
              </div>
              <Link to="/services" className="btn-link" style={{ marginTop: 24 }}>
                See how it works <Icon.ArrowUpRight />
              </Link>
            </article>
          </div>

          <div className="reveal" style={{ marginTop: 56, textAlign: 'center' }}>
            <Link to="/services" className="btn btn-primary">
              See how we deliver <Icon.Arrow />
            </Link>
          </div>
        </div>
      </section>

      {/* RESULTS */}
      <section className="section results-section">
        <div className="results-bg" aria-hidden="true"></div>
        <div className="container">
          <div className="sect-head reveal">
            <div>
              <span className="eyebrow">02 / Results</span>
              <h2 className="h-1" style={{ marginTop: 16, color: 'var(--canvas)' }}>
                Proven outcomes<br />across industries.
              </h2>
            </div>
            <p className="lede" style={{ color: 'var(--slate-3)' }}>
              Numbers from live partner deployments — banking, BPO, utilities, travel.
            </p>
          </div>

          <div className="metrics-grid">
            <div className="metric reveal reveal-d1">
              <div className="metric-mono">CSAT</div>
              <div className="metric-num"><Counter value={92} suffix="%" /></div>
              <div className="metric-label">customer satisfaction</div>
              <div className="metric-bar"><div style={{ width: '92%' }}></div></div>
            </div>
            <div className="metric reveal reveal-d2">
              <div className="metric-mono">AUTOMATION</div>
              <div className="metric-num"><Counter value={70} suffix="%+" /></div>
              <div className="metric-label">customer interactions</div>
              <div className="metric-bar"><div style={{ width: '72%' }}></div></div>
            </div>
            <div className="metric reveal reveal-d3">
              <div className="metric-mono">COST</div>
              <div className="metric-num">−<Counter value={51} suffix="%" /></div>
              <div className="metric-label">operational reduction</div>
              <div className="metric-bar"><div style={{ width: '51%' }}></div></div>
            </div>
            <div className="metric reveal reveal-d4">
              <div className="metric-mono">DEPLOYMENT</div>
              <div className="metric-num"><Counter value={60} suffix=" d" /></div>
              <div className="metric-label">typical timeline</div>
              <div className="metric-bar"><div style={{ width: '40%' }}></div></div>
            </div>
          </div>

          <div className="reveal" style={{ marginTop: 56 }}>
            <Link to="/use-cases" className="btn-link" style={{ color: 'var(--canvas)', borderColor: 'var(--slate-1)' }}>
              View our case studies <Icon.ArrowUpRight />
            </Link>
          </div>
        </div>
      </section>

      {/* WHY LATTICORE */}
      <section className="section">
        <div className="container">
          <div className="why-grid">
            <div className="reveal">
              <span className="eyebrow">03 / Why Latticore</span>
              <h2 className="h-1" style={{ marginTop: 16 }}>
                Most enterprises<br />don't fail at AI.<br />
                <span style={{ color: 'var(--slate-2)' }}>They fail at the approach.</span>
              </h2>
            </div>
            <div className="reveal reveal-d1 why-prose">
              <p style={{ fontSize: 17, lineHeight: 1.65 }}>
                Initiatives launch without a clear business case, operating model alignment, or
                governance structure. The result is fragmented pilots and unclear ROI.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.65, marginTop: 18 }}>
                <strong>Latticore is different.</strong> We combine strategic rigour with hands-on
                delivery. Every engagement starts with a diagnostic, follows a structured roadmap,
                and is governed at the executive level — ensuring transformation delivers measurable,
                board-level impact.
              </p>
              <div className="why-pillars">
                <div><Icon.Layers /> Strategic rigour</div>
                <div><Icon.Diagram /> Structured roadmap</div>
                <div><Icon.Shield /> Executive governance</div>
              </div>
              <Link to="/contact" className="btn btn-primary" style={{ marginTop: 32 }}>
                Start the conversation <Icon.Arrow />
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
function AboutPage() {
  useReveal();
  const dimensions = [
    { num: '01', title: 'Commercial Architecture', body: 'Transformation must be financially designed — not retroactively justified.' },
    { num: '02', title: 'Operating Model Clarity', body: 'Workflows, roles, accountability, and performance metrics must evolve alongside automation.' },
    { num: '03', title: 'Roadmap Discipline', body: 'Initiatives must be sequenced deliberately, not deployed opportunistically.' },
    { num: '04', title: 'Executive Governance', body: 'Transformation requires oversight, steering cadence, and value realization tracking at leadership level.' },
  ];
  return (
    <div className="page">
      <section className="section" style={{ paddingTop: 'calc(var(--nav-h) + 80px)' }}>
        <div className="container">
          <div className="reveal">
            <span className="eyebrow">About</span>
            <h1 className="h-display" style={{ marginTop: 20, fontSize: 'clamp(48px, 6vw, 96px)' }}>
              About Latticore AI.
            </h1>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="who-grid">
            <div className="reveal">
              <span className="eyebrow">Who we are</span>
            </div>
            <div className="reveal reveal-d1 who-prose">
              <p className="who-lead">
                Latticore AI is a solutions and advisory firm focused on transforming customer
                service operations through Agentic AI and CRM technologies.
              </p>
              <p>
                We work with mid-sized enterprises navigating the shift toward intelligent operations —
                where cost discipline, productivity expectations, and AI adoption pressures converge.
              </p>
              <p>
                We provide end-to-end, outcome-based solutions and commercials — from initial
                assessment through technology deployment to ongoing management and optimisation.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* PHILOSOPHY */}
      <section className="section philosophy-section">
        <div className="container">
          <div className="sect-head reveal">
            <div>
              <span className="eyebrow">Our Philosophy</span>
              <h2 className="h-1" style={{ marginTop: 16 }}>
                How we think about<br />transformation.
              </h2>
            </div>
            <p className="lede">
              We believe AI transformation succeeds only when four dimensions are aligned.
              Without alignment, AI becomes fragmented innovation.<br />
              <strong style={{ color: 'var(--ink-1)' }}>With alignment, it becomes durable operating advantage.</strong>
            </p>
          </div>

          <div className="dimensions">
            {dimensions.map((d, i) => (
              <div key={d.num} className={`dimension reveal reveal-d${i + 1}`}>
                <div className="dimension-head">
                  <span className="mono dimension-num">{d.num}</span>
                  <div className="dimension-line"></div>
                </div>
                <h3 className="h-3" style={{ fontSize: 22 }}>{d.title}</h3>
                <p style={{ marginTop: 12, fontSize: 15, lineHeight: 1.6 }}>{d.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PARTNERS */}
      <section className="section partners-section">
        <div className="container">
          <div className="sect-head reveal">
            <div>
              <span className="eyebrow">Our Technology Partners</span>
              <h2 className="h-1" style={{ marginTop: 16 }}>
                Best-in-class<br />platforms. Delivered<br />end-to-end.
              </h2>
            </div>
            <p className="lede">
              We work with a strategic AI partner and industry-leading CRM platforms —
              each selected for fit with mid-sized enterprises and delivered end-to-end.
            </p>
          </div>

          <div className="reveal" style={{ marginBottom: 24 }}>
            <span className="eyebrow">Our Strategic Partner</span>
          </div>

          <div className="partner-card reveal">
            <div className="partner-card-head">
              <div className="partner-card-logo partner-card-logo-yellow">
                <img src="assets/yellow-ai-logo.webp" alt="Yellow.ai" />
              </div>
              <div>
                <span className="mono" style={{ color: 'var(--slate-2)' }}>AGENTIC AI PARTNER</span>
                <h3 className="h-2" style={{ marginTop: 6 }}>Yellow.ai</h3>
              </div>
            </div>
            <p style={{ fontSize: 16, lineHeight: 1.65, marginTop: 8 }}>
              Yellow.ai is a global leader in AI-powered customer service automation.
              Their agentic AI platform powers autonomous AI agents across voice, chat, and email —
              enabling enterprises to automate up to 90% of customer interactions while maintaining
              human-like conversational quality.
            </p>
            <div className="partner-stats">
              <div><strong>1,300+</strong><span>enterprise customers</span></div>
              <div><strong>85+</strong><span>countries served</span></div>
              <div><strong>135+</strong><span>languages supported</span></div>
              <div><strong>150+</strong><span>system integrations</span></div>
            </div>
          </div>

          <div className="reveal" style={{ marginTop: 64, marginBottom: 24 }}>
            <span className="eyebrow">CRM Platforms We Work With</span>
            <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.65, maxWidth: '70ch', color: 'var(--slate-1)' }}>
              We work with industry-leading CRM platforms to deliver affordable, scalable customer service solutions.
              Our CRM practice spans Zoho Desk, Freshdesk, and Microsoft Dynamics — providing omnichannel ticketing,
              workflow automation, AI-assisted agent tools, knowledge base management, and deep analytics.
            </p>
          </div>

          <div className="partner-card-row">
            <div className="partner-card reveal reveal-d1">
              <div className="partner-card-head">
                <div className="partner-card-logo partner-card-logo-zoho">
                  <img src="assets/zoho-desk-logo.png" alt="Zoho Desk" />
                </div>
                <div>
                  <span className="mono" style={{ color: 'var(--slate-2)' }}>CRM PLATFORM</span>
                  <h3 className="h-3" style={{ marginTop: 6, fontSize: 28 }}>Zoho Desk</h3>
                </div>
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.6, marginTop: 8 }}>
                Powerful omnichannel ticketing, workflow automation, and AI-assisted agent
                tools — at accessible mid-market pricing.
              </p>
            </div>
            <div className="partner-card reveal reveal-d2">
              <div className="partner-card-head">
                <div className="partner-card-logo partner-card-logo-fresh">
                  <img src="assets/freshdesk-logo.avif" alt="Freshdesk" />
                </div>
                <div>
                  <span className="mono" style={{ color: 'var(--slate-2)' }}>CRM PLATFORM</span>
                  <h3 className="h-3" style={{ marginTop: 6, fontSize: 28 }}>Freshdesk</h3>
                </div>
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.6, marginTop: 8 }}>
                Knowledge base management, deep analytics, and enterprise-grade scaling without
                the enterprise-tier complexity.
              </p>
            </div>
            <div className="partner-card reveal reveal-d3">
              <div className="partner-card-head">
                <div className="partner-card-logo partner-card-logo-dynamics">
                  <img src="uploads/dynamics.jpeg" alt="Microsoft Dynamics" />
                </div>
                <div>
                  <span className="mono" style={{ color: 'var(--slate-2)' }}>CRM PLATFORM</span>
                  <h3 className="h-3" style={{ marginTop: 6, fontSize: 28 }}>Microsoft Dynamics</h3>
                </div>
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.6, marginTop: 8 }}>
                Enterprise-grade CRM with deep Microsoft ecosystem integration — powerful workflow
                automation, AI-driven insights, and scalable service management.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ORIENTATION + QUOTE */}
      <section className="section orientation-section">
        <div className="container">
          <div className="orientation-grid">
            <div className="reveal">
              <span className="eyebrow">Our Orientation</span>
              <h2 className="h-1" style={{ marginTop: 16 }}>
                We engage at the<br />executive level.
              </h2>
              <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.6 }}>
                Latticore AI engages where:
              </p>
              <ul className="orientation-list">
                <li><Icon.Check /> Operating cost mandates are material</li>
                <li><Icon.Check /> AI adoption must be measurable</li>
                <li><Icon.Check /> Accountability must be clear</li>
                <li><Icon.Check /> Governance must be structured</li>
              </ul>
            </div>
            <blockquote className="quote-card reveal reveal-d1">
              <div className="quote-mark">"</div>
              <p>
                We believe transformation succeeds when incentives align, accountability is
                defined, and leadership owns outcomes. Our work is grounded in structure,
                discipline, and enterprise durability.
              </p>
              <div className="quote-attr mono">— LATTICORE CORE BELIEF</div>
            </blockquote>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ============================================================
   SERVICES PAGE
   ============================================================ */
function ServicesPage() {
  useReveal();
  const steps = [
    { n: '01', t: 'Diagnostic', b: 'We assess your current customer operations — cost structures, technology landscape, process maturity, and workforce utilisation — to establish a clear baseline and identify opportunities.' },
    { n: '02', t: 'Roadmap Design', b: 'We create a phased, executable plan aligned with your business priorities, with clear milestones, dependencies, and measurable outcomes at each stage.' },
    { n: '03', t: 'Business Case & ROI', b: 'We build a rigorous financial model that quantifies transformation value, risk-adjusts assumptions, and presents a board-ready investment case.' },
    { n: '04', t: 'Commercial Structuring', b: 'We design outcome-based commercial models — bundling design, development, deployment, ongoing management, and platform licensing into a single structure.' },
    { n: '05', t: 'Build & Deploy', b: 'We configure, customise, and deploy the solution — agentic AI, CRM, or both — integrating with your existing systems and going live on your timeline.' },
    { n: '06', t: 'Manage & Optimise', b: 'Post-deployment, we provide ongoing management, performance monitoring, and continuous optimisation to ensure sustained value.' },
  ];
  return (
    <div className="page">
      <section className="section" style={{ paddingTop: 'calc(var(--nav-h) + 80px)' }}>
        <div className="container">
          <div className="reveal">
            <span className="eyebrow">Services</span>
            <h1 className="h-display" style={{ marginTop: 20 }}>
              Strategy. Build. Deploy.<br />
              <span style={{ color: 'var(--slate-2)' }}>Manage.</span>
            </h1>
            <p className="lede" style={{ marginTop: 28 }}>
              End-to-end, outcome-based solutions delivered from strategy through deployment to
              ongoing management — across two complementary services.
            </p>
          </div>

          <div className="services-anchor-nav reveal reveal-d1">
            {['service-ai','service-crm','service-combined','service-deliver','service-pricing'].map((id, i) => (
              <a key={id} href={'#' + id} onClick={(e) => {
                e.preventDefault();
                document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
              }}>
                {['01 Agentic AI','02 CRM Solutions','03 Better Together','04 Delivery','05 Pricing'][i]}
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* SERVICE 1 — AGENTIC AI */}
      <section className="section service-detail" id="service-ai">
        <div className="container">
          <div className="service-detail-grid">
            <div className="reveal">
              <div className="service-num-large">01</div>
              <span className="eyebrow">Service one</span>
              <h2 className="h-1" style={{ marginTop: 16 }}>
                Agentic AI for<br />Customer Service.
              </h2>
              <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.65, maxWidth: 56 + 'ch' }}>
                We deploy autonomous AI agents that handle customer interactions across voice,
                chat, email, and messaging channels. These agents don't just follow scripts —
                they understand intent, maintain context, and resolve complex queries
                independently, escalating to human agents only when needed.
              </p>
              <div className="service-callout reveal reveal-d2">
                <div className="callout-stat"><strong>6 wks</strong><span>Go-live</span></div>
                <div className="callout-divider"></div>
                <div className="callout-stat"><strong>70–90%</strong><span>Auto-resolved</span></div>
                <div className="callout-divider"></div>
                <div className="callout-stat"><strong>Yellow.ai</strong><span>Powered by</span></div>
              </div>
            </div>

            <div className="service-detail-side reveal reveal-d1">
              <div className="detail-block">
                <h4 className="mono detail-mono">WHAT IT COVERS</h4>
                <ul className="checklist">
                  <li><Icon.Voice /> Voice AI agents for inbound and outbound calls</li>
                  <li><Icon.Chat /> Chat & messaging — web, WhatsApp, Facebook, Instagram</li>
                  <li><Icon.Mail /> Email automation and intelligent routing</li>
                  <li><Icon.Mesh /> Seamless handoff to human agents with full context</li>
                  <li><Icon.Globe /> Multilingual support across 135+ languages</li>
                  <li><Icon.Diagram /> Integration with CRM, ticketing, enterprise systems</li>
                </ul>
              </div>
              <div className="detail-block">
                <h4 className="mono detail-mono">WHO IT'S FOR</h4>
                <p style={{ fontSize: 15, lineHeight: 1.6 }}>
                  Mid-sized enterprises — financial services, retail, healthcare, logistics,
                  utilities, travel — looking to reduce customer service costs, improve response
                  times, and scale support without proportional headcount.
                </p>
                <div className="industry-chips">
                  <span className="tag"><Icon.Bank /> Banking</span>
                  <span className="tag"><Icon.Headphones /> Retail</span>
                  <span className="tag"><Icon.Truck /> Logistics</span>
                  <span className="tag"><Icon.Plane /> Travel</span>
                  <span className="tag"><Icon.Spark /> Utilities</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SERVICE 2 — CRM */}
      <section className="section service-detail service-detail-alt" id="service-crm">
        <div className="container">
          <div className="service-detail-grid">
            <div className="reveal">
              <div className="service-num-large">02</div>
              <span className="eyebrow">Service two</span>
              <h2 className="h-1" style={{ marginTop: 16 }}>CRM Solutions.</h2>
              <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.65, maxWidth: 56 + 'ch' }}>
                We design, customise, configure, deploy, and manage hosted customer service CRM
                solutions across their full lifecycle. Our CRM practice is platform-flexible,
                working with <strong>Zoho Desk</strong>, <strong>Freshdesk</strong>, and <strong>Microsoft Dynamics</strong>
                {' '}to deliver affordable, scalable service CRM tailored to each client.
              </p>
              <div className="service-callout reveal reveal-d2">
                <div className="callout-stat"><strong>Full</strong><span>Lifecycle</span></div>
                <div className="callout-divider"></div>
                <div className="callout-stat"><strong>Omni</strong><span>Channel</span></div>
                <div className="callout-divider"></div>
                <div className="callout-stat"><strong>Mid-mkt</strong><span>Pricing</span></div>
              </div>
            </div>

            <div className="service-detail-side reveal reveal-d1">
              <div className="detail-block">
                <h4 className="mono detail-mono">WHAT IT COVERS</h4>
                <ul className="checklist">
                  <li><Icon.Diagram /> Workflow customisation and automation</li>
                  <li><Icon.Mesh /> Omnichannel ticketing — email, chat, phone, social, web</li>
                  <li><Icon.Layers /> Agent workspace setup and productivity tools</li>
                  <li><Icon.Spark /> Knowledge base & self-service portal</li>
                  <li><Icon.Lock /> Access management & role-based permissions</li>
                  <li><Icon.Shield /> SLA configuration and compliance tracking</li>
                  <li><Icon.Diagram /> Reporting, analytics, performance dashboards</li>
                  <li><Icon.Globe /> Hosting & regulatory compliance</li>
                </ul>
              </div>
              <div className="detail-block">
                <h4 className="mono detail-mono">WHO IT'S FOR</h4>
                <p style={{ fontSize: 15, lineHeight: 1.6 }}>
                  Organisations that need a robust, affordable customer service CRM without the
                  complexity and cost of enterprise-tier platforms. Whether you're replacing
                  spreadsheets, migrating from a legacy system, or setting up your first dedicated
                  service desk — we handle the entire journey.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* COMBINED */}
      <section className="section combined-section" id="service-combined">
        <div className="container">
          <div className="combined-card reveal">
            <span className="eyebrow no-line" style={{ color: 'var(--accent-glow)' }}>03 / Better together</span>
            <h2 className="h-1" style={{ color: 'var(--canvas)', marginTop: 16, maxWidth: 18 + 'ch' }}>
              AI on the front line. CRM in the core.
            </h2>
            <p style={{ color: 'var(--slate-3)', fontSize: 17, lineHeight: 1.65, marginTop: 22, maxWidth: 60 + 'ch' }}>
              Our two services work seamlessly together. <strong style={{ color: 'var(--canvas)' }}>Agentic AI handles the front line</strong> — automating customer interactions across channels.
              {' '}<strong style={{ color: 'var(--canvas)' }}>The CRM manages the back end</strong> — tracking cases, routing escalations, capturing data, and enabling your team.
              When deployed together, you get a fully integrated, intelligent customer service operation.
            </p>
            <div className="combined-diagram">
              <div className="cd-col">
                <div className="cd-label mono">FRONT LINE</div>
                <div className="cd-pill cd-pill-ai"><Icon.Voice /> Voice AI</div>
                <div className="cd-pill cd-pill-ai"><Icon.Chat /> Chat AI</div>
                <div className="cd-pill cd-pill-ai"><Icon.Mail /> Email AI</div>
              </div>
              <div className="cd-bridge">
                <svg viewBox="0 0 200 80" preserveAspectRatio="none" style={{ width: '100%', height: 80 }}>
                  <path d="M0 20 L200 20" stroke="rgba(96, 165, 250, 0.6)" strokeWidth="1" fill="none" strokeDasharray="3 3" />
                  <path d="M0 40 L200 40" stroke="rgba(96, 165, 250, 0.6)" strokeWidth="1" fill="none" strokeDasharray="3 3" />
                  <path d="M0 60 L200 60" stroke="rgba(96, 165, 250, 0.6)" strokeWidth="1" fill="none" strokeDasharray="3 3" />
                </svg>
                <div className="cd-bridge-label mono">CONTEXT FLOW</div>
              </div>
              <div className="cd-col">
                <div className="cd-label mono">BACK END</div>
                <div className="cd-pill cd-pill-crm"><Icon.Diagram /> Tickets</div>
                <div className="cd-pill cd-pill-crm"><Icon.Layers /> Routing</div>
                <div className="cd-pill cd-pill-crm"><Icon.Shield /> Analytics</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* DELIVERY APPROACH */}
      <section className="section" id="service-deliver">
        <div className="container">
          <div className="sect-head reveal">
            <div>
              <span className="eyebrow">04 / How we deliver</span>
              <h2 className="h-1" style={{ marginTop: 16 }}>
                A structured methodology<br />from assessment to live.
              </h2>
            </div>
            <p className="lede">
              Every engagement follows the same six-step methodology — designed to move from
              assessment to live deployment with speed and discipline.
            </p>
          </div>

          <ol className="delivery-steps">
            {steps.map((s, i) => (
              <li key={s.n} className={`delivery-step reveal reveal-d${(i % 3) + 1}`}>
                <div className="step-num mono">{s.n}</div>
                <div className="step-content">
                  <h3 className="h-3">{s.t}</h3>
                  <p style={{ marginTop: 10, fontSize: 15, lineHeight: 1.6 }}>{s.b}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* PRICING */}
      <section className="section pricing-section" id="service-pricing">
        <div className="container">
          <div className="pricing-card reveal">
            <span className="eyebrow">05 / Pricing</span>
            <h2 className="h-1" style={{ marginTop: 16 }}>
              Flexible, outcome-based pricing.
            </h2>
            <p style={{ marginTop: 20, fontSize: 17, lineHeight: 1.65, maxWidth: 70 + 'ch' }}>
              Our pricing is designed around outcomes, not inputs. Engagement pricing is flexible
              and can bundle design, development, deployment, ongoing management, and platform
              licence costs into a single commercial structure — tailored to your scale, scope,
              and operational needs.
            </p>
            <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.65, color: 'var(--slate-1)' }}>
              We work with each client to define a commercial model that aligns incentives and
              delivers measurable return on investment.
            </p>
            <div className="pricing-bundle">
              <div>Design</div>
              <div className="bundle-plus">+</div>
              <div>Build</div>
              <div className="bundle-plus">+</div>
              <div>Deploy</div>
              <div className="bundle-plus">+</div>
              <div>Manage</div>
              <div className="bundle-plus">+</div>
              <div>License</div>
              <div className="bundle-eq">=</div>
              <div className="bundle-result">One commercial structure</div>
            </div>
            <Link to="/contact" className="btn btn-primary" style={{ marginTop: 36 }}>
              Discuss your requirements <Icon.Arrow />
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}

window.HomePage = HomePage;
window.AboutPage = AboutPage;
window.ServicesPage = ServicesPage;