import Link from 'next/link';

export default function Products() {
  const products = [
    {
      name: "Aluminum railing",
      desc: "Residential and commercial aluminum railing systems for decks, balconies, stairs, and pools.",
      tags: ["Residential", "Commercial"],
      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", "Commercial", "Residential"],
      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 Grey"],
      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", "Residential", "Commercial"],
      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", "Residential"],
      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: ["Stain & Seal", "Clean & Bright", "High margin"],
      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 protection accessories to extend the life of any fence installation. Post caps, guards, and rot barriers.",
      tags: ["Post Caps", "Post Guards", "Rot Barrier"],
      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 site fencing, crowd control, and event barriers available for short or long-term rental.",
      tags: ["Construction", "Events", "Rental"],
      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">
        <div>
          <div className="section-eyebrow">Our products</div>
          <h2 className="section-h2">Everything you<br />need to <span>build.</span></h2>
        </div>
        <p style={{ fontSize: '15px', color: 'var(--gray-600)', maxWidth: '340px', lineHeight: '1.7' }}>
          Nine product lines in stock, ready for same-day or scheduled delivery to your job site anywhere in our 250km radius.
        </p>
      </div>
      <div className="products-grid">
        {products.map((product, index) => (
          <Link href="/products" key={index} 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, tIndex) => (
                <span key={tIndex} className="product-tag">{tag}</span>
              ))}
            </div>
            <div className="product-arrow">→</div>
          </Link>
        ))}

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