import React from "react";
import Image from "next/image";
import { ScrollReveal } from "../../animations/Reveal";

type Stat = {
  value: string;
  label: string;
};

type Stage = {
  img: string;
  label: string;
  title: string;
  subtitle?: string;
  desc: string;
  points: string[];
  stats?: Stat[];
};

const STAGES: Stage[] = [
  {
    img: "/images/first-mile-approach.webp",
    label: "Stage 01",
    title: "First Mile Warehouse",
    subtitle: "Consolidation & Prep",
    desc: "Incoming shipments are securely loaded, checked, and queued for transfer in our high-capacity fulfillment centers.",
    points: ["AI-scheduled pickups", "Dynamic load consolidation", "Yard & dock management"],
    stats: [
      { value: "14,250", label: "Parcels Processed" },
      { value: "99.98%", label: "Sorting Accuracy" }
    ]
  },
  {
    img: "/images/mid-mile-approach.webp",
    label: "Stage 02",
    title: "Mid Mile Transit",
    subtitle: "Hub-to-Hub Transport",
    desc: "Freight is routed dynamically through our network of strategically located hubs using automated sortation and linehaul scheduling.",
    points: ["Optimised line-haul routing", "Cross-docking & sortation", "Live SLA monitoring"],
    stats: [
      { value: "1,240+", label: "Daily Line-Hauls" },
      { value: "98.5%", label: "SLA Adherence" }
    ]
  },
  {
    img: "/images/last-mile-approach.webp",
    label: "Stage 03",
    title: "Last Mile Delivery",
    subtitle: "Hub to Doorstep",
    desc: "The final handoff. Our routing engine optimizes multi-stop itineraries to deliver parcels directly to customers' doorsteps in record time.",
    points: ["Multi-stop route optimisation", "Precise delivery windows", "Digital proof of delivery"],
    stats: [
      { value: "450K+", label: "Happy Deliveries" },
      { value: "2.8 Hours", label: "Average Turnaround" }
    ]
  },
];

export default function WhyChooseDoormile() {
  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: `
        /* =====================================================================
           "Why Businesses Choose Doormile" — First / Mid / Last Mile stage cards.
           ===================================================================== */
         .wcd-section {
          display: flex;
          flex-direction: column;
          width: auto;
          margin: -250px 20px 20px 20px;
          background-color: #1F1F1F;
          border-radius: 0 0 25px 25px;
          padding: 50px 0 110px;
        }
        .wcd-inner {
          width: 100%;
          max-width: 1630px;
          margin: 0 auto;
          padding: 0 50px;
          box-sizing: border-box;
        }
        .wcd-head {
          position: relative;
          text-align: center;
          margin: 0 0 70px;
        }
        @keyframes wcd-float {
          0% { transform: translateX(-50%) translateY(0px) scale(1); }
          50% { transform: translateX(-50%) translateY(-12px) scale(1.02); }
          100% { transform: translateX(-50%) translateY(0px) scale(1); }
        }
        .wcd-head::after {
          content: "";
          position: absolute;
          left: 50%;
          top: 75%;
          transform: translateX(-50%);
          width: min(1180px, 95%);
          aspect-ratio: 2 / 1;
          background: url('/images/bg-map.png') center / contain no-repeat;
          opacity: 0.06;
          filter: invert(1);
          z-index: 0;
          pointer-events: none;
          animation: wcd-float 20s ease-in-out infinite;
        }
        .wcd-card-wrapper {
          display: flex;
          flex-direction: column;
          height: 100%;
        }
        .wcd-eyebrow {
          position: relative;
          z-index: 1;
          font-family: var(--font-manrope), "Manrope", sans-serif;
          font-size: 14px;
          font-weight: 500;
          line-height: 2.1429em;
          letter-spacing: 0.5px;
          color: #FFFFFF;
          margin: 0 0 18px;
        }
        .logico-front-end .wcd-section h2.wcd-heading {
          position: relative;
          z-index: 1;
          font-family: var(--font-manrope), "Manrope", sans-serif;
          font-size: clamp(34px, 4.4vw, 60px);
          font-weight: 500;
          line-height: 1.08;
          letter-spacing: -0.03em;
          text-transform: uppercase;
          color: #FFFFFF;
          -webkit-text-fill-color: #FFFFFF;
          max-width: 1180px;
          margin: 0 auto;
        }

        .wcd-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 30px;
          width: 100%;
        }

        /* Premium Glassmorphism & Card Interaction */
        .wcd-card {
          display: flex;
          flex-direction: column;
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 20px;
          overflow: hidden;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          transition: border-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                      box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                      transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .wcd-card:hover {
          border-color: #c01227 !important;
          box-shadow: 0 20px 40px rgba(192, 18, 39, 0.15), inset 0 0 20px rgba(255, 255, 255, 0.02) !important;
          transform: translateY(-8px);
        }
        .wcd-card-media {
          position: relative;
          width: 100%;
          aspect-ratio: 16 / 10;
          overflow: hidden;
        }
        .wcd-card-media img {
          object-fit: cover;
          transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .wcd-card:hover .wcd-card-media img {
          transform: scale(1.05);
        }
        
        /* Body Data Container (Unified Div) */
        .wcd-card-body {
          display: flex;
          flex-direction: column;
          flex: 1;
          padding: 40px;
        }
        
        /* Modern Pill Badge for Label */
        .wcd-card-label {
          display: inline-flex;
          align-items: center;
          align-self: flex-start;
          padding: 6px 14px;
          background: rgba(192, 18, 39, 0.08);
          border: 1px solid rgba(192, 18, 39, 0.25);
          border-radius: 100px;
          font-family: var(--font-manrope), "Manrope", sans-serif;
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: #ff3344;
          margin: 0 0 20px;
          transition: all 0.3s ease;
        }
        .wcd-card:hover .wcd-card-label {
          background: rgba(192, 18, 39, 0.18);
          border-color: #c01227;
          box-shadow: 0 0 10px rgba(192, 18, 39, 0.15);
        }
        
        .logico-front-end .wcd-section h3.wcd-card-title {
          font-family: var(--font-manrope), "Manrope", sans-serif;
          font-size: 26px;
          font-weight: 700;
          line-height: 1.2;
          letter-spacing: -0.02em;
          text-transform: uppercase;
          color: #FFFFFF;
          -webkit-text-fill-color: #FFFFFF;
          margin: 0 0 4px;
        }
        
        .wcd-card-subtitle {
          font-family: var(--font-manrope), "Manrope", sans-serif;
          font-size: 13px;
          font-weight: 600;
          color: rgba(255, 255, 255, 0.55);
          margin: 0 0 20px;
          text-transform: uppercase;
          letter-spacing: 0.05em;
        }
        
        .wcd-card-divider {
          height: 1px;
          background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
          margin: 0 0 20px;
          width: 100%;
        }

        .wcd-card-desc {
          font-size: 15px;
          font-weight: 400;
          line-height: 1.6;
          color: rgba(255, 255, 255, 0.65);
          margin: 0 0 24px;
        }
        
        .wcd-card-points {
          list-style: none;
          margin: 0 0 30px;
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
        .wcd-section .wcd-card-points li {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          padding-left: 0;
          font-size: 15px;
          font-weight: 600;
          line-height: 1.3;
          color: #FFFFFF;
        }
        .wcd-section .wcd-card-points li::before {
          content: none;
          display: none;
        }
        
        .wcd-card-points .wcd-check {
          flex: 0 0 auto;
          width: 18px;
          height: 18px;
          margin-top: 0.08em;
          color: #c01227;
          transition: transform 0.3s ease;
        }
        .wcd-card:hover .wcd-card-points .wcd-check {
          transform: scale(1.1);
        }

        /* Integrated Stats Section */
        .wcd-card-stats {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
          margin-top: auto;
          padding-top: 24px;
          border-top: 1px dashed rgba(255, 255, 255, 0.12);
        }
        .wcd-stat-item {
          display: flex;
          flex-direction: column;
        }
        .wcd-stat-value {
          font-family: var(--font-manrope), "Manrope", sans-serif;
          font-size: 24px;
          font-weight: 800;
          color: #FFFFFF;
          line-height: 1.1;
          letter-spacing: -0.02em;
          transition: color 0.3s ease;
        }
        .wcd-card:hover .wcd-stat-value {
          color: #ff3344;
        }
        .wcd-stat-label {
          font-size: 11px;
          font-weight: 600;
          color: rgba(255, 255, 255, 0.45);
          text-transform: uppercase;
          letter-spacing: 0.05em;
          margin-top: 4px;
          line-height: 1.3;
        }

         @media (max-width: 1020px) {
          .wcd-section { margin: 0 10px 10px 10px; padding: 40px 0 80px; }
          .wcd-inner { padding: 0; }
          .wcd-grid { grid-template-columns: 1fr; gap: 24px; }
          .wcd-card-body { padding: 32px; }
          .logico-front-end .wcd-section h3.wcd-card-title { font-size: 24px; }
        }
        @media (max-width: 480px) {
          .wcd-section { margin: 0 10px 10px 10px; border-radius: 0 0 20px 20px; padding: 30px 0 64px; }
          .wcd-inner { padding: 0; }
          .wcd-card-body { padding: 24px; }
        }
      `}} />

      <section className="wcd-section">
        <div className="wcd-inner">
          <ScrollReveal delay={0.1}>
            <div className="wcd-head">
              <div className="wcd-eyebrow">/ Why Businesses Choose Doormile /</div>
              <h2 className="wcd-heading">The connected approach delivers measurable advantages</h2>
            </div>
          </ScrollReveal>
          
          <div className="wcd-grid">
            {STAGES.map((stage, index) => (
              <ScrollReveal
                key={stage.label}
                delay={index * 0.15}
                duration={0.8}
                yOffset={50}
                className="wcd-card-wrapper"
              >
                <article className="wcd-card" style={{ height: "100%" }}>
                  <div className="wcd-card-media">
                    <Image
                      src={stage.img}
                      alt={stage.title}
                      fill
                      sizes="(max-width: 1020px) 100vw, 33vw"
                    />
                  </div>
                  {/* Single Parent Div for All Data Content */}
                  <div className="wcd-card-body">
                    <div className="wcd-card-label">{stage.label}</div>
                    
                    <h3 className="wcd-card-title">{stage.title}</h3>
                    
                    {stage.subtitle && (
                      <div className="wcd-card-subtitle">{stage.subtitle}</div>
                    )}
                    
                    <div className="wcd-card-divider" />
                    
                    <p className="wcd-card-desc">{stage.desc}</p>
                    
                    <ul className="wcd-card-points">
                      {stage.points.map((point) => (
                        <li key={point}>
                          <svg
                            className="wcd-check"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth={2}
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            aria-hidden="true"
                          >
                            <circle cx="12" cy="12" r="10" />
                            <path d="m9 12 2 2 4-4" />
                          </svg>
                          <span>{point}</span>
                        </li>
                      ))}
                    </ul>

                    {/* Integrated Statistics Grid */}
                    {stage.stats && stage.stats.length > 0 && (
                      <div className="wcd-card-stats">
                        {stage.stats.map((stat) => (
                          <div key={stat.label} className="wcd-stat-item">
                            <span className="wcd-stat-value">{stat.value}</span>
                            <span className="wcd-stat-label">{stat.label}</span>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </article>
              </ScrollReveal>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}