const experienceSteps = [
  {
    id: 'captacao',
    number: '01',
    label: 'Captação',
    title: 'Lead entra com contexto',
    copy: 'Origem, dados da obra, contato e histórico ficam prontos para uma abordagem comercial mais precisa.',
    metric: '42 clientes',
    route: '/clients',
  },
  {
    id: 'proposta',
    number: '02',
    label: 'Proposta',
    title: 'Escopo vira PDF profissional',
    copy: 'Modelos por tipo de serviço aceleram o envio com entregáveis, opcionais, cronograma e pagamento.',
    metric: '9 abertas',
    route: '/proposals',
  },
  {
    id: 'projeto',
    number: '03',
    label: 'Projeto',
    title: 'Execução segue no kanban',
    copy: 'Etapas técnicas, tarefas, anexos e responsáveis aparecem em uma leitura operacional única.',
    metric: '19 etapas',
    route: '/projects-in-progress',
  },
  {
    id: 'financeiro',
    number: '04',
    label: 'Financeiro',
    title: 'Contrato conversa com caixa',
    copy: 'Parcelas, recebíveis, contas a pagar, despesas fixas e fluxo de caixa fecham o ciclo da operação.',
    metric: 'R$ 238,9k',
    route: '/financial/cash-flow',
  },
];

const Experience = () => {
  const [active, setActive] = React.useState(experienceSteps[0].id);
  const [ref, inView] = useReveal({ threshold: 0.18 });
  const current = experienceSteps.find((step) => step.id === active) || experienceSteps[0];

  React.useEffect(() => {
    const id = setInterval(() => {
      setActive((prev) => {
        const index = experienceSteps.findIndex((step) => step.id === prev);
        return experienceSteps[(index + 1) % experienceSteps.length].id;
      });
    }, 3600);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="experience" className="relative py-32 md:py-48 border-t" style={{ borderColor: 'var(--rule)', background: 'var(--bg)' }} data-screen-label="03 Experience">
      <div className="max-w-[1400px] mx-auto px-6 md:px-10">
        <div className="grid grid-cols-12 gap-x-6 gap-y-12 items-end">
          <div className="col-span-12 md:col-span-7">
            <SectionHeader
              index="03"
              label="Experiência interativa"
              title={<>ERP + CRM conectando cliente, projeto e <em className="italic font-serif" style={{ color: 'var(--sepia)' }}>recebimento</em>.</>}
              kicker="A landing apresenta o ArchPlan como uma jornada contínua: o cliente entra no CRM, vira proposta, contrato, projeto em execução e controle financeiro."
            />
          </div>
          <div className="col-span-12 md:col-span-5 md:pb-2">
            <div className="grid grid-cols-2 gap-px" style={{ background: 'var(--rule-strong)' }}>
              {[
                ['Tempo de proposta', 'menos retrabalho'],
                ['Projetos', 'etapas selecionadas'],
                ['Financeiro', 'visão de caixa'],
                ['ArchIA', 'suporte interno'],
              ].map(([title, copy]) => (
                <div key={title} className="p-5" style={{ background: 'var(--bg-deep)' }}>
                  <DimLabel>/ {title}</DimLabel>
                  <p className="mt-2 text-sm" style={{ color: 'var(--ash)' }}>{copy}</p>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div ref={ref} className="mt-20 grid lg:grid-cols-[0.9fr_1.1fr] gap-10">
          <div className="space-y-px" style={{ background: 'var(--rule-strong)' }}>
            {experienceSteps.map((step, index) => {
              const selected = step.id === active;
              return (
                <button
                  key={step.id}
                  type="button"
                  onClick={() => setActive(step.id)}
                  className="w-full text-left p-6 md:p-7 transition-all duration-500"
                  style={{
                    background: selected ? 'var(--ink)' : 'var(--bg-deep)',
                    color: selected ? 'var(--bg)' : 'var(--ink)',
                    opacity: inView ? 1 : 0,
                    transform: inView ? 'translateX(0)' : 'translateX(-18px)',
                    transitionDelay: `${index * 90}ms`,
                  }}
                >
                  <div className="flex items-center justify-between gap-4">
                    <span className="font-mono text-[10px] uppercase tracking-wider2" style={{ color: selected ? 'var(--mist)' : 'var(--stone)' }}>{step.number} / {step.label}</span>
                    <span className="font-mono text-[10px] uppercase tracking-wider2">{step.metric}</span>
                  </div>
                  <div className="mt-5 font-serif text-2xl md:text-3xl tracking-tightest">{step.title}</div>
                  <p className="mt-3 text-sm leading-relaxed" style={{ color: selected ? 'var(--mist)' : 'var(--ash)' }}>{step.copy}</p>
                </button>
              );
            })}
          </div>

          <div
            className="relative min-h-[520px] overflow-hidden corner-ticks"
            style={{
              background: 'var(--bg-deep)',
              border: '1px solid var(--rule-strong)',
              opacity: inView ? 1 : 0,
              transform: inView ? 'translateY(0)' : 'translateY(24px)',
              transition: 'opacity 900ms 160ms, transform 900ms 160ms',
            }}
          >
            <span className="tl"></span><span className="tr"></span>
            <div className="absolute inset-0 bp-grid-fine opacity-40"></div>
            <div className="relative p-6 md:p-8">
              <div className="flex items-center justify-between gap-4 mb-10">
                <DimLabel>/ Live operating map</DimLabel>
                <DimLabel>{current.route}</DimLabel>
              </div>

              <div className="grid grid-cols-12 gap-4 min-h-[360px]">
                <div className="col-span-12 md:col-span-7">
                  <div className="font-mono text-[10px] uppercase tracking-wider2 mb-5" style={{ color: 'var(--stone)' }}>Módulo ativo</div>
                  <h3 className="font-serif text-5xl md:text-6xl tracking-tightest leading-[0.95]">{current.label}</h3>
                  <p className="mt-6 max-w-md leading-relaxed" style={{ color: 'var(--ash)' }}>{current.copy}</p>

                  <div className="mt-10 flex flex-wrap gap-2">
                    {[current.route, '/reports', '/suporte'].map((route) => (
                      <span key={route} className="font-mono text-[10px] uppercase tracking-wider2 px-3 py-2" style={{ border: '1px solid var(--rule)', color: 'var(--stone)' }}>
                        {route}
                      </span>
                    ))}
                  </div>
                </div>

                <div className="col-span-12 md:col-span-5">
                  <div className="aspect-square relative border" style={{ borderColor: 'var(--rule)' }}>
                    <div className="absolute inset-8 border" style={{ borderColor: 'var(--rule-strong)' }}></div>
                    <div
                      className="absolute left-8 right-8 h-1 transition-all duration-700"
                      style={{ top: current.id === 'captacao' ? '24%' : current.id === 'proposta' ? '42%' : current.id === 'projeto' ? '60%' : '76%', background: 'var(--sepia)' }}
                    ></div>
                    <div
                      className="absolute w-16 h-16 border transition-all duration-700 flex items-center justify-center font-mono text-[10px]"
                      style={{
                        left: current.id === 'captacao' ? '10%' : current.id === 'proposta' ? '42%' : current.id === 'projeto' ? '64%' : '28%',
                        top: current.id === 'captacao' ? '14%' : current.id === 'proposta' ? '34%' : current.id === 'projeto' ? '52%' : '68%',
                        borderColor: 'var(--ink)',
                        background: 'var(--bg)',
                      }}
                    >
                      {current.number}
                    </div>
                    <div className="absolute bottom-5 left-5 right-5">
                      <DimLabel className="block mb-2">/ Indicador</DimLabel>
                      <div className="font-serif text-4xl tracking-tightest">{current.metric}</div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="mt-10 h-px" style={{ background: 'var(--rule-strong)' }}>
                <div
                  className="h-px transition-all duration-700"
                  style={{ width: `${((experienceSteps.findIndex((step) => step.id === active) + 1) / experienceSteps.length) * 100}%`, background: 'var(--ink)' }}
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Experience = Experience;