
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]">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">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;
