import { Arrow } from "@/components/ui";

export const metadata = { title: "Contact Us — UP Parivaar Dallas" };

const info = [
  {
    label: "Phone Number",
    value: "(555) 123-4567",
    icon: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
        <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    ),
  },
  {
    label: "Email Address",
    value: "info@upparivaar.com",
    icon: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
        <path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" />
        <path d="m2 7 10 6 10-6" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    ),
  },
  {
    label: "Office Hours",
    value: (
      <>
        Monday–Friday: 8am – 6pm
        <br />
        Saturday: 9am – 3pm
      </>
    ),
    icon: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
        <circle cx="12" cy="12" r="9" />
        <path d="M12 7v5l3 2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    ),
  },
];

export default function ContactPage() {
  return (
    <>
      {/* HERO */}
      <section className="page-glow page-hero--tight contactwrap">
        <div className="container hero-center">
          <span className="eyebrow">UP Parivar Dallas · Est. 2010</span>
          <h1 className="display-title ts-34-46 contact-hero__title">Contact Us</h1>
          <p className="contact-hero__sub">
            Schedule a complimentary consultation with our community team.
          </p>
        </div>
      </section>

      {/* CONTACT CARD */}
      <section className="contact-section">
        <div className="container">
          <div className="contact-card">
            {/* Info panel */}
            <div className="contact-info">
              <div>
                <h2 className="contact-info__title">Get In Touch</h2>
              </div>
              <p className="contact-info__text">
                Reach out for events, membership, seva opportunities or partnership
                queries. We&apos;re eager to help your family feel at home in Dallas!
              </p>
              <div className="contact-info__list">
                {info.map((it) => (
                  <div key={it.label} className="contact-info__item">
                    <span className="contact-info__icon">{it.icon}</span>
                    <div>
                      <p className="contact-info__label">{it.label}</p>
                      <p className="contact-info__value">{it.value}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Message form */}
            <div className="contact-form">
              <h2 className="contact-form__title">Send us a Message</h2>
              <form className="contact-form__grid">
                <input className="contact-input" type="text" placeholder="First Name" aria-label="First Name" />
                <input className="contact-input" type="text" placeholder="Last Name" aria-label="Last Name" />
                <input className="contact-input" type="email" placeholder="Email Address" aria-label="Email Address" />
                <input className="contact-input" type="tel" placeholder="Phone Number" aria-label="Phone Number" />
                <textarea
                  className="contact-textarea contact-form__field--full"
                  placeholder="Project / Message Details"
                  aria-label="Message Details"
                />
                <div className="contact-form__field--full contact-form__actions">
                  <button type="submit" className="btn-primary">
                    Get a Free Consultation <Arrow />
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}