"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import Image from "next/image";

export function Story() {
  return (
    <section id="story" className="py-24 bg-stone-100">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div className="order-2 lg:order-1 relative h-[600px] rounded-2xl overflow-hidden">
            <Image 
              src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?q=80&w=2078&auto=format&fit=crop"
              alt="Coffee Plantation in Quindío"
              fill
              className="object-cover"
            />
            <div className="absolute bottom-8 left-8 right-8 bg-white/90 backdrop-blur p-6 rounded-xl shadow-lg">
              <p className="text-stone-800 font-medium italic">
                "It started in a small house with three people and a dream to share the soul of Quindío."
              </p>
              <p className="text-stone-500 text-sm mt-2">— Nubia Motta Camargo, Founder</p>
            </div>
          </div>
          
          <div className="order-1 lg:order-2">
            <Heading className="mb-6">30 Years of Heritage</Heading>
            <Subheading className="text-stone-600 mb-8">
              Founded in Armenia, Quindío, Café Quindío is more than just a coffee brand. 
              It's a tribute to the coffee-growing culture of Colombia.
            </Subheading>
            
            <div className="space-y-6">
              <div className="flex gap-4">
                <div className="flex-shrink-0 w-12 h-12 bg-amber-800 rounded-full flex items-center justify-center text-white font-bold">1</div>
                <div>
                  <h4 className="text-xl font-bold text-stone-900">Direct from Origin</h4>
                  <p className="text-stone-600">We ship directly from our roasting facilities in Colombia to ensure maximum freshness and quality.</p>
                </div>
              </div>
              
              <div className="flex gap-4">
                <div className="flex-shrink-0 w-12 h-12 bg-amber-800 rounded-full flex items-center justify-center text-white font-bold">2</div>
                <div>
                  <h4 className="text-xl font-bold text-stone-900">Sustainable Innovation</h4>
                  <p className="text-stone-600">From biodegradable pods to eco-conscious roasting, we honor the land that gives us our beans.</p>
                </div>
              </div>
              
              <div className="flex gap-4">
                <div className="flex-shrink-0 w-12 h-12 bg-amber-800 rounded-full flex items-center justify-center text-white font-bold">3</div>
                <div>
                  <h4 className="text-xl font-bold text-stone-900">Social Responsibility</h4>
                  <p className="text-stone-600">Supporting local growers and their families is at the core of every cup we serve.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}