import { createFileRoute, Link } from "@tanstack/react-router";
import { Button } from "@/components/ui/button";
import { AnimatedSection } from "@/components/AnimatedSection";
import { SectionHeading } from "@/components/SectionHeading";
import { Counter } from "@/components/Counter";
import heroAccountant from "@/assets/hero-accountant.png";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "SKS Associates — Trusted Tax & Accounting Services in Coimbatore" },
      { name: "description", content: "Professional accounting, GST filing, income tax, and business compliance services in Coimbatore by SKS Associates. Get your free consultation today." },
      { property: "og:title", content: "SKS Associates — Tax & Accounting Services Coimbatore" },
      { property: "og:description", content: "Professional accounting, GST filing, income tax, and business compliance services in Coimbatore." },
    ],
  }),
  component: HomePage,
});

const services = [
  { icon: "📊", title: "Accounting & Bookkeeping", desc: "Complete financial record management for your business" },
  { icon: "📋", title: "GST Registration & Filing", desc: "Hassle-free GST compliance and timely returns" },
  { icon: "💰", title: "Income Tax Filing", desc: "Expert tax planning and return filing services" },
  { icon: "📑", title: "TDS/TCS Returns", desc: "Accurate TDS/TCS computation and filing" },
  { icon: "🏭", title: "MSME Registration", desc: "Quick MSME/Udyam registration for your enterprise" },
  { icon: "🍽️", title: "FSSAI Registration", desc: "Food license and FSSAI compliance made easy" },
];

const whyUs = [
  { icon: "🎯", title: "Expert Guidance", desc: "Personalized advice from experienced professionals" },
  { icon: "⚡", title: "Fast Processing", desc: "Quick turnaround on all registrations and filings" },
  { icon: "🔒", title: "100% Compliance", desc: "Stay compliant with all government regulations" },
  { icon: "💎", title: "Affordable Pricing", desc: "Premium services at competitive rates" },
  { icon: "📞", title: "24/7 Support", desc: "Round-the-clock assistance whenever you need it" },
  { icon: "🤝", title: "Trusted Partner", desc: "50+ businesses trust us with their finances" },
];

const testimonials = [
  {
    name: "Pranav Jewels",
    business: "Jewellery Business",
    text: "SKS Associates has been instrumental in managing our jewellery business accounts. Their precision with high-value transactions and GST compliance is unmatched.",
  },
  {
    name: "Swagath Enterprise",
    business: "Business Enterprise",
    text: "Excellent support for our enterprise. They handle all our tax filings and business registrations efficiently, allowing us to focus on growth.",
  },
  {
    name: "GV Nagarajan BPCL Dealers",
    business: "Fuel Station Dealer",
    text: "As a BPCL dealer, our accounting needs are specific and complex. SKS Associates understands the fuel sector perfectly and ensures 100% compliance.",
  },
];

function HomePage() {
  return (
    <div>
      {/* Hero */}
      <section className="relative gradient-hero overflow-hidden">
        <div className="absolute inset-0 opacity-20 pointer-events-none">
          <div className="absolute top-20 left-10 w-72 h-72 rounded-full bg-gold blur-3xl animate-float" />
          <div className="absolute bottom-20 right-10 w-96 h-96 rounded-full bg-gold blur-3xl animate-float-reverse" />
          <div className="absolute top-1/2 left-1/3 w-64 h-64 rounded-full bg-navy-light blur-3xl animate-float" style={{ animationDelay: "2s" }} />
        </div>
        <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 md:py-32 lg:py-40">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
          <div className="max-w-3xl">
            <AnimatedSection>
              <span className="inline-block px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase gradient-gold text-gold-foreground mb-6">
                Trusted Tax Consultants in Coimbatore
              </span>
            </AnimatedSection>
            <AnimatedSection delay={0.1}>
              <h1 className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold font-heading text-primary-foreground leading-tight">
                Your Financial Success,{" "}
                <span className="text-gradient-gold">Our Expertise</span>
              </h1>
            </AnimatedSection>
            <AnimatedSection delay={0.2}>
              <p className="mt-6 text-lg md:text-xl text-primary-foreground/70 max-w-2xl leading-relaxed">
                Professional accounting, tax planning, and business registration services. 
                We help businesses in Coimbatore stay compliant and grow confidently.
              </p>
            </AnimatedSection>
            <AnimatedSection delay={0.3}>
              <div className="mt-8 flex flex-wrap gap-4">
                <Link to="/contact">
                  <Button variant="hero" size="xl">Get Free Consultation</Button>
                </Link>
                <Link to="/services">
                  <Button variant="hero-outline" size="xl">Our Services</Button>
                </Link>
              </div>
            </AnimatedSection>
          </div>
          <AnimatedSection direction="right" className="hidden lg:block">
            <div className="relative">
              <div className="absolute inset-0 gradient-gold rounded-full blur-3xl opacity-30 animate-pulse-glow" />
              <img
                src={heroAccountant}
                alt="SKS Associates professional accountant in Coimbatore"
                width={1024}
                height={1024}
                className="relative w-full max-w-lg mx-auto animate-float drop-shadow-2xl"
              />
            </div>
          </AnimatedSection>
          </div>
        </div>
      </section>

      {/* Trust Indicators */}
      <section className="relative -mt-16 z-10">
        <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {[
              { value: 4, suffix: "+", label: "Years Experience" },
              { value: 50, suffix: "+", label: "Happy Clients" },
              { value: 100, suffix: "%", label: "Satisfaction Rate" },
              { value: 24, suffix: "/7", label: "Client Support" },
            ].map((stat, i) => (
              <AnimatedSection key={stat.label} delay={i * 0.1}>
                <div className="glass-card rounded-xl p-6 text-center hover-lift">
                  <div className="text-3xl md:text-4xl font-bold font-heading text-navy">
                    <Counter target={stat.value} suffix={stat.suffix} />
                  </div>
                  <div className="mt-1 text-sm text-muted-foreground">{stat.label}</div>
                </div>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      {/* Services */}
      <section className="py-20 md:py-28">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <SectionHeading
            label="What We Offer"
            title="Our Professional Services"
            description="Comprehensive accounting and tax solutions tailored for businesses in Coimbatore"
          />
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {services.map((svc, i) => (
              <AnimatedSection key={svc.title} delay={i * 0.08}>
                <Link to="/services" className="block h-full">
                  <div className="glass-card rounded-xl p-6 hover-lift group cursor-pointer h-full">
                    <div className="text-4xl mb-4">{svc.icon}</div>
                    <h3 className="text-lg font-semibold font-heading text-foreground group-hover:text-accent transition-colors">
                      {svc.title}
                    </h3>
                    <p className="mt-2 text-sm text-muted-foreground leading-relaxed">{svc.desc}</p>
                  </div>
                </Link>
              </AnimatedSection>
            ))}
          </div>
          <AnimatedSection className="text-center mt-10">
            <Link to="/services">
              <Button variant="navy" size="lg">View All Services →</Button>
            </Link>
          </AnimatedSection>
        </div>
      </section>

      {/* About Preview */}
      <section className="py-20 md:py-28 bg-secondary/50">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <AnimatedSection direction="left">
              <div className="gradient-navy rounded-2xl p-8 md:p-12 text-primary-foreground">
                <div className="w-20 h-20 rounded-full gradient-gold flex items-center justify-center text-3xl font-bold text-gold-foreground font-heading mb-6">
                  SS
                </div>
                <h3 className="text-2xl font-bold font-heading">S. Sangaiah</h3>
                <p className="text-primary-foreground/60 mt-1">Founder & Lead Consultant</p>
                <p className="mt-4 text-primary-foreground/80 leading-relaxed">
                  With over 4 years of hands-on experience in taxation and accounting, 
                  S. Sangaiah founded SKS Associates with a vision to provide reliable, 
                  affordable, and professional financial services to businesses in Coimbatore.
                </p>
              </div>
            </AnimatedSection>
            <AnimatedSection direction="right">
              <span className="inline-block px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase gradient-gold text-gold-foreground mb-4">
                About Us
              </span>
              <h2 className="text-3xl md:text-4xl font-bold font-heading text-foreground">
                Building Trust Through <span className="text-gradient-gold">Financial Excellence</span>
              </h2>
              <p className="mt-4 text-muted-foreground leading-relaxed">
                SKS Associates is a Coimbatore-based accounting and tax consultancy firm 
                dedicated to helping businesses navigate the complex world of taxation, 
                compliance, and financial management.
              </p>
              <p className="mt-3 text-muted-foreground leading-relaxed">
                We believe every business deserves access to expert financial guidance, 
                regardless of size. Our personalized approach ensures you get the attention 
                and expertise your business needs.
              </p>
              <Link to="/about" className="inline-block mt-6">
                <Button variant="navy" size="lg">Learn More About Us →</Button>
              </Link>
            </AnimatedSection>
          </div>
        </div>
      </section>

      {/* Why Choose Us */}
      <section className="py-20 md:py-28">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <SectionHeading
            label="Why SKS Associates"
            title="Why Businesses Trust Us"
            description="We combine expertise, technology, and personal attention to deliver exceptional results"
          />
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {whyUs.map((item, i) => (
              <AnimatedSection key={item.title} delay={i * 0.08}>
                <div className="rounded-xl border border-border p-6 hover-lift bg-card h-full">
                  <div className="text-3xl mb-3">{item.icon}</div>
                  <h3 className="text-lg font-semibold font-heading">{item.title}</h3>
                  <p className="mt-2 text-sm text-muted-foreground">{item.desc}</p>
                </div>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-20 md:py-28 bg-secondary/50">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <SectionHeading
            label="Testimonials"
            title="What Our Clients Say"
            description="Hear from businesses across Coimbatore who trust SKS Associates"
          />
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {testimonials.map((t, i) => (
              <AnimatedSection key={t.name} delay={i * 0.1}>
                <div className="glass-card rounded-xl p-6 hover-lift h-full flex flex-col">
                  <div className="flex gap-1 text-gold mb-4">
                    {[...Array(5)].map((_, j) => (
                      <svg key={j} className="w-5 h-5 fill-current" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                      </svg>
                    ))}
                  </div>
                  <p className="text-muted-foreground leading-relaxed flex-1">"{t.text}"</p>
                  <div className="mt-4 pt-4 border-t border-border">
                    <p className="font-semibold text-foreground">{t.name}</p>
                    <p className="text-sm text-muted-foreground">{t.business}</p>
                  </div>
                </div>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Banner */}
      <section className="py-20 md:py-28">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <AnimatedSection>
            <div className="gradient-navy rounded-3xl p-10 md:p-16 text-center text-primary-foreground relative overflow-hidden">
              <div className="absolute inset-0 opacity-10">
                <div className="absolute top-0 right-0 w-64 h-64 rounded-full bg-gold blur-3xl" />
                <div className="absolute bottom-0 left-0 w-80 h-80 rounded-full bg-gold blur-3xl" />
              </div>
              <div className="relative">
                <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold font-heading">
                  Ready to Simplify Your <span className="text-gradient-gold">Finances</span>?
                </h2>
                <p className="mt-4 text-lg text-primary-foreground/70 max-w-2xl mx-auto">
                  Get expert accounting and tax consultancy services. Schedule your free consultation today.
                </p>
                <div className="mt-8 flex flex-wrap justify-center gap-4">
                  <Link to="/contact">
                    <Button variant="hero" size="xl">Get Free Consultation</Button>
                  </Link>
                  <a href="tel:+917339441279">
                    <Button variant="hero-outline" size="xl">📞 Call Now</Button>
                  </a>
                </div>
              </div>
            </div>
          </AnimatedSection>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-20 md:py-28 bg-secondary/50">
        <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
          <SectionHeading
            label="FAQ"
            title="Frequently Asked Questions"
            description="Quick answers to common questions about our services"
          />
          {[
            { q: "What accounting services do you offer in Coimbatore?", a: "We offer comprehensive accounting, bookkeeping, GST filing, income tax return filing, TDS/TCS returns, and various business registration services including FSSAI, IEC, and MSME." },
            { q: "How much does GST filing cost in Coimbatore?", a: "Our GST filing services are competitively priced. Contact us for a free consultation and we'll provide a customized quote based on your business needs." },
            { q: "Do you handle income tax filing for individuals?", a: "Yes, we handle both individual and business income tax filing, including tax planning and optimization strategies." },
            { q: "How can I reach SKS Associates?", a: "You can call us at +91 73394 41279, email sangaiah2025@gmail.com, or WhatsApp us anytime. We offer 24/7 support." },
          ].map((faq, i) => (
            <AnimatedSection key={i} delay={i * 0.08}>
              <div className="mb-4 rounded-xl border border-border bg-card p-6">
                <h3 className="font-semibold font-heading text-foreground">{faq.q}</h3>
                <p className="mt-2 text-sm text-muted-foreground leading-relaxed">{faq.a}</p>
              </div>
            </AnimatedSection>
          ))}
        </div>
      </section>

      {/* JSON-LD */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "AccountingService",
            name: "SKS Associates",
            image: "",
            telephone: "+917339441279",
            email: "sangaiah2025@gmail.com",
            address: {
              "@type": "PostalAddress",
              addressLocality: "Coimbatore",
              addressRegion: "Tamil Nadu",
              addressCountry: "IN",
            },
            founder: { "@type": "Person", name: "S. Sangaiah" },
            description: "Professional accounting, GST filing, income tax, and business registration services in Coimbatore.",
          }),
        }}
      />
    </div>
  );
}