"use client";

import React from 'react';

const ChainLinkCompare = () => {
  return (
    <section className="compare">
      <div className="reveal">
        <div className="section-eyebrow">Residential vs commercial</div>
        <h2 className="sh">Right spec for<br /><span>every project.</span></h2>
      </div>
      <div className="compare-grid reveal">
        <div className="compare-card">
          <div className="compare-label">Residential</div>
          <h3>Home &amp; Property</h3>
          <p>Lighter gauge materials designed for backyard fences, pool enclosures, pet containment, and property boundary fencing. Typically vinyl coated black for curb appeal.</p>
          <table className="spec-table">
            <tbody>
              <tr><td>Common heights</td><td>4ft, 5ft, 6ft</td></tr>
              <tr><td>Typical gauge</td><td>11 or 11.5 gauge</td></tr>
              <tr><td>Mesh opening</td><td>2" standard</td></tr>
              <tr><td>Preferred finish</td><td>Black vinyl coated</td></tr>
              <tr><td>Post diameter</td><td>1-3/8" to 2" line / 2-3/8" terminal</td></tr>
              <tr><td>Best for</td><td>Backyards, pools, pets, gardens</td></tr>
            </tbody>
          </table>
        </div>
        <div className="compare-card">
          <div className="compare-label">Commercial &amp; Industrial</div>
          <h3>Secure &amp; Heavy-Duty</h3>
          <p>Heavier gauge, larger diameter posts, and additional security features like barbed wire arms. Galvanized finish is standard for most commercial and industrial applications.</p>
          <table className="spec-table">
            <tbody>
              <tr><td>Common heights</td><td>6ft, 8ft, 10ft, 12ft</td></tr>
              <tr><td>Typical gauge</td><td>9 or 11 gauge</td></tr>
              <tr><td>Mesh opening</td><td>2" standard</td></tr>
              <tr><td>Preferred finish</td><td>Galvanized (hot-dipped)</td></tr>
              <tr><td>Post diameter</td><td>2-3/8" line / 3" or 4" terminal</td></tr>
              <tr><td>Best for</td><td>Industrial, security, parking, utilities</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
};

export default ChainLinkCompare;