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

export const metadata = buildPageMetadata({
  title: "About Southern Masonry Supply",
  description:
    "Learn how Southern Masonry Supply has served Corpus Christi with masonry and landscaping materials since 1990.",
  path: "/about",
});

export default function AboutPage() {
  const breadcrumbs = [
    { name: "Home", path: "/" },
    { name: "About", path: "/about" },
  ];

  return (
    <>
      <JsonLd id="about-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">Family owned and operated</span>
            </FadeUp>
            <FadeUp delay={0.15}>
              <h1 style={{ marginTop: "1.25rem", marginBottom: "1.75rem" }}>
                Serving Corpus Christi projects with material knowledge that lasts.
              </h1>
            </FadeUp>
            <FadeUp delay={0.25}>
              <p className="hero-copy" style={{ marginBottom: "2rem" }}>
                Southern Masonry Supply has spent more than 34 years helping
                contractors, homeowners, architects, and designers source the
                right masonry and landscaping materials for projects large and
                small.
              </p>
            </FadeUp>
            <FadeUp delay={0.35}>
              <div className="page-hero-meta">
                <span>Since 1990 in South Texas</span>
                <span>Family-owned: Sid Smith Jr.</span>
                <span>Project-grounded recommendations</span>
              </div>
            </FadeUp>
          </div>

          <FadeIn delay={0.2} className="page-hero-visual">
            <Image
              src="/images/hero_about.webp"
              alt="Southern Masonry Supply heritage tools"
              fill
              priority
              sizes="(max-width: 1100px) 100vw, 40vw"
              quality={72}
              className="cover-image"
            />
            <span className="hero-visual-note">
              Built for long-horizon projects
            </span>
          </FadeIn>
        </div>
      </section>

      <section className="section bg-layer overflow-hidden">
        <div className="container about-story">
          <div className="about-story-copy" style={{ gap: "4rem" }}>
            {buildStory.map((section, idx) => (
              <MotionSection key={section.title} delay={idx * 0.1} direction="up">
                <article className="story-block" style={{ paddingBottom: "1rem" }}>
                  <span className="eyebrow">{section.eyebrow}</span>
                  <h2 style={{ marginTop: "0.75rem", marginBottom: "1.25rem" }}>{section.title}</h2>
                  <p style={{ lineHeight: 1.8 }}>{section.copy}</p>
                </article>
              </MotionSection>
            ))}
          </div>
          <MotionSection direction="right" className="about-story-media">
            <div className="image-frame decorative">
              <Image
                src="/images/flagstone_pathway_garden_png_1773134755795.webp"
                alt="Flagstone pathway and landscaping project"
                fill
                sizes="(max-width: 960px) 100vw, 40vw"
                quality={70}
                className="cover-image"
              />
            </div>
          </MotionSection>
        </div>
      </section>

      <section className="section section-contrast">
        <div className="container">
          <MotionSection>
            <div className="section-header align-center" style={{ marginBottom: "4rem" }}>
              <span className="eyebrow">The Southern Standard</span>
              <h2 style={{ marginTop: "1rem" }}>Why builders trust our yard</h2>
            </div>
          </MotionSection>
          <div className="feature-grid">
            {aboutHighlights.map((item, idx) => (
              <MotionSection key={item.title} delay={idx * 0.08} direction="up">
                <article className="feature-card" style={{ padding: "2.5rem 2rem" }}>
                  <div className="feature-icon" aria-hidden="true">
                    {item.icon}
                  </div>
                  <h3 style={{ marginTop: "1.25rem", marginBottom: "0.75rem" }}>{item.title}</h3>
                  <p style={{ lineHeight: 1.75 }}>{item.description}</p>
                </article>
              </MotionSection>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container content-panel glass-panel">
          <SlideIn direction="left" className="content-panel-media">
            <div className="image-frame wide elevated">
              <Image
                src="/images/delivery_truck_logistics_png_1773134721043.webp"
                alt="Delivery truck for masonry and landscaping orders"
                fill
                sizes="(max-width: 960px) 100vw, 45vw"
                quality={72}
                className="cover-image"
              />
            </div>
          </SlideIn>
          <SlideIn direction="right" delay={0.15} className="content-panel-copy">
            <span className="eyebrow">Service that stays practical</span>
            <h2 className="text-display" style={{ marginTop: "1rem", marginBottom: "1.5rem" }}>
              Our mission is simple: make good material easier to source.
            </h2>
            <p className="text-lg" style={{ marginBottom: "1.5rem", lineHeight: 1.8 }}>
              Founded in 1990 and led by Sid Smith Jr., Southern Masonry Supply
              stays focused on responsive service, reliable stock levels, and
              materials worth putting into long-term work. Sid's hands-on
              expertise in both masonry and landscaping ensures the yard remains
              the southern standard for quality and practical guidance.
            </p>
            <p style={{ lineHeight: 1.8, marginBottom: "2rem" }}>
              Whether you are ordering flagstone by the ton, pebbles by the
              bag, or masonry cement for a new project phase, our team keeps the
              conversation grounded in application, quantity, and timing.
            </p>
            <div className="inline-actions">
              <Link href="/masonry-supplies" className="button button-primary">
                View masonry supplies
              </Link>
              <Link
                href="/landscaping-supplies"
                className="button button-secondary invert"
              >
                View landscaping supplies
              </Link>
            </div>
          </SlideIn>
        </div>
      </section>

      <MotionSection>
        <section className="section section-tight">
          <div className="container cta-panel">
            <div>
              <span className="eyebrow">Visit or call</span>
              <h2 style={{ marginTop: "0.75rem", marginBottom: "1rem" }}>{siteConfig.address.street}</h2>
              <p style={{ lineHeight: 1.7 }}>
                Stop by the yard during business hours or call{" "}
                {siteConfig.phoneDisplay} for material availability and delivery
                planning.
              </p>
            </div>
            <Link href="/contact" className="button button-primary">
              Contact us
            </Link>
          </div>
        </section>
      </MotionSection>
    </>
  );
}