"use client";

import Link from "next/link";
import Image from "next/image";
import { useCurrency } from "@/components/Providers";
import HeroSlider from "@/components/HeroSlider";
import { serviceIconMap, IconProvenStrategies, IconAIPowered, IconDedicatedSupport, IconScalable } from "@/components/ServiceIcons";

const services = [
  { emoji: "💬", title: "SMS Marketing", slug: "sms-marketing", desc: "Bulk SMS campaigns with custom Sender IDs, OTP verification, and full delivery reporting.", prices: { usd: 9.99, lkr: 3250, eur: 9.20 } },
  { emoji: "📧", title: "Email Marketing", slug: "email-marketing", desc: "Automated drip campaigns, A/B testing, drag-and-drop editor, and priority deliverability.", prices: { usd: 7.99, lkr: 2600, eur: 7.35 } },
  { emoji: "📱", title: "Social Media Marketing", slug: "social-media-marketing", desc: "Schedule posts, manage all accounts, analyse competitors and get AI content suggestions.", prices: { usd: 14.99, lkr: 4875, eur: 13.80 } },
  { emoji: "📞", title: "PBX & VoIP", slug: "pbx-voip", desc: "Cloud PBX, SIP trunking, IVR, call queuing, and multi-site support for modern businesses.", prices: { usd: 19.99, lkr: 6500, eur: 18.40 } },
  { emoji: "🤖", title: "Chat CRM & Chatbot", slug: "chat-crm-chatbot", desc: "Live chat widget, AI-powered chatbots, multi-channel messaging, and CRM integration.", prices: { usd: 12.99, lkr: 4225, eur: 11.95 } },
  { emoji: "👥", title: "CRM", slug: "crm", desc: "Contact and pipeline management, automation workflows, custom fields, and AI insights.", prices: { usd: 12.99, lkr: 4225, eur: 11.95 } },
  { emoji: "📊", title: "Analytics", slug: "analytics", desc: "Real-time dashboards, custom reports, data export, and deep campaign analytics.", prices: { usd: 9.99, lkr: 3250, eur: 9.20 } },
  { emoji: "🎫", title: "Support Tickets", slug: "support-tickets", desc: "Multi-channel inbox, SLA management, custom workflows, and unlimited agent seats.", prices: { usd: 14.99, lkr: 4875, eur: 13.80 } },
];

const steps = [
  { number: "01", title: "Analyze", desc: "Deep dive into your business, market, and audience to identify growth opportunities." },
  { number: "02", title: "Strategize", desc: "Build a data-driven marketing roadmap tailored to your specific goals and budget." },
  { number: "03", title: "Execute", desc: "Launch campaigns across channels with precision targeting and creative excellence." },
  { number: "04", title: "Optimize", desc: "Continuously monitor, test, and refine for maximum ROI and sustained growth." },
];

const reasons = [
  { title: "Proven Strategies", desc: "Data-driven approaches that have delivered measurable ROI for 150+ clients.", Icon: IconProvenStrategies },
  { title: "AI-Powered", desc: "Cutting-edge AI tools for smart targeting, automation, and real-time analytics.", Icon: IconAIPowered },
  { title: "Dedicated Support", desc: "A team that works closely with you, available when you need us most.", Icon: IconDedicatedSupport },
  { title: "Scalable Solutions", desc: "Built to grow with you — from startups to enterprise-level operations.", Icon: IconScalable },
];

const stats = [
  { value: "12K+", label: "Active Users" },
  { value: "5M+", label: "Messages Sent" },
  { value: "98%", label: "Delivery Rate" },
  { value: "150+", label: "Happy Clients" },
];

const testimonials = [
  {
    quote: "Paid2Marketing transformed our outreach completely. Our email delivery rate jumped from 72% to 98% within the first month. The unified dashboard saves us hours every week.",
    name: "Rahul Sharma",
    role: "Head of Marketing",
    company: "TechFlow Solutions",
    avatar: "/images/avatar-1.svg",
    metric: "↑ 36% delivery rate",
  },
  {
    quote: "We replaced three separate tools with Paid2Marketing and cut our marketing stack cost by 45%. The AI chatbot alone converts 22% of our website visitors into qualified leads.",
    name: "Amara Kumari",
    role: "CEO",
    company: "Bright Retail Group",
    avatar: "/images/avatar-2.svg",
    metric: "↓ 45% tool costs",
  },
  {
    quote: "The SMS + Email combo plan gives us everything. Our flash sales generate 3x more revenue than before because we can reach customers on all channels in minutes.",
    name: "Mohammed Tariq",
    role: "E-commerce Director",
    company: "Gulf Trade Hub",
    avatar: "/images/avatar-3.svg",
    metric: "3× revenue on sales",
  },
];

const comboPrices = {
  starter: { usd: 99.99, lkr: 32500, eur: 92.00 },
  business: { usd: 249.99, lkr: 81250, eur: 230.00 },
  enterprise: { usd: 499.99, lkr: 162500, eur: 460.00 },
};

export default function Home() {
  const { format } = useCurrency();

  const pricingPlans = [
    { name: "Starter Combo", prices: comboPrices.starter, tag: null, desc: "All 8 services at Basic tier", saving: "Save 40%+", features: ["All 8 services included", "Basic tier per service", "Unified dashboard", "Email support"] },
    { name: "Business Combo", prices: comboPrices.business, tag: "Best Value", desc: "All 8 services at Pro tier", saving: "Save 45%+", features: ["All 8 services included", "Pro tier per service", "Unified dashboard", "Priority support", "Dedicated manager"] },
    { name: "Enterprise Combo", prices: comboPrices.enterprise, tag: null, desc: "All 8 services at Enterprise tier", saving: "Save 50%+", features: ["All 8 services included", "Enterprise tier per service", "24/7 SLA", "Custom integrations"] },
  ];

  return (
    <>
      {/* ── HERO ── */}
      <section className="relative min-h-screen flex items-center pt-20 overflow-hidden" style={{ background: "var(--bg1)" }}>
        <div className="absolute top-1/4 left-0 w-[600px] h-[500px] bg-[#28c76f]/6 blur-[140px] rounded-full pointer-events-none" />
        <div className="absolute bottom-0 right-0 w-[400px] h-[400px] bg-[#6366f1]/5 blur-[120px] rounded-full pointer-events-none" />

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 w-full">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">

            {/* Left — copy */}
            <div>
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#28c76f]/10 border border-[#28c76f]/20 text-[#28c76f] text-sm font-medium mb-6">
                <span className="w-2 h-2 rounded-full bg-[#28c76f] animate-pulse" />
                Trusted by startups, SMEs &amp; enterprises
              </div>
              <h1 className="text-5xl sm:text-6xl font-extrabold leading-tight mb-6" style={{ color: "var(--fg1)" }}>
                Grow Your Brand <span className="gradient-text">Digitally</span> with Confidence
              </h1>
              <p className="text-lg mb-3" style={{ color: "var(--fg2)" }}>
                SMS · Email · Social Media · PBX &amp; VoIP · Chat CRM · Analytics · Support
              </p>
              <p className="text-base mb-8" style={{ color: "var(--fg3)" }}>
                One platform. Eight powerful tools. Everything you need to reach, convert, and retain customers at scale.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 mb-12">
                <Link href="/services" className="px-8 py-4 rounded-xl bg-[#28c76f] hover:bg-[#22b965] text-white font-semibold text-base transition-all duration-200 shadow-lg shadow-[#28c76f]/25 hover:-translate-y-0.5 text-center">
                  Explore Services
                </Link>
                <Link href="/pricing" className="px-8 py-4 rounded-xl font-semibold text-base transition-all duration-200 text-center" style={{ border: "1px solid var(--border-strong)", color: "var(--fg1)" }}>
                  View Pricing
                </Link>
              </div>

              {/* Stats row */}
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-5">
                {stats.map((s) => (
                  <div key={s.label} className="text-center">
                    <div className="text-2xl font-extrabold gradient-text">{s.value}</div>
                    <div className="text-xs mt-1" style={{ color: "var(--fg3)" }}>{s.label}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Right — dashboard slider */}
            <div className="relative lg:block pb-8">
              <HeroSlider />
            </div>
          </div>
        </div>
      </section>

      {/* ── SERVICES ── */}
      <section className="py-24" style={{ background: "var(--bg2)" }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <span className="inline-block px-3 py-1 rounded-full bg-[#28c76f]/10 text-[#28c76f] text-xs font-semibold uppercase tracking-widest mb-4">What We Do</span>
            <h2 className="text-4xl sm:text-5xl font-bold mb-4" style={{ color: "var(--fg1)" }}>
              Our Digital Marketing <span className="gradient-text">Solutions</span>
            </h2>
            <p className="text-lg max-w-2xl mx-auto" style={{ color: "var(--fg2)" }}>Comprehensive marketing services designed to amplify your brand across every digital channel.</p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {services.map((service) => {
              const Icon = serviceIconMap[service.slug];
              return (
              <Link key={service.slug} href={`/services/${service.slug}`} className="glass-card rounded-2xl p-5 card-hover flex flex-col group">
                <div className="mb-4 w-10 h-10">{Icon && <Icon size={40} />}</div>
                <h3 className="font-bold text-base mb-1.5 group-hover:text-[#28c76f] transition-colors" style={{ color: "var(--fg1)" }}>{service.title}</h3>
                <p className="text-xs leading-relaxed flex-1" style={{ color: "var(--fg2)" }}>{service.desc}</p>
                <div className="mt-4 pt-3 flex items-center justify-between" style={{ borderTop: "1px solid var(--border)" }}>
                  <span className="text-xs" style={{ color: "var(--fg3)" }}>From</span>
                  <span className="text-[#28c76f] font-bold text-sm">{format(service.prices)}</span>
                </div>
              </Link>
              );
            })}
          </div>
        </div>
      </section>

      {/* ── WHY CHOOSE US ── */}
      <section className="py-24" style={{ background: "var(--bg1)" }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <span className="inline-block px-3 py-1 rounded-full bg-[#28c76f]/10 text-[#28c76f] text-xs font-semibold uppercase tracking-widest mb-4">Why Choose Us</span>
            <h2 className="text-4xl sm:text-5xl font-bold mb-4" style={{ color: "var(--fg1)" }}>Built for <span className="gradient-text">Results</span></h2>
            <p className="text-lg max-w-xl mx-auto" style={{ color: "var(--fg2)" }}>We combine expertise, AI-powered tools, and genuine dedication to deliver growth that lasts.</p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {reasons.map((r, i) => (
              <div key={i} className="glass-card rounded-2xl p-6 text-center card-hover">
                <div className="flex justify-center mb-4">
                  <r.Icon size={48} />
                </div>
                <h3 className="font-bold text-lg mb-2" style={{ color: "var(--fg1)" }}>{r.title}</h3>
                <p className="text-sm leading-relaxed" style={{ color: "var(--fg2)" }}>{r.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── TESTIMONIALS ── */}
      <section className="py-24" style={{ background: "var(--bg2)" }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <span className="inline-block px-3 py-1 rounded-full bg-[#28c76f]/10 text-[#28c76f] text-xs font-semibold uppercase tracking-widest mb-4">Client Results</span>
            <h2 className="text-4xl sm:text-5xl font-bold mb-4" style={{ color: "var(--fg1)" }}>
              What Our <span className="gradient-text">Clients Say</span>
            </h2>
            <p className="text-lg max-w-xl mx-auto" style={{ color: "var(--fg2)" }}>Real results from real businesses. Here&apos;s what our clients have achieved.</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {testimonials.map((t, i) => (
              <div key={i} className="glass-card rounded-2xl p-7 card-hover flex flex-col">
                {/* Stars */}
                <div className="flex gap-1 mb-5">
                  {[...Array(5)].map((_, j) => (
                    <svg key={j} className="w-4 h-4 text-[#28c76f]" fill="currentColor" 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>
                {/* Quote */}
                <blockquote className="text-sm leading-relaxed mb-6 flex-1" style={{ color: "var(--fg2)" }}>
                  &quot;{t.quote}&quot;
                </blockquote>
                {/* Metric badge */}
                <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-[#28c76f]/10 mb-5 self-start">
                  <span className="text-xs font-bold text-[#28c76f]">{t.metric}</span>
                </div>
                {/* Author */}
                <div className="flex items-center gap-3 pt-4" style={{ borderTop: "1px solid var(--border)" }}>
                  <Image src={t.avatar} alt={t.name} width={44} height={44} className="rounded-full flex-shrink-0" />
                  <div>
                    <div className="text-sm font-bold" style={{ color: "var(--fg1)" }}>{t.name}</div>
                    <div className="text-xs" style={{ color: "var(--fg3)" }}>{t.role}, {t.company}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── PRICING PREVIEW ── */}
      <section className="py-24" style={{ background: "var(--bg1)" }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <span className="inline-block px-3 py-1 rounded-full bg-[#28c76f]/10 text-[#28c76f] text-xs font-semibold uppercase tracking-widest mb-4">Pricing</span>
            <h2 className="text-4xl sm:text-5xl font-bold mb-4" style={{ color: "var(--fg1)" }}>Flexible <span className="gradient-text">Plans</span></h2>
            <p className="text-lg max-w-xl mx-auto" style={{ color: "var(--fg2)" }}>Transparent pricing for every stage of growth.</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
            {pricingPlans.map((plan, i) => (
              <div key={i} className={`rounded-2xl p-7 flex flex-col card-hover ${plan.tag ? "md:scale-105" : "glass-card"}`}
                style={plan.tag ? { background: "var(--bg3)", border: "2px solid #28c76f", boxShadow: "0 20px 40px rgba(40,199,111,0.1)" } : {}}>
                <div className="flex items-start justify-between mb-3">
                  <div>
                    {plan.tag && <span className="inline-block px-3 py-1 rounded-full bg-[#28c76f] text-white text-xs font-semibold mb-2">{plan.tag}</span>}
                    <h3 className="font-bold text-xl" style={{ color: "var(--fg1)" }}>{plan.name}</h3>
                    <p className="text-sm" style={{ color: "var(--fg3)" }}>{plan.desc}</p>
                  </div>
                  <span className="text-xs text-[#28c76f] font-semibold bg-[#28c76f]/10 px-2 py-1 rounded-lg whitespace-nowrap ml-2">{plan.saving}</span>
                </div>
                <div className="text-4xl font-extrabold mb-6" style={{ color: "var(--fg1)" }}>
                  {format(plan.prices)}<span className="text-base font-normal" style={{ color: "var(--fg3)" }}>/mo</span>
                </div>
                <ul className="space-y-2 mb-8 flex-1">
                  {plan.features.map((f, j) => (
                    <li key={j} className="flex items-center gap-2 text-sm" style={{ color: "var(--fg2)" }}>
                      <svg className="w-4 h-4 text-[#28c76f] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg>
                      {f}
                    </li>
                  ))}
                </ul>
                <Link href="/contact" className={`block text-center py-3 rounded-xl font-semibold text-sm transition-all duration-200 ${plan.tag ? "bg-[#28c76f] hover:bg-[#22b965] text-white shadow-lg shadow-[#28c76f]/20" : ""}`}
                  style={!plan.tag ? { border: "1px solid var(--border-strong)", color: "var(--fg1)" } : {}}>
                  Get Started
                </Link>
              </div>
            ))}
          </div>
          <div className="text-center mt-10">
            <Link href="/pricing" className="text-[#28c76f] hover:text-[#22b965] font-medium text-sm transition-colors">View full pricing details →</Link>
          </div>
        </div>
      </section>

      {/* ── HOW WE WORK ── */}
      <section className="py-24" style={{ background: "var(--bg2)" }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <span className="inline-block px-3 py-1 rounded-full bg-[#28c76f]/10 text-[#28c76f] text-xs font-semibold uppercase tracking-widest mb-4">Our Process</span>
            <h2 className="text-4xl sm:text-5xl font-bold" style={{ color: "var(--fg1)" }}>How We <span className="gradient-text">Work</span></h2>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {steps.map((step, i) => (
              <div key={i} className="glass-card rounded-2xl p-6 card-hover">
                <div className="text-5xl font-extrabold text-[#28c76f]/20 mb-3">{step.number}</div>
                <h3 className="font-bold text-lg mb-2" style={{ color: "var(--fg1)" }}>{step.title}</h3>
                <p className="text-sm leading-relaxed" style={{ color: "var(--fg2)" }}>{step.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CTA ── */}
      <section className="py-24" style={{ background: "var(--bg1)" }}>
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="glass-card rounded-3xl p-12 green-glow relative overflow-hidden">
            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[400px] h-[200px] bg-[#28c76f]/8 blur-[80px] rounded-full pointer-events-none" />
            <h2 className="relative text-3xl sm:text-4xl font-bold mb-4" style={{ color: "var(--fg1)" }}>
              Ready to <span className="gradient-text">Grow Your Business?</span>
            </h2>
            <p className="relative mb-8 text-lg" style={{ color: "var(--fg2)" }}>Join 12,000+ businesses already growing with Paid2Marketing.</p>
            <div className="relative flex flex-col sm:flex-row gap-4 justify-center">
              <Link href="/contact" className="px-8 py-4 rounded-xl bg-[#28c76f] hover:bg-[#22b965] text-white font-semibold transition-all duration-200 shadow-lg shadow-[#28c76f]/25 hover:-translate-y-0.5">Start Today</Link>
              <Link href="/services" className="px-8 py-4 rounded-xl font-semibold transition-all duration-200" style={{ border: "1px solid var(--border-strong)", color: "var(--fg1)" }}>Learn More</Link>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}