import { setRequestLocale } from 'next-intl/server';
import type { Metadata } from 'next';
import ServicesHero from '@/components/sections/services/ServicesHero';
import ServicePillar from '@/components/sections/services/ServicePillar';
import AILayer from '@/components/sections/services/AILayer';
import ServicesCTA from '@/components/sections/services/ServicesCTA';
// Icon names passed as strings — resolved in client component

// ─── Metadata ─────────────────────────────────────────────────────────────────

export const metadata: Metadata = {
  title: 'Services | LetsBe. — Bespoke Digital Studio',
  description:
    'From bespoke web design to private infrastructure and AI automation — three pillars of digital excellence, engineered for ambitious businesses.',
};

// ─── Service data ──────────────────────────────────────────────────────────────

export const SERVICE_PILLARS = [
  {
    id: 'design-development',
    numeral: '01',
    title: 'Web Design & Development',
    description:
      'Your digital presence is not a template waiting to be filled — it is an engineered expression of your brand. We design and build bespoke websites and web applications from a blank canvas, crafting every interaction, every transition, and every responsive breakpoint with intention. Our work is fast by architecture, not by accident: semantic markup, optimised asset pipelines, and edge-deployed rendering that scores at the top of the Core Web Vitals chart. Whether you need a high-conversion marketing site, a complex SaaS application, or a multi-region e-commerce platform, we deliver a digital product that is built to last and built to grow.',
    background: 'bg-surface' as const,
    features: [
      {
        icon: 'Palette',
        title: 'Bespoke UI/UX Design',
        description:
          'Custom Figma-to-code workflows. Every layout, component, and motion decision serves your brand — never a theme, never a shortcut.',
      },
      {
        icon: 'Globe',
        title: 'Modern Web Applications',
        description:
          'React, Next.js, and edge-deployed architecture for SPAs, SSR, and full-stack applications that scale without compromise.',
      },
      {
        icon: 'ShoppingCart',
        title: 'E-commerce & Platforms',
        description:
          'Headless storefronts, custom checkout flows, and multi-currency platforms engineered for high-volume retail.',
      },
      {
        icon: 'Zap',
        title: 'Performance Optimisation',
        description:
          'LCP under one second, zero layout shift. We audit, refactor, and rebuild performance into the foundation of your product.',
      },
    ],
  },
  {
    id: 'custom-systems',
    numeral: '02',
    title: 'Custom Systems',
    description:
      'Off-the-shelf software makes assumptions about your business. We don\'t. When your operations outgrow spreadsheets and generic SaaS platforms, we build the exact system your team needs — with the data model, the permission structure, and the workflow logic that reflects how you actually work. From CRM platforms tailored to your sales cycle, to internal management tools that replace three different subscriptions, to API architecture that connects your existing stack into a coherent whole — every system we build is owned by you, documented in full, and maintained without vendor dependency.',
    background: 'bg-surface-low' as const,
    features: [
      {
        icon: 'Database',
        title: 'CRM & Management',
        description:
          'Purpose-built relationship and pipeline management with the fields, views, and automation rules your team will actually use.',
      },
      {
        icon: 'Code2',
        title: 'Bespoke Software',
        description:
          'Full-stack business applications: from quoting and booking platforms to complex multi-tenant SaaS products.',
      },
      {
        icon: 'GitBranch',
        title: 'API Architecture',
        description:
          'RESTful and GraphQL APIs, webhook integrations, and the middleware layer that makes your disparate tools speak the same language.',
      },
      {
        icon: 'Wrench',
        title: 'Internal Tooling',
        description:
          'Admin dashboards, reporting portals, and workflow automation that give your team unfair operational advantages.',
      },
    ],
  },
  {
    id: 'infrastructure',
    numeral: '03',
    title: 'Digital Infrastructure',
    description:
      'Data sovereignty is not a feature — it is a right. We provision and manage private cloud infrastructure that removes your reliance on opaque hyperscalers and shared-hosting providers. Your data lives where you say it lives, on servers you control, with access policies your legal team can actually review. We handle the full infrastructure lifecycle: dedicated server provisioning, containerised deployments with Docker and Kubernetes, automated backup strategies, TLS certificate management, and 24/7 uptime monitoring. When the European data-residency audit arrives, you will be the only business in the room with a clean answer.',
    background: 'bg-surface' as const,
    features: [
      {
        icon: 'Server',
        title: 'Dedicated Hosting',
        description:
          'Private VPS and bare-metal environments in EU data centres — no shared neighbours, no noisy-neighbour risk.',
      },
      {
        icon: 'Shield',
        title: 'Data Sovereignty',
        description:
          'GDPR-aligned architecture with data-residency guarantees, audit trails, and full client ownership of storage and credentials.',
      },
      {
        icon: 'Lock',
        title: 'Security Hardening',
        description:
          'WAF configuration, DDoS mitigation, secrets management, and penetration-testing-ready hardened deployment pipelines.',
      },
      {
        icon: 'Settings',
        title: 'DevOps & Maintenance',
        description:
          'CI/CD pipelines, container orchestration, rolling deployments, and proactive monitoring so your team ships without fear.',
      },
    ],
  },
] as const;

// ─── AI Layer data ─────────────────────────────────────────────────────────────

export const AI_CAPABILITIES = [
  {
    id: 'ai-teammate',
    title: 'AI Teammate',
    description:
      'An operational assistant embedded directly into your workflow. Retrieves and summarises emails, drafts responses, executes tasks across connected tools, and surfaces the information your team needs before they know they need it.',
  },
  {
    id: 'customer-facing-ai',
    title: 'Customer-Facing AI',
    description:
      'Intelligent conversational interfaces that handle enquiries, qualify leads, make product recommendations, and personalise the user journey — at scale, around the clock, without extra headcount.',
  },
  {
    id: 'data-intelligence',
    title: 'Data Intelligence',
    description:
      'Automated analytics pipelines, predictive modelling, and scheduled reporting that transform the data your systems collect into decisions your leadership team can act on.',
  },
] as const;

// ─── Page ──────────────────────────────────────────────────────────────────────

type Props = {
  params: Promise<{ locale: string }>;
};

export default async function ServicesPage({ params }: Props) {
  const { locale } = await params;
  setRequestLocale(locale);

  return (
    <main>
      <ServicesHero />

      {SERVICE_PILLARS.map((pillar, index) => (
        <ServicePillar
          key={pillar.id}
          pillar={pillar}
          index={index}
        />
      ))}

      <AILayer capabilities={AI_CAPABILITIES} />

      <ServicesCTA />
    </main>
  );
}
