import { getIcon } from "@/lib/icons";
import { SectionHeader } from "@/components/landing/section-header";
import type { WhyChooseUs } from "@prisma/client";

interface WhyChooseUsSectionProps {
  items: WhyChooseUs[];
}

export function WhyChooseUsSection({ items }: WhyChooseUsSectionProps) {
  if (items.length === 0) return null;

  const [lead, ...rest] = items;

  return (
    <section id="why-us" className="section-default">
      <div className="content-wrap">
        <SectionHeader
          eyebrow="Why us"
          title="Why homeowners call us first"
          description="Transparent pricing, licensed technicians, and a team that shows up when it matters."
        />

        <div className="grid lg:grid-cols-12 gap-6">
          {lead && (() => {
            const LeadIcon = getIcon(lead.icon);
            return (
              <article className="lg:col-span-5 surface-elevated p-8 md:p-10 bg-primary text-primary-foreground">
                <LeadIcon className="h-6 w-6 text-accent mb-6" />
                <h3 className="font-heading text-2xl md:text-3xl mb-4">{lead.title}</h3>
                <p className="text-primary-foreground/75 leading-relaxed">{lead.description}</p>
              </article>
            );
          })()}

          <div className="lg:col-span-7 grid sm:grid-cols-2 gap-px bg-border border border-border/80">
            {rest.map((item) => {
              const Icon = getIcon(item.icon);
              return (
                <article key={item.id} className="bg-card p-6 md:p-7">
                  <Icon className="h-5 w-5 text-accent mb-4" />
                  <h3 className="font-medium text-foreground mb-2">{item.title}</h3>
                  <p className="text-sm text-muted-foreground leading-relaxed">
                    {item.description}
                  </p>
                </article>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}