"use client";

import React, { useEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger);
}

export default function CompetitiveEdge() {
  const sectionRef = useRef<HTMLDivElement>(null);
  const tableWrapperRef = useRef<HTMLDivElement>(null);
  const headerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const section = sectionRef.current;
    const tableWrapper = tableWrapperRef.current;
    const header = headerRef.current;

    if (!section || !tableWrapper || !header) return;

    const rows = section.querySelectorAll(".table-row-hover");
    const badges = section.querySelectorAll(".yes-badge, .advanced-badge");

    // Dynamic initial state settings via GSAP to prevent SSR flash
    gsap.set([header, tableWrapper], { opacity: 0, y: 45 });
    gsap.set(rows, { opacity: 0, y: 20 });
    gsap.set(badges, { opacity: 0, scale: 0.8 });

    // GSAP Timeline ScrollTrigger for viewport entrances
    const entryTl = gsap.timeline({
      scrollTrigger: {
        trigger: section,
        start: "top 78%",
        toggleActions: "play none none none",
      }
    });

    entryTl
      // 1. Reveal Header & Table
      .to([header, tableWrapper], {
        opacity: 1,
        y: 0,
        duration: 0.95,
        stagger: 0.15,
        ease: "power4.out",
      })
      // 2. Stagger slide up row items
      .to(rows, {
        opacity: 1,
        y: 0,
        duration: 0.75,
        stagger: 0.05,
        ease: "power3.out",
      }, "-=0.6")
      // 3. Pop checkmarks and badges cleanly
      .to(badges, {
        opacity: 1,
        scale: 1,
        duration: 0.55,
        stagger: 0.03,
        ease: "back.out(1.6)",
      }, "-=0.45");

  }, []);

  return (
    <section id="comparison" className="comparison-section" ref={sectionRef}>
      {/* Visual background layers */}
      <div className="comparison-bg-glow" />
      <div className="comparison-bg-dots" />

      <div className="container">
        {/* Section Header */}
        <div className="comparison-header" ref={headerRef}>
          <div className="advantage-eyebrow-container">
            <span className="advantage-eyebrow">/ DoorMile wins/</span>
          </div>
          <h2 className="moat-heading" data-text="WHERE DOORMILE  WINS">WHERE DOORMILE WINS</h2>
          <p className="moat-desc">
            A side-by-side technical capabilities comparison showing how operational fleet ownership and dynamic AI planning disrupt basic aggregators.
          </p>
        </div>

        {/* Comparison Matrix Table (Full width on desktop) */}
        <div className="table-wrapper" ref={tableWrapperRef}>
          <table className="comparison-table">
            <thead>
              <tr>
                <th>Capability</th>
                <th className="col-highlight">Doormile</th>
                <th>Aggregators</th>
                <th>Local Couriers</th>
                <th>Software Platforms</th>
              </tr>
            </thead>
            <tbody>
              <tr className="table-row-hover">
                <td className="capability-cell">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="1" y="3" width="15" height="13"></rect>
                    <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
                    <circle cx="5.5" cy="18.5" r="2.5"></circle>
                    <circle cx="18.5" cy="18.5" r="2.5"></circle>
                  </svg>
                  Owned fleet control
                </td>
                <td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
                <td className="no-text">No</td>
                <td className="partial-text">Yes</td>
                <td className="no-text">No</td>
              </tr>
              <tr className="table-row-hover">
                <td className="capability-cell">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <circle cx="12" cy="12" r="10"></circle>
                    <polyline points="12 6 12 12 16 14"></polyline>
                  </svg>
                  Dynamic routing & dispatch
                </td>
                <td className="col-highlight"><span className="advanced-badge">✓ Advanced</span></td>
                <td className="partial-text">Basic</td>
                <td className="no-text">No</td>
                <td className="partial-text">Advanced</td>
              </tr>
              <tr className="table-row-hover">
                <td className="capability-cell">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
                  </svg>
                  EV-aware planning
                </td>
                <td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
                <td className="no-text">No</td>
                <td className="no-text">No</td>
                <td className="no-text">No</td>
              </tr>
              <tr className="table-row-hover">
                <td className="capability-cell">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                    <polyline points="14 2 14 8 20 8"></polyline>
                    <line x1="16" y1="13" x2="8" y2="13"></line>
                    <line x1="16" y1="17" x2="8" y2="17"></line>
                    <polyline points="10 9 9 9 8 9"></polyline>
                  </svg>
                  Documentation & proof trail
                </td>
                <td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
                <td className="partial-text">Partial</td>
                <td className="no-text">No</td>
                <td className="partial-text">Yes</td>
              </tr>
              <tr className="table-row-hover">
                <td className="capability-cell">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <circle cx="12" cy="12" r="10"></circle>
                    <polyline points="12 6 12 12 16 14"></polyline>
                  </svg>
                  Real-time tracking
                </td>
                <td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
                <td className="partial-text">Yes</td>
                <td className="no-text">No</td>
                <td className="partial-text">Yes</td>
              </tr>
              <tr className="table-row-hover">
                <td className="capability-cell">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                  </svg>
                  Verified handling
                </td>
                <td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
                <td className="partial-text">Partial</td>
                <td className="no-text">No</td>
                <td className="no-text">No</td>
              </tr>
              <tr className="table-row-hover">
                <td className="capability-cell">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
                    <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
                  </svg>
                  Hyperlocal learning
                </td>
                <td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
                <td className="no-text">No</td>
                <td className="no-text">No</td>
                <td className="no-text">No</td>
              </tr>
              <tr className="table-row-hover">
                <td className="capability-cell">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <circle cx="12" cy="12" r="10"></circle>
                    <line x1="22" y1="12" x2="18" y2="12"></line>
                    <line x1="6" y1="12" x2="2" y2="12"></line>
                    <line x1="12" y1="6" x2="12" y2="2"></line>
                    <line x1="12" y1="22" x2="12" y2="18"></line>
                  </svg>
                  SLA accountability
                </td>
                <td className="col-highlight"><span className="advanced-badge">✓ High</span></td>
                <td className="no-text">Low</td>
                <td className="partial-text">Medium</td>
                <td className="no-text">Low</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <style dangerouslySetInnerHTML={{ __html: `
        /* --- HIGH-IMPACT PREMIUM CAPABILITIES SECTION STYLE --- */
        .comparison-section {
          position: relative;
          padding: 120px 0;
          background-color: #fafafa;
          overflow: hidden;
          font-family: "Manrope", sans-serif;
        }

        /* Spotlight radial background glow */
        .comparison-bg-glow {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 1000px;
          height: 1000px;
          background: radial-gradient(circle, rgba(200, 16, 46, 0.035) 0%, transparent 70%);
          z-index: 0;
          pointer-events: none;
        }

        /* Subtle logistics dot grid overlay */
        .comparison-bg-dots {
          position: absolute;
          inset: 0;
          background-image: radial-gradient(#e2e4e8 1.5px, transparent 1.5px);
          background-size: 32px 32px;
          opacity: 0.45;
          z-index: 0;
          pointer-events: none;
        }

        .comparison-section .container {
          position: relative;
          z-index: 2;
          max-width: 1400px; /* Restored/Expanded for gorgeous wide balance on large screens */
          margin: 0 auto;
          padding: 0 40px;
        }

        /* Section Header Layout */
        .comparison-header {
          text-align: left;
          margin-bottom: 60px;
          position: relative;
          z-index: 2;
          width: 100%;
        }

        .advantage-eyebrow-container {
          width: 100%;
          border-bottom: 2px solid rgba(0, 0, 0, 0.16);
          padding-bottom: 16px;
          margin-bottom: 28px;
        }

        /* DoorMile Advantage Eyebrow */
        .advantage-eyebrow {
          font-family: 'Manrope', sans-serif;
          font-weight: 700;
          font-size: 0.85rem;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: #060606ff;
          display: inline-block;
          white-space: nowrap;
        }

        /* Outlined heading style with clean duplicate layering hack */
        .moat-heading {
          position: relative;
          font-family: var(--font-syne), 'Syne', sans-serif !important;
          font-size: clamp(2.4rem, 6.8vw, 6.6rem) !important;
          font-weight: 800 !important;
          line-height: 1.1 !important;
          color: #fafafa !important; /* solid background color to cover inner overlapping outlines */
          margin: 0 0 24px 0;
          letter-spacing: -0.02em;
          text-transform: uppercase;
          word-wrap: break-word;
          overflow-wrap: break-word;
          z-index: 1;
        }

        .moat-heading::after {
          content: attr(data-text) !important;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
          color: transparent !important;
          -webkit-text-stroke: 2.2px #c8102e;
          -webkit-text-fill-color: transparent !important;
          pointer-events: none;
          display: block !important; /* override any old display: none */
        }

        .moat-desc {
          font-family: 'Manrope', sans-serif;
          font-size: 1.05rem;
          line-height: 1.65;
          color: #585c67;
          margin: 16px 0 0 0 !important;
          max-width: 820px !important;
          text-align: left !important;
        }

        /* Spacious table styling wrapper (100% width on Desktop) */
        .table-wrapper {
          width: 100%;
          background: #ffffff;
          border-radius: 24px;
          border: 1px solid rgba(0, 0, 0, 0.05);
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.015), 0 1px 3px rgba(0, 0, 0, 0.01);
          overflow: hidden;
          transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .table-wrapper:hover {
          box-shadow: 0 35px 70px rgba(0, 0, 0, 0.035), 0 1px 3px rgba(0, 0, 0, 0.01);
        }

        .comparison-table {
          width: 100%;
          border-collapse: collapse;
          text-align: left;
        }

        /* Enlarge row paddings and metrics size */
        .comparison-table th, 
        .comparison-table td {
          padding: 24px 28px;
          border-bottom: 1px solid #f0f0f4;
          font-size: 1rem;
          color: #2b2b2b;
          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .comparison-table tr:last-child td {
          border-bottom: none;
        }

        .comparison-table th {
          font-family: 'Manrope', sans-serif;
          font-weight: 700;
          text-transform: uppercase;
          font-size: 0.85rem;
          letter-spacing: 0.1em;
          color: #8a8f9d;
          background: rgba(15, 23, 42, 0.02);
        }

        /* High weight column header highlights */
        th.col-highlight {
          background: #c8102e !important;
          color: #ffffff !important;
          text-align: center;
          font-weight: 800;
          font-size: 0.9rem;
          letter-spacing: 0.1em;
          border-left: 2.5px solid #c8102e;
          border-right: 2.5px solid #c8102e;
          box-shadow: 0 4px 20px rgba(200, 16, 46, 0.1);
        }

        /* High weight cells gradient & highlights */
        td.col-highlight {
          text-align: center;
          color: #c8102e !important;
          font-weight: 700;
          background: linear-gradient(180deg, rgba(200, 16, 46, 0.025) 0%, rgba(200, 16, 46, 0.005) 100%) !important;
          border-left: 2.5px solid rgba(200, 16, 46, 0.12);
          border-right: 2.5px solid rgba(200, 16, 46, 0.12);
          position: relative;
          will-change: transform, box-shadow, background;
          animation: doormile-glow-pulse 4s infinite ease-in-out;
        }

        /* Row Hover Enhancements: brighten row & trigger DoorMile glow expand */
        .table-row-hover {
          transition: background-color 0.3s ease;
        }
        
        .table-row-hover:hover td {
          background-color: rgba(200, 16, 46, 0.01) !important;
        }

        .table-row-hover:hover td.col-highlight {
          background: linear-gradient(180deg, rgba(200, 16, 46, 0.06) 0%, rgba(200, 16, 46, 0.02) 100%) !important;
          border-left-color: rgba(200, 16, 46, 0.35);
          border-right-color: rgba(200, 16, 46, 0.35);
          box-shadow: inset 0 0 16px rgba(200, 16, 46, 0.04);
        }

        /* Soft Breathing Box Shadow Red Glow Pulse Loop */
        @keyframes doormile-glow-pulse {
          0% {
            box-shadow: inset 0 0 0 0px rgba(200, 16, 46, 0);
          }
          50% {
            box-shadow: inset 0 0 18px 2px rgba(200, 16, 46, 0.05);
          }
          100% {
            box-shadow: inset 0 0 0 0px rgba(200, 16, 46, 0);
          }
        }

        .capability-cell {
          display: flex;
          align-items: center;
          gap: 14px;
          font-weight: 700;
          color: #111111;
          font-size: 1.1rem;
        }

        .capability-cell svg {
          color: #c8102e;
          transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
          flex-shrink: 0;
        }

        .table-row-hover:hover .capability-cell svg {
          transform: scale(1.18) rotate(4deg);
        }

        /* Premium Badge styles */
        .yes-badge {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          color: #c8102e;
          font-weight: 700;
          font-size: 0.95rem;
          background: rgba(200, 16, 46, 0.05);
          padding: 4px 12px;
          border-radius: 6px;
          border: 1px solid rgba(200, 16, 46, 0.1);
          will-change: transform, opacity;
        }

        .advanced-badge {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          background: rgba(200, 16, 46, 0.075);
          border: 1.5px solid #c8102e;
          padding: 4px 12px;
          border-radius: 8px;
          font-size: 0.78rem;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          font-weight: 800;
          color: #c8102e;
          will-change: transform, opacity;
          box-shadow: 0 4px 12px rgba(200, 16, 46, 0.06);
        }

        .no-text {
          color: #8e94a5;
          font-weight: 500;
        }

        .partial-text {
          color: #4b5262;
          font-weight: 500;
        }

        /* --- RESPONSIVE WORKFLOWS & BREAKPOINTS --- */
        @media (max-width: 1200px) {
          .comparison-section .container {
            padding: 0 24px;
          }
        }

        @media (max-width: 768px) {
          .comparison-section {
            padding: 56px 0;
          }

          .comparison-section .container {
            padding: 0 10px;
          }

          .moat-heading {
            font-size: 1.8rem;
          }
        }

        /* On phones the 5-column table can't fit, so transform each row into a
           stacked card: capability as the card title, then one "label: value"
           line per competitor. Column labels are injected via nth-of-type so no
           markup changes are needed (every row has the same column order). */
        @media (max-width: 600px) {
          .table-wrapper {
            background: transparent;
            border: none;
            box-shadow: none;
            border-radius: 0;
            overflow: visible;
          }
          .comparison-table { min-width: 0; width: 100%; }
          .comparison-table thead { display: none; }
          .comparison-table tbody,
          .comparison-table tr,
          .comparison-table td { display: block; width: auto; }

          .comparison-table tr {
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.07);
            border-radius: 16px;
            padding: 6px 16px 8px;
            margin-bottom: 14px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.04);
          }

          /* Capability = card title (icon + name), no label */
          .comparison-table td.capability-cell {
            display: flex;
            justify-content: flex-start;
            gap: 12px;
            font-size: 1.02rem;
            padding: 12px 0 12px;
            border-bottom: 1.5px solid #eef0f4;
            margin-bottom: 4px;
          }

          /* Value cells = "Label .... value" rows */
          .comparison-table td:not(.capability-cell) {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px solid #f4f5f7;
            font-size: 0.95rem;
            text-align: right;
          }
          .comparison-table tr td:last-child { border-bottom: none; }

          .comparison-table td.col-highlight::before { content: "Doormile"; }
          .comparison-table td:nth-of-type(3)::before { content: "Aggregators"; }
          .comparison-table td:nth-of-type(4)::before { content: "Local Couriers"; }
          .comparison-table td:nth-of-type(5)::before { content: "Software Platforms"; }
          .comparison-table td:not(.capability-cell)::before {
            font-weight: 700;
            font-size: 0.72rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #8a8f9d;
            flex: 0 0 auto;
          }

          /* Neutralise the desktop highlight column styling inside the card */
          .comparison-table td.col-highlight {
            background: transparent !important;
            border-left: none;
            border-right: none;
            animation: none !important;
            color: inherit !important;
          }
        }
      `}} />
    </section>
  );
}