const Features = () => {
  const features = [
    {
      n: '01',
      title: 'Propostas em PDF',
      desc: 'Monte propostas comerciais com modelos prontos, escopo, itens inclusos, entregáveis, opcionais, investimento e condições de pagamento.',
      tag: 'COMERCIAL',
      icon: (
        <svg viewBox="0 0 100 100" className="w-full h-full" fill="none" stroke="currentColor" strokeWidth="0.8">
          <rect x="10" y="10" width="80" height="80" />
          <line x1="10" y1="30" x2="90" y2="30" />
          <line x1="10" y1="50" x2="90" y2="50" />
          <line x1="10" y1="70" x2="90" y2="70" />
          <line x1="30" y1="10" x2="30" y2="90" />
          <line x1="50" y1="10" x2="50" y2="90" />
          <line x1="70" y1="10" x2="70" y2="90" />
          <rect x="50" y="50" width="20" height="20" fill="currentColor" />
        </svg>
      ),
    },
    {
      n: '02',
      title: 'Clientes e histórico',
      desc: 'Centralize cadastro do cliente, dados da obra, contatos, contratos, projetos, financeiro vinculado e anexos em uma ficha única.',
      tag: 'CRM',
      icon: (
        <svg viewBox="0 0 100 100" className="w-full h-full" fill="none" stroke="currentColor" strokeWidth="0.8">
          <line x1="10" y1="80" x2="90" y2="80" />
          <line x1="10" y1="80" x2="10" y2="20" />
          <path d="M 10 70 L 25 60 L 40 65 L 55 40 L 70 35 L 85 20" />
          <circle cx="25" cy="60" r="2" fill="currentColor" />
          <circle cx="40" cy="65" r="2" fill="currentColor" />
          <circle cx="55" cy="40" r="2" fill="currentColor" />
          <circle cx="70" cy="35" r="2" fill="currentColor" />
          <circle cx="85" cy="20" r="2" fill="currentColor" />
        </svg>
      ),
    },
    {
      n: '03',
      title: 'Contratos e parcelas',
      desc: 'Cadastre contratos, acompanhe status, organize valores e gere parcelas vinculadas ao controle financeiro do escritório.',
      tag: 'CONTRATOS',
      icon: (
        <svg viewBox="0 0 100 100" className="w-full h-full" fill="none" stroke="currentColor" strokeWidth="0.8">
          <rect x="20" y="25" width="60" height="50" />
          <line x1="20" y1="40" x2="80" y2="40" />
          <circle cx="35" cy="55" r="5" />
          <line x1="50" y1="55" x2="75" y2="55" />
          <line x1="50" y1="65" x2="65" y2="65" />
        </svg>
      ),
    },
    {
      n: '04',
      title: 'Entradas e saídas',
      desc: 'Controle receitas, despesas, contas a receber, contas a pagar, despesas fixas e fluxo de caixa por período.',
      tag: 'FINANCEIRO',
      icon: (
        <svg viewBox="0 0 100 100" className="w-full h-full" fill="none" stroke="currentColor" strokeWidth="0.8">
          <rect x="25" y="15" width="50" height="70" />
          <line x1="35" y1="30" x2="65" y2="30" />
          <line x1="35" y1="40" x2="65" y2="40" />
          <line x1="35" y1="50" x2="55" y2="50" />
          <path d="M 35 65 Q 45 58 55 65 T 65 65" />
        </svg>
      ),
    },
    {
      n: '05',
      title: 'Cadastro de despesas fixas',
      desc: 'Cadastre despesas recorrentes, acompanhe vencimentos e mantenha previsibilidade sobre custos mensais do escritório.',
      tag: 'FINANCEIRO',
      icon: (
        <svg viewBox="0 0 100 100" className="w-full h-full" fill="none" stroke="currentColor" strokeWidth="0.8">
          <rect x="18" y="18" width="64" height="64" />
          <line x1="30" y1="36" x2="70" y2="36" />
          <line x1="30" y1="50" x2="62" y2="50" />
          <line x1="30" y1="64" x2="54" y2="64" />
          <circle cx="68" cy="64" r="8" />
          <path d="M 68 58 V 64 L 72 68" />
        </svg>
      ),
    },
    {
      n: '06',
      title: 'Criar cargos e alterar permissões',
      desc: 'Defina cargos da equipe, ajuste níveis de acesso e libere apenas as áreas necessárias para cada perfil.',
      tag: 'GESTÃO',
      icon: (
        <svg viewBox="0 0 100 100" className="w-full h-full" fill="none" stroke="currentColor" strokeWidth="0.8">
          <circle cx="34" cy="32" r="12" />
          <path d="M 14 78 C 18 58 50 58 54 78" />
          <rect x="58" y="28" width="28" height="38" />
          <line x1="64" y1="40" x2="80" y2="40" />
          <line x1="64" y1="50" x2="76" y2="50" />
          <path d="M 65 62 L 70 67 L 82 55" />
        </svg>
      ),
    },
    {
      n: '07',
      title: 'Tarefas e relatórios',
      desc: 'Organize tarefas por prioridade e prazo, acompanhe pendências e exporte relatórios gerenciais em CSV.',
      tag: 'GESTÃO',
      icon: (
        <svg viewBox="0 0 100 100" className="w-full h-full" fill="none" stroke="currentColor" strokeWidth="0.8">
          <circle cx="50" cy="50" r="30" />
          <line x1="50" y1="50" x2="50" y2="28" />
          <line x1="50" y1="50" x2="68" y2="50" />
          <circle cx="50" cy="50" r="2" fill="currentColor" />
          <line x1="50" y1="20" x2="50" y2="24" />
          <line x1="50" y1="76" x2="50" y2="80" />
          <line x1="20" y1="50" x2="24" y2="50" />
          <line x1="76" y1="50" x2="80" y2="50" />
        </svg>
      ),
    },
  ];

  return (
    <section id="features" className="relative py-32 md:py-48" data-screen-label="02 Features">
      <div className="max-w-[1400px] mx-auto px-6 md:px-10">
        <div className="grid grid-cols-12 gap-x-6">
          <div className="col-span-12 md:col-span-7">
            <SectionHeader
              index="02"
              label="Funcionalidades · Sheet 02"
              title={<>Construído como um <em className="italic font-serif" style={{ color: 'var(--sepia)' }}>projeto</em>: cada peça com função estrutural.</>}
              kicker="Não é um software de gestão genérico com tema escuro. É um ERP que entende como arquitetos faturam, gastam e cobram. Cada módulo foi modelado em parceria com escritórios de 2 a 200 pessoas."
            />
          </div>
        </div>

        <div className="mt-24 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px">
          {features.map((f, i) => (
            <FeatureCard key={i} {...f} index={i} />
          ))}
        </div>
      </div>
    </section>
  );
};

const FeatureCard = ({ n, title, desc, tag, icon, index }) => {
  const [ref, inView] = useReveal({ threshold: 0.2 });
  const [hover, setHover] = React.useState(false);

  return (
    <article
      ref={ref}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className="relative p-8 md:p-10 group transition-all duration-700"
      style={{
        background: hover ? 'var(--bg-deep)' : 'var(--bg)',
        opacity: inView ? 1 : 0,
        transform: inView ? 'translateY(0)' : 'translateY(40px)',
        transitionDelay: `${index * 80}ms`,
        transitionProperty: 'opacity, transform, background-color',
      }}
    >
      <div className="flex items-start justify-between mb-12">
        <span className="font-mono text-[10px] tracking-wider2" style={{ color: 'var(--stone)' }}>/ {String(n).padStart(2, '0')}</span>
        <span className="font-mono text-[10px] tracking-wider2" style={{ color: 'var(--stone)' }}>{tag}</span>
      </div>

      <div
        className="w-20 h-20 mb-8 transition-transform duration-700 ease-out"
        style={{
          color: hover ? 'var(--sepia)' : 'var(--ink)',
          transform: hover ? 'rotate(8deg) scale(1.05)' : 'rotate(0) scale(1)',
        }}
      >
        {icon}
      </div>

      <h3 className="font-serif text-3xl md:text-4xl tracking-tightest leading-tight mb-4">{title}</h3>
      <p className="text-sm leading-relaxed" style={{ color: 'var(--ash)' }}>{desc}</p>

      <div className="mt-8 flex items-center gap-2 font-mono text-[10px] tracking-wider2 transition-all duration-500"
        style={{ color: 'var(--ink)', opacity: hover ? 1 : 0.4 }}>
        <span>EXPLORAR</span>
        <span className="transition-transform duration-500" style={{ transform: hover ? 'translateX(4px)' : 'translateX(0)' }}>→</span>
      </div>
    </article>
  );
};

window.Features = Features;