import React, { useState } from "react";
import { Link } from "react-router-dom";

const SupportView: React.FC = () => {
  const [activeItem, setActiveItem] = useState("What is travel eSIM/SIM?");

  const categories = [
    {
      title: "What is travel eSIM/SIM?",
      count: 3,
      icon: (
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 00-3 3z"
          />
        </svg>
      ),
      items: [
        "What is travel eSIM/SIM",
        "Physical travel SIM",
        "How to buy travel eSIM/SIM",
      ],
      color: "bg-red-500",
    },
    {
      title: "eSIM installation and activation",
      count: 3,
      icon: (
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
          />
        </svg>
      ),
      items: [
        "Email and eSIM QR code",
        "Installation guide for iPhone (iOS)",
        "Installation guide for Android",
      ],
      color: "bg-red-600",
    },
  ];

  return (
    <div className="bg-white min-h-screen">
      <div className="max-w-7xl mx-auto px-4 py-6">
        <nav className="flex items-center space-x-2 text-sm text-slate-500 font-medium">
          <Link to="/" className="hover:text-[#EE0434] text-[18px]">
            Home
          </Link>
          <svg
            className="w-4 h-4"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              d="M9 5l7 7-7 7"
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
          <span className="text-slate-900 font-bold text-[18px]">Support</span>
        </nav>
      </div>

      <div className="max-w-7xl mx-auto px-4 pb-20">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
          <aside className="lg:col-span-4 space-y-8">
            {categories.map((cat, idx) => (
              <div key={idx} className="space-y-4">
                <div className="flex items-center space-x-4">
                  <div
                    className={`w-10 h-10 rounded-xl ${cat.color} flex items-center justify-center text-white shadow-md`}
                  >
                    {cat.icon}
                  </div>
                  <h3 className="text-[17px] font-black text-[#EE0434] leading-tight">
                    {cat.title}
                  </h3>
                </div>
                <div className="pl-5 border-l-2 border-slate-50 space-y-4 ml-5">
                  {cat.items.map((item, i) => (
                    <button
                      key={i}
                      onClick={() => setActiveItem(item)}
                      className="group flex items-center justify-between w-full text-left relative"
                    >
                      <div
                        className={`absolute -left-[22px] w-2 h-2 rounded-full border-2 border-white ${
                          activeItem === item
                            ? "bg-[#EE0434] scale-125"
                            : "bg-slate-200"
                        }`}
                      ></div>
                      <span
                        className={`text-[14px] font-bold transition-colors pl-4 ${
                          activeItem === item
                            ? "text-[#EE0434]"
                            : "text-slate-500 group-hover:text-[#EE0434]"
                        }`}
                      >
                        {item}
                      </span>
                    </button>
                  ))}
                </div>
              </div>
            ))}
          </aside>
          <main className="lg:col-span-8">
            <h1 className="text-4xl md:text-5xl font-black text-[#EE0434] mb-10">
              Guide & Help
            </h1>
            <p className="text-lg leading-relaxed text-slate-600">
              Select a topic from the left to view detailed instructions for
              your travel SIM or eSIM. Our support team is also available 24/7
              via chat.
            </p>
          </main>
        </div>
      </div>
    </div>
  );
};

export default SupportView;