import React from "react";
import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

function Icon({ name, className = "h-6 w-6" }) {
  const commonProps = {
    className,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 2,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    "aria-hidden": "true",
  };

  const icons = {
    zap: (
      <svg {...commonProps}>
        <path d="M13 2 3 14h8l-1 8 10-12h-8l1-8Z" />
      </svg>
    ),
    smartphone: (
      <svg {...commonProps}>
        <rect x="7" y="2" width="10" height="20" rx="2" />
        <path d="M11 18h2" />
      </svg>
    ),
    receipt: (
      <svg {...commonProps}>
        <path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2Z" />
        <path d="M8 7h8" />
        <path d="M8 11h8" />
        <path d="M8 15h5" />
      </svg>
    ),
    shield: (
      <svg {...commonProps}>
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" />
        <path d="m9 12 2 2 4-4" />
      </svg>
    ),
    percent: (
      <svg {...commonProps}>
        <path d="M19 5 5 19" />
        <circle cx="7" cy="7" r="2" />
        <circle cx="17" cy="17" r="2" />
      </svg>
    ),
    wallet: (
      <svg {...commonProps}>
        <path d="M3 7h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z" />
        <path d="M16 12h5v4h-5a2 2 0 0 1 0-4Z" />
        <path d="M3 7V6a2 2 0 0 1 2-2h12" />
      </svg>
    ),
    support: (
      <svg {...commonProps}>
        <path d="M4 13a8 8 0 0 1 16 0" />
        <path d="M4 13v3a2 2 0 0 0 2 2h1v-7H6a2 2 0 0 0-2 2Z" />
        <path d="M20 13v3a2 2 0 0 1-2 2h-1v-7h1a2 2 0 0 1 2 2Z" />
        <path d="M16 18a4 4 0 0 1-4 3" />
      </svg>
    ),
    arrow: (
      <svg {...commonProps}>
        <path d="M5 12h14" />
        <path d="m12 5 7 7-7 7" />
      </svg>
    ),
    check: (
      <svg {...commonProps}>
        <circle cx="12" cy="12" r="10" />
        <path d="m9 12 2 2 4-4" />
      </svg>
    ),
    wifi: (
      <svg {...commonProps}>
        <path d="M5 13a10 10 0 0 1 14 0" />
        <path d="M8.5 16.5a5 5 0 0 1 7 0" />
        <path d="M12 20h.01" />
      </svg>
    ),
    tv: (
      <svg {...commonProps}>
        <rect x="3" y="5" width="18" height="12" rx="2" />
        <path d="M8 21h8" />
        <path d="M12 17v4" />
      </svg>
    ),
    bulb: (
      <svg {...commonProps}>
        <path d="M9 18h6" />
        <path d="M10 22h4" />
        <path d="M8 14a6 6 0 1 1 8 0c-.8.7-1 1.5-1 3H9c0-1.5-.2-2.3-1-3Z" />
      </svg>
    ),
    water: (
      <svg {...commonProps}>
        <path d="M12 2s6 7 6 12a6 6 0 0 1-12 0c0-5 6-12 6-12Z" />
      </svg>
    ),
    phone: (
      <svg {...commonProps}>
        <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6.4 6.4l1.2-1.2a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2Z" />
      </svg>
    ),
  };

  return icons[name] || icons.zap;
}

const operators = [
  "Jio",
  "Airtel",
  "Vi",
  "BSNL",
  "MTNL",
  "Tata Play",
  "Dish TV",
  "d2h",
];

const services = [
  {
    icon: "smartphone",
    title: "Mobile Recharge",
    desc: "Instant prepaid recharge for major Indian telecom operators with attractive discounts.",
  },
  {
    icon: "receipt",
    title: "Postpaid Bill Payment",
    desc: "Pay mobile postpaid bills quickly and securely from one simple platform.",
  },
  {
    icon: "tv",
    title: "DTH Recharge",
    desc: "Recharge DTH services for popular operators without delay or manual follow-up.",
  },
  {
    icon: "bulb",
    title: "Utility Bills",
    desc: "Support for electricity, broadband, landline, water and other bill payments.",
  },
];

const benefits = [
  "Discount on every mobile recharge",
  "Multiple operator support across India",
  "Fast and secure transactions",
  "Recharge and bill payment in one app",
  "Simple wallet-based payment experience",
  "Useful for customers, retailers and business users",
];

function runSanityTests() {
  const failures = [];

  if (services.length < 4) failures.push("Expected at least 4 services.");
  if (!services.some((service) => service.title === "Mobile Recharge")) {
    failures.push("Mobile Recharge service is missing.");
  }
  if (!benefits.some((benefit) => benefit.toLowerCase().includes("discount"))) {
    failures.push("Discount benefit is missing.");
  }
  if (!operators.includes("Jio") || !operators.includes("Airtel")) {
    failures.push("Major Indian operators are missing.");
  }

  return failures;
}

const sanityTestFailures = runSanityTests();

export default function RechargeBusinessWebsite() {
  return (
    <div className="min-h-screen bg-slate-950 text-white">
      {sanityTestFailures.length > 0 && (
        <div className="border-b border-red-400/30 bg-red-950 px-4 py-3 text-sm text-red-100">
          Website data test failed: {sanityTestFailures.join(" ")}
        </div>
      )}

      <header className="sticky top-0 z-50 border-b border-white/10 bg-slate-950/85 backdrop-blur-xl">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-3">
            <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-gradient-to-br from-cyan-400 to-blue-600 shadow-lg shadow-cyan-500/20">
              <Icon name="zap" className="h-6 w-6 text-white" />
            </div>
            <div>
              <p className="text-lg font-bold leading-none">1Recharge</p>
              <p className="text-xs text-slate-400">Recharge & Bill Payments</p>
            </div>
          </div>

          <nav className="hidden items-center gap-8 text-sm font-medium text-slate-300 md:flex">
            <a href="#services" className="hover:text-white">Services</a>
            <a href="#discount" className="hover:text-white">Discounts</a>
            <a href="#operators" className="hover:text-white">Operators</a>
            <a href="#contact" className="hover:text-white">Contact</a>
          </nav>

          <Button className="rounded-xl bg-cyan-500 text-slate-950 hover:bg-cyan-400">
            Get Started
          </Button>
        </div>
      </header>

      <main>
        <section className="relative overflow-hidden">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(34,211,238,0.22),transparent_34%),radial-gradient(circle_at_top_right,rgba(59,130,246,0.2),transparent_35%)]" />
          <div className="relative mx-auto grid max-w-7xl gap-12 px-4 py-20 sm:px-6 lg:grid-cols-2 lg:px-8 lg:py-28">
            <motion.div
              initial={{ opacity: 0, y: 24 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="flex flex-col justify-center"
            >
              <div className="mb-5 inline-flex w-fit items-center gap-2 rounded-full border border-cyan-400/30 bg-cyan-400/10 px-4 py-2 text-sm text-cyan-200">
                <Icon name="percent" className="h-4 w-4" />
                Save more on every mobile recharge
              </div>

              <h1 className="max-w-3xl text-4xl font-black tracking-tight sm:text-5xl lg:text-6xl">
                Recharge mobiles and pay bills faster across India
              </h1>

              <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">
                1Recharge is a simple and reliable recharge application for mobile recharge, DTH recharge, postpaid bills and utility bill payments. Users can recharge multiple operators and enjoy discounts on every mobile recharge.
              </p>

              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                <Button size="lg" className="rounded-2xl bg-cyan-500 px-7 text-slate-950 hover:bg-cyan-400">
                  Start Recharge <Icon name="arrow" className="ml-2 h-5 w-5" />
                </Button>
                <Button size="lg" variant="outline" className="rounded-2xl border-white/20 bg-white/5 px-7 text-white hover:bg-white/10">
                  View Services
                </Button>
              </div>

              <div className="mt-10 grid max-w-xl grid-cols-3 gap-4">
                <div>
                  <p className="text-2xl font-bold">24x7</p>
                  <p className="text-sm text-slate-400">Recharge Access</p>
                </div>
                <div>
                  <p className="text-2xl font-bold">Multi</p>
                  <p className="text-sm text-slate-400">Operator Support</p>
                </div>
                <div>
                  <p className="text-2xl font-bold">Instant</p>
                  <p className="text-sm text-slate-400">Bill Payment</p>
                </div>
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, scale: 0.94 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.7, delay: 0.1 }}
              className="flex items-center justify-center"
            >
              <div className="relative w-full max-w-md">
                <div className="absolute -inset-6 rounded-[2.5rem] bg-cyan-500/20 blur-3xl" />
                <Card className="relative overflow-hidden rounded-[2rem] border-white/10 bg-white/10 text-white shadow-2xl backdrop-blur-xl">
                  <CardContent className="p-6">
                    <div className="mb-6 flex items-center justify-between">
                      <div>
                        <p className="text-sm text-slate-300">Recharge Amount</p>
                        <p className="text-4xl font-black">₹299</p>
                      </div>
                      <div className="rounded-2xl bg-emerald-400/15 px-4 py-2 text-sm font-semibold text-emerald-300">
                        Discount Applied
                      </div>
                    </div>

                    <div className="space-y-4 rounded-3xl bg-slate-950/70 p-5">
                      <div className="flex items-center justify-between rounded-2xl bg-white/5 p-4">
                        <div className="flex items-center gap-3">
                          <Icon name="phone" className="h-5 w-5 text-cyan-300" />
                          <div>
                            <p className="font-semibold">Mobile Recharge</p>
                            <p className="text-sm text-slate-400">Jio prepaid plan</p>
                          </div>
                        </div>
                        <Icon name="check" className="h-5 w-5 text-emerald-300" />
                      </div>

                      <div className="grid grid-cols-2 gap-3">
                        <div className="rounded-2xl bg-white/5 p-4">
                          <Icon name="wallet" className="mb-3 h-5 w-5 text-cyan-300" />
                          <p className="text-xs text-slate-400">Wallet Balance</p>
                          <p className="font-bold">₹1,250</p>
                        </div>
                        <div className="rounded-2xl bg-white/5 p-4">
                          <Icon name="percent" className="mb-3 h-5 w-5 text-cyan-300" />
                          <p className="text-xs text-slate-400">You Saved</p>
                          <p className="font-bold">₹12</p>
                        </div>
                      </div>

                      <Button className="w-full rounded-2xl bg-cyan-500 py-6 text-slate-950 hover:bg-cyan-400">
                        Pay Securely
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </motion.div>
          </div>
        </section>

        <section id="services" className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
          <div className="mb-10 max-w-2xl">
            <p className="mb-3 text-sm font-bold uppercase tracking-widest text-cyan-300">Our Services</p>
            <h2 className="text-3xl font-black sm:text-4xl">Everything for recharge and bill payment</h2>
            <p className="mt-4 text-slate-300">Provide your users a smooth platform for daily digital payment needs.</p>
          </div>

          <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
            {services.map((item) => (
              <Card key={item.title} className="rounded-3xl border-white/10 bg-white/[0.06] text-white transition hover:-translate-y-1 hover:bg-white/[0.09]">
                <CardContent className="p-6">
                  <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-cyan-400/15 text-cyan-300">
                    <Icon name={item.icon} className="h-6 w-6" />
                  </div>
                  <h3 className="text-lg font-bold">{item.title}</h3>
                  <p className="mt-3 text-sm leading-6 text-slate-300">{item.desc}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </section>

        <section id="discount" className="bg-white/[0.04] py-16">
          <div className="mx-auto grid max-w-7xl gap-10 px-4 sm:px-6 lg:grid-cols-2 lg:px-8">
            <div>
              <p className="mb-3 text-sm font-bold uppercase tracking-widest text-cyan-300">Discount Benefit</p>
              <h2 className="text-3xl font-black sm:text-4xl">Discount on every mobile recharge</h2>
              <p className="mt-5 leading-7 text-slate-300">
                Make every recharge more rewarding. Your users can recharge their number, pay instantly and receive attractive savings on eligible mobile recharge transactions.
              </p>
              <div className="mt-8 grid gap-3">
                {benefits.map((benefit) => (
                  <div key={benefit} className="flex items-center gap-3 rounded-2xl border border-white/10 bg-slate-950/50 p-4">
                    <Icon name="check" className="h-5 w-5 shrink-0 text-emerald-300" />
                    <span className="text-slate-200">{benefit}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="grid gap-5 sm:grid-cols-2">
              <Card className="rounded-3xl border-white/10 bg-gradient-to-br from-cyan-400 to-blue-600 text-white">
                <CardContent className="p-7">
                  <Icon name="percent" className="mb-8 h-10 w-10" />
                  <p className="text-5xl font-black">Up to</p>
                  <p className="mt-2 text-6xl font-black">5%</p>
                  <p className="mt-4 text-cyan-50">discount on selected recharge transactions</p>
                </CardContent>
              </Card>
              <div className="space-y-5">
                <Card className="rounded-3xl border-white/10 bg-white/[0.06] text-white">
                  <CardContent className="p-6">
                    <Icon name="shield" className="mb-4 h-8 w-8 text-cyan-300" />
                    <h3 className="font-bold">Secure Payments</h3>
                    <p className="mt-2 text-sm text-slate-300">Reliable payment flow with transparent transaction status.</p>
                  </CardContent>
                </Card>
                <Card className="rounded-3xl border-white/10 bg-white/[0.06] text-white">
                  <CardContent className="p-6">
                    <Icon name="support" className="mb-4 h-8 w-8 text-cyan-300" />
                    <h3 className="font-bold">Support Ready</h3>
                    <p className="mt-2 text-sm text-slate-300">Help users with recharge status, bill issues and payment support.</p>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </section>

        <section id="operators" className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
          <div className="mb-10 text-center">
            <p className="mb-3 text-sm font-bold uppercase tracking-widest text-cyan-300">Operator Coverage</p>
            <h2 className="text-3xl font-black sm:text-4xl">Multiple operators supported in India</h2>
            <p className="mt-4 text-slate-300">Support popular mobile, DTH and bill payment providers from a single app.</p>
          </div>

          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-8">
            {operators.map((operator) => (
              <div key={operator} className="rounded-2xl border border-white/10 bg-white/[0.06] px-4 py-5 text-center font-bold text-slate-100">
                {operator}
              </div>
            ))}
          </div>

          <div className="mt-10 grid gap-5 md:grid-cols-4">
            <div className="rounded-3xl border border-white/10 bg-white/[0.05] p-6">
              <Icon name="wifi" className="mb-4 h-7 w-7 text-cyan-300" />
              <h3 className="font-bold">Broadband</h3>
              <p className="mt-2 text-sm text-slate-400">Pay internet bills quickly.</p>
            </div>
            <div className="rounded-3xl border border-white/10 bg-white/[0.05] p-6">
              <Icon name="bulb" className="mb-4 h-7 w-7 text-cyan-300" />
              <h3 className="font-bold">Electricity</h3>
              <p className="mt-2 text-sm text-slate-400">Utility bill payment support.</p>
            </div>
            <div className="rounded-3xl border border-white/10 bg-white/[0.05] p-6">
              <Icon name="water" className="mb-4 h-7 w-7 text-cyan-300" />
              <h3 className="font-bold">Water</h3>
              <p className="mt-2 text-sm text-slate-400">Simple bill payment flow.</p>
            </div>
            <div className="rounded-3xl border border-white/10 bg-white/[0.05] p-6">
              <Icon name="receipt" className="mb-4 h-7 w-7 text-cyan-300" />
              <h3 className="font-bold">Postpaid</h3>
              <p className="mt-2 text-sm text-slate-400">Pay monthly mobile bills.</p>
            </div>
          </div>
        </section>

        <section id="contact" className="px-4 pb-20 sm:px-6 lg:px-8">
          <div className="mx-auto max-w-7xl overflow-hidden rounded-[2rem] border border-white/10 bg-gradient-to-br from-cyan-500 to-blue-700 p-8 text-center shadow-2xl sm:p-12">
            <h2 className="text-3xl font-black sm:text-4xl">Launch your recharge business online</h2>
            <p className="mx-auto mt-4 max-w-2xl text-cyan-50">
              Give your users a reliable platform for recharge, bill payment and digital convenience with discount benefits.
            </p>
            <div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
              <Button size="lg" className="rounded-2xl bg-white px-7 text-blue-700 hover:bg-cyan-50">
                Contact Us
              </Button>
              <Button size="lg" variant="outline" className="rounded-2xl border-white/40 bg-white/10 px-7 text-white hover:bg-white/20">
                Download App
              </Button>
            </div>
          </div>
        </section>
      </main>

      <footer className="border-t border-white/10 px-4 py-8 sm:px-6 lg:px-8">
        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 text-sm text-slate-400 md:flex-row">
          <p>© 2026 1Recharge. All rights reserved.</p>
          <div className="flex gap-5">
            <a href="#" className="hover:text-white">Privacy Policy</a>
            <a href="#" className="hover:text-white">Terms</a>
            <a href="#" className="hover:text-white">Support</a>
          </div>
        </div>
      </footer>
    </div>
  );
}