'use client';

import { useState } from "react";
import toast from "react-hot-toast";
export default function Start() {

  const [form, setForm] = useState({
    name: "",
    company: "",
    website: "",
    project_type: "",
    budget: "",
    timeline: "",
    description: ""
  });

  const [loading, setLoading] = useState(false);

  const handleChange = (e: any) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    setLoading(true);

    try {
      const res = await fetch("/api/submit", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(form),
      });

      const data = await res.json();
      console.log(data);

      toast.success("Form Submitted Successfully 🚀");

      setForm({
        name: "",
        company: "",
        website: "",
        project_type: "",
        budget: "",
        timeline: "",
        description: ""
      });

    } catch (err) {
      console.error(err);
      toast.error("Something went wrong ❌");
    }

    setLoading(false);
  };

    return (
        <>
        <section className="ux-project-hero">
          <div className="container">
            {/* center content */}
            <div className="ux-project-content text-center">
              <h1 className="ux-project-title">Start A Project</h1>
              <p className="ux-project-subtitle">
                Tell us what you're building. We'll structure the rest.
              </p>
            </div>
            {/* joined users */}
            <div className="ux-joined-box">
              <div className="ux-avatar-group">
                <img src="assets/images/user1.png" alt="" />
                <img src="assets/images/user2.png" alt="" />
                <img src="assets/images/user3.png" alt="" />
              </div>
              <p>
                100+ people already joined
                <br />
                the AAideA
              </p>
            </div>
          </div>
        </section>
        {/* ===========================
         CONTACT FORM SECTION
      =========================== */}
        <section className="ux-contact-section">
          <div className="container">
            <div className="row g-4">
              {/* LEFT INFO */}
              <div className="col-lg-4">
                <div className="ux-contact-left">
                  <a href="tel:+1236662343" className="ux-contact-link">
                    (123) 666-2343
                  </a>
                  <a href="mailto:hello@ovela.com" className="ux-contact-email">
                    hello@ovela.com
                  </a>
                  <div className="ux-social-list">
                    <a href="#">
                      Twitter <img src="assets/images/witterarrow.svg" alt="" />
                    </a>
                    <a href="#">
                      Facebook <img src="assets/images/witterarrow.svg" alt="" />
                    </a>
                    <a href="#">
                      Instagram <img src="assets/images/witterarrow.svg" alt="" />
                    </a>
                    <a href="#">
                      Linkedin <img src="assets/images/witterarrow.svg" alt="" />
                    </a>
                    <a href="#">
                      Youtube <img src="assets/images/witterarrow.svg" alt="" />
                    </a>
                  </div>
                </div>
              </div>
              {/* RIGHT FORM */}
              <div className="col-lg-8">
                <div className="ux-contact-box">
                  <p className="ux-contact-mini">Let's Build it Properly.</p>
                  <h2 className="ux-contact-title">
                    Tell us what you're building. We'll structure the rest.
                  </h2>
                  <form onSubmit={handleSubmit}>
  <div className="row g-4">

    {/* Name */}
    <div className="col-md-6">
      <label>Name</label>
      <input
        name="name"
        value={form.name}
        onChange={handleChange}
        type="text"
        className="form-control ux-input active"
        placeholder="John"
        required
      />
    </div>

    {/* Company */}
    <div className="col-md-6">
      <label>Company Name</label>
      <input
        name="company"
        value={form.company}
        onChange={handleChange}
        type="text"
        className="form-control ux-input"
        placeholder="enter name"
      />
    </div>

    {/* Website */}
    <div className="col-md-6">
      <label>Website</label>
      <input
        name="website"
        value={form.website}
        onChange={handleChange}
        type="text"
        className="form-control ux-input"
        placeholder="enter website"
      />
    </div>

    {/* Project Type */}
    <div className="col-md-6">
      <label>Project Type</label>
      <select
        name="project_type"
        value={form.project_type}
        onChange={handleChange}
        className="form-select ux-input"
      >
        <option value="">select type</option>
        <option value="Web App">Web App</option>
        <option value="Mobile App">Mobile App</option>
      </select>
    </div>

    {/* Budget */}
    <div className="col-md-6">
      <label>Budget Range</label>
      <select
        name="budget"
        value={form.budget}
        onChange={handleChange}
        className="form-select ux-input"
      >
        <option value="">select range</option>
        <option value="$10K - $25K">$10K - $25K</option>
        <option value="$25K+">$25K+</option>
      </select>
    </div>

    {/* Timeline */}
    <div className="col-md-6">
      <label>Timeline</label>
      <input
        name="timeline"
        value={form.timeline}
        onChange={handleChange}
        type="text"
        className="form-control ux-input"
        placeholder="estimated weeks"
      />
    </div>

    {/* Description */}
    <div className="col-12">
      <label>Brief Description</label>
      <textarea
        name="description"
        value={form.description}
        onChange={handleChange}
        className="form-control ux-textarea"
        rows={6}
        placeholder="What are we building?"
      />
    </div>

    {/* Submit */}
    <div className="col-12 text-end">
      <button type="submit" className="ux-btn-primary" disabled={loading}>
        {loading ? "Submitting..." : "Start a Project"}
        <span className="ux-btn-icon">
          <img src="assets/images/arrowbuttonwhite.svg" alt="" />
        </span>
      </button>
    </div>

  </div>
</form>
                </div>
              </div>
            </div>
          </div>
        </section>
        {/* TOP CTA */}
        <div className="ux-footer-hero">
          <div className="container">
            <div className="ux-footer-hero-content text-center">
              <p className="ux-section-label">AAideA</p>
              <h2 className="ux-footer-title">
                If the idea is strong, we'll scale it.
              </h2>
              <div className="ux-hero-actions">
                <a href="#" className="btn ux-btn-primary">
                  Start a Project{" "}
                  <span className="ux-btn-icon">
                    <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                  </span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </>
      
    );
  }