import Image from 'next/image';
import Link from 'next/link';
import { products } from '@/data/products';
import { notFound } from 'next/navigation';

// Pre-generate all product detail pages at build time
export function generateStaticParams() {
  return products.map((product) => ({
    slug: product.slug,
  }));
}

// In Next.js 15+/16, params is a Promise and must be awaited
export default async function ProductDetailPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const product = products.find((p) => p.slug === slug);

  if (!product) {
    notFound();
  }

  return (
    <div className="product-detail-page" style={{ minHeight: '100vh', paddingTop: '144px', paddingBottom: '96px', background: 'var(--white)' }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 48px' }}>
        <Link href="/products" style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', marginBottom: '48px', color: 'var(--gray-600)', textDecoration: 'none', fontSize: '14px', fontWeight: 600 }}>
          ← Back to Catalog
        </Link>

        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: '80px', alignItems: 'start' }}>
          {/* Left: Image */}
          <div style={{ position: 'relative', width: '100%', height: '600px', borderRadius: '12px', overflow: 'hidden', boxShadow: '0 20px 40px rgba(0,0,0,0.05)', background: '#f5f5f5' }}>
            <Image
              src="/placeholder.jpg"
              alt={product!.name}
              fill
              style={{ objectFit: 'cover' }}
              priority
            />
          </div>

          {/* Right: Info */}
          <div style={{ paddingTop: '20px' }}>
            <div className="section-eyebrow" style={{ marginBottom: '16px' }}>{product!.category}</div>
            <h1 className="section-h2" style={{ fontSize: '48px', marginBottom: '24px', lineHeight: 1.1 }}>{product!.name}</h1>

            <div style={{ fontSize: '24px', fontWeight: 700, color: 'var(--orange)', fontFamily: 'var(--font-display)', marginBottom: '32px' }}>
              {product!.price}
            </div>

            <div style={{ borderTop: '1px solid var(--gray-200)', borderBottom: '1px solid var(--gray-200)', padding: '32px 0', marginBottom: '40px' }}>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: '14px', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--navy)', marginBottom: '16px' }}>Description</h3>
              <p style={{ fontSize: '16px', lineHeight: 1.8, color: 'var(--gray-600)', whiteSpace: 'pre-line' }}>
                {product!.description}
              </p>
            </div>

            {/* <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '14px', color: 'var(--gray-600)' }}>
                <span style={{ fontWeight: 600 }}>Category:</span>
                <span>{product!.category}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '14px', color: 'var(--gray-600)' }}>
                <span style={{ fontWeight: 600 }}>Availability:</span>
                <span style={{ color: '#059669', fontWeight: 600 }}>In Stock (Same-day Delivery)</span>
              </div>
            </div> */}

            <div style={{ marginTop: '56px' }}>
              <Link href="/#quote" className="btn-primary" style={{ width: '100%', textAlign: 'center', padding: '20px' }}>
                Contact for Quote &amp; Specs →
              </Link>
              {/* <p style={{ textAlign: 'center', fontSize: '13px', color: 'var(--gray-400)', marginTop: '16px' }}>
                Bulk ordering and contractor pricing available on request.
              </p> */}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
