"use client";

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 { useState } from "react";
import { Reveal } from "@/components/landing-page/Reveal";
import { useTranslations } from "next-intl";

export default function AdvertisingPage() {
  const t = useTranslations("AdvertisingPage");
  const [form, setForm] = useState({
    name: "",
    company: "",
    email: "",
    phone: "",
    message: "",
  });

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    alert("Terima kasih! Permintaan kerja sama Anda telah dikirim.");
    setForm({
      name: "",
      company: "",
      email: "",
      phone: "",
      message: "",
    });
  };

  return (
    <div className="min-h-screen bg-[#f9f9f9] dark:bg-black text-gray-800 dark:text-white px-6 lg:px-20 py-12">
      <Reveal>
        <div className="max-w-5xl mx-auto space-y-10">
          {/* Header */}
          <div className="text-center space-y-3">
            <h1 className="text-3xl md:text-4xl font-bold text-[#bb3523]">
              {t("title")}
            </h1>
            <p className="text-base md:text-lg text-gray-600 dark:text-gray-300">
              {t("subtitle")}
            </p>
          </div>

          {/* Benefit Section */}
          <Card className="bg-white dark:bg-gray-900 border-none shadow-md">
            <CardContent className="p-6 space-y-4">
              <h2 className="text-xl font-semibold text-[#bb3523]">
                {t("whyAdvertise.title")}
              </h2>
              <ul className="list-disc list-inside space-y-2 leading-relaxed">
                <li>{t("whyAdvertise.point1")}</li>
                <li>{t("whyAdvertise.point2")}</li>
                <li>{t("whyAdvertise.point3")}</li>
                <li>{t("whyAdvertise.point4")}</li>
              </ul>
            </CardContent>
          </Card>

          {/* Placement Section */}
          <Card className="bg-white dark:bg-gray-900 border-none shadow-md">
            <CardContent className="p-6 space-y-4">
              <h2 className="text-xl font-semibold text-[#bb3523]">
                {t("placement.title")}
              </h2>
              <p className="text-justify">{t("placement.text")}</p>
              <ul className="list-disc list-inside space-y-2">
                <li>{t("placement.option1")}</li>
                <li>{t("placement.option2")}</li>
                <li>{t("placement.option3")}</li>
                <li>{t("placement.option4")}</li>
              </ul>
            </CardContent>
          </Card>

          {/* Form Section */}
          <Card className="bg-white dark:bg-gray-900 border-none shadow-md">
            <CardContent className="p-6 space-y-6">
              <h2 className="text-xl font-semibold text-[#bb3523]">
                {t("form.title")}
              </h2>
              <p>{t("form.subtitle")}</p>

              <form onSubmit={handleSubmit} className="space-y-4">
                <div className="grid md:grid-cols-2 gap-4">
                  <Input
                    name="name"
                    placeholder={t("form.name")}
                    value={form.name}
                    onChange={handleChange}
                    required
                  />
                  <Input
                    name="company"
                    placeholder={t("form.company")}
                    value={form.company}
                    onChange={handleChange}
                    required
                  />
                </div>

                <div className="grid md:grid-cols-2 gap-4">
                  <Input
                    name="email"
                    type="email"
                    placeholder={t("form.email")}
                    value={form.email}
                    onChange={handleChange}
                    required
                  />
                  <Input
                    name="phone"
                    placeholder={t("form.phone")}
                    value={form.phone}
                    onChange={handleChange}
                  />
                </div>

                <Textarea
                  name="message"
                  placeholder={t("form.message")}
                  value={form.message}
                  onChange={handleChange}
                  required
                  rows={5}
                />

                <Button
                  type="submit"
                  className="bg-[#bb3523] hover:bg-[#9d2b1c] text-white"
                >
                  {t("form.submit")}
                </Button>
              </form>
            </CardContent>
          </Card>
        </div>
      </Reveal>
    </div>
  );
}