Signup.jsx

import React, { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import { auth } from "../../api";
import "../../styles/auth.css";

const taglines = [
  "Sign up to explore and collect art from talented creators 🌟",
  "Discover one-of-a-kind artworks tailored for you 🖼️",
  "Own pieces that inspire and bring joy ✨",
  "Start your journey as an art collector today 💡",
];

const Signup = () => {
  const [currentTagline, setCurrentTagline] = useState(0);
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState("");
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
  });
  const navigate = useNavigate();

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTagline((prev) => (prev + 1) % taglines.length);
    }, 3000);
    return () => clearInterval(interval);
  }, []);

  const handleChange = (e) => {
    // Clear error when user starts typing
    if (error) setError("");
    
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const validatePassword = (password) => {
    if (password.length < 6) {
      return "Password must be at least 6 characters long";
    }
    return null;
  };

  const handleSignup = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError("");

    // Validate password
    const passwordError = validatePassword(formData.password);
    if (passwordError) {
      setError(passwordError);
      setLoading(false);
      return;
    }

    try {
      await auth.signup(formData);
      setSuccess(true);
      
      setTimeout(() => {
        navigate("/explore");
      }, 1200);
    } catch (err) {
      setError(err.message || "Signup failed. Please try again.");
      setLoading(false);
    }
  };

  return (
    <div className="auth-container">
      <div className="glow-bg"></div>
      <div className="auth-card">
        {!success ? (
          <>
            <h1 className="auth-title">Buyer Signup</h1>
            <p className="auth-subtext">{taglines[currentTagline]}</p>

            {error && (
              <p className="error-text" role="alert" aria-live="polite">
                {error}
              </p>
            )}

            <form className="auth-form" onSubmit={handleSignup}>
              <input
                type="text"
                name="name"
                placeholder="Full Name"
                value={formData.name}
                onChange={handleChange}
                required
                aria-label="Full Name"
                disabled={loading}
              />
              <input
                type="email"
                name="email"
                placeholder="Email Address"
                value={formData.email}
                onChange={handleChange}
                required
                aria-label="Email Address"
                disabled={loading}
              />
              <input
                type="password"
                name="password"
                placeholder="Password (min. 6 characters)"
                value={formData.password}
                onChange={handleChange}
                required
                minLength="6"
                aria-label="Password"
                disabled={loading}
              />
              <button
                type="submit"
                className={`auth-btn ${loading ? "loading" : ""}`}
                disabled={loading}
              >
                {loading ? "Signing up..." : "Sign Up"}
              </button>
            </form>

            <p className="auth-link">
              Already have an account? <Link to="/login">Login</Link>
            </p>
            <p className="auth-link">
              Are you an artist? <Link to="/artist-signup">Artist Signup</Link>
            </p>
          </>
        ) : (
          <div className="success-message" role="status" aria-live="polite">
            <span className="checkmark">✓</span> Signup Successful!
          </div>
        )}
      </div>
    </div>
  );
};

export default Signup;