import Link from 'next/link';

export default function Products() {
  const products = [
    {
      name: "Aluminum Railing",
      desc: "Residential and commercial aluminum railing for decks, balconies, stairs, and pools. Multiple profiles and finishes.",
      tags: ["Residential", "Commercial", "Pool-safe"],
      badge: "Railing",
      img: "/assets/manufacturing-hero.png",
      href: "#",
      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. All gauges, heights, posts, gates, and hardware in stock.",
      tags: ["Black", "Galvanized", "Commercial", "Residential"],
      badge: "Fencing",
      img: "/images/chain-link-hero.png",
      href: "/products/chain-link-fence",
      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 panels in three premium colours. Natural wood look, zero rot, no painting, no splitting.",
      tags: ["Ancient Wood", "Golden Teak", "Anthracite Grey"],
      badge: "Fencing",
      img: "/assets/about-fencing.png",
      href: "#",
      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: "3 systems — post-mount, standoff/spigot, fascia-mount. 10mm & 12mm tempered glass. Pool-compliant configurations available.",
      tags: ["Pool-safe", "Residential", "Commercial"],
      badge: "Railing",
      img: "/assets/manufacturing-hero.png",
      href: "#",
      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: "4 models — Tokio, Rio, Denver, Oslo. Rackable panels in 48″ and 60″ heights. Matching gates, posts, caps, and hardware.",
      tags: ["Tokio", "Rio", "Denver", "Oslo"],
      badge: "Fencing",
      img: "/images/chain-link-hero.png",
      href: "#",
      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. Contractor pricing and bulk ordering.",
      tags: ["Stain & Seal", "Clean & Bright", "High margin"],
      badge: "Wood Care",
      img: "/images/staining-hero.png",
      href: "#",
      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>
      )
    },
    {
      name: "Fence Armor",
      desc: "Post caps (4×4, 6×6), post guards (11 sizes), rot barrier, RotGuard, PostSaver sleeves, and 7″ pro stain brush. Black steel.",
      tags: ["Post Caps", "Post Guards", "Rot Barrier"],
      badge: "Accessories",
      img: "/images/stained-deck.png",
      href: "#",
      icon: (
        <svg viewBox="0 0 22 22" fill="none"><circle cx="7" cy="4" r="3" fill="white"/><rect x="5" y="7" width="4" height="11" rx="1" fill="white"/><rect x="3" y="11" width="8" height="2" rx="1" fill="white" opacity=".5"/></svg>
      )
    },
    {
      name: "Temporary Fence Rentals",
      desc: "Construction, demolition, events, beer gardens, festivals, and emergencies. 6×10 and 6×5 panels, gates, and screens. Same-day KWC.",
      tags: ["Construction", "Events", "Rental"],
      badge: "Rental",
      img: "/assets/fence-rentals-hero.png",
      href: "#",
      icon: (
        <svg viewBox="0 0 22 22" fill="none"><rect x="2" y="5" width="5" height="13" rx="1.5" fill="white"/><rect x="15" y="5" width="5" height="13" rx="1.5" fill="white"/><rect x="6" y="7" width="10" height="2" rx="1" fill="white" opacity=".7"/><rect x="6" y="13" width="10" height="2" rx="1" fill="white" opacity=".7"/></svg>
      )
    }
  ];

  return (
    <section className="products-section" id="products">
      <div className="products-header reveal">
        <div>
          <div className="section-eyebrow">Our products</div>
          <h2 className="sh">Everything you<br/>need to <span>build.</span></h2>
        </div>
        <p className="products-header-right">Eight product lines in stock, ready for scheduled delivery to your job site anywhere in our 250km Ontario radius.</p>
      </div>

      <div className="products-grid reveal">
        {products.map((product, index) => (
          <Link href={product.href} key={index} className="product-card">
            <div className="product-img-area">
              <img src={product.img} alt={product.name} />
              <div className="img-badge">{product.badge}</div>
            </div>
            <div className="product-card-body">
              <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, tIndex) => (
                  <span key={tIndex} className="product-tag">{tag}</span>
                ))}
              </div>
              <div className="product-arrow">→</div>
            </div>
          </Link>
        ))}

        <div className="product-card product-cta-card">
          <div className="product-card-body" style={{ justifyContent: 'space-between', height: '100%', minHeight: '200px' }}>
            <div>
              <div style={{ fontFamily: 'var(--fd)', fontSize: '13px', fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--orange)', marginBottom: '14px' }}>Need a custom quote?</div>
              <div style={{ fontFamily: 'var(--fd)', fontSize: '24px', fontWeight: 800, textTransform: 'uppercase', color: 'var(--white)', lineHeight: 1.1, marginBottom: '10px' }}>Talk to our<br/>supply team.</div>
              <div style={{ fontSize: '12px', color: 'rgba(255,255,255,.5)', lineHeight: 1.6 }}>Bulk orders · Contractor accounts · Scheduled deliveries · Job site planning</div>
            </div>
            <a href="/contact" className="btn-primary" style={{ textAlign: 'center', marginTop: '20px', display: 'block' }}>Request pricing →</a>
          </div>
        </div>
      </div>
    </section>
  );
}