frontend/src/components/WelcomeSection.tsx

"use client";

import Image from "next/image";
import { useState } from "react";

const VIDEO_ID = "futMxpAlw2Q";
const EMBED_URL = `https://www.youtube.com/embed/${VIDEO_ID}?rel=0&modestbranding=1&autoplay=1`;

function HexMeshBackground() {
  return (
    <svg
      className="absolute inset-0 w-full h-full"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <defs>
        <pattern id="hex-mesh" x="0" y="0" width="70" height="60" patternUnits="userSpaceOnUse">
          <polygon
            points="35,2 62,17 62,47 35,62 8,47 8,17"
            fill="none"
            stroke="rgba(255,255,255,0.07)"
            strokeWidth="1"
          />
          <line x1="35" y1="32" x2="35" y2="2"  stroke="rgba(255,255,255,0.04)" strokeWidth="0.7" />
          <line x1="35" y1="32" x2="62" y2="17" stroke="rgba(255,255,255,0.04)" strokeWidth="0.7" />
          <line x1="35" y1="32" x2="62" y2="47" stroke="rgba(255,255,255,0.04)" strokeWidth="0.7" />
          <line x1="35" y1="32" x2="35" y2="62" stroke="rgba(255,255,255,0.04)" strokeWidth="0.7" />
          <line x1="35" y1="32" x2="8"  y2="47" stroke="rgba(255,255,255,0.04)" strokeWidth="0.7" />
          <line x1="35" y1="32" x2="8"  y2="17" stroke="rgba(255,255,255,0.04)" strokeWidth="0.7" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#hex-mesh)" />
    </svg>
  );
}

function DemoModal({ onClose }: { onClose: () => void }) {
  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4 animate-fade-in"
      onClick={onClose}
    >
      <div
        className="relative w-full max-w-3xl rounded-2xl overflow-hidden shadow-2xl bg-[#0B1221]"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Modal header */}
        <div className="flex items-center justify-between px-5 py-4 border-b border-white/10">
          <div className="flex items-center gap-2.5">
            <div className="w-1 h-4 rounded-full bg-gradient-to-b from-[#C7D92F] via-[#47C3A6] to-[#14B7CC]" />
            <span className="text-sm font-semibold text-white">NegOptim AI — Product Overview</span>
          </div>
          <button
            onClick={onClose}
            className="w-8 h-8 flex items-center justify-center rounded-lg text-slate-400 hover:text-white hover:bg-white/10 transition-colors"
            aria-label="Close"
          >
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <path d="M2 2l10 10M12 2L2 12" />
            </svg>
          </button>
        </div>

        {/* 16:9 video */}
        <div className="relative w-full" style={{ paddingTop: "56.25%" }}>
          <iframe
            className="absolute inset-0 w-full h-full"
            src={EMBED_URL}
            title="NegOptim AI Product Overview"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
          />
        </div>

        {/* Modal footer */}
        <div className="px-5 py-3 flex items-center justify-between border-t border-white/10">
          <p className="text-[11px] text-slate-400">
            Powered by <span className="text-slate-300 font-medium">Users Love IT</span>
          </p>
          <button
            onClick={onClose}
            className="text-xs font-medium text-slate-300 hover:text-white transition-colors"
          >
            Close and start chatting →
          </button>
        </div>
      </div>
    </div>
  );
}

export default function WelcomeSection() {
  const [showModal, setShowModal] = useState(false);

  return (
    <>
      <div className="flex flex-col items-center gap-6 py-4 animate-fade-in w-full">
        {/* Hero card */}
        <div className="w-full max-w-2xl rounded-2xl overflow-hidden border border-[#E2E8F0] shadow-xl">

          {/* Slim dark band */}
          <div className="relative bg-[#0B1221] px-8 py-5 overflow-hidden">
            <HexMeshBackground />
            <div className="absolute left-0 top-0 bottom-0 w-0.5 bg-gradient-to-b from-[#C7D92F] via-[#47C3A6] to-[#14B7CC]" />
            <p className="relative z-10 text-slate-400 text-[13px] tracking-wide text-center">
              B2B Commercial Performance Platform · Retail &amp; CPG
            </p>
            <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-[#C7D92F] via-[#47C3A6] to-[#14B7CC]" />
          </div>

          {/* Product zone */}
          <div className="bg-white px-8 pt-10 pb-9 flex flex-col items-center gap-5">
            <span className="text-[11px] font-semibold text-[#47C3A6] uppercase tracking-[0.18em] border border-[#47C3A630] bg-[#47C3A60C] px-4 py-1.5 rounded-full">
              AI Assistant
            </span>

            <Image
              src="/images/NegoptimAiLogo.png"
              alt="NegOptim AI"
              width={280}
              height={76}
              className="object-contain"
              priority
            />

            <p className="text-[15px] text-[#64748B] text-center leading-relaxed max-w-md">
              Your intelligent assistant for commercial negotiations,
              procurement optimization, supplier collaboration,
              and business knowledge retrieval.
            </p>

            {/* Watch Demo button */}
            <button
              onClick={() => setShowModal(true)}
              className="flex items-center gap-2.5 px-5 py-2.5 rounded-xl border border-[#E2E8F0] bg-[#F8FAFC] hover:bg-[#F1F5F9] hover:border-[#CBD5E1] transition-all group"
            >
              <div className="w-7 h-7 rounded-full bg-gradient-to-br from-[#47C3A6] to-[#14B7CC] flex items-center justify-center flex-shrink-0 group-hover:scale-105 transition-transform">
                <svg width="10" height="10" viewBox="0 0 12 12" fill="none">
                  <polygon points="3,2 10,6 3,10" fill="white" />
                </svg>
              </div>
              <div className="text-left">
                <p className="text-[12px] font-semibold text-[#334155]">Watch Product Demo</p>
                <p className="text-[10px] text-[#94A3B8]">2-min overview · No signup required</p>
              </div>
            </button>

            {/* Status + attribution row */}
            <div className="flex items-center justify-between w-full pt-3 border-t border-[#F1F5F9] mt-1">
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-[#8FD15E] animate-pulse" />
                <span className="text-[12px] text-[#94A3B8]">Ready to assist</span>
              </div>
              <span className="text-[12px] text-[#CBD5E1]">
                Powered by{" "}
                <span className="text-[#94A3B8] font-medium">Users Love IT</span>
              </span>
            </div>
          </div>
        </div>
      </div>

      {showModal && <DemoModal onClose={() => setShowModal(false)} />}
    </>
  );
}