/* global React, Link, Icon, useReveal, Counter */
const { useState: p2UseState, useEffect: p2UseEffect } = React;

/* ============================================================
   USE CASES PAGE — expandable cards
   ============================================================ */
const CASES = [
  {
    id: 'bpo',
    industry: 'Business Process Outsourcing',
    icon: 'Headphones',
    title: 'Customer service automation for a US-based BPO',
    one: '70%+ automation. 92% CSAT. Live in 6 weeks.',
    accent: '#3B82F6',
    stats: [
      { v: '70%+', l: 'interactions automated' },
      { v: '92%', l: 'CSAT score' },
      { v: '250K+', l: 'sessions handled' },
      { v: '6 wk', l: 'deployment' },
    ],
    challenge: 'A premium US-based BPO with 25+ years of experience was facing years of stalled chatbot deployments with previous vendors — high costs and minimal results. Their clients needed faster, smarter customer service without sacrificing the human touch.',
    solution: 'We deployed AI-powered chat agents that went live in just 6 weeks. The solution automates routine customer FAQs, provides empathetic escalation flows for sensitive interactions, and integrates seamlessly with client-specific applications for warranty lookups and order management. Proactive messaging during outages and high-traffic events keeps customers informed without agent intervention.',
    results: [
      '70%+ automation of customer interactions',
      '92% customer satisfaction (CSAT) score',
      '250,000+ sessions handled',
      '6-week deployment timeline',
      'Significant reduction in operational costs and agent burnout',
    ],
    tags: ['Chat AI', 'Empathetic escalation', 'Proactive messaging', 'Warranty lookup'],
  },
  {
    id: 'waste',
    industry: 'Utilities · Waste Management',
    icon: 'Truck',
    title: 'Voice AI for a North American waste management company',
    one: '850K monthly calls. 24/7 bilingual. Millions saved.',
    accent: '#06B6D4',
    stats: [
      { v: '850K', l: 'monthly calls handled' },
      { v: '100K+', l: 'unique users / year' },
      { v: '24/7', l: 'EN / FR availability' },
      { v: '$M+', l: 'operational savings' },
    ],
    challenge: 'A major North American waste management company was handling 850,000+ monthly phone calls and website requests for routine services — pickup scheduling, billing, driver tracking, missed pickup reporting. They needed 24/7 automated support in English and French across voice, email, and web channels.',
    solution: 'We deployed a voice AI agent and an after-hours voice bot to provide round-the-clock self-service options. The solution handles pickup scheduling, billing and payments, service upgrades, and missed pickup reports — automatically resolving routine queries and seamlessly transferring complex issues to human agents with full context.',
    results: [
      '100,000+ unique users served per year',
      'Millions of dollars in operational savings',
      '24/7 bilingual support (English and French)',
      'High customer satisfaction with faster, more reliable service',
      'Significant reduction in call centre workload',
    ],
    tags: ['Voice AI', 'After-hours bot', 'Bilingual', 'Self-service'],
  },
  {
    id: 'travel',
    industry: 'Travel & Tourism',
    icon: 'Plane',
    title: 'Intelligent travel assistant for an aviation group platform',
    one: 'Generative AI. Goal-based conversations. Web + WhatsApp.',
    accent: '#6366F1',
    stats: [
      { v: 'Full', l: 'booking lifecycle' },
      { v: '24/7', l: 'web & WhatsApp' },
      { v: 'Live', l: 'analytics dashboards' },
      { v: 'Gen', l: 'AI-powered' },
    ],
    challenge: 'A travel experience platform backed by a major airline group was struggling with limited agent capacity to handle high-volume queries — from itinerary planning to post-booking changes, cancellations, and refund requests. They needed to automate assistance across the entire customer journey while maintaining personalised service.',
    solution: 'We deployed generative AI-powered travel assistants on web and WhatsApp with goal-based conversational capabilities. Unlike traditional chatbots, these agents dynamically adjust to changing conversation context — handling everything from open-ended requests like "plan a four-day trip to Bali with young kids" to deterministic tasks like "cancel my booking." The solution integrates with the client\'s ticketing system for automated case management and provides live dashboards for customer journey analytics.',
    results: [
      'Automated assistance across the full booking lifecycle',
      'Significant reduction in agent workload for routine queries',
      'Personalised, near-human planning experiences',
      '24/7 availability on web and WhatsApp',
      'Data-driven insights for continuous service improvement',
    ],
    tags: ['Generative AI', 'Goal-based', 'WhatsApp', 'Itinerary planning'],
  },
  {
    id: 'bank',
    industry: 'Banking & Financial Services',
    icon: 'Bank',
    title: 'Digital banking transformation for a Philippine bank',
    one: 'Adoption from 28K → 120K. 51% lower CS cost.',
    accent: '#10B981',
    stats: [
      { v: '120K', l: 'monthly users' },
      { v: '4.3×', l: 'adoption growth' },
      { v: '−51%', l: 'CS operating cost' },
      { v: 'Zero', l: 'migration disruption' },
    ],
    challenge: 'A leading Philippine bank needed to scale customer self-service options and migrate from an outdated chatbot vendor. The existing system had low adoption, limited functionality, and poor customer experience.',
    solution: 'We deployed a conversational AI platform that enabled rapid migration from the old vendor with seamless transition. The new solution provides intelligent self-service across multiple channels, with automated query resolution, smart routing, and integration with the bank\'s core systems. The low-code platform enabled quick scaling of new use cases as customer needs evolved.',
    results: [
      'Chatbot adoption grew from 28,000 to 120,000 users per month',
      '51% reduction in customer service operating costs',
      'Seamless migration from legacy vendor with zero disruption',
      'Marked increase in customer satisfaction and self-service adoption',
    ],
    tags: ['Conversational AI', 'Vendor migration', 'Low-code', 'Multi-channel'],
  },
];

function UseCasesPage() {
  useReveal();
  const [openId, setOpenId] = p2UseState(null);
  const [filter, setFilter] = p2UseState('all');

  const filtered = filter === 'all'
    ? CASES
    : CASES.filter(c => c.id === filter);

  return (
    <div className="page">
      <section className="section" style={{ paddingTop: 'calc(var(--nav-h) + 80px)' }}>
        <div className="container">
          <div className="reveal">
            <span className="eyebrow">Use Cases</span>
            <h1 className="h-display" style={{ marginTop: 20 }}>
              Real outcomes.<br/>
              <span style={{ color: 'var(--slate-2)' }}>Across industries.</span>
            </h1>
            <p className="lede" style={{ marginTop: 28 }}>
              Partner case studies demonstrating the measurable impact of our agentic AI
              solutions across different industries and use cases. Names anonymised.
            </p>
          </div>

          <div className="case-filters reveal reveal-d1">
            <button className={`case-filter ${filter === 'all' ? 'active' : ''}`} onClick={() => setFilter('all')}>
              All cases <span className="case-filter-count">{CASES.length}</span>
            </button>
            {CASES.map(c => (
              <button key={c.id} className={`case-filter ${filter === c.id ? 'active' : ''}`} onClick={() => setFilter(c.id)}>
                {c.industry.split('·')[0].trim()}
              </button>
            ))}
          </div>
        </div>
      </section>

      <section className="section-tight" style={{ paddingBottom: 96 }}>
        <div className="container">
          <div className="cases-grid">
            {filtered.map((c, i) => {
              const IconComp = Icon[c.icon];
              const isOpen = openId === c.id;
              return (
                <article
                  key={c.id}
                  className={`case-card reveal reveal-d${(i % 4) + 1} ${isOpen ? 'open' : ''}`}
                  style={{ '--case-accent': c.accent }}
                >
                  <button className="case-summary" onClick={() => setOpenId(isOpen ? null : c.id)}>
                    <div className="case-summary-top">
                      <div className="case-icon"><IconComp /></div>
                      <span className="mono case-industry">{c.industry}</span>
                      <span className="case-toggle">
                        {isOpen ? <Icon.X /> : <Icon.Plus />}
                      </span>
                    </div>
                    <h3 className="h-3 case-title">{c.title}</h3>
                    <p className="case-one">{c.one}</p>
                    <div className="case-stats-row">
                      {c.stats.map((s, idx) => (
                        <div key={idx} className="case-stat">
                          <strong>{s.v}</strong>
                          <span>{s.l}</span>
                        </div>
                      ))}
                    </div>
                  </button>

                  {isOpen && (
                    <div className="case-detail">
                      <div className="case-detail-grid">
                        <div className="case-block">
                          <div className="case-block-head">
                            <span className="mono">CHALLENGE</span>
                            <div className="case-block-line"></div>
                          </div>
                          <p>{c.challenge}</p>
                        </div>
                        <div className="case-block">
                          <div className="case-block-head">
                            <span className="mono">SOLUTION</span>
                            <div className="case-block-line"></div>
                          </div>
                          <p>{c.solution}</p>
                        </div>
                        <div className="case-block">
                          <div className="case-block-head">
                            <span className="mono">RESULTS</span>
                            <div className="case-block-line"></div>
                          </div>
                          <ul className="case-results-list">
                            {c.results.map((r, idx) => (
                              <li key={idx}><Icon.Check /> {r}</li>
                            ))}
                          </ul>
                        </div>
                      </div>
                      <div className="case-tags">
                        {c.tags.map(t => <span key={t} className="tag">{t}</span>)}
                      </div>
                    </div>
                  )}
                </article>
              );
            })}
          </div>

          {/* CTA */}
          <div className="cases-cta reveal" style={{ marginTop: 80 }}>
            <h3 className="h-2" style={{ maxWidth: '20ch' }}>
              Your industry next?
            </h3>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--slate-1)', maxWidth: '50ch', marginTop: 12 }}>
              We work across banking, healthcare, retail, logistics, utilities, and travel.
              Tell us about your operation — we'll show you what's possible.
            </p>
            <Link to="/contact" className="btn btn-primary" style={{ marginTop: 28 }}>
              Start the conversation <Icon.Arrow />
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
function ContactPage() {
  useReveal();
  return (
    <div className="page">
      <section className="section" style={{ paddingTop: 'calc(var(--nav-h) + 80px)', paddingBottom: 64 }}>
        <div className="container">
          <div className="reveal">
            <span className="eyebrow">Contact</span>
            <h1 className="h-display" style={{ marginTop: 20 }}>
              Ready to transform<br/>
              <span style={{ color: 'var(--slate-2)' }}>customer operations?</span>
            </h1>
            <p className="lede" style={{ marginTop: 28, maxWidth: '64ch' }}>
              Whether you're exploring Agentic AI, looking for a CRM solution, or want to
              understand what's possible — we'd like to hear from you.
            </p>
          </div>
        </div>
      </section>

      <section className="section-tight" style={{ paddingBottom: 96 }}>
        <div className="container">
          <div className="contact-centered reveal">
            <div className="contact-meta-block">
              <h4 className="mono detail-mono">DIRECT</h4>
              <a className="contact-line" href="mailto:info@latticoreai.com">
                <Icon.Mail size={24} />
                <div>
                  <div className="contact-line-label">Email</div>
                  <div className="contact-line-value">info@latticoreai.com</div>
                </div>
              </a>
              <a className="contact-line" href="https://www.linkedin.com/company/latticore-ai/" target="_blank" rel="noreferrer">
                <Icon.Linkedin size={24} />
                <div>
                  <div className="contact-line-label">LinkedIn</div>
                  <div className="contact-line-value">@latticore-ai</div>
                </div>
              </a>
            </div>

            <div className="contact-meta-block">
              <h4 className="mono detail-mono">WHAT TO EXPECT</h4>
              <ol className="expect-list">
                <li><span className="mono">01</span> A 30-minute discovery call within 48 hours.</li>
                <li><span className="mono">02</span> A scoped diagnostic proposal — no obligation.</li>
                <li><span className="mono">03</span> A clear path: roadmap, pricing, timeline.</li>
              </ol>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.UseCasesPage = UseCasesPage;
window.ContactPage = ContactPage;