"use client"

import { useState } from "react"

export default function Contact() {

  const [form, setForm] = useState({
    first_name: "",
    last_name: "",
    email: "",
    phone_number: "",
    project_details: ""
  })

  const [loading, setLoading] = useState(false)
  const [message, setMessage] = useState("")

  // handle change
  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value })
  }

  // validation
  const validate = () => {
    if (!form.first_name || !form.last_name) return "Name required"
    if (!form.email.includes("@")) return "Valid email required"
    if (form.phone_number.length < 8) return "Valid phone required"
    if (!form.project_details) return "Project details required"
    return null
  }

  // submit
  const handleSubmit = async (e) => {
    e.preventDefault()

    const error = validate()
    if (error) {
      setMessage(error)
      return
    }

    setLoading(true)
    setMessage("")

    try {
      const res = await fetch(
        "https://rgnbdafzoeryijdgmyuu.supabase.co/functions/v1/submit-form",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "Authorization":
              "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InJnbmJkYWZ6b2VyeWlqZGdteXV1Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzY3NjUyODksImV4cCI6MjA5MjM0MTI4OX0.-PuetNc8pmKhQfCS8jS9xGAjaBA2O26qR9oSRVVvNs4"
          },
          body: JSON.stringify(form)
        }
      )

      if (!res.ok) throw new Error("Failed")

      setMessage("✅ Form submitted successfully!")
      setForm({
        first_name: "",
        last_name: "",
        email: "",
        phone_number: "",
        project_details: ""
      })

    } catch (err) {
      setMessage("❌ Something went wrong")
    }

    setLoading(false)
  }

  return (
    <section className="contact-section">
      <div className="container">

        {/* TOP */}
        <div className="services-top text-center">
          <div style={{ width: "100%" }}>
            <span className="tag">Let’s Start Your Project</span>
            <h2 className="headprice">
              Schedule a complimentary Consultation <br />
              with our design team
            </h2>
          </div>
        </div>

        <div className="contact-box">

          {/* LEFT */}
          <div className="contact-left">
            <h3>Get In Touch</h3>
            <p>Contact us today for tailored marketing strategies and expert advice.</p>

            <div className="contact-item">
              <img src="/assets/images/icons/phone.svg" />
              <div>
                <strong>Phone Number</strong>
                <span>+15107099142</span>
              </div>
            </div>

            <div className="contact-item">
              <img src="/assets/images/icons/email.svg" />
              <div>
                <strong>Email Address</strong>
                <span>reimagine@housecoin.biz</span>
              </div>
            </div>

            <div className="contact-item">
              <img src="/assets/images/icons/office.svg" />
              <div>
                <strong>Office Hours</strong>
                <span>MON–FRI: 8AM – 6PM</span>
                <span>SATURDAY: 9AM – 3PM</span>
              </div>
            </div>
          </div>

          {/* RIGHT FORM */}
          <form className="contact-right" onSubmit={handleSubmit}>
            <h3>Send us a Message</h3>

            <div className="form-row">
              <input
                name="first_name"
                value={form.first_name}
                onChange={handleChange}
                placeholder="First Name"
              />
              <input
                name="last_name"
                value={form.last_name}
                onChange={handleChange}
                placeholder="Last Name"
              />
            </div>

            <div className="form-row">
              <input
                name="email"
                value={form.email}
                onChange={handleChange}
                placeholder="Email Address"
              />
              <input
                name="phone_number"
                value={form.phone_number}
                onChange={handleChange}
                placeholder="Phone Number"
              />
            </div>

            <textarea
              name="project_details"
              value={form.project_details}
              onChange={handleChange}
              placeholder="Project Details"
            />

            <button type="submit" disabled={loading}>
              {loading ? "Sending..." : "Get a Free Consultation"}
            </button>

            {/* MESSAGE */}
            {message && (
              <p style={{ marginTop: "10px", color: "#000" }}>
                {message}
              </p>
            )}
          </form>

        </div>
      </div>
    </section>
  )
}