import Image from "next/image";
import Link from "./site-link";
import { Breadcrumb } from "./breadcrumb";
import { JsonLd } from "./json-ld";
import { PortalIcon } from "./portal-icon";
import { SITE_URL } from "../lib/metadata";
import { getSolution, portalSolutions, solutionPath, type PortalSolution, type SolutionSlug } from "../lib/solutions";
import { whatsappUrl } from "../lib/whatsapp";
import { ProjectPhoto } from "./project-photo";
import { ProjectGallery } from "./project-gallery";

function SolutionCta({ solution, position }: { solution: PortalSolution; position: "hero" | "final" }) {
  return (
    <a className="button button--primary solution-cta" href={whatsappUrl(solution.message)} data-cta={`solucao_${solution.slug.replaceAll("-", "_")}_${position}`} target="_blank" rel="noopener noreferrer">
      <PortalIcon name="chat" />
      <span>{solution.cta}</span>
      <PortalIcon name="arrow" />
    </a>
  );
}

export function SolutionPage({ slug }: { slug: SolutionSlug }) {
  const solution = getSolution(slug);
  const otherSolutions = portalSolutions.filter((item) => item.slug !== slug);

  return (
    <main id="conteudo-principal" className="solution-page">
      <Breadcrumb items={[{ label: solution.label }]} />
      <JsonLd data={{
        "@context": "https://schema.org",
        "@type": "Service",
        "@id": `${SITE_URL}${solutionPath(slug)}#service`,
        name: solution.label,
        serviceType: solution.label,
        description: solution.seoDescription,
        url: `${SITE_URL}${solutionPath(slug)}`,
        provider: { "@type": "Organization", "@id": `${SITE_URL}/#organization`, name: "Portal Distribuidora", url: `${SITE_URL}/` },
      }} />

      <section className="solution-hero" aria-labelledby="solution-title">
        <div className="shell solution-hero__grid">
          <div className="solution-hero__copy">
            <p className="solution-kicker">{solution.label} · Goiânia</p>
            <h1 id="solution-title">{solution.title}</h1>
            <p className="solution-hero__description">{solution.description}</p>
            <SolutionCta solution={solution} position="hero" />
            <p className="solution-microcopy">Conversa pelo WhatsApp. Sem cadastro no site.</p>
            <a className="solution-text-link" href="#preparar-cotacao">O que informar para cotar<PortalIcon name="arrow" /></a>
          </div>
          <figure className={`solution-hero__media${solution.projectPhoto ? ' solution-hero__media--real' : ''}`}>
            {solution.projectPhoto ? <ProjectPhoto photo={solution.projectPhoto} priority /> : <Image src={solution.image} alt={solution.imageAlt} width={1000} height={700} priority sizes="(max-width: 900px) 100vw, 45vw" />}
            <figcaption>{solution.projectPhoto?.caption ?? 'Imagem ilustrativa da aplicação.'}</figcaption>
          </figure>
        </div>
        <div className="shell solution-audience"><PortalIcon name="check" /><p>{solution.audience}</p></div>
      </section>

      <section className="shell solution-section" aria-labelledby="solution-scope-title">
        <div className="solution-section__heading">
          <div><p className="solution-kicker">Aplicação antes da proposta</p><h2 id="solution-scope-title">{solution.contextTitle}</h2></div>
          <p>{solution.context}</p>
        </div>
        <div className="solution-topics">
          {solution.topics.map((topic) => <article key={topic.title}><PortalIcon name={slug === "paineis-eletricos" ? "panel" : slug === "engenharia-eletrica" ? "list" : "breaker"} /><h3>{topic.title}</h3><p>{topic.description}</p></article>)}
        </div>
      </section>

      {slug === 'paineis-eletricos' && <ProjectGallery />}

      <section className="solution-preparation" id="preparar-cotacao" aria-labelledby="preparation-title">
        <div className="shell solution-preparation__grid">
          <div>
            <p className="solution-kicker">Uma conversa mais objetiva</p>
            <h2 id="preparation-title">Traga o que você já sabe. Começamos por aí.</h2>
            <p>Não precisa ter todas as respostas para entrar em contato. Estas informações ajudam a apresentar a sua necessidade.</p>
            <div className="solution-privacy"><PortalIcon name="list" /><p>Compartilhe somente o necessário. Remova dados pessoais, credenciais e informações confidenciais antes de enviar documentos pelo canal combinado com a equipe.</p></div>
          </div>
          <ul className="solution-preparation__list">
            {solution.preparation.map((item) => <li key={item.title}><PortalIcon name="check" /><div><h3>{item.title}</h3><p>{item.description}</p></div></li>)}
          </ul>
        </div>
      </section>

      <section className="shell solution-section" aria-labelledby="solution-catalog-title">
        <div className="solution-section__heading"><div><p className="solution-kicker">Materiais para sua demanda</p><h2 id="solution-catalog-title">Explore as linhas relacionadas.</h2></div><p>Já tem a especificação? Encontre referências no catálogo e leve os itens para a cotação.</p></div>
        <div className="solution-categories">{solution.categories.map((category) => <Link key={category.href} href={category.href}><h3>{category.title}</h3><p>{category.description}</p><span>Explorar a linha<PortalIcon name="arrow" /></span></Link>)}</div>
      </section>

      <section className="shell solution-faq" aria-labelledby="solution-faq-title">
        <div><p className="solution-kicker">Antes de solicitar a proposta</p><h2 id="solution-faq-title">Dúvidas que ajudam a começar.</h2></div>
        <div>{solution.faq.map((item) => <details key={item.question}><summary>{item.question}</summary><p>{item.answer}</p></details>)}</div>
      </section>

      <section className="solution-final" aria-labelledby="solution-final-title"><div className="shell solution-final__grid"><div><p className="solution-kicker">Fale com a Portal</p><h2 id="solution-final-title">{solution.closingTitle}</h2><p>{solution.closingDescription}</p></div><div><SolutionCta solution={solution} position="final" /><p className="solution-microcopy">O WhatsApp abre uma mensagem que você pode revisar antes de enviar.</p></div></div></section>

      <nav className="shell solution-related" aria-label="Outras soluções da Portal"><p>Conheça também</p>{otherSolutions.map((item) => <Link key={item.slug} href={solutionPath(item.slug)}>{item.label}<PortalIcon name="arrow" /></Link>)}</nav>
    </main>
  );
}