const LOCATIONS = [
  {
    name: "Downtown Branch",
    address: "123 Main St",
    phone: "(123) 456-7890",
    email: "downtown@petshop.com",
  },
  {
    name: "North Branch",
    address: "456 North Ave",
    phone: "(987) 654-3210",
    email: "north@petshop.com",
  },
  {
    name: "West Side Store",
    address: "789 West Blvd",
    phone: "(555) 123-4567",
    email: "westside@petshop.com",
  },
];

const PERSONNEL = [
  { name: "John Doe", role: "Store Manager" },
  { name: "Sara Smith", role: "Staff" },
  { name: "Michael Johnson", role: "Grooming Team" },
];

export default function ContactPage() {
  return (
    <main className="info-page">
      <section className="info-hero">
        <h1 className="info-title">Contact Us</h1>
        <p className="info-subtitle">Reach the team, find a location, or connect with store personnel.</p>
        <div className="title-decoration"></div>
      </section>

      <section className="info-content">
        <div className="info-card">
          <h2>General Contact</h2>
          <p>Email: support@petshop.com</p>
          <p>Phone: (000) 000-0000</p>
          <p>Hours: Mon–Sat, 9:00 AM – 6:00 PM</p>
        </div>

        <div className="info-card">
          <h2>Store Locations</h2>
          <div className="info-card-grid">
            {LOCATIONS.map((location) => (
              <article key={location.name} className="info-mini-card">
                <h3>{location.name}</h3>
                <p>{location.address}</p>
                <p>{location.phone}</p>
                <p>{location.email}</p>
              </article>
            ))}
          </div>
        </div>

        <div className="info-card">
          <h2>Store Personnel</h2>
          <div className="info-card-grid">
            {PERSONNEL.map((person) => (
              <article key={person.name} className="info-mini-card">
                <h3>{person.name}</h3>
                <p>{person.role}</p>
              </article>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}