import { Calculator, Percent } from "lucide-react";
import { Button } from "@/components/ui/button";
import { scooters as mockScooters, type Scooter } from "@/lib/mock-data";

type EMICalculatorTeaserProps = {
  scooters?: Scooter[];
};

export function EMICalculatorTeaser({ scooters = mockScooters }: EMICalculatorTeaserProps) {
  const scooter = scooters[0];

  return (
    <section className="bg-white py-10" id="emi">
      <div className="container-custom grid gap-5 lg:grid-cols-2">
        <article className="green-gradient rounded-[1.5rem] border border-ev/20 p-6 shadow-card md:p-8">
          <div className="grid items-center gap-5 sm:grid-cols-[1fr_auto]">
            <div>
              <p className="text-sm font-bold text-ev-deep">Plan Smart. Ride Smarter.</p>
              <h2 className="mt-3 text-3xl font-bold text-navy-deep">
                Calculate your EMI
              </h2>
              <p className="mt-3 max-w-md text-sm leading-6 text-navy-muted">
                Use our EMI calculator to find the best plan that fits your
                budget.
              </p>
              <Button className="mt-5" href="/offers" variant="green">
                Calculate EMI
              </Button>
            </div>
            <span className="inline-flex h-28 w-28 items-center justify-center rounded-[2rem] bg-white text-ev-deep shadow-card">
              <Calculator className="h-14 w-14" />
            </span>
          </div>
        </article>

        <article className="blue-gradient rounded-[1.5rem] border border-primary/20 p-6 shadow-card md:p-8">
          <div className="grid items-center gap-5 sm:grid-cols-[1fr_auto]">
            <div>
              <p className="text-sm font-bold text-primary">Bring Home Your Dream EV</p>
              <h2 className="mt-3 text-3xl font-bold text-navy-deep">
                Low Down Payment
              </h2>
              <p className="mt-3 text-lg font-bold text-primary">
                Starting from just Rs. 9,999*
              </p>
              <Button className="mt-5" href="/contact">
                Explore Low Down Payment Plans
              </Button>
            </div>
            <div className="relative">
              {scooter ? (
                <img
                  src={scooter.thumbnailImage}
                  alt={scooter.name}
                  className="h-40 w-48 rounded-2xl object-cover"
                />
              ) : null}
              <span className="absolute -bottom-3 -left-3 inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary text-white shadow-soft">
                <Percent className="h-6 w-6" />
              </span>
            </div>
          </div>
        </article>
      </div>
    </section>
  );
}