reformix-hackaton/src/components/Features/Features.tsx

'use client';

import { useEffect, useRef, useState } from 'react';
import styles from './Features.module.css';

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: 'Automatización inteligente',
    description:
      'Crea flujos de trabajo sin código. Conecta apps, dispara acciones y elimina tareas manuales con nuestra IA incorporada.',
    tag: 'IA',
  },
  {
    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: 'Colaboración en tiempo real',
    description:
      'Tu equipo siempre sincronizado. Comenta, asigna tareas y sigue el progreso de cada proyecto en tiempo real.',
    tag: 'Equipos',
  },
  {
    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: 'Analíticas avanzadas',
    description:
      'Paneles personalizables con métricas de negocio en tiempo real. Toma decisiones basadas en datos, no en suposiciones.',
    tag: 'Analytics',
  },
  {
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke="currentColor" strokeWidth="2" />
        <path d="M7 11V7a5 5 0 0110 0v4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
      </svg>
    ),
    title: 'Seguridad enterprise',
    description:
      'Cifrado end-to-end, SSO, auditoría de accesos y cumplimiento SOC 2 Tipo II. Tu información, siempre protegida.',
    tag: 'Seguridad',
  },
  {
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" />
        <path d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" stroke="currentColor" strokeWidth="2" />
      </svg>
    ),
    title: '200+ integraciones',
    description:
      'Conecta con Slack, Notion, GitHub, Salesforce y más. FlowSync se adapta a tu stack, no al revés.',
    tag: 'Integraciones',
  },
  {
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    ),
    title: 'Soporte 24/7',
    description:
      'Equipo de soporte dedicado disponible en cualquier zona horaria. Tiempo de respuesta promedio: menos de 2 minutos.',
    tag: 'Soporte',
  },
];

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(styles.visible);
          }
        });
      },
      { threshold: 0.1 }
    );

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

  return (
    <section className={`section ${styles.features}`} id="features" ref={sectionRef} aria-labelledby="features-heading">
      <div className="container">
        {/* Header */}
        <div className={`${styles.reveal} ${styles.header}`}>
          <span className="badge badge-accent">Características</span>
          <h2 id="features-heading" className={styles.title}>
            Todo lo que necesitas,
            <br />
            <span className={styles.titleAccent}>nada que no necesitas</span>
          </h2>
          <p className={styles.subtitle}>
            Diseñado para equipos que quieren mover rápido sin romper cosas.
            Potente cuando lo necesitas, simple cuando no.
          </p>
        </div>

        {/* Grid */}
        <div className={styles.grid}>
          {features.map((feature, i) => (
            <article
              key={feature.title}
              className={`${styles.reveal} ${styles.card}`}
              style={{ transitionDelay: `${i * 0.08}s` }}
              aria-label={feature.title}
            >
              <div className={styles.cardIcon}>{feature.icon}</div>
              <div className={styles.cardContent}>
                <div className={styles.cardTag}>{feature.tag}</div>
                <h3 className={styles.cardTitle}>{feature.title}</h3>
                <p className={styles.cardDesc}>{feature.description}</p>
              </div>
            </article>
          ))}
        </div>

        {/* Bottom CTA */}
        <div className={`${styles.reveal} ${styles.bottomCta}`}>
          <p className={styles.ctaText}>
            ¿Listo para transformar cómo trabaja tu equipo?
          </p>
          <button
            className="btn btn-primary btn-lg"
            id="features-cta-btn"
            onClick={() => document.querySelector('#contact')?.scrollIntoView({ behavior: 'smooth' })}
          >
            Ver todas las funciones
          </button>
        </div>
      </div>
    </section>
  );
}