import Image from "next/image";
import Link from "next/link";
import { siteConfig, processSteps, faqs, featuredMaterials, googleReviews, homeStats } from "@/data/site-content";
import { JsonLd } from "@/components/json-ld";
import { ProcessTimeline } from "@/components/process-timeline";
import { Breadcrumbs } from "@/components/breadcrumbs";
import { buildPageMetadata, breadcrumbSchema, faqPageSchema } from "@/lib/seo";
import { TestimonialsCarousel } from "@/components/testimonials-carousel";
import { HomeCTASection } from "@/components/home-cta-section";
import { MotionSection } from "@/components/motion-section";
import { HeroCinema } from "@/components/hero-cinema";
import { CountUpStat } from "@/components/count-up-stat";

export const metadata = buildPageMetadata({
  title: "South Texas's Most Trusted Masonry Supply",
  description:
    "Providing premium brick, stone, and landscaping materials to Corpus Christi's contractors and homeowners since 1990.",
  path: "/",
});

export default function Home() {
  return (
    <main>
      <JsonLd
        id="home-breadcrumbs"
        data={breadcrumbSchema([{ name: "Home", path: "/" }])}
      />
      <JsonLd id="home-faq-schema" data={faqPageSchema(faqs)} />

      {/* Hero Section */}
      <section className="home-hero">
        <div className="home-hero-left">
          <div className="home-hero-copy reveal">
            <span className="eyebrow" style={{ color: "var(--primary)" }}>
              SINCE 1990
            </span>
            <h1>South Texas's Most Trusted Masonry Supply</h1>
            <p>
              Providing premium brick, stone, and landscaping materials to
              Corpus Christi's contractors and homeowners with dependable
              on-site delivery.
            </p>

            <div className="hero-reviews">
              <div className="stars">
                {[...Array(5)].map((_, i) => (
                  <svg
                    key={i}
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                  </svg>
                ))}
              </div>
              <span>4.9 Stars (14 Google Reviews)</span>
            </div>

            <div className="hero-actions">
              <Link href="/contact" className="button button-primary">
                GET A FREE QUOTE
              </Link>
              <Link
                href="/products"
                className="button button-outline"
                style={{
                  borderColor: "white",
                  color: "white",
                  marginLeft: "1rem",
                }}
              >
                VIEW INVENTORY
              </Link>
            </div>
          </div>
        </div>
        <div className="home-hero-visual" aria-hidden="true">
          <HeroCinema />
        </div>
      </section>

      {/* Quick Service Band */}
      <div className="quick-service-band">
        <div className="container">
          <div className="quick-service-grid">
            <div className="service-item">
              <h4>Phone</h4>
              <span>{siteConfig.phoneDisplay}</span>
            </div>
            <div className="service-item">
              <h4>Address</h4>
              <span>{siteConfig.address.street}</span>
            </div>
            <div className="service-item">
              <h4>Hours</h4>
              <span>Mon - Fri 8 AM - 5 PM</span>
            </div>
          </div>
        </div>
      </div>

      {/* Stats Band */}
      <section className="stats-band">
        <div className="container">
          <div className="stats-grid">
            {homeStats.map((stat, i) => (
              <MotionSection key={stat.label} delay={i * 0.08} direction="up">
                <CountUpStat value={stat.value} label={stat.label} />
              </MotionSection>
            ))}
          </div>
        </div>
      </section>

      {/* Product Categories */}
      <section className="section bg-soft">
        <div className="container">
          <div
            className="section-header reveal"
            style={{ textAlign: "center", marginBottom: "4rem" }}
          >
            <span className="eyebrow">OUR PRODUCTS</span>
            <h2>Premium Materials for Any Project</h2>
            <p style={{ maxWidth: "600px", margin: "1rem auto" }}>
              From foundation to finish, we carry the materials you need for
              professional masonry and landscaping results.
            </p>
          </div>

          <div
            className="category-grid"
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(3, 1fr)",
              gap: "2rem",
            }}
          >
            <div
              className="category-card reveal reveal-delay-1"
              style={{
                background: "white",
                borderRadius: "12px",
                overflow: "hidden",
                boxShadow: "var(--shadow)",
              }}
            >
              <div
                style={{
                  position: "relative",
                  height: "240px",
                  background: "#f1f3f5",
                }}
              >
                <Image
                  src="/images/hero_masonry_landscaping_png_1773134515262.webp"
                  alt="Masonry Supplies"
                  fill
                  sizes="(max-width: 900px) 100vw, (max-width: 1200px) 50vw, 33vw"
                  quality={70}
                  className="cover-image"
                />
              </div>
              <div style={{ padding: "2rem" }}>
                <h3 style={{ marginBottom: "1rem" }}>Masonry Supplies</h3>
                <p>
                  Brick, concrete blocks, mortar, and lintels for structural and
                  aesthetic projects.
                </p>
                <Link
                  href="/masonry-supplies#catalog"
                  style={{ color: "var(--primary)", fontWeight: "700" }}
                >
                  LEARN MORE →
                </Link>
              </div>
            </div>
            <div
              className="category-card reveal reveal-delay-2"
              style={{
                background: "white",
                borderRadius: "12px",
                overflow: "hidden",
                boxShadow: "var(--shadow)",
              }}
            >
              <div
                style={{
                  position: "relative",
                  height: "240px",
                  background: "#f1f3f5",
                }}
              >
                <Image
                  src="/images/flagstone_stack_premium_png_1773134568102.webp"
                  alt="Natural Stone"
                  fill
                  sizes="(max-width: 900px) 100vw, (max-width: 1200px) 50vw, 33vw"
                  quality={70}
                  className="cover-image"
                />
              </div>
              <div style={{ padding: "2rem" }}>
                <h3 style={{ marginBottom: "1rem" }}>Natural Stone</h3>
                <p>
                  Flagstone, limestone, and decorative rock to elevate your
                  landscape and architecture.
                </p>
                <Link
                  href="/landscaping-supplies#catalog"
                  style={{ color: "var(--primary)", fontWeight: "700" }}
                >
                  LEARN MORE →
                </Link>
              </div>
            </div>
            <div
              className="category-card reveal reveal-delay-3"
              style={{
                background: "white",
                borderRadius: "12px",
                overflow: "hidden",
                boxShadow: "var(--shadow)",
              }}
            >
              <div
                style={{
                  position: "relative",
                  height: "240px",
                  background: "#f1f3f5",
                }}
              >
                <Image
                  src="/images/masonry_tools_display_png_1773134531475.webp"
                  alt="Tools & Materials"
                  fill
                  sizes="(max-width: 900px) 100vw, (max-width: 1200px) 50vw, 33vw"
                  quality={70}
                  className="cover-image"
                />
              </div>
              <div style={{ padding: "2rem" }}>
                <h3 style={{ marginBottom: "1rem" }}>Tools & Materials</h3>
                <p>
                  High-quality masonry tools, expansion joints, and sealers to
                  get the job done right.
                </p>
                <Link
                  href="/masonry-supplies#catalog"
                  style={{ color: "var(--primary)", fontWeight: "700" }}
                >
                  LEARN MORE →
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Featured Products */}
      <section className="section reveal">
        <div className="container">
          <div className="featured-header">
            <div>
              <span className="eyebrow">IN STOCK NOW</span>
              <h2>Featured Masonry Products</h2>
            </div>
            <Link href="/products" className="button button-outline">
              VIEW FULL INVENTORY
            </Link>
          </div>

          <div className="featured-grid">
            {featuredMaterials.slice(0, 4).map((product, i) => (
              <div
                key={product.slug}
                className={`reveal reveal-delay-${(i % 3) + 1}`}
                style={{
                  background: "white",
                  borderRadius: "8px",
                  overflow: "hidden",
                  border: "1px solid var(--border)",
                }}
              >
                <div
                  style={{
                    position: "relative",
                    height: "200px",
                    overflow: "hidden",
                    background: "#f1f3f5",
                  }}
                >
                  <Image
                    src={product.image}
                    alt={product.name}
                    fill
                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
                    quality={68}
                    className="cover-image"
                  />
                </div>
                <div style={{ padding: "1.5rem" }}>
                  <h4 style={{ fontSize: "1.125rem", marginBottom: "0.5rem" }}>
                    {product.name}
                  </h4>
                  <p style={{ fontSize: "0.875rem", marginBottom: "0" }}>
                    Available for delivery
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Why Choose Us */}
      <section className="section bg-soft">
        <div className="container">
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: "5rem",
              alignItems: "center",
            }}
          >
            <div>
              <span className="eyebrow">THE SMS DIFFERENCE</span>
              <h2>Professional Supply, Personal Service</h2>
              <p style={{ fontSize: "1.125rem", marginTop: "1.5rem" }}>
                We aren't just a yard; we're your project partner. With over
                34 years of experience serving South Texas, we know our
                materials and we know our customers.
              </p>
              <ul
                style={{
                  marginTop: "2rem",
                  display: "grid",
                  gridTemplateColumns: "1fr 1fr",
                  gap: "2rem",
                }}
              >
                <li>
                  <strong
                    style={{
                      display: "block",
                      fontSize: "1.25rem",
                      color: "var(--primary)",
                    }}
                  >
                    34+ YEARS
                  </strong>
                  Experience in the Corpus Christi area.
                </li>
                <li>
                  <strong
                    style={{
                      display: "block",
                      fontSize: "1.25rem",
                      color: "var(--primary)",
                    }}
                  >
                    RELIABLE DELIVERY
                  </strong>
                  Dependable site drops when you need them.
                </li>
                <li>
                  <strong
                    style={{
                      display: "block",
                      fontSize: "1.25rem",
                      color: "var(--primary)",
                    }}
                  >
                    OPEN TO PUBLIC
                  </strong>
                  Serving both contractors and homeowners.
                </li>
                <li>
                  <strong
                    style={{
                      display: "block",
                      fontSize: "1.25rem",
                      color: "var(--primary)",
                    }}
                  >
                    LOCAL EXPERTISE
                  </strong>
                  Knowledgeable staff for all project types.
                </li>
              </ul>
            </div>
            <div style={{ position: "relative" }}>
              <Image
                src="/images/delivery_truck_logistics_png_1773134721043.webp"
                alt="Southern Masonry Supply Delivery Truck"
                width={640}
                height={640}
                sizes="(max-width: 1024px) 100vw, 50vw"
                quality={72}
                style={{
                  borderRadius: "12px",
                  boxShadow: "var(--shadow-lg)",
                  width: "100%",
                  height: "auto",
                }}
              />
              <div className="hero-visual-note">RELIABLE ON-SITE DELIVERY</div>
            </div>
          </div>
        </div>
      </section>

      {/* Process Section */}
      <section className="section reveal">
        <div className="container">
          <div
            className="section-header"
            style={{ textAlign: "center", marginBottom: "4rem" }}
          >
            <span className="eyebrow">OUR PROCESS</span>
            <h2>How to Get Your Materials</h2>
          </div>
          <ProcessTimeline steps={processSteps} />
        </div>
      </section>

      {/* Testimonials */}
      <section className="section bg-soft">
        <div className="container">
          <MotionSection>
            <div className="section-header" style={{ textAlign: "center", marginBottom: "3rem" }}>
              <span className="eyebrow">WHAT CUSTOMERS SAY</span>
              <h2>Trusted by Corpus Christi</h2>
            </div>
          </MotionSection>
        </div>
        <TestimonialsCarousel reviews={googleReviews} />
      </section>

      {/* FAQ Section */}
      <section className="section reveal">
        <div className="container">
          <div
            className="section-header"
            style={{ textAlign: "center", marginBottom: "4rem" }}
          >
            <span className="eyebrow">COMMON QUESTIONS</span>
            <h2>Frequently Asked Questions</h2>
          </div>
          <div
            style={{
              maxWidth: "800px",
              margin: "0 auto",
              display: "grid",
              gap: "1rem",
            }}
          >
            {faqs.map((faq) => (
              <details
                key={faq.question}
                className="faq-item"
                style={{
                  background: "white",
                  padding: "1.5rem",
                  borderRadius: "8px",
                  border: "1px solid var(--border)",
                }}
              >
                <summary
                  style={{
                    fontWeight: "700",
                    cursor: "pointer",
                    listStyle: "none",
                  }}
                >
                  {faq.question}
                </summary>
                <p style={{ marginTop: "1rem", color: "var(--text-muted)" }}>
                  {faq.answer}
                </p>
              </details>
            ))}
          </div>
        </div>
      </section>

      {/* Call to Action with inline form */}
      <HomeCTASection />
    </main>
  );
}