'use client';

import { motion } from 'framer-motion';
import { MapPin, FileText, Clock, Sparkles } from 'lucide-react';
import { CTAButton } from '@/components/ui/CTAButton';

const ease = [0.16, 1, 0.3, 1] as const;

type Props = {
  title?: string;
  description?: string;
  primaryHref?: string;
  primaryLabel?: string;
  secondaryHref?: string;
  secondaryLabel?: string;
};

const CHIPS = [
  { Icon: MapPin, label: 'Dubai showroom' },
  { Icon: Sparkles, label: 'Live demo' },
  { Icon: FileText, label: 'UAE quotation' },
  { Icon: Clock, label: 'Fast response' },
];

export function DemoCTA({
  title = 'Talk to our robotics team.',
  description = 'See the robots in action at our Dubai showroom or request a UAE-ready quotation. Our team responds within one business day.',
  primaryHref = '/book-demo/',
  primaryLabel = 'Book a live demo',
  secondaryHref = '/contact/',
  secondaryLabel = 'Talk to our team',
}: Props) {
  return (
    <motion.section
      className="dcta"
      aria-label="Book a demo or contact the robotics team"
      initial={{ opacity: 0, y: 24 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-10%' }}
      transition={{ duration: 0.7, ease }}
    >
      <div className="dcta-glow dcta-glow-a" aria-hidden />
      <div className="dcta-glow dcta-glow-b" aria-hidden />
      <div className="dcta-grid" aria-hidden />
      <div className="dcta-scan" aria-hidden />

      <div className="dcta-inner">
        {/* LEFT — copy + actions */}
        <div className="dcta-text">
          <span className="dcta-eyebrow">
            <span className="dcta-eyebrow-dot" />
            Book a demo · Dubai showroom
          </span>

          <h2 className="dcta-title">
            <span className="text-gradient">{title}</span>
          </h2>

          <p className="dcta-desc">{description}</p>

          <ul className="dcta-chips" role="list">
            {CHIPS.map((c) => (
              <li key={c.label} className="dcta-chip">
                <span className="dcta-chip-icon" aria-hidden>
                  <c.Icon size={12} />
                </span>
                <span>{c.label}</span>
              </li>
            ))}
          </ul>

          <div className="dcta-actions">
            <CTAButton
              href={primaryHref}
              variant="primary"
              size="lg"
              arrow="up-right"
              ariaLabel={`${primaryLabel} at the Dubai showroom`}
            >
              {primaryLabel}
            </CTAButton>
            <CTAButton
              href={secondaryHref}
              variant="secondary"
              size="lg"
              arrow="right"
              ariaLabel={`${secondaryLabel} via contact form`}
            >
              {secondaryLabel}
            </CTAButton>
          </div>

          <div className="dcta-meta" aria-hidden>
            <span className="dcta-meta-dot" />
            <span>UAE-based robotics team · Replies within 1 business day</span>
          </div>
        </div>

        {/* RIGHT — status module (desktop only) */}
        <aside className="dcta-panel" aria-hidden>
          <div className="dcta-panel-head">
            <span className="dcta-panel-tag">YSL · LIVE</span>
            <span className="dcta-panel-live">
              <span className="dcta-panel-live-dot" />
              Online
            </span>
          </div>

          <div className="dcta-orbit">
            <svg viewBox="0 0 220 220" role="img" aria-hidden="true" className="dcta-orbit-svg">
              <defs>
                <radialGradient id="dcta-core" cx="50%" cy="50%" r="50%">
                  <stop offset="0%" stopColor="#FFFFFF" />
                  <stop offset="55%" stopColor="#DEE0F0" />
                  <stop offset="100%" stopColor="#4a66d8" />
                </radialGradient>
                <linearGradient id="dcta-route" x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0%" stopColor="rgba(222, 224, 240, 0.0)" />
                  <stop offset="50%" stopColor="rgba(222, 224, 240, 0.55)" />
                  <stop offset="100%" stopColor="rgba(74, 102, 216, 0.0)" />
                </linearGradient>
              </defs>

              <circle cx="110" cy="110" r="42" fill="none" stroke="rgba(74,102,216,0.45)" strokeWidth="1" strokeDasharray="3 4" />
              <circle cx="110" cy="110" r="70" fill="none" stroke="rgba(222,224,240,0.18)" strokeWidth="1" strokeDasharray="2 6" />
              <circle cx="110" cy="110" r="96" fill="none" stroke="rgba(74,102,216,0.22)" strokeWidth="1" />

              <circle cx="110" cy="110" r="42" fill="none" stroke="rgba(74,102,216,0.7)" strokeWidth="1.2">
                <animate attributeName="r" values="42;96;42" dur="4.8s" repeatCount="indefinite" />
                <animate attributeName="opacity" values="0.7;0;0.7" dur="4.8s" repeatCount="indefinite" />
              </circle>

              <g>
                <circle cx="110" cy="110" r="14" fill="url(#dcta-core)" />
                <circle cx="110" cy="110" r="18" fill="none" stroke="rgba(222,224,240,0.55)" strokeWidth="1" />
              </g>

              <g transform="translate(110 110)">
                <g>
                  <circle r="3" cx="70" cy="0" fill="#DEE0F0">
                    <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="9s" repeatCount="indefinite" />
                  </circle>
                </g>
                <g>
                  <circle r="2.5" cx="-96" cy="0" fill="#A6B2D8">
                    <animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="14s" repeatCount="indefinite" />
                  </circle>
                </g>
              </g>
            </svg>

            <span className="dcta-orbit-label">Dubai · 25.20°N</span>
          </div>

          <div className="dcta-panel-rows">
            <div className="dcta-row">
              <span className="dcta-row-k">Showroom</span>
              <span className="dcta-row-v">Dubai · By appointment</span>
            </div>
            <div className="dcta-row">
              <span className="dcta-row-k">Coverage</span>
              <span className="dcta-row-v">UAE-wide</span>
            </div>
            <div className="dcta-row">
              <span className="dcta-row-k">Response</span>
              <span className="dcta-row-v">≤ 1 business day</span>
            </div>
          </div>
        </aside>
      </div>

      <style jsx>{`
        .dcta {
          position: relative;
          isolation: isolate;
          overflow: hidden;
          border-radius: 24px;
          border: 1px solid rgba(74, 102, 216, 0.18);
          background:
            radial-gradient(ellipse 60% 100% at 0% 0%, rgba(58, 85, 196, 0.16), transparent 55%),
            radial-gradient(ellipse 60% 100% at 100% 100%, rgba(136, 145, 199, 0.14), transparent 55%),
            linear-gradient(135deg, rgba(14, 13, 22, 0.92), rgba(6, 6, 10, 0.97));
          box-shadow:
            0 30px 90px rgba(0, 0, 0, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }
        .dcta-glow {
          position: absolute;
          border-radius: 999px;
          filter: blur(110px);
          pointer-events: none;
        }
        .dcta-glow-a {
          width: 520px;
          height: 520px;
          top: -180px;
          left: -160px;
          background: rgba(58, 85, 196, 0.42);
          opacity: 0.55;
          animation: dcta-drift 16s ease-in-out infinite alternate;
        }
        .dcta-glow-b {
          width: 480px;
          height: 480px;
          bottom: -200px;
          right: -160px;
          background: rgba(136, 145, 199, 0.32);
          opacity: 0.45;
          animation: dcta-drift 22s ease-in-out infinite alternate-reverse;
        }
        @keyframes dcta-drift {
          0%   { transform: translate(0, 0); }
          100% { transform: translate(24px, -16px); }
        }
        .dcta-grid {
          position: absolute;
          inset: 0;
          background:
            linear-gradient(rgba(74, 102, 216, 0.06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(74, 102, 216, 0.06) 1px, transparent 1px);
          background-size: 48px 48px;
          mask-image: radial-gradient(ellipse 70% 90% at 30% 40%, #000 25%, transparent 80%);
          -webkit-mask-image: radial-gradient(ellipse 70% 90% at 30% 40%, #000 25%, transparent 80%);
          pointer-events: none;
        }
        .dcta-scan {
          position: absolute;
          inset: 0;
          background: repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent 3px,
            rgba(222, 224, 240, 0.018) 3px,
            rgba(222, 224, 240, 0.018) 4px
          );
          mix-blend-mode: overlay;
          opacity: 0.6;
          pointer-events: none;
        }

        .dcta-inner {
          position: relative;
          z-index: 1;
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: clamp(1.5rem, 3vw, 2.5rem);
          padding: clamp(1.6rem, 3.8vw, 2.8rem);
          align-items: center;
        }

        .dcta-text {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          max-width: 640px;
        }
        .dcta-eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 0.6rem;
          font-size: 0.6rem;
          letter-spacing: 0.32em;
          text-transform: uppercase;
          font-weight: 800;
          color: #8891C7;
          width: fit-content;
        }
        .dcta-eyebrow-dot {
          width: 8px;
          height: 8px;
          border-radius: 999px;
          background: #DEE0F0;
          box-shadow: 0 0 14px rgba(222, 224, 240, 0.85);
          animation: dcta-pulse 2.2s ease-in-out infinite;
        }
        @keyframes dcta-pulse {
          0%, 100% { opacity: 0.45; transform: scale(0.85); }
          50% { opacity: 1; transform: scale(1.12); }
        }

        .dcta-title {
          margin: 0;
          font-size: clamp(1.8rem, 4.2vw, 2.8rem);
          line-height: 1.05;
          font-weight: 300;
          letter-spacing: -0.03em;
          color: #FFFFFF;
        }
        .dcta-title :global(.text-gradient) { font-weight: 500; }

        .dcta-desc {
          margin: 0;
          color: #DEE0F0;
          font-size: clamp(0.95rem, 1.8vw, 1.05rem);
          line-height: 1.65;
          max-width: 540px;
        }

        .dcta-chips {
          list-style: none;
          margin: 0.25rem 0 0;
          padding: 0;
          display: flex;
          flex-wrap: wrap;
          gap: 0.4rem;
        }
        .dcta-chip {
          display: inline-flex;
          align-items: center;
          gap: 0.45rem;
          padding: 0.4rem 0.7rem;
          border-radius: 999px;
          border: 1px solid rgba(222, 224, 240, 0.12);
          background: rgba(20, 19, 26, 0.55);
          color: #DEE0F0;
          font-size: 0.78rem;
          font-weight: 600;
          letter-spacing: 0.01em;
          transition: border-color 0.3s, background 0.3s, color 0.3s;
        }
        .dcta-chip:hover {
          border-color: rgba(74, 102, 216, 0.45);
          background: rgba(58, 85, 196, 0.14);
          color: #FFFFFF;
        }
        .dcta-chip-icon {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 18px;
          height: 18px;
          border-radius: 999px;
          color: #DEE0F0;
          background: rgba(74, 102, 216, 0.22);
          border: 1px solid rgba(74, 102, 216, 0.45);
        }

        .dcta-actions {
          display: flex;
          flex-wrap: wrap;
          gap: 0.6rem;
          margin-top: 0.35rem;
        }

        .dcta-meta {
          display: inline-flex;
          align-items: center;
          gap: 0.55rem;
          margin-top: 0.4rem;
          color: #8891C7;
          font-size: 0.78rem;
          letter-spacing: 0.01em;
        }
        .dcta-meta-dot {
          width: 7px;
          height: 7px;
          border-radius: 999px;
          background: #7FD6D0;
          box-shadow: 0 0 10px rgba(127, 214, 208, 0.7);
          animation: dcta-pulse 2.4s ease-in-out infinite;
        }

        /* RIGHT PANEL */
        .dcta-panel {
          display: none;
          position: relative;
          border-radius: 18px;
          border: 1px solid rgba(74, 102, 216, 0.22);
          background:
            radial-gradient(ellipse 80% 80% at 50% 30%, rgba(58, 85, 196, 0.18), transparent 65%),
            linear-gradient(180deg, rgba(14, 13, 22, 0.75), rgba(6, 6, 10, 0.92));
          padding: 1rem 1.1rem 1.1rem;
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
          overflow: hidden;
        }
        .dcta-panel-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 0.5rem;
          margin-bottom: 0.5rem;
        }
        .dcta-panel-tag {
          font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
          font-size: 0.62rem;
          letter-spacing: 0.32em;
          color: #DEE0F0;
          font-weight: 800;
        }
        .dcta-panel-live {
          display: inline-flex;
          align-items: center;
          gap: 0.4rem;
          font-size: 0.62rem;
          letter-spacing: 0.22em;
          font-weight: 700;
          color: #7FD6D0;
          text-transform: uppercase;
        }
        .dcta-panel-live-dot {
          width: 7px;
          height: 7px;
          border-radius: 999px;
          background: #7FD6D0;
          box-shadow: 0 0 10px rgba(127, 214, 208, 0.75);
          animation: dcta-pulse 1.8s ease-in-out infinite;
        }

        .dcta-orbit {
          position: relative;
          aspect-ratio: 1 / 1;
          border-radius: 14px;
          border: 1px solid rgba(222, 224, 240, 0.06);
          background:
            radial-gradient(ellipse 80% 80% at 50% 50%, rgba(58, 85, 196, 0.18), transparent 70%),
            linear-gradient(180deg, rgba(10, 10, 14, 0.6), rgba(6, 6, 10, 0.9));
          overflow: hidden;
        }
        .dcta-orbit-svg {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
        }
        .dcta-orbit-label {
          position: absolute;
          left: 12px;
          bottom: 10px;
          font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
          font-size: 0.62rem;
          letter-spacing: 0.18em;
          color: #8891C7;
        }

        .dcta-panel-rows {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          margin-top: 0.85rem;
        }
        .dcta-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 0.5rem;
          padding: 0.55rem 0.7rem;
          border-radius: 10px;
          border: 1px solid rgba(222, 224, 240, 0.06);
          background: rgba(10, 10, 14, 0.55);
        }
        .dcta-row-k {
          font-size: 0.6rem;
          letter-spacing: 0.26em;
          font-weight: 800;
          color: #8891C7;
          text-transform: uppercase;
        }
        .dcta-row-v {
          font-size: 0.82rem;
          font-weight: 600;
          color: #FFFFFF;
        }

        /* DESKTOP */
        @media (min-width: 980px) {
          .dcta-inner {
            grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
            gap: clamp(1.8rem, 3vw, 3rem);
            padding: clamp(2rem, 3.6vw, 3rem);
          }
          .dcta-panel { display: block; }
        }

        @media (max-width: 520px) {
          .dcta-actions :global(.cta-btn) {
            width: 100%;
            justify-content: space-between;
          }
        }

        @media (prefers-reduced-motion: reduce) {
          .dcta-glow-a, .dcta-glow-b, .dcta-eyebrow-dot, .dcta-meta-dot, .dcta-panel-live-dot {
            animation: none !important;
          }
        }
      `}</style>
    </motion.section>
  );
}