'use client';

import { useEffect, useRef } from 'react';

const features = [
  {
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path
          d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    ),
    title: 'Deja tu número',
    description: 'Rellena tu nombre, teléfono y email. En menos de 2 minutos te llamamos.',
    tag: '01',
  },
  {
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path
          d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    ),
    title: 'Sube una foto',
    description: 'Fotografía tu cocina o baño. Nuestra IA analiza el espacio.',
    tag: '02',
  },
  {
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <polyline
          points="22 12 18 12 15 21 9 3 6 12 2 12"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    ),
    title: 'Recibe tu presupuesto',
    description: 'Al colgar te llega por WhatsApp el render + presupuesto desglosado.',
    tag: '03',
  },
];

export default function Features() {
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('opacity-100', 'translate-y-0');
            entry.target.classList.remove('opacity-0', 'translate-y-6');
          }
        });
      },
      { threshold: 0.1 }
    );

    const elements = sectionRef.current?.querySelectorAll('.reveal');
    elements?.forEach((el) => observer.observe(el));
    return () => observer.disconnect();
  }, []);

  return (
    <section
      className="bg-gray-50 border-y border-gray-200 py-16 md:py-24"
      id="features"
      ref={sectionRef}
      aria-labelledby="features-heading"
    >
      <div className="container">
        {/* Header */}
        <div className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out text-center max-w-[600px] mx-auto mb-16 flex flex-col items-center gap-4">
          <span className="badge badge-accent">Cómo funciona</span>
          <h2
            id="features-heading"
            className="text-[clamp(1.875rem,5vw,3rem)] font-black tracking-[-0.04em] leading-[1.1] text-black"
          >
            Tu presupuesto en 5 minutos,
            <br />
            <span className="text-gray-600">sin salir de casa</span>
          </h2>
          <p className="text-lg text-gray-600 leading-relaxed">
            Sin visitas, sin esperas, sin sorpresas. Solo deja tu número, sube una foto
            y te llamamos desde tu provincia con presupuesto en mano.
          </p>
        </div>

        {/* Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6">
          {features.map((feature, i) => (
            <article
              key={feature.title}
              className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out bg-white border border-gray-200 rounded-xl p-8 max-sm:p-6 flex flex-col gap-4 cursor-default hover:border-black hover:shadow-lg hover:-translate-y-0.5 group"
              style={{ transitionDelay: `${i * 80}ms` }}
              aria-label={feature.title}
            >
              <div className="w-12 h-12 bg-black text-white rounded-lg flex items-center justify-center shrink-0 transition-transform duration-250 ease-out group-hover:scale-105 group-hover:-rotate-2">
                {feature.icon}
              </div>
              <div className="flex flex-col gap-2">
                <div className="text-[4rem] sm:text-[6rem] font-black leading-none text-gray-300 select-none -mt-2 -mb-2">
                  {feature.tag}
                </div>
                <h3 className="text-xl font-extrabold tracking-tight text-black leading-tight">
                  {feature.title}
                </h3>
                <p className="text-sm text-gray-600 leading-relaxed">
                  {feature.description}
                </p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
