import { motion } from "motion/react";
import { Link } from "react-router-dom";
import { MapPin, ArrowRight } from "lucide-react";
import { Helmet } from "react-helmet-async";
import { Article } from "../data/articles";

export function PortfolioPage({ propertiesAsArticles }: { propertiesAsArticles: Article[] }) {
  return (
    <>
      <Helmet>
        <title>Portfólio de Luxo | Rafael Fontes</title>
        <meta name="description" content="Explore propriedades de alto padrão e luxo em São Paulo. Casas e apartamentos em bairros como Itaim Bibi e Jardins, além de opções off-market exclusivas." />
        <meta property="og:title" content="Portfólio de Luxo | Rafael Fontes" />
        <meta property="og:description" content="Explore propriedades de alto padrão e luxo em São Paulo. Casas e apartamentos em bairros como Itaim Bibi e Jardins." />
        <meta property="og:type" content="website" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Portfólio de Luxo | Rafael Fontes" />
        <meta name="twitter:description" content="Explore propriedades de alto padrão e luxo em São Paulo." />
        <script type="application/ld+json">
          {JSON.stringify({
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [{
              "@type": "ListItem",
              "position": 1,
              "name": "Home",
              "item": "https://rafaelfontes.com.br/"
            },{
              "@type": "ListItem",
              "position": 2,
              "name": "Portfólio",
              "item": "https://rafaelfontes.com.br/portfolio"
            }]
          })}
        </script>
      </Helmet>
      <div className="pt-32 pb-24 bg-zinc-50 min-h-screen">
      <div className="max-w-7xl mx-auto px-6 lg:px-8">
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-24">
          <div className="max-w-2xl">
            <span className="text-xs uppercase tracking-[0.2em] text-zinc-400 font-bold block mb-4">
              Destaques do Portfólio
            </span>
            <h1 className="text-4xl md:text-5xl font-serif text-zinc-900 leading-tight">
              Apresentação de Imóveis
            </h1>
          </div>
          <p className="text-zinc-500 font-light max-w-sm">
            Cada propriedade é tratada como um estudo de caso. Analiso a
            arquitetura, a viabilidade e o potencial do ativo antes de
            apresentá-lo.
          </p>
        </div>

        <div className="space-y-32">
          {propertiesAsArticles.map((property, index) => (
            <motion.article
              key={property.id}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-100px" }}
              transition={{ duration: 0.8 }}
              className={`flex flex-col ${index % 2 !== 0 ? "md:flex-row-reverse" : "md:flex-row"} gap-12 lg:gap-20 items-center group`}
            >
              {/* Image Side */}
              <div className="w-full md:w-3/5">
                <Link
                  to={`/artigo/${property.id}`}
                  className="block relative aspect-[16/11] overflow-hidden bg-zinc-100"
                >
                  <img
                    src={property.coverImage}
                    alt={property.title}
                    loading={index === 0 ? "eager" : "lazy"}
                    className="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-[1.5s] ease-out"
                  />
                  <div className="absolute top-6 left-6 bg-white/90 backdrop-blur px-4 py-2 text-xs font-bold uppercase tracking-wider text-zinc-900">
                    {property.details?.status || "Exclusividade"}
                  </div>
                </Link>
              </div>

              {/* Content Side */}
              <div className="w-full md:w-2/5 flex flex-col justify-center">
                <div className="flex items-center gap-3 text-brand-gold text-sm font-semibold uppercase tracking-wider mb-4">
                  <MapPin size={16} />
                  <span>{property.category}</span>
                </div>

                <Link to={`/artigo/${property.id}`}>
                  <h3 className="text-3xl lg:text-4xl font-serif text-zinc-900 leading-tight mb-6 hover:text-brand-gold transition-colors">
                    {property.title}
                  </h3>
                </Link>

                <p className="text-zinc-600 font-light leading-relaxed mb-8">
                  {property.excerpt}
                </p>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8 py-6 border-y border-zinc-100">
                  <div>
                    <span className="block text-xs uppercase tracking-widest text-zinc-400 font-semibold mb-1">
                      Características
                    </span>
                    <span className="text-zinc-900 font-medium">
                      {property.details?.specs}
                    </span>
                  </div>
                  <div>
                    <span className="block text-xs uppercase tracking-widest text-zinc-400 font-semibold mb-1">
                      Preço Solicitado
                    </span>
                    <span className="text-zinc-900 font-serif text-xl">
                      {property.details?.price}
                    </span>
                  </div>
                </div>

                <Link
                  to={`/artigo/${property.id}`}
                  className="inline-flex items-center gap-3 text-xs font-bold uppercase tracking-[0.1em] text-zinc-900 group-hover:text-brand-gold transition-colors w-fit"
                >
                  Acessar Dossier Completo{" "}
                  <ArrowRight
                    size={16}
                    className="group-hover:translate-x-1 transition-transform"
                  />
                </Link>
              </div>
            </motion.article>
          ))}
        </div>

        <div className="mt-24 text-center">
          <Link
            to="/contato"
            className="inline-flex items-center gap-3 border border-zinc-300 px-8 py-4 text-xs font-bold uppercase tracking-[0.1em] text-zinc-900 hover:bg-zinc-900 hover:text-white hover:border-zinc-900 transition-all duration-300"
          >
            Solicitar Lista Completa (Opções Off-Market)
          </Link>
        </div>
      </div>
    </div>
    </>
  );
}