import Image from "next/image";
import Link from "next/link";
import { Suspense } from "react";
import { Breadcrumbs } from "@/components/breadcrumbs";
import { ContactForm } from "@/components/contact-form";
import { JsonLd } from "@/components/json-ld";
import { deliveryHighlights, siteConfig } from "@/data/site-content";
import {
  breadcrumbSchema,
  buildPageMetadata,
} from "@/lib/seo";
import { FadeUp, FadeIn } from "@/components/page-hero-motion";
import { MotionSection } from "@/components/motion-section";

export const metadata = buildPageMetadata({
  title: "Contact Southern Masonry Supply in Corpus Christi, TX",
  description:
    "Reach Southern Masonry Supply at 5205 Agnes St, Corpus Christi, TX 78405 or call (361) 289-1074 during business hours.",
  path: "/contact",
  image: "/images/delivery_truck_logistics_png_1773134721043.png",
});

export default function ContactPage() {
  const breadcrumbs = [
    { name: "Home", path: "/" },
    { name: "Contact", path: "/contact" },
  ];

  return (
    <>
      <JsonLd id="contact-breadcrumbs" data={breadcrumbSchema(breadcrumbs)} />

      <div className="breadcrumb-strip">
        <div className="container">
          <Breadcrumbs items={breadcrumbs} />
        </div>
      </div>

      <section className="page-hero">
        <div className="container page-hero-shell">
          <div className="page-hero-copy">
            <FadeUp delay={0.05}>
              <span className="eyebrow">Contact and delivery</span>
            </FadeUp>
            <FadeUp delay={0.15}>
              <h1 style={{ marginTop: "1.25rem", marginBottom: "1.75rem" }}>
                Reach the yard, request a quote, or line up a delivery.
              </h1>
            </FadeUp>
            <FadeUp delay={0.25}>
              <p className="hero-copy" style={{ marginBottom: "2rem" }}>
                Share the material, quantity, and timing you need. We will get
                back with the right next step.
              </p>
            </FadeUp>
            <FadeUp delay={0.35}>
              <div className="page-hero-meta">
                <span>Quotes during business hours</span>
                <span>Delivery thresholds made clear upfront</span>
                <span>Material-first project guidance</span>
              </div>
            </FadeUp>
          </div>

          <FadeIn delay={0.2} className="page-hero-visual">
            <Image
              src="/images/delivery_truck_logistics_png_1773134721043.webp"
              alt="Southern Masonry Supply delivery service"
              fill
              priority
              sizes="(max-width: 1100px) 100vw, 40vw"
              quality={72}
              className="cover-image"
            />
            <span className="hero-visual-note">
              Call first for stock and routing
            </span>
          </FadeIn>
        </div>
      </section>

      <section className="section">
        <div className="container contact-layout">
          <div className="contact-card">
            <div className="card-heading">
              <span className="eyebrow">Send us a message</span>
              <h2>Tell us about your project.</h2>
            </div>
            <Suspense fallback={<p>Loading contact form...</p>}>
              <ContactForm />
            </Suspense>
          </div>

          <div className="contact-sidebar">
            <div className="map-card" style={{ padding: 0, overflow: "hidden", background: "transparent", border: "none" }}>
              <div className="contact-map-embed">
                <iframe
                  src="https://www.google.com/maps?q=5205+Agnes+St,+Corpus+Christi,+TX+78405&output=embed"
                  title="Southern Masonry Supply location"
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                  aria-label="Map showing Southern Masonry Supply at 5205 Agnes St, Corpus Christi TX"
                />
              </div>
              <Link
                href={siteConfig.mapUrl}
                target="_blank"
                rel="noreferrer"
                className="button button-primary"
                style={{ width: "100%", marginTop: "0", borderRadius: "0 0 12px 12px" }}
              >
                Open in Google Maps
              </Link>
            </div>

            <div className="details-grid">
              <article className="detail-card">
                <h3>Visit the yard</h3>
                <p>{siteConfig.address.street}</p>
                <p>{siteConfig.address.cityStateZip}</p>
                <a href={siteConfig.phoneHref} className="text-link">
                  {siteConfig.phoneDisplay}
                </a>
              </article>

              <article className="detail-card">
                <h3>Hours</h3>
                <ul className="detail-list">
                  {siteConfig.hours.map((item) => (
                    <li key={item.label}>
                      <span>{item.label}</span>
                      <strong>{item.value}</strong>
                    </li>
                  ))}
                </ul>
              </article>

              <article className="detail-card detail-card-wide">
                <h3>Delivery notes</h3>
                <ul className="detail-list stacked">
                  {deliveryHighlights.map((item) => (
                    <li key={item.title}>
                      <strong>{item.title}</strong>
                      <span>{item.description}</span>
                    </li>
                  ))}
                </ul>
              </article>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}