ManiCandles/src/pages/ContactPage.tsx

import { motion } from "framer-motion";
import { Mail, MapPin, Phone, Instagram } from "lucide-react";
import { HeartHandshake } from "lucide-react";
import { useState } from "react";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import "./contact.css";

const fadeInUp = {
  hidden: { opacity: 0, y: 30 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } },
};

export default function ContactPage() {
  const [formStatus, setFormStatus] = useState<"idle" | "submitting" | "success">("idle");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setFormStatus("submitting");
    setTimeout(() => setFormStatus("success"), 1500);
  };

  return (
    <Box>
      {/* ── Hero ── */}
      <section className="contact-hero">
        <Container maxWidth="md">
          <motion.div initial="hidden" animate="visible" variants={fadeInUp}>
            <h1>Get in Touch</h1>
            <p>Whether you have a question about an order, wholesale inquiries, or simply want to share how much you love your new candle, we'd love to hear from you.</p>
            <div className="section-divider" />
          </motion.div>
        </Container>
      </section>

      {/* ── Contact Body ── */}
      <section className="contact-body">
        <Container maxWidth="lg">
          <div className="contact-grid">
            {/* Info Panel */}
            <motion.div
              className="contact-info-panel"
              initial={{ opacity: 0, x: -30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8 }}
            >
              <h2>Contact Information</h2>
              <div className="contact-info-list">
                {[
                  { Icon: Mail, label: "Email", value: <a href="mailto:hello@manicandles.co">hello@manicandles.co</a> },
                  { Icon: Phone, label: "Phone", value: <>Available Mon–Fri, 9am–5pm EST<br />+1 (555) 123-4567</> },
                  { Icon: MapPin, label: "Studio", value: <>New York, NY<br />(By appointment only)</> },
                ].map(({ Icon, label, value }) => (
                  <div key={label} className="contact-info-item">
                    <div className="contact-info-icon"><Icon size={20} /></div>
                    <div>
                      <div className="contact-info-label">{label}</div>
                      <div className="contact-info-value">{value}</div>
                    </div>
                  </div>
                ))}
              </div>

              <div className="contact-social-box">
                <h3>Follow Our Journey</h3>
                <p>Join our community on Instagram for behind-the-scenes peeks, styling inspiration, and launch announcements.</p>
                <a href="#" className="contact-ig-link">
                  <Instagram size={20} />
                  <span>@manicandles.co</span>
                </a>
              </div>
            </motion.div>

            {/* Form Panel */}
            <motion.div
              className="contact-form-panel"
              initial={{ opacity: 0, x: 30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8 }}
            >
              <div className="contact-form-top-bar" />

              {formStatus === "success" ? (
                <motion.div
                  className="contact-success"
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                >
                  <div className="success-icon-wrap"><HeartHandshake size={32} /></div>
                  <h3>Thank you!</h3>
                  <p>Your message has been received. We will get back to you as soon as possible.</p>
                  <button className="send-another-btn" onClick={() => setFormStatus("idle")}>Send another</button>
                </motion.div>
              ) : (
                <>
                  <h2>Send a Message</h2>
                  <form onSubmit={handleSubmit}>
                    <div className="form-row">
                      <div className="form-field">
                        <label htmlFor="name" className="form-label">Name</label>
                        <input id="name" type="text" className="form-input" placeholder="Your name" required />
                      </div>
                      <div className="form-field">
                        <label htmlFor="email" className="form-label">Email</label>
                        <input id="email" type="email" className="form-input" placeholder="Your email" required />
                      </div>
                    </div>
                    <div className="form-field">
                      <label htmlFor="subject" className="form-label">Subject</label>
                      <input id="subject" type="text" className="form-input" placeholder="How can we help?" required />
                    </div>
                    <div className="form-field">
                      <label htmlFor="message" className="form-label">Message</label>
                      <textarea id="message" className="form-textarea" placeholder="Write your message here..." required />
                    </div>
                    <button type="submit" className="form-submit" disabled={formStatus === "submitting"}>
                      {formStatus === "submitting" ? "Sending..." : "Send Message"}
                    </button>
                  </form>
                </>
              )}
            </motion.div>
          </div>
        </Container>
      </section>

      {/* ── Closing Quote ── */}
      <section className="contact-quote">
        <p>"May the light of our candles bring peace to your mind and warmth to your soul."</p>
      </section>
    </Box>
  );
}