/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import { useState, useEffect } from "react";
import NepaliDate from 'nepali-date-converter';
import { Converter } from "./components/Converter";
import { Calendar, Info, Clock, Menu } from 'lucide-react';

const nepaliMonths = [
  'Baisakh', 'Jestha', 'Asar', 'Shrawan', 'Bhadra', 'Aswin',
  'Kartik', 'Mangsir', 'Poush', 'Magh', 'Falgun', 'Chaitra'
];

const TodayWidget = () => {
  const [bsToday, setBsToday] = useState('');
  const [adToday, setAdToday] = useState('');

  useEffect(() => {
    const today = new Date();
    const todayBS = new NepaliDate();
    
    setAdToday(today.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }));
    setBsToday(`${todayBS.getYear()} ${nepaliMonths[todayBS.getMonth()]} ${todayBS.getDate()}`);
  }, []);

  return (
    <div className="flex flex-col sm:flex-row justify-center items-center gap-4 text-sm font-medium mb-12">
      <div className="bg-white border border-slate-200 shadow-sm px-4 py-3 rounded-xl flex items-center gap-3">
        <div className="bg-red-50 text-red-600 p-1.5 rounded-lg">
          <Calendar className="w-4 h-4" />
        </div>
        <div className="text-left">
          <p className="text-slate-500 text-xs uppercase tracking-wider font-semibold">Today (BS)</p>
          <p className="text-slate-800">{bsToday}</p>
        </div>
      </div>
      
      <div className="bg-white border border-slate-200 shadow-sm px-4 py-3 rounded-xl flex items-center gap-3">
        <div className="bg-blue-50 text-blue-600 p-1.5 rounded-lg">
           <Calendar className="w-4 h-4" />
        </div>
        <div className="text-left">
          <p className="text-slate-500 text-xs uppercase tracking-wider font-semibold">Today (AD)</p>
          <p className="text-slate-800">{adToday}</p>
        </div>
      </div>
    </div>
  );
};

export default function App() {
  return (
    <div className="min-h-screen flex flex-col font-sans bg-white text-slate-800">
      <header className="border-b border-slate-100 sticky top-0 bg-white/80 backdrop-blur-md z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="bg-red-600 p-2 rounded-lg">
              <Calendar className="w-5 h-5 text-white" />
            </div>
            <span className="font-bold text-lg tracking-tight text-blue-950">Nepali Date Converter</span>
          </div>
          <nav className="hidden md:flex gap-6 text-sm font-medium text-slate-600">
            <a href="#converter" className="hover:text-blue-900 transition-colors">Converter</a>
            <a href="#about" className="hover:text-blue-900 transition-colors">About BS Calendar</a>
            <a href="#faq" className="hover:text-blue-900 transition-colors">FAQ</a>
          </nav>
          <button className="md:hidden text-slate-500">
            <Menu className="w-6 h-6" />
          </button>
        </div>
      </header>

      <main className="flex-1">
        {/* Hero Section */}
        <section className="pt-16 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto text-center">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 text-blue-800 text-sm font-medium mb-6">
            <Clock className="w-4 h-4" /> 2080 BS Calendar Supported
          </div>
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-blue-950 tracking-tight mb-6 max-w-4xl mx-auto leading-tight">
            Convert Nepali Dates <span className="text-red-600">Instantly</span>
          </h1>
          <p className="text-lg md:text-xl text-slate-600 mb-10 max-w-2xl mx-auto">
            Fast and accurate Bikram Sambat (BS) ↔ Gregorian (AD) date conversion tool. Get instant results with full readable formats and weekdays.
          </p>

          <TodayWidget />

          {/* Ad Placeholder Top */}
          <div className="w-full max-w-3xl mx-auto bg-slate-50 border border-slate-100 rounded-lg p-4 mb-12 flex items-center justify-center min-h-[90px] text-slate-400 text-sm">
          </div>

          <div id="converter" className="scroll-mt-24 relative z-20">
            <Converter />
          </div>
        </section>

        {/* Info Section */}
        <section id="about" className="py-20 bg-slate-50 border-y border-slate-100">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex items-center gap-3 mb-8">
              <Info className="w-8 h-8 text-blue-900" />
              <h2 className="text-3xl font-bold text-blue-950">What is the Nepali Calendar?</h2>
            </div>
            
            <div className="prose prose-slate prose-lg md:prose-xl text-slate-600">
              <p>
                The <strong>Bikram Sambat (BS)</strong> calendar is the official calendar of Nepal. It is approximately <strong>56 years and 8 months</strong> ahead of the Gregorian (AD) calendar.
              </p>
              <p>
                Unlike the solar Gregorian calendar, the Nepali calendar combines solar and lunar tracking. This means that the number of days in each month can vary slightly from year to year, typically ranging between 29 and 32 days.
              </p>
              <h3 className="text-xl font-bold text-slate-800 mt-8 mb-4">Why use a converter?</h3>
              <p>
                Because the month lengths vary, converting between BS and AD dates requires precise data tables mapping the exact start days of every month. This tool uses rigorous historical conversion logic to give you the exact corresponding date.
              </p>
              <p className="mt-4">
                The BS calendar is heavily used for official government documents, legal age calculations, bank transactions, and celebrating cultural festivals like Dashain and Tihar.
              </p>
            </div>
          </div>
        </section>

        {/* FAQ Section */}
        <section id="faq" className="py-20">
          <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 className="text-3xl font-bold text-blue-950 mb-10 text-center">Frequently Asked Questions</h2>
            
            <div className="space-y-6">
              <div className="p-6 bg-white border border-slate-100 rounded-xl shadow-sm">
                <h3 className="text-lg font-bold text-slate-800 mb-2">How accurate is this converter?</h3>
                <p className="text-slate-600">This converter is 100% accurate within its given range (generally 2000 BS to 2090 BS). It relies on official mapped datasets for the exact number of days in each varying Nepali month.</p>
              </div>

              <div className="p-6 bg-white border border-slate-100 rounded-xl shadow-sm">
                <h3 className="text-lg font-bold text-slate-800 mb-2">How do I calculate my age in Nepal?</h3>
                <p className="text-slate-600">To calculate your precise age, simply use this converter to find your birth date in both AD and BS formats. From there, you can subtract your birth year from the current year in either calendar system.</p>
              </div>

              <div className="p-6 bg-white border border-slate-100 rounded-xl shadow-sm">
                <h3 className="text-lg font-bold text-slate-800 mb-2">What is today's Nepali date?</h3>
                <p className="text-slate-600">Our converter automatically presets to today's date based on your device's timezone. Just look at the pre-filled values in the converter widget above.</p>
              </div>
            </div>

            {/* Ad Placeholder In-Content */}
            <div className="w-full mt-12 bg-slate-50 border border-slate-100 rounded-lg p-4 flex items-center justify-center min-h-[250px] text-slate-400 text-sm">
            </div>
          </div>
        </section>
      </main>

      <footer className="bg-slate-900 text-slate-300 py-12 md:py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <div className="flex items-center gap-2 mb-6">
              <div className="bg-red-600 p-1.5 rounded-md">
                <Calendar className="w-4 h-4 text-white" />
              </div>
              <span className="font-bold text-white tracking-tight">Nepali Date Converter</span>
            </div>
            <p className="text-sm text-slate-400 max-w-sm">
              The fastest, most accurate utility for converting dates between the Bikram Sambat and Gregorian calendars.
            </p>
          </div>
          <div>
            <h4 className="text-white font-semibold mb-4">Quick Links</h4>
            <ul className="space-y-2 text-sm">
              <li><a href="#" className="hover:text-white transition-colors">Home</a></li>
              <li><a href="#converter" className="hover:text-white transition-colors">Converter Widget</a></li>
              <li><a href="#about" className="hover:text-white transition-colors">About Bikram Sambat</a></li>
            </ul>
          </div>
          <div>
            <h4 className="text-white font-semibold mb-4">Other Tools</h4>
            <ul className="space-y-2 text-sm">
              <li><a href="#" className="hover:text-white transition-colors">Age Calculator</a></li>
              <li><a href="#" className="hover:text-white transition-colors">Festival Dates</a></li>
              <li><a href="#" className="hover:text-white transition-colors">Dashain & Tihar Calendar</a></li>
            </ul>
          </div>
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12 pt-8 border-t border-slate-800 text-sm text-slate-500 flex flex-col md:flex-row justify-between items-center">
          <p>© {new Date().getFullYear()} Nepali Date Converter. All rights reserved.</p>
          <div className="mt-4 md:mt-0 space-x-4">
            <a href="#" className="hover:text-slate-300">Privacy Policy</a>
            <a href="#" className="hover:text-slate-300">Terms of Service</a>
          </div>
        </div>
      </footer>
    </div>
  );
}