import { useState } from 'react';
import { HOME_SECTION, HOME_SECTION_HEADING } from '@/lib/portal-presentation';

const steps = [
    {
        key: 'explorar',
        title: '1. Explorar',
        description: 'Identifique o sector, território e oportunidade.',
        href: '/oportunidades',
        alt: 'Dois profissionais avaliam uma oportunidade de investimento no terreno com apoio de um tablet.',
    },
    {
        key: 'preparar',
        title: '2. Preparar',
        description: 'Conheça o percurso e organize os documentos.',
        href: '/como-investir',
        alt: 'Empreendedora e consultor analisam documentos e organizam pastas numa reunião de preparação.',
    },
    {
        key: 'acompanhar',
        title: '3. Acompanhar',
        description: 'Envie o pedido e acompanhe o protocolo.',
        href: '/balcao-virtual',
        alt: 'Empreendedor consulta um pedido no computador portátil numa secretária de escritório.',
    },
];

function StepImage({ name, alt }: { name: string; alt: string }) {
    const [fallback, setFallback] = useState(0);
    const base = `/images/investment-steps/${name}`;

    return (
        <div className="aspect-video w-full shrink-0 overflow-hidden bg-slate-100">
            {fallback < 2 ? (
                <img
                    src={`${base}${fallback ? '-fallback' : ''}.webp`}
                    srcSet={
                        fallback
                            ? undefined
                            : `${base}-480.webp 480w, ${base}.webp 960w`
                    }
                    sizes="(min-width: 1152px) 357px, (min-width: 768px) 33vw, 100vw"
                    alt={alt}
                    width={960}
                    height={540}
                    loading="lazy"
                    decoding="async"
                    className="h-full w-full object-cover object-center"
                    onError={() =>
                        setFallback((current) => Math.min(current + 1, 2))
                    }
                />
            ) : (
                <span
                    role="img"
                    aria-label={alt}
                    className="flex h-full items-center justify-center px-4 text-center text-sm text-slate-600"
                >
                    Imagem indisponível
                </span>
            )}
        </div>
    );
}

export default function InvestmentSteps() {
    return (
        <section
            aria-labelledby="investment-steps-heading"
            className={`${HOME_SECTION} space-y-4`}
        >
            <h2 id="investment-steps-heading" className={HOME_SECTION_HEADING}>
                Como Investir
            </h2>
            <div className="grid gap-5 md:grid-cols-3">
                {steps.map((step) => (
                    <a
                        key={step.key}
                        href={step.href}
                        aria-labelledby={`step-${step.key}-title`}
                        aria-describedby={`step-${step.key}-description`}
                        className="flex h-full min-w-0 flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition-colors hover:border-[#ed1c24] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#ed1c24]"
                    >
                        <StepImage name={step.key} alt={step.alt} />
                        <div className="space-y-1.5 p-4">
                            <h3
                                id={`step-${step.key}-title`}
                                className="text-lg leading-6 font-bold text-slate-900"
                            >
                                {step.title}
                            </h3>
                            <p
                                id={`step-${step.key}-description`}
                                className="text-sm leading-5 text-slate-600"
                            >
                                {step.description}
                            </p>
                        </div>
                    </a>
                ))}
            </div>
        </section>
    );
}