"use client";

import React from "react";
import type { ContactData } from "../types";

interface ContactSectionProps {
  data: ContactData;
}

export function ContactSection({ data }: ContactSectionProps) {

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // 表单提交逻辑
  };

  return (
    <section id="contact" className="py-10 md:py-14 border-t border-[rgba(255,255,255,0.02)]">
      <div className="max-w-[1200px] mx-auto px-4 md:px-6">
        <div className="flex flex-col lg:flex-row gap-4 md:gap-6 items-start">
          <div className="flex-1">
            <h3 className="text-white mb-4 font-semibold">{data.title}</h3>
            <p className="text-huilong-muted">{data.address}</p>
          </div>
          <form
            onSubmit={handleSubmit}
            className="flex flex-col gap-2.5 max-w-[420px] w-full lg:w-auto"
          >
            <label className="text-huilong-muted text-sm">{data.formLabel}</label>
            <input
              type="text"
              placeholder={data.formPlaceholders.name}
              className="bg-transparent border border-[rgba(255,255,255,0.04)] px-2.5 py-2.5 rounded-md text-white placeholder:text-huilong-muted focus:outline-none focus:border-huilong-gold/50"
            />
            <input
              type="email"
              placeholder={data.formPlaceholders.email}
              className="bg-transparent border border-[rgba(255,255,255,0.04)] px-2.5 py-2.5 rounded-md text-white placeholder:text-huilong-muted focus:outline-none focus:border-huilong-gold/50"
            />
            <textarea
              placeholder={data.formPlaceholders.message}
              rows={4}
              className="bg-transparent border border-[rgba(255,255,255,0.04)] px-2.5 py-2.5 rounded-md text-white placeholder:text-huilong-muted focus:outline-none focus:border-huilong-gold/50 resize-none"
            />
            <button
              type="submit"
              className="inline-block px-[18px] py-3 rounded-lg bg-huilong-gold text-huilong-bg font-semibold cursor-pointer hover:opacity-90 transition-opacity"
            >
              {data.submit}
            </button>
          </form>
        </div>
      </div>
    </section>
  );
}