'use client';

import { useCallback, useEffect, useRef, useState } from 'react';
import Image from 'next/image';
import Link from './site-link';
import { PortalIcon, type PortalIconName } from './portal-icon';
import { whatsappUrl } from '../lib/whatsapp';

type CustomerSegment = {
  id: string; name: string; icon: PortalIconName; context: string;
  question: string; impact: string; solution: string;
  prepare: string; cta: string; message: string;
  image: string;
};

// Situation → problem/implication → useful next step, without stock or delivery promises.
const segments: CustomerSegment[] = [
  {
    id: 'construtoras', name: 'Construção e incorporação', icon: 'building', context: 'DA INFRAESTRUTURA AO ACABAMENTO',
    image: '/images/segmento-construcao-obra.jpg',
    question: 'Qual é a próxima etapa da sua obra?',
    impact: 'Um item faltando pode atrasar a equipe e exigir uma nova compra.',
    solution: 'Reúna cabos, proteção e iluminação em uma cotação organizada por etapa e quantidade.',
    prepare: 'Comece pela lista e pela etapa da obra.',
    cta: 'Cotar materiais da obra',
    message: 'Represento uma construtora ou incorporadora e quero organizar a cotação de materiais por etapa da obra. Posso informar os itens, as quantidades e a previsão de uso. A próxima etapa é:',
  },
  {
    id: 'agronegocio', name: 'Agronegócio', icon: 'sprout', context: 'ENERGIA PARA A OPERAÇÃO RURAL',
    image: '/images/segmento-agronegocio-irrigacao.jpg',
    question: 'Irrigação, bombeamento ou manutenção?',
    impact: 'Uma especificação incompleta pode virar outra viagem e adiar o serviço no campo.',
    solution: 'Confira comandos, acionamentos e proteção antes de sair. Consulte as condições para sua região.',
    prepare: 'Informe a aplicação e a cidade de destino.',
    cta: 'Planejar minha compra rural',
    message: 'Tenho uma demanda de materiais elétricos para uma instalação rural e quero planejar a compra antes de me deslocar. Gostaria de consultar os componentes e as condições para minha região. Minha aplicação e cidade são:',
  },
  {
    id: 'industrias', name: 'Indústria e manutenção', icon: 'factory', context: 'REPOSIÇÃO, COMANDO E ACIONAMENTO',
    image: '/images/automacao-industrial.webp',
    question: 'Vai repor uma peça ou ampliar a operação?',
    impact: 'Uma referência incompatível pode prolongar a parada e gerar uma nova compra.',
    solution: 'Converse sobre componentes, inversores e painéis a partir da aplicação e das referências do projeto.',
    prepare: 'Traga a referência e o prazo de que precisa.',
    cta: 'Consultar minha demanda',
    message: 'Falo de uma indústria e quero consultar materiais ou painéis para reposição, manutenção ou ampliação. Gostaria de alinhar aplicação, referências e prazo necessário. Minha demanda é:',
  },
  {
    id: 'engenharia', name: 'Engenharia e projetos', icon: 'drafting', context: 'DA ESPECIFICAÇÃO À COTAÇÃO',
    image: '/images/engenharia.webp',
    question: 'Seu projeto já tem os materiais definidos?',
    impact: 'Uma troca sem avaliação técnica pode gerar incompatibilidade e retrabalho.',
    solution: 'Cote pelas especificações e alinhe alternativas com o responsável técnico antes de comprar.',
    prepare: 'Compartilhe só os requisitos necessários, sem dados confidenciais.',
    cta: 'Conversar sobre meu projeto',
    message: 'Trabalho com engenharia e quero conversar sobre o projeto, os painéis ou os materiais especificados. Posso compartilhar os requisitos necessários, sem dados confidenciais. Meu cenário é:',
  },
  {
    id: 'eletricistas', name: 'Eletricistas e instaladores', icon: 'tool', context: 'INSTALAÇÃO E MANUTENÇÃO',
    image: '/images/electricista-painel.jpg',
    question: 'Já tem a lista do seu próximo serviço?',
    impact: 'Sair para buscar uma peça ou voltar com o item errado pode custar outra visita ao cliente.',
    solution: 'Consulte referências e quantidades antes de se deslocar. Organize os materiais do atendimento.',
    prepare: 'Comece pela lista ou pela referência da peça.',
    cta: 'Consultar materiais do serviço',
    message: 'Sou eletricista ou instalador e quero consultar materiais antes de me deslocar. Posso enviar a lista ou a referência da peça, a quantidade e a aplicação. Meu próximo serviço é:',
  },
];

export function HomeSegments() {
  const track = useRef<HTMLDivElement>(null);
  const [active, setActive] = useState(0);
  const activeRef = useRef(0);
  const move = useCallback((index: number, instant = false) => {
    const area = track.current;
    const card = area?.children[index] as HTMLElement | undefined;
    if (!area || !card) return;
    activeRef.current = index;
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    area.scrollTo({ left: card.offsetLeft - (area.clientWidth - card.offsetWidth) / 2, behavior: instant || reduced ? 'instant' : 'smooth' });
  }, []);

  useEffect(() => {
    const area = track.current;
    if (!area) return;
    let frame = 0;
    let lastWheel = 0;
    let lastMove = 0;
    let accumulated = 0;
    const update = () => {
      cancelAnimationFrame(frame);
      frame = requestAnimationFrame(() => {
        const center = area.scrollLeft + area.clientWidth / 2;
        const cards = Array.from(area.children) as HTMLElement[];
        const nearest = cards.reduce((best, card, i) => Math.abs(card.offsetLeft + card.offsetWidth / 2 - center) < Math.abs(cards[best].offsetLeft + cards[best].offsetWidth / 2 - center) ? i : best, 0);
        activeRef.current = nearest;
        setActive(nearest);
      });
    };
    const wheel = (event: WheelEvent) => {
      const rect = area.getBoundingClientRect();
      // Never capture zoom, horizontal trackpad gestures or a card too tall to read.
      if (event.ctrlKey || event.metaKey || Math.abs(event.deltaX) >= Math.abs(event.deltaY) || !window.matchMedia('(pointer: fine)').matches || rect.top < 80 || rect.bottom > window.innerHeight - 12) return;
      const now = performance.now();
      const direction = Math.sign(event.deltaY);
      const index = activeRef.current;
      if (now - lastMove < 650) { event.preventDefault(); return; }
      if ((direction < 0 && index === 0) || (direction > 0 && index === segments.length - 1)) return;
      event.preventDefault();
      if (now - lastWheel > 180 || Math.sign(accumulated) !== direction) accumulated = 0;
      lastWheel = now;
      accumulated += event.deltaY * (event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? area.clientHeight : 1);
      if (Math.abs(accumulated) < 30) return;
      lastMove = now;
      accumulated = 0;
      move(index + direction);
    };
    const followHash = () => {
      const index = segments.findIndex(segment => '#' + segment.id === window.location.hash);
      if (index >= 0) move(index, true);
    };
    followHash();
    window.addEventListener('hashchange', followHash);
    const resize = new ResizeObserver(() => move(activeRef.current, true));
    resize.observe(area);
    area.addEventListener('scroll', update, { passive: true });
    area.addEventListener('wheel', wheel, { passive: false });
    return () => { cancelAnimationFrame(frame); resize.disconnect(); window.removeEventListener('hashchange', followHash); area.removeEventListener('scroll', update); area.removeEventListener('wheel', wheel); };
  }, [move]);

  return <section className="shell ph-section ph-audiences" id="segmentos" aria-labelledby="segments-title">
    <div className="ph-heading"><div><p className="ph-kicker">QUEM ATENDEMOS</p><h2 id="segments-title">Atendimento para cada segmento.</h2></div><div><p>Obra, campo, indústria, projeto ou instalação. Encontre sua frente e comece a conversa pela sua necessidade.</p><Link className="ph-link" href="/empresas">Atendimento para empresas <PortalIcon name="arrow" /></Link></div></div>
    <div className="ph-segment-carousel" role="region" aria-roledescription="carrossel" aria-label="Frentes de atendimento">
    {/* A native overflow region is focusable so keyboard users can scroll without dragging. */}
    {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-noninteractive-element-interactions */}
    <div className="ph-segments__track" id="segment-track" ref={track} role="group" tabIndex={0} aria-label="Segmentos: use as setas esquerda e direita" onKeyDown={event => {
      if (event.target !== event.currentTarget) return;
      const index = event.key === 'ArrowRight' ? Math.min(active + 1, segments.length - 1) : event.key === 'ArrowLeft' ? Math.max(active - 1, 0) : event.key === 'Home' ? 0 : event.key === 'End' ? segments.length - 1 : null;
      if (index !== null) { event.preventDefault(); move(index); }
    }}>{segments.map((segment, index) =>
      <article className="ph-audience" id={segment.id} key={segment.id} aria-labelledby={segment.id + '-title'} data-position={index === active ? 'active' : index < active ? 'before' : 'after'} onFocus={() => move(index)}>
        <header className={`ph-audience__header${segment.image ? ' ph-audience__header--photo' : ''}`}>
          {segment.image && <Image className="ph-audience__photo" src={segment.image} alt="" fill sizes="(max-width: 760px) 90vw, 380px" />}
          <span className="ph-audience__icon"><PortalIcon name={segment.icon} /></span>
          <p className="ph-audience__context">{segment.context}</p>
          <h3 id={segment.id + '-title'}>{segment.name}</h3>
        </header>
        <div className="ph-audience__body">
          <h4>{segment.question}</h4>
          <div className="ph-audience__point"><PortalIcon name="help" /><div><span>O que está em jogo</span><p>{segment.impact}</p></div></div>
          <div className="ph-audience__point ph-audience__point--solution"><PortalIcon name="check" /><div><span>Como a Portal ajuda</span><p>{segment.solution}</p></div></div>
        </div>
        <footer className="ph-audience__next">
          <a data-cta={'segmento_' + segment.id} href={whatsappUrl('Olá, Portal! ' + segment.message)} target="_blank" rel="noopener noreferrer"><PortalIcon name="chat" /><span>{segment.cta}</span><PortalIcon name="arrow" /></a>
          <p>{segment.prepare}</p>
        </footer>
      </article>
    )}</div>
    <div className="ph-segments__controls">
      <p className="ph-segments__hint">Deslize ou use as setas. <span>No computador, role sobre o cartão.</span></p>
      <div><button type="button" data-track-id="segmento_anterior" aria-label="Segmento anterior" aria-controls="segment-track" disabled={active === 0} onClick={() => move(active - 1)}><PortalIcon name="arrow" /></button><span role="status" aria-live="polite" aria-atomic="true"><span className="ph-segments__sr">{segments[active].name}. Segmento </span>{active + 1} / {segments.length}</span><button type="button" data-track-id="segmento_proximo" aria-label="Próximo segmento" aria-controls="segment-track" disabled={active === segments.length - 1} onClick={() => move(active + 1)}><PortalIcon name="arrow" /></button></div>
    </div>
    </div>
  </section>;
}