import Image from 'next/image';
import Link from 'next/link';
import { getMediaUrl } from '@/lib/api';
import { Icon } from '@iconify/react';
import { ArrowRight, MapPin, Box, Layers, Hash } from 'lucide-react';

export function CallOutPanel2({ callOuts, domain }: { callOuts: any[], domain?: any }) {
  if (!callOuts || callOuts.length === 0) return null;

  return (
    <section id="features" className="w-full py-16 lg:py-24 bg-muted/30">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-12">
        <div className="mb-16 space-y-4">
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
            {domain?.call_out_title || 'Kenapa Memilih Kami?'}
          </h2>
          <p className="max-w-2xl text-muted-foreground text-lg">
            {domain?.call_out_description || 'Kami memberikan keunggulan dan fitur terbaik untuk memenuhi kebutuhan Anda.'}
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {callOuts.map((callOut, index) => (
            <div key={index} className="group relative p-10 rounded-[2rem] bg-card border border-border hover:border-primary/50 transition-all duration-500 hover:shadow-2xl hover:shadow-primary/5 hover:-translate-y-1">
              <div className="absolute top-0 right-0 p-8 opacity-[0.03] group-hover:opacity-[0.08] transition-opacity duration-500">
                 <Icon icon={callOut.media || 'mdi:star'} className="w-32 h-32" />
              </div>
              
              <div className="relative z-10 space-y-6">
                <div className="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center text-primary group-hover:scale-110 transition-transform duration-500">
                  <Icon icon={callOut.media || 'mdi:check'} className="w-7 h-7" />
                </div>
                
                <div className="space-y-3">
                  <h3 className="text-2xl font-bold tracking-tight text-foreground">
                    {callOut.title}
                  </h3>
                  <p className="text-muted-foreground leading-relaxed">
                    {callOut.description}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export function CallOutPanel({ callOuts }: { callOuts: any[] }) {
  if (!callOuts || callOuts.length === 0) return null;

  return (
    <div className="flex flex-col gap-12 py-16 lg:py-24 bg-background">
      {callOuts.map((callOut, index) => (
        <section key={callOut.id} className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-12">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-24 items-center">
             <div className={index % 2 === 0 ? 'lg:order-1' : 'lg:order-2'}>
                <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight mb-6">
                   {callOut.title}
                </h2>
                <p className="text-lg text-muted-foreground leading-relaxed mb-8">
                   {callOut.description}
                </p>
                <div className="flex items-center gap-2 text-primary font-bold">
                   <span>Pelajari Lebih Lanjut</span>
                   <ArrowRight className="w-5 h-5" />
                </div>
             </div>
             
             <div className={index % 2 === 0 ? 'lg:order-2' : 'lg:order-1'}>
                <div className="relative aspect-video lg:aspect-square overflow-hidden rounded-[3rem] bg-muted shadow-2xl">
                   {callOut.media && (callOut.media_type === 'image' || callOut.media_type === 1) ? (
                      <Image 
                        src={getMediaUrl(callOut.media)} 
                        alt={callOut.title} 
                        fill 
                        className="object-cover" 
                      />
                   ) : (
                      <div className="w-full h-full flex items-center justify-center">
                         <Icon icon={callOut.media || 'mdi:image-outline'} className="w-32 h-32 text-muted-foreground/30" />
                      </div>
                   )}
                </div>
             </div>
          </div>
        </section>
      ))}
    </div>
  );
}

export function CategoryPanel({ categories, domain }: { categories: any[], domain?: any }) {
  if (!categories || categories.length === 0) return null;

  return (
    <section id="categories" className="w-full py-16 lg:py-24 bg-card border-y border-border">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-12">
        <div className="flex flex-col md:flex-row items-start md:items-end justify-between gap-6 mb-16">
          <div className="space-y-4">
            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
              {domain?.category_title || 'Kategori Populer'}
            </h2>
            <p className="max-w-xl text-muted-foreground text-lg">
              {domain?.category_description || 'Temukan berbagai pilihan properti berdasarkan kategori yang paling diminati.'}
            </p>
          </div>
        </div>
        
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {categories.map((cat, i) => (
            <div key={cat.id} className={i === 0 ? 'col-span-2 row-span-2' : ''}>
               <div className="group relative h-full min-h-[200px] overflow-hidden rounded-[2rem] bg-muted border border-border transition-all duration-500">
                  {cat.media ? (
                    <Image
                      src={getMediaUrl(cat.media)}
                      alt={cat.name}
                      fill
                      className="object-cover transition-transform duration-1000 group-hover:scale-110"
                    />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center bg-primary/5">
                       <Icon icon="mdi:home-variant" className="w-12 h-12 text-primary/20" />
                    </div>
                  )}
                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
                  <div className="absolute bottom-0 left-0 p-6 sm:p-8">
                     <h3 className={i === 0 ? 'text-2xl sm:text-3xl font-bold text-white' : 'text-xl font-bold text-white'}>
                        {cat.name}
                     </h3>
                     {cat.description && i === 0 && (
                       <p className="text-white/70 text-sm mt-2 line-clamp-2 max-w-xs">{cat.description}</p>
                     )}
                  </div>
               </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export function BrandPanel({ brands, domain }: { brands: any[], domain?: any }) {
  if (!brands || brands.length === 0) return null;

  return (
    <section id="brands" className="w-full py-12 bg-background overflow-hidden border-b border-border">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-12 flex flex-col lg:flex-row items-center gap-12">
        <div className="shrink-0 text-center lg:text-left">
           <h3 className="text-sm font-bold uppercase tracking-widest text-muted-foreground mb-1">Trusted By</h3>
           <p className="text-2xl font-bold">Mitra Utama Kami</p>
        </div>
        
        <div className="flex-1 overflow-hidden relative">
           <div className="flex animate-marquee-left whitespace-nowrap gap-12 items-center">
              {[...brands, ...brands].map((brand, idx) => (
                <div key={`${brand.id}-${idx}`} className="flex-shrink-0 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-500 px-4">
                  {brand.media ? (
                    <Image
                      src={getMediaUrl(brand.media)}
                      alt={brand.name}
                      width={120}
                      height={40}
                      className="object-contain h-8 w-auto"
                    />
                  ) : (
                    <span className="text-lg font-bold">{brand.name}</span>
                  )}
                </div>
              ))}
           </div>
        </div>
      </div>
    </section>
  );
}

export function PostPanel({ posts, domain }: { posts: any[], domain?: any }) {
  if (!posts || posts.length === 0) return null;

  return (
    <section id="posts" className="w-full py-16 lg:py-24 bg-background">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-12">
        <div className="flex flex-col md:flex-row items-start md:items-end justify-between gap-6 mb-16">
          <div className="space-y-4">
            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
              {domain?.post_title || 'Update Terbaru'}
            </h2>
            <p className="max-w-xl text-muted-foreground text-lg">
              {domain?.post_description || 'Telusuri artikel dan pembaruan terbaru seputar dunia properti dan gaya hidup.'}
            </p>
          </div>
          <Link
            href="/pemasangan"
            className="group inline-flex h-14 items-center justify-center rounded-2xl border-2 border-border bg-transparent px-8 text-base font-bold transition-all hover:bg-foreground hover:text-background hover:border-foreground"
          >
            Lihat Semua Pos
          </Link>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
          {posts.map(post => (
            <article key={post.id} className="group flex flex-col space-y-6">
              <Link href={`/post/${post.slug}`} className="block relative aspect-[4/3] overflow-hidden rounded-[2.5rem] bg-muted shadow-lg">
                {post.media ? (
                  <Image
                    src={getMediaUrl(post.media)}
                    alt={post.title}
                    fill
                    className="object-cover transition-transform duration-700 group-hover:scale-110"
                  />
                ) : (
                  <div className="w-full h-full flex items-center justify-center bg-primary/5">
                     <Icon icon="mdi:text-box-outline" className="w-16 h-16 text-primary/20" />
                  </div>
                )}
                <div className="absolute top-6 left-6">
                   <div className="px-4 py-2 bg-white/90 backdrop-blur-md rounded-full text-xs font-bold text-black shadow-lg">
                      {post.category?.name || 'Properti'}
                   </div>
                </div>
              </Link>
            
              <div className="space-y-4 px-2">
                <Link href={`/post/${post.slug}`} className="block hover:text-primary transition-colors">
                  <h3 className="text-2xl font-bold leading-snug tracking-tight line-clamp-2">
                    {post.title}
                  </h3>
                </Link>
                
                <div className="flex flex-wrap gap-4 text-sm text-muted-foreground">
                  <div className="flex items-center gap-1.5">
                    <MapPin className="w-4 h-4 text-primary" />
                    <span>{post.city?.name || 'Jakarta'}</span>
                  </div>
                  <div className="flex items-center gap-1.5">
                    <Box className="w-4 h-4 text-primary" />
                    <span>{post.product?.name || 'Unit'}</span>
                  </div>
                </div>

                <div className="pt-2">
                   <Link 
                     href={`/post/${post.slug}`} 
                     className="inline-flex items-center gap-2 font-bold text-foreground group-hover:text-primary transition-colors"
                   >
                     <span>Baca Selengkapnya</span>
                     <ArrowRight className="w-5 h-5 translate-x-0 group-hover:translate-x-1 transition-transform" />
                   </Link>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}