import React from "react";
import { Link, useLocation } from "react-router-dom";
import { createPageUrl } from "@/utils";
import { Home, BookOpen, MessageCircle, Phone } from "lucide-react";

export default function Layout({ children }) {
  const location = useLocation();

  const navigationItems = [
  {
    title: "Home",
    url: createPageUrl("Home"),
    icon: Home
  },
  {
    title: "Troubleshooting",
    url: createPageUrl("TroubleshootingGuide"),
    icon: BookOpen
  },
  {
    title: "Chat Support",
    url: createPageUrl("Chat"),
    icon: MessageCircle
  }];


  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      {/* Header */}
      <header className="bg-white shadow-sm border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <div className="flex-shrink-0">
                <div className="w-10 h-10 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
                  <MessageCircle className="w-6 h-6 text-white" />
                </div>
              </div>
              <div className="ml-4">
                <h1 className="text-[#008037] text-xl font-semibold">Eskola HelpBot</h1>
                <p className="text-sm text-gray-500">IT Support Made Simple</p>
              </div>
            </div>
            
            {/* Phone Support Button */}
            <a
              href="tel:844-4-ESKOLA" className="bg-[#008037] text-white px-4 py-2 font-medium flex items-center gap-2 hover:bg-red-600 rounded-lg transition-colors">844-4-ESKOLA




            </a>
          </div>
        </div>
      </header>

      {/* Navigation */}
      <nav className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex space-x-8 overflow-x-auto">
            {navigationItems.map((item) =>
            <Link
              key={item.title}
              to={item.url}
              className={`flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap transition-colors ${
              location.pathname === item.url ?
              'border-blue-500 text-blue-600' :
              'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`
              }>

                <item.icon className="w-4 h-4" />
                {item.title}
              </Link>
            )}
          </div>
        </div>
      </nav>

      {/* Main Content */}
      <main className="flex-1">
        {children}
      </main>

      {/* Footer */}
      <footer className="bg-white border-t border-gray-200 mt-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="text-center">
            <p className="text-gray-500 text-sm">
              Need immediate help? Call <strong>844-4-ESKOLA</strong> for technical support
            </p>
          </div>
        </div>
      </footer>
    </div>);

}