import { ServiceHeroImage } from '@/components/ui/service-hero-image'
import { Header } from '@/components/layout/header'
import { Footer } from '@/components/layout/footer'
import { ScrollReveal } from '@/components/ui/scroll-reveal'
import Link from 'next/link'
import {
  Container,
  ArrowRight,
  CheckCircle2,
  TrendingUp,
  Shield,
  Zap,
  RefreshCw,
  GitBranch,
  Activity,
  Layers,
  Clock,
  Users,
  Target,
  BarChart3,
  Globe,
  Code,
  Rocket,
} from 'lucide-react'

export const metadata = {
  title: 'DevOps Services - Drish Infra',
  description:
    'Enterprise DevOps consulting, implementation, and managed services. CI/CD pipelines, IaC, containerization, and culture transformation for faster delivery.',
}

export default function DevOpsPage() {
  return (
    <main className="min-h-screen bg-[#f8fafc] text-slate-900">
      <Header />

      {/* ─── SECTION 1 · Hero — Pipeline Visual ──── */}
      <section className="relative overflow-hidden bg-gradient-to-br from-lime-950 via-blue-950 to-blue-950 text-white pt-14 pb-20 lg:pt-16 lg:pb-28">
        <div className="absolute inset-0 opacity-[0.04]" style={{ backgroundImage: 'linear-gradient(90deg, #84cc16 1px, transparent 1px), linear-gradient(180deg, #84cc16 1px, transparent 1px)', backgroundSize: '48px 48px' }} />
        <div className="relative max-w-7xl mx-auto px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="text-center lg:text-left">
              <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-lime-400 to-blue-500 flex items-center justify-center mb-6 shadow-lg shadow-lime-500/30">
                <Container className="w-7 h-7 text-white" />
              </div>
              <h1 className="text-4xl lg:text-5xl xl:text-6xl font-extrabold leading-[1.1] mb-6">
                DevOps That <span className="bg-gradient-to-r from-lime-400 to-blue-400 bg-clip-text text-transparent">Accelerates Delivery</span>
              </h1>
              <p className="text-lg text-slate-300 leading-relaxed mb-8 max-w-xl">
                We build DevOps pipelines that turn months into minutes. From code commit to production deployment — automated, tested, and reliable.
              </p>
              <div className="flex justify-center lg:justify-start flex-wrap gap-4">
                <Link href="/contact" className="inline-flex items-center gap-2 bg-gradient-to-r from-lime-500 to-blue-600 hover:from-lime-400 hover:to-blue-500 text-white font-bold text-sm px-6 py-3 rounded-xl shadow-lg shadow-lime-500/25 hover:shadow-lime-400/40 transition-all duration-300 hover:scale-105">
                  Start DevOps Transformation <ArrowRight className="w-4 h-4" />
                </Link>
                <Link href="#practices" className="inline-flex items-center gap-2 border border-white/20 hover:border-lime-400/40 text-white/80 hover:text-white font-semibold text-sm px-6 py-3 rounded-xl transition-all duration-300">
                  Our Practices
                </Link>
              </div>
            </div>
            {/* Hero Image */}
            <div className="block order-first lg:order-last">
              <ServiceHeroImage label="Devops" stats={[{ value: '10X', label: 'Faster Deploy' }, { value: '80%', label: 'Less Downtime' }, { value: '95%', label: 'Automation' }]}>
              <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-lime-500 to-blue-600 flex items-center justify-center shadow-lg shadow-lime-500/20">
                <Container className="w-8 h-8 text-white" />
              </div>
            </ServiceHeroImage>
            </div>
          </div>
        </div>
      </section>

      {/* ─── SECTION 2 · DevOps Metrics ────────────── */}
      <ScrollReveal>
      <section className="py-12 bg-gradient-to-r from-lime-950 via-blue-950 to-blue-950">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {[
              { number: '10×', label: 'Faster Deployments', sub: 'From weeks to minutes' },
              { number: '85%', label: 'Fewer Production Bugs', sub: 'Through automated testing' },
              { number: '60%', label: 'Faster Recovery', sub: 'MTTR reduction average' },
              { number: '99.99%', label: 'Deployment Success', sub: 'Automated pipeline reliability' },
            ].map((m, i) => (
              <div key={i} className="text-center">
                <p className="text-3xl lg:text-4xl font-extrabold text-white mb-1">{m.number}</p>
                <p className="text-sm font-semibold text-lime-300">{m.label}</p>
                <p className="text-xs text-slate-400 mt-1">{m.sub}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      </ScrollReveal>

      {/* ─── SECTION 3 · Core DevOps Practices ────── */}
      <ScrollReveal delay={100}>
      <section id="practices" className="py-12 lg:py-16">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="text-center mb-12">
            <p className="text-xs font-bold text-lime-600 uppercase tracking-wider mb-3">Core Practices</p>
            <h2 className="text-3xl lg:text-4xl font-extrabold mb-4">The DevOps Pillars We Implement</h2>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              { title: 'Continuous Integration', desc: 'Automated build and test on every commit. Catch bugs before they reach staging.', icon: GitBranch, color: 'from-lime-500 to-blue-600' },
              { title: 'Continuous Delivery', desc: 'Automated deployment pipelines with approval gates and rollback capabilities.', icon: Rocket, color: 'from-blue-500 to-blue-600' },
              { title: 'Infrastructure as Code', desc: 'Version-controlled, reproducible infrastructure. Terraform, CloudFormation, Pulumi.', icon: Code, color: 'from-blue-500 to-blue-600' },
              { title: 'Monitoring & Feedback', desc: 'Real-time observability with automated alerts and feedback loops to development.', icon: Activity, color: 'from-blue-500 to-blue-600' },
            ].map((item, i) => {
              const Icon = item.icon
              return (
                <div key={i} className="group bg-white rounded-2xl border border-slate-200 p-6 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                  <div className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${item.color} flex items-center justify-center mb-5 shadow-lg group-hover:scale-110 transition-transform duration-300`}>
                    <Icon className="w-7 h-7 text-white" />
                  </div>
                  <h3 className="font-bold text-lg mb-2">{item.title}</h3>
                  <p className="text-sm text-slate-500 leading-relaxed">{item.desc}</p>
                </div>
              )
            })}
          </div>
        </div>
      </section>
      </ScrollReveal>

      {/* ─── SECTION 4 · Tool Chain ────────────────── */}
      <ScrollReveal>
      <section className="py-12 lg:py-16 bg-gradient-to-b from-white to-slate-50">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="text-center mb-12">
            <p className="text-xs font-bold text-lime-600 uppercase tracking-wider mb-3">Tool Chain</p>
            <h2 className="text-3xl lg:text-4xl font-extrabold mb-4">We Master Every DevOps Tool</h2>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {[
              { category: 'Source Control', tools: ['Git', 'GitHub', 'GitLab', 'Bitbucket'] },
              { category: 'CI/CD', tools: ['Jenkins', 'GitHub Actions', 'GitLab CI', 'ArgoCD'] },
              { category: 'IaC', tools: ['Terraform', 'Ansible', 'Pulumi', 'CloudFormation'] },
              { category: 'Containers', tools: ['Docker', 'Kubernetes', 'Helm', 'Istio'] },
              { category: 'Monitoring', tools: ['Prometheus', 'Grafana', 'Datadog', 'ELK'] },
              { category: 'Secrets', tools: ['Vault', 'AWS SM', 'SOPS', 'Sealed Secrets'] },
              { category: 'Testing', tools: ['Selenium', 'Jest', 'SonarQube', 'Trivy'] },
              { category: 'ChatOps', tools: ['Slack', 'Teams', 'PagerDuty', 'Opsgenie'] },
            ].map((cat, i) => (
              <div key={i} className="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-all duration-200">
                <p className="text-xs font-bold text-lime-600 uppercase tracking-wider mb-3">{cat.category}</p>
                <div className="space-y-1.5">
                  {cat.tools.map((tool, j) => (
                    <div key={j} className="flex items-center gap-2 text-sm text-slate-600">
                      <div className="w-1.5 h-1.5 rounded-full bg-lime-400" />
                      {tool}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      </ScrollReveal>

      {/* ─── SECTION 5 · DevOps Maturity Model ─────── */}
      <ScrollReveal delay={100}>
      <section className="py-12 lg:py-16">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="text-center mb-12">
            <p className="text-xs font-bold text-lime-600 uppercase tracking-wider mb-3">Maturity Model</p>
            <h2 className="text-3xl lg:text-4xl font-extrabold mb-4">Your DevOps Journey</h2>
            <p className="text-slate-500 max-w-2xl mx-auto">We assess your current maturity and create a roadmap to reach your target state.</p>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              { level: 'Level 1', title: 'Initial', desc: 'Manual processes, ad-hoc deployments, siloed teams.', maturity: '20%', color: 'bg-blue-500' },
              { level: 'Level 2', title: 'Managed', desc: 'Basic CI, some automation, shared version control.', maturity: '50%', color: 'bg-blue-500' },
              { level: 'Level 3', title: 'Defined', desc: 'Full CI/CD, IaC, automated testing, monitoring.', maturity: '75%', color: 'bg-lime-500' },
              { level: 'Level 4', title: 'Optimized', desc: 'Self-healing, AIOps, continuous optimization.', maturity: '95%', color: 'bg-blue-500' },
            ].map((l, i) => (
              <div key={i} className="bg-white rounded-2xl border border-slate-200 p-6 hover:shadow-lg transition-all duration-300">
                <p className="text-xs font-bold text-lime-600 uppercase tracking-wider mb-1">{l.level}</p>
                <h3 className="font-bold text-xl mb-3">{l.title}</h3>
                <p className="text-sm text-slate-500 mb-4">{l.desc}</p>
                <div className="h-2.5 bg-slate-100 rounded-full overflow-hidden">
                  <div className={`h-full rounded-full ${l.color}`} style={{ width: l.maturity }} />
                </div>
                <p className="text-xs text-slate-400 mt-1.5">Maturity: {l.maturity}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      </ScrollReveal>

      {/* ─── SECTION 6 · Culture Transformation ────── */}
      <ScrollReveal>
      <section className="py-12 lg:py-16 bg-gradient-to-b from-white to-slate-50">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <p className="text-xs font-bold text-lime-600 uppercase tracking-wider mb-3">Culture First</p>
              <h2 className="text-3xl lg:text-4xl font-extrabold mb-6">DevOps Is a Culture, Not Just Tools</h2>
              <p className="text-slate-500 leading-relaxed">
                Tools are easy. Culture is hard. We help your organization break down silos between development and operations, fostering shared ownership and continuous learning.
              </p>
            </div>
            <div className="space-y-4">
              {[
                { title: 'Shared Ownership', desc: 'Dev and Ops own the entire lifecycle together.', icon: Users },
                { title: 'Blameless Post-Mortems', desc: 'Learn from failures, not blame people.', icon: Shield },
                { title: 'Continuous Learning', desc: 'Dedicated time for experimentation and improvement.', icon: TrendingUp },
                { title: 'Automation-First Mindset', desc: 'If it can be automated, it should be.', icon: Zap },
              ].map((item, i) => {
                const Icon = item.icon
                return (
                  <div key={i} className="flex gap-4 items-start bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-all duration-200">
                    <div className="w-10 h-10 rounded-xl bg-lime-50 flex items-center justify-center flex-shrink-0">
                      <Icon className="w-5 h-5 text-lime-600" />
                    </div>
                    <div>
                      <h3 className="font-bold text-sm text-slate-900">{item.title}</h3>
                      <p className="text-sm text-slate-500">{item.desc}</p>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      </section>
      </ScrollReveal>

      {/* ─── SECTION 7 · Industry Solutions ────────── */}
      <ScrollReveal delay={100}>
      <section className="py-12 lg:py-16">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="text-center mb-12">
            <p className="text-xs font-bold text-lime-600 uppercase tracking-wider mb-3">Industry Solutions</p>
            <h2 className="text-3xl lg:text-4xl font-extrabold mb-4">DevOps for Every Industry</h2>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              { industry: 'SaaS', desc: 'Multi-tenant deployments, feature flags, A/B testing, and rapid iteration cycles.', metric: '200+ deploys/day' },
              { industry: 'E-Commerce', desc: 'Seasonal scaling, blue-green deployments, and zero-downtime releases.', metric: '99.99% uptime' },
              { industry: 'Healthcare', desc: 'HIPAA-compliant pipelines, audit trails, and validated deployments.', metric: '100% compliance' },
              { industry: 'Financial Services', desc: 'Regulated deployments with change approval gates and immutable infrastructure.', metric: 'SOC 2 certified' },
              { industry: 'Gaming', desc: 'Real-time deployment, canary releases, and global CDN management.', metric: '10M+ users' },
              { industry: 'Enterprise', desc: 'Large-scale transformation programs with training and change management.', metric: '500+ engineers' },
            ].map((item, i) => (
              <div key={i} className="bg-white rounded-2xl border border-slate-200 p-6 hover:shadow-lg transition-all duration-300">
                <h3 className="font-bold text-lg mb-2">{item.industry}</h3>
                <p className="text-sm text-slate-500 mb-4">{item.desc}</p>
                <p className="text-sm font-bold text-lime-600">{item.metric}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      </ScrollReveal>

      {/* ─── SECTION 8 · Engagement Models ─────────── */}
      <ScrollReveal>
      <section className="py-12 lg:py-16 bg-gradient-to-b from-white to-slate-50">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="text-center mb-12">
            <p className="text-xs font-bold text-lime-600 uppercase tracking-wider mb-3">Engagement Models</p>
            <h2 className="text-3xl lg:text-4xl font-extrabold mb-4">How We Engage</h2>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {[
              { model: 'DevOps Consulting', desc: 'Assessment, roadmap, and hands-on guidance for your team to adopt DevOps practices.', deliverables: ['Maturity assessment', 'Toolchain recommendation', 'Pipeline architecture', 'Team training plan'], price: 'From $15K' },
              { model: 'DevOps Implementation', desc: 'End-to-end setup of CI/CD, IaC, monitoring, and security automation.', deliverables: ['CI/CD pipeline setup', 'IaC templates', 'Monitoring dashboards', 'Documentation & training'], price: 'From $30K', popular: true },
              { model: 'Managed DevOps', desc: 'Ongoing DevOps management — pipeline maintenance, optimization, and evolution.', deliverables: ['Pipeline management', 'Continuous optimization', 'Tool upgrades', '24/7 support'], price: 'From $8K/mo' },
            ].map((m, i) => (
              <div key={i} className={`relative rounded-2xl border-2 p-8 transition-all duration-300 hover:-translate-y-1 ${m.popular ? 'border-lime-500 bg-gradient-to-b from-lime-50/50 to-white shadow-xl shadow-lime-500/10' : 'border-slate-200 bg-white hover:shadow-xl'}`}>
                {m.popular && <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-gradient-to-r from-lime-500 to-blue-600 text-white text-[10px] font-bold uppercase tracking-wider px-4 py-1 rounded-full whitespace-nowrap">Most Popular</div>}
                <p className="text-xs font-bold text-lime-600 uppercase tracking-wider mb-2">{m.model}</p>
                <p className="text-2xl font-extrabold text-slate-900 mb-3">{m.price}</p>
                <p className="text-sm text-slate-500 mb-6">{m.desc}</p>
                <ul className="space-y-2.5 mb-8">
                  {m.deliverables.map((d, j) => (
                    <li key={j} className="flex items-start gap-2 text-sm text-slate-600">
                      <CheckCircle2 className="w-4 h-4 text-lime-500 mt-0.5 flex-shrink-0" />
                      {d}
                    </li>
                  ))}
                </ul>
                <Link href="/contact" className={`block text-center font-bold text-sm py-3 rounded-xl transition-all duration-300 ${m.popular ? 'bg-gradient-to-r from-lime-500 to-blue-600 text-white shadow-lg' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'}`}>
                  Get Started
                </Link>
              </div>
            ))}
          </div>
        </div>
      </section>
      </ScrollReveal>

      {/* ─── SECTION 9 · Case Studies ──────────────── */}
      <ScrollReveal delay={100}>
      <section className="py-12 lg:py-16">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="text-center mb-12">
            <p className="text-xs font-bold text-lime-600 uppercase tracking-wider mb-3">Case Studies</p>
            <h2 className="text-3xl lg:text-4xl font-extrabold mb-4">DevOps Transformations</h2>
          </div>
          <div className="grid md:grid-cols-2 gap-8">
            {[
              { company: 'StreamFast Media', before: 'Monthly releases, 2-week staging cycles', after: '200+ daily deployments, 15-min pipeline', tools: 'GitHub Actions, ArgoCD, Terraform', timeline: '8 weeks' },
              { company: 'PaySecure Fintech', before: 'Manual deployments, 4-hour release windows', after: 'Automated canary releases, zero-downtime', tools: 'Jenkins, Helm, Istio, Vault', timeline: '12 weeks' },
            ].map((story, i) => (
              <div key={i} className="bg-white rounded-2xl border border-slate-200 p-8 hover:shadow-xl transition-all duration-300">
                <h3 className="font-bold text-lg mb-4">{story.company}</h3>
                <div className="space-y-3 mb-4">
                  <div className="bg-blue-50 rounded-xl p-3">
                    <p className="text-xs font-bold text-blue-500 mb-1">Before</p>
                    <p className="text-sm text-slate-600">{story.before}</p>
                  </div>
                  <div className="bg-blue-50 rounded-xl p-3">
                    <p className="text-xs font-bold text-blue-500 mb-1">After</p>
                    <p className="text-sm text-slate-600">{story.after}</p>
                  </div>
                </div>
                <div className="flex gap-3">
                  <span className="text-xs font-bold text-lime-600 bg-lime-50 px-3 py-1 rounded-full">{story.timeline}</span>
                  <span className="text-xs text-slate-500 bg-slate-100 px-3 py-1 rounded-full">{story.tools}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      </ScrollReveal>

      {/* ─── SECTION 10 · CTA ─────────────────────── */}
      <ScrollReveal>
      <section className="py-12 lg:py-16 bg-gradient-to-br from-lime-950 via-blue-950 to-blue-950">
        <div className="max-w-4xl mx-auto px-6 lg:px-8 text-center">
          <div className="inline-flex items-center gap-2 bg-lime-500/10 border border-lime-500/20 rounded-full px-4 py-1.5 mb-6">
            <Container className="w-3.5 h-3.5 text-lime-400" />
            <span className="text-xs font-semibold text-lime-300 uppercase tracking-wider">DevOps Transformation</span>
          </div>
          <h2 className="text-3xl lg:text-5xl font-extrabold text-white mb-6">
            Ready to Transform Your DevOps?
          </h2>
          <p className="text-lg text-slate-300 mb-10 max-w-2xl mx-auto">
            Get a free DevOps maturity assessment — including gap analysis, toolchain recommendation, and transformation roadmap.
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <Link href="/contact" className="inline-flex items-center gap-2 bg-gradient-to-r from-lime-500 to-blue-600 hover:from-lime-400 hover:to-blue-500 text-white font-bold px-8 py-4 rounded-xl shadow-lg shadow-lime-500/25 hover:shadow-lime-400/40 transition-all duration-300 hover:scale-105">
              Free DevOps Assessment <ArrowRight className="w-4 h-4" />
            </Link>
            <Link href="/contact" className="inline-flex items-center gap-2 border border-white/20 hover:border-lime-400/40 text-white/80 hover:text-white font-semibold px-8 py-4 rounded-xl transition-all duration-300">
              Talk to a DevOps Engineer
            </Link>
          </div>
          <p className="text-xs text-slate-400 mt-8">No commitment · Assessment in 5 days · NDA available</p>
        </div>
      </section>
      </ScrollReveal>

      <Footer />
    </main>
  )
}