import { BadgeCheck, HeartHandshake, Leaf, Sparkles } from "lucide-react";
import { SafeImage } from "@/components/ui/SafeImage";

const values = [
  { label: "Customer First Approach", icon: HeartHandshake },
  { label: "Quality & Reliability", icon: BadgeCheck },
  { label: "Innovation", icon: Sparkles },
  { label: "Sustainability", icon: Leaf },
];

export function OurStory({ storyImage = "/images/gallery/bharatpur-showroom.png" }: { storyImage?: string }) {
  return (
    <section className="bg-white py-10">
      <div className="container-custom grid items-center gap-8 lg:grid-cols-[0.95fr_1.05fr]">
        <SafeImage
          src={storyImage}
          alt="Bashista Auto showroom"
          className="h-full min-h-80 w-full rounded-[1.5rem] border border-border object-cover shadow-card"
          fallbackSrc="/images/backgrounds/hero-bg-general.png"
        />
        <div>
          <p className="text-sm font-bold text-ev-deep">Our Story</p>
          <h2 className="mt-3 text-3xl font-bold text-navy-deep">
            Driven by Passion. Built on Trust.
          </h2>
          <div className="mt-5 space-y-4 text-sm leading-7 text-navy-muted">
            <p>
              Bashista Auto was founded with a simple belief: Nepal deserves
              better mobility solutions that are clean, reliable, and future-ready.
            </p>
            <p>
              From our humble beginnings, we have grown into a trusted name in
              electric mobility, partnering with world-class brands and building
              strong relationships with thousands of happy customers.
            </p>
            <p>
              Today, we continue to innovate, expand, and serve, driving Nepal
              towards a sustainable future.
            </p>
          </div>
          <div className="mt-6 flex flex-wrap gap-3">
            {values.map((value) => {
              const Icon = value.icon;
              return (
                <span
                  className="inline-flex items-center gap-2 rounded-full border border-border bg-white px-4 py-2 text-xs font-bold text-navy-muted shadow-sm"
                  key={value.label}
                >
                  <Icon className="h-4 w-4 text-ev" />
                  {value.label}
                </span>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}