'use client'

import Link from 'next/link'
import { ArrowLeft } from 'lucide-react'

export default function TerraformDriftPage() {
  return (
    <main className="min-h-screen bg-white dark:bg-gray-950">
      <div className="max-w-4xl mx-auto px-6 py-20">
        <Link 
          href="/#project-rbc" 
          className="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:underline mb-8"
        >
          <ArrowLeft size={16} />
          Back to Projects
        </Link>

        <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
          Terraform State Drift Solution
        </h1>
        
        <p className="text-gray-600 dark:text-gray-400 mb-12">
          Coming soon...
        </p>

        {/* Placeholder sections */}
        <div className="space-y-8 text-gray-500 dark:text-gray-500">
          <div className="border border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-6">
            <h2 className="font-semibold mb-2">The Problem</h2>
            <p className="text-sm">Content coming soon...</p>
          </div>
          
          <div className="border border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-6">
            <h2 className="font-semibold mb-2">Immediate Fix</h2>
            <p className="text-sm">Content coming soon...</p>
          </div>
          
          <div className="border border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-6">
            <h2 className="font-semibold mb-2">Short Term Fix</h2>
            <p className="text-sm">Content coming soon...</p>
          </div>
          
          <div className="border border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-6">
            <h2 className="font-semibold mb-2">Long Term Fix</h2>
            <p className="text-sm">Content coming soon...</p>
          </div>
        </div>
      </div>
    </main>
  )
}