"use client";

import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Eye, Pencil, ImageIcon } from "lucide-react";

export default function ContentWebsite() {
  const [activeTab, setActiveTab] = useState("hero");

  return (
    <div className="space-y-6">
      {/* ================= HEADER ================= */}
      <div className="flex items-start justify-between">
        <div>
          <h1 className="text-2xl font-semibold text-slate-800">
            Content Website
          </h1>
          <p className="text-sm text-slate-500 mt-1">
            Update homepage content, products, services, and partners
          </p>
        </div>

        <div className="flex gap-3">
          <Button variant="outline" className="rounded-lg">
            <Eye className="w-4 h-4 mr-2" />
            Preview
          </Button>

          <Button className="bg-blue-600 hover:bg-blue-700 rounded-lg">
            <Pencil className="w-4 h-4 mr-2" />
            Edit Mode
          </Button>
        </div>
      </div>

      {/* ================= TABS ================= */}
      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="bg-white border rounded-xl p-1">
          <TabsTrigger value="hero" className="rounded-lg">
            Hero Section
          </TabsTrigger>
          <TabsTrigger value="about" className="rounded-lg">
            About Us
          </TabsTrigger>
          <TabsTrigger value="products" className="rounded-lg">
            Our Products
          </TabsTrigger>
          <TabsTrigger value="services" className="rounded-lg">
            Our Services
          </TabsTrigger>
          <TabsTrigger value="partners" className="rounded-lg">
            Technology Partners
          </TabsTrigger>
          <TabsTrigger value="popup" className="rounded-lg">
            Pop Up
          </TabsTrigger>
        </TabsList>
      </Tabs>

      {/* ================= FORM CARD ================= */}
      <Card className="rounded-2xl border shadow-sm">
        <CardContent className="p-6 space-y-6">
          {/* Row 1 */}
          <div className="grid md:grid-cols-2 gap-6">
            <div>
              <label className="text-sm font-medium text-slate-700">
                Main Title
              </label>
              <Input
                defaultValue="Beyond Expectations to Build Reputation."
                className="mt-2"
              />
            </div>

            <div>
              <label className="text-sm font-medium text-slate-700">
                Subtitle
              </label>
              <Input defaultValue="-" className="mt-2" />
            </div>
          </div>

          {/* Description */}
          <div>
            <label className="text-sm font-medium text-slate-700">
              Description
            </label>
            <Textarea
              className="mt-2 min-h-[120px]"
              placeholder="Write description here..."
            />
          </div>

          {/* Hero Image Upload */}
          <div>
            <label className="text-sm font-medium text-slate-700">
              Hero Image
            </label>

            <div className="mt-2 border-2 border-dashed rounded-xl p-10 flex flex-col items-center justify-center text-center bg-slate-50 hover:bg-slate-100 transition cursor-pointer">
              <ImageIcon className="w-8 h-8 text-slate-400 mb-2" />
              <p className="text-sm text-slate-500">Current: hero-image.jpg</p>
            </div>
          </div>

          {/* CTA Row */}
          <div className="grid md:grid-cols-2 gap-6">
            <div>
              <label className="text-sm font-medium text-slate-700">
                Primary CTA Text
              </label>
              <Input defaultValue="Contact Us" className="mt-2" />
            </div>

            <div>
              <label className="text-sm font-medium text-slate-700">
                Secondary CTA Text
              </label>
              <Input defaultValue="-" className="mt-2" />
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}