"use client";

import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { SectionHeader } from "@/components/shared/SectionHeader";

const steps = [
  {
    number: "01",
    title: "Choose Your Experience",
    description:
      "Pick the afternoon coastal tour, the breakfast deep-dive, or go all in with the full-day edit.",
    icon: "🎯",
  },
  {
    number: "02",
    title: "We Handle Everything",
    description:
      "Ferry tickets, reservations, insider access, the best table at sunset. You just show up.",
    icon: "✨",
  },
  {
    number: "03",
    title: "Cross Over",
    description:
      "Meet your guide at the ferry. By the time you step off the boat, you're not a tourist anymore. You're a guest.",
    icon: "🚢",
  },
];

export function HowItWorks() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  return (
    <section className="py-20 md:py-32 section-padding bg-warm-sand" ref={ref}>
      <div className="max-w-7xl mx-auto">
        <SectionHeader
          eyebrow="How It Works"
          title="Three Steps to the Other Side"
        />

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
          {steps.map((step, i) => (
            <motion.div
              key={i}
              className="relative text-center"
              initial={{ opacity: 0, y: 30 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ delay: i * 0.2, duration: 0.6 }}
            >
              {i < steps.length - 1 && (
                <div className="hidden md:block absolute top-12 left-[60%] w-[80%] h-[2px] bg-gradient-to-r from-bosphorus/30 to-transparent" />
              )}

              <div className="inline-flex items-center justify-center w-24 h-24 rounded-full bg-white shadow-lg mb-6 text-4xl">
                {step.icon}
              </div>

              <div className="text-bosphorus font-display font-bold text-sm tracking-widest mb-2">
                {step.number}
              </div>

              <h3 className="font-display text-xl font-bold text-deep-nazar mb-3">
                {step.title}
              </h3>

              <p className="text-deep-nazar/60 text-sm leading-relaxed max-w-xs mx-auto">
                {step.description}
              </p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}