import React from 'react';
import Image from 'next/image';
import { SectionHeading } from '../common/SectionHeading';
import { CheckCircle2 } from 'lucide-react';
import { companyDetails } from '@/content/company';

export function AboutStory() {
  return (
    <section className="py-16 md:py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
        {/* Lewa: Obraz */}
        <div className="relative">
          <div className="relative aspect-[4/5] rounded-3xl overflow-hidden shadow-2xl">
            <Image
              src="https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=800&q=80"
              alt="Zespół firmy w trakcie pracy"
              fill
              className="object-cover"
            />
          </div>
          {/* Ozdobny element zaufania */}
          <div className="absolute -bottom-8 -right-8 bg-white p-6 rounded-2xl shadow-xl hidden md:block">
            <div className="flex items-center gap-4">
              <div className="flex-shrink-0 w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center">
                <span className="text-2xl font-black text-accent font-heading">
                  {companyDetails.stats.find(s => s.label.includes("doświadczenia"))?.value || "15+"}
                </span>
              </div>
              <div>
                <p className="font-bold text-primary font-heading text-lg leading-none mb-1">Lat na rynku</p>
                <p className="text-sm text-text-muted">Doświadczenie i zaufanie</p>
              </div>
            </div>
          </div>
        </div>

        {/* Prawa: Tekst */}
        <div>
          <SectionHeading
            eyebrow="Nasza Historia"
            title="Budujemy komfort od fundamentów aż po dach"
            align="left"
          />
          
          <div className="prose prose-lg text-text-muted mt-8 mb-10">
            <p>
              Firma {companyDetails.name} powstała z pasji do nowoczesnych technologii oraz chęci dostarczania kompleksowych usług dla domów i firm. Zaczynaliśmy jako niewielka, dwuosobowa ekipa specjalizująca się w instalacjach HVAC. Dziś jesteśmy liderem w regionie, realizując setki zaawansowanych projektów instalacyjnych rocznie.
            </p>
            <p>
              Naszym celem jest upraszczanie życia naszym klientom. Zamiast szukać oddzielnych fachowców od hydrauliki, klimatyzacji i wykończeń, u nas otrzymujesz całościowe wsparcie z gwarancją jakości.
            </p>
          </div>

          <ul className="space-y-4">
            {[
              "Certyfikowani instalatorzy z uprawnieniami F-Gaz",
              "Dbałość o czystość podczas prac montażowych",
              "Gwarancja i szybki serwis na terenie miasta i okolic",
              "Pomoc w uzyskiwaniu dofinansowań"
            ].map((point, idx) => (
              <li key={idx} className="flex items-start gap-3">
                <CheckCircle2 className="w-6 h-6 text-accent shrink-0" />
                <span className="text-primary font-medium">{point}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}