import Link from 'next/link';

const products = [
  {
    name: "Aluminum Railing",
    desc: "Residential and commercial aluminum railing systems for decks, balconies, stairs, and pools.",
    tags: ["Residential", "Commercial", "Maintenance-free"],
    icon: <svg viewBox="0 0 22 22" fill="none"><rect x="1" y="3" width="3" height="16" rx="1.5" fill="white" /><rect x="9" y="3" width="3" height="16" rx="1.5" fill="white" /><rect x="17" y="3" width="3" height="16" rx="1.5" fill="white" /><line x1="1" y1="8" x2="20" y2="8" stroke="white" strokeWidth="1.5" /><line x1="1" y1="13" x2="20" y2="13" stroke="white" strokeWidth="1.5" /></svg>
  },
  {
    name: "Chain Link Fence",
    desc: "Commercial and residential chain link in black and galvanized finishes. High volume, quick delivery.",
    tags: ["Black", "Galvanized", "Security"],
    icon: <svg viewBox="0 0 22 22" fill="none"><rect x="2" y="3" width="3" height="16" rx="1.5" fill="white" /><rect x="17" y="3" width="3" height="16" rx="1.5" fill="white" /><line x1="2" y1="8" x2="20" y2="8" stroke="white" strokeWidth="1.5" /><line x1="2" y1="13" x2="20" y2="13" stroke="white" strokeWidth="1.5" /><line x1="8" y1="3" x2="8" y2="19" stroke="white" strokeWidth="1.5" /><line x1="14" y1="3" x2="14" y2="19" stroke="white" strokeWidth="1.5" /></svg>
  },
  {
    name: "Composite Fences",
    desc: "Low maintenance composite fence panels in three premium colours. Natural wood look, zero rot.",
    tags: ["Ancient Wood", "Golden Teak", "Anthracite"],
    icon: <svg viewBox="0 0 22 22" fill="none"><rect x="2" y="2" width="6" height="18" rx="2" fill="white" opacity=".7" /><rect x="14" y="2" width="6" height="18" rx="2" fill="white" opacity=".7" /><rect x="5" y="2" width="12" height="18" rx="2" fill="white" opacity=".35" /></svg>
  },
  {
    name: "Glass Railing",
    desc: "Premium tempered glass railing for pools, decks, balconies, and commercial applications.",
    tags: ["Pool-safe", "Tempered Glass", "Modern"],
    icon: <svg viewBox="0 0 22 22" fill="none"><rect x="2" y="6" width="18" height="11" rx="2" fill="white" opacity=".25" stroke="white" strokeWidth="1.5" /><rect x="4" y="2" width="2" height="18" rx="1" fill="white" /><rect x="16" y="2" width="2" height="18" rx="1" fill="white" /></svg>
  },
  {
    name: "Ornamental Fence",
    desc: "Classic black ornamental iron fence for residential properties. Elegant, durable, and timeless.",
    tags: ["Black Iron", "Residential", "Elegant"],
    icon: <svg viewBox="0 0 22 22" fill="none"><rect x="2" y="3" width="3" height="16" rx="1.5" fill="white" /><rect x="17" y="3" width="3" height="16" rx="1.5" fill="white" /><line x1="2" y1="7" x2="20" y2="7" stroke="white" strokeWidth="1.5" /><line x1="2" y1="11" x2="20" y2="11" stroke="white" strokeWidth="1.5" /><line x1="2" y1="15" x2="20" y2="15" stroke="white" strokeWidth="1.5" /></svg>
  },
  {
    name: "Expert Stain & Seal",
    desc: "Professional-grade wood care products for fences, decks, pergolas, and outdoor structures.",
    tags: ["Wood Care", "High Margin", "Professional"],
    icon: <svg viewBox="0 0 22 22" fill="none"><path d="M4 19 L11 3 L18 19" stroke="white" strokeWidth="2" fill="none" strokeLinecap="round" /><circle cx="11" cy="11" r="3.5" fill="white" opacity=".5" /></svg>
  }
];

export default function ProductsPage() {
  return (
    <div className="products-section" style={{ minHeight: '100vh', paddingTop: '144px', paddingBottom: '80px' }}>
      <div style={{ padding: '0 80px', marginBottom: '64px' }}>
        <div className="section-eyebrow">Inventory</div>
        <h1 className="section-h2" style={{ fontSize: '64px' }}>Our <span>Product Lines.</span></h1>
        <p style={{ color: 'var(--gray-600)', maxWidth: '600px', marginTop: '20px', fontSize: '18px' }}>
          Explore our full range of professional fence and railing supplies. All items are available for same-day delivery across Ontario.
        </p>
      </div>

      <div className="products-grid" style={{ margin: '0 80px' }}>
        {products.map((product, i) => (
          <div key={i} className="product-card">
            <div className="product-icon">
              {product.icon}
            </div>
            <div className="product-name">{product.name}</div>
            <div className="product-desc">{product.desc}</div>
            <div className="product-tags">
              {product.tags.map((tag, j) => (
                <span key={j} className="product-tag">{tag}</span>
              ))}
            </div>
            <div style={{ marginTop: '24px' }}>
              <button className="btn-primary" style={{ padding: '8px 20px', fontSize: '12px' }}>Request Specs</button>
            </div>
          </div>
        ))}
      </div>

      <section className="cta-section" style={{ marginTop: '96px' }}>
        <h2 className="cta-h2">Don't see what you <span>need?</span></h2>
        <p className="cta-sub">We handle custom orders and bulk supplies for large-scale developments.</p>
        <Link href="/#quote" className="btn-white">Contact our supply team</Link>
      </section>
    </div>
  );
}