import Image from "next/image";
import Link from "next/link";

function IconFacebook({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
    </svg>
  );
}

function IconInstagram({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
      <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.92-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.92-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
    </svg>
  );
}

function IconLinkedIn({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
    </svg>
  );
}

function IconYouTube({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
    </svg>
  );
}

function IconX({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
    </svg>
  );
}

/** Apple-style footer social: flat icon, no pill border */
const footerSocialIconClass =
  "text-[#6e6e73] transition-colors hover:text-[#1d1d1f] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0071e3]";

const destaques = [
  {
    cat: "FAMOSOS",
    catColor: "text-pink-600",
    title: "Cerimónia reúne estrelas nacionais e internacionais em Lisboa.",
    date: "24 Mar 2025",
    img: "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=600&q=80",
  },
  {
    cat: "NEGÓCIOS",
    catColor: "text-[#0066cc]",
    title: "Mercados reagem às novas projeções de crescimento para a região.",
    date: "24 Mar 2025",
    img: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&q=80",
  },
  {
    cat: "DESPORTO",
    catColor: "text-emerald-600",
    title: "Taça: equipa da casa garante lugar nas meias com exibição sólida.",
    date: "23 Mar 2025",
    img: "https://images.unsplash.com/photo-1574629810360-7efbbe195018?w=600&q=80",
  },
  {
    cat: "DESPORTO",
    catColor: "text-emerald-600",
    title: "Taça: equipa da casa garante lugar nas meias com exibição sólida.",
    date: "23 Mar 2025",
    img: "https://images.unsplash.com/photo-1574629810360-7efbbe195018?w=600&q=80",
  },
];

const recentes = [
  {
    cat: "EM FOCO",
    catBg: "bg-pink-100 text-pink-700",
    title: "Governo anuncia medidas para apoiar famílias e pequenas empresas.",
    excerpt: "Pacote inclui linhas de crédito e simplificação de procedimentos.",
    byline: "Por Redação",
    date: "24 Mar 2025",
    img: "https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=200&q=80",
  },
  {
    cat: "ECONOMIA",
    catBg: "bg-amber-100 text-amber-800",
    title: "Inflação desce pelo terceiro mês consecutivo, segundo dados preliminares.",
    excerpt: "Analistas mantêm cautela face ao cenário internacional.",
    byline: "Por Economia",
    date: "24 Mar 2025",
    img: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=200&q=80",
  },
  {
    cat: "CULTURA",
    catBg: "bg-violet-100 text-violet-800",
    title: "Museu inaugura exposição com obras inéditas de artistas locais.",
    excerpt: "Visitas guiadas e programa educativo arrancam no próximo fim de semana.",
    byline: "Por Cultura",
    date: "23 Mar 2025",
    img: "https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=200&q=80",
  },
  {
    cat: "SAÚDE",
    catBg: "bg-emerald-100 text-emerald-800",
    title: "Campanha de vacinação alarga faixas etárias em todo o país.",
    excerpt: "Autoridades de saúde reforçam importância da adesão às janelas recomendadas.",
    byline: "Por Saúde",
    date: "23 Mar 2025",
    img: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=200&q=80",
  },
];

const aSeguir = [
  {
    title: "Mercado imobiliário: especialistas explicam tendências para 2025.",
    date: "23 Mar",
    img: "https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=120&q=80",
  },
  {
    title: "Cinema: estreia nacional bate recordes de bilheteira no primeiro fim de semana.",
    date: "22 Mar",
    img: "https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?w=120&q=80",
  },
  {
    title: "Ambiente: projeto de reflorestação ultrapassa meta anual em três meses.",
    date: "22 Mar",
    img: "https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=120&q=80",
  },
];

export function TvoneDestaques() {
  return (
    <section className="mx-auto w-full max-w-[1200px] px-4 pb-10">
      <h2 className="mb-6 text-2xl font-bold tracking-tight text-neutral-900">
        Destaques
      </h2>
      <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
        {destaques.map((item) => (
          <article
            key={item.title}
            className="group cursor-pointer bg-white transition"
          >
            <Link href="#" className="block">
              {/* IMAGE CONTAINER */}
              <div className="relative aspect-[16/9] w-full overflow-hidden rounded-2xl bg-neutral-900 shadow-sm transition-all duration-300 group-hover:shadow-xl group-hover:shadow-neutral-200">
                <Image
                  src={item.img}
                  alt=""
                  fill
                  className="object-cover transition duration-500 group-hover:scale-110"
                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
                />

                {/* GRADIENT OVERLAY (For readability) */}
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-80" />

                {/* NEW INTERNAL LABEL */}
                <div className="absolute bottom-3 left-3 z-10">
                  <span className="rounded-lg bg-black/50 px-2 py-1 text-[10px] font-bold uppercase tracking-widest text-white backdrop-blur-md border border-white/10">
                    {item.cat}
                  </span>
                </div>
              </div>

              {/* TEXT CONTENT (Simplified) */}
              <div className="py-4">
                <h3 className="line-clamp-2 text-[15px] font-bold leading-tight text-neutral-900 transition-colors group-hover:text-[#0066cc] md:text-[16px]">
                  {item.title}
                </h3>
                <div className="mt-2 flex items-center gap-2">
                   <p className="text-[11px] font-medium text-neutral-400">{item.date}</p>
                </div>
              </div>
            </Link>
          </article>
        ))}
      </div>
    </section>
  );
}


export function TvoneMainColumns() {
  return (
    <section className="mx-auto w-full max-w-[1200px] px-4 pb-16">
      {/* SECTION HEADER */}
      <div className="mb-10 flex items-end justify-between border-b border-neutral-100 pb-5">
        <h2 className="text-3xl font-extrabold tracking-tight text-neutral-900">Notícias Recentes</h2>
        <Link href="#" className="text-sm font-bold text-blue-600 hover:opacity-70 transition">
          Ver Histórico
        </Link>
      </div>

      {/* TWO COLUMN GRID OF HORIZONTAL CARDS */}
      <div className="grid gap-x-10 gap-y-12 md:grid-cols-2">
        {recentes.map((item) => (
          <article key={item.title} className="group cursor-pointer">
            <Link href="#" className="flex flex-row items-start gap-5">
              
              {/* 1. IMAGE SIDE (Fixed width on desktop) */}
              <div className="relative aspect-[16/9] w-32 shrink-0 overflow-hidden rounded-2xl bg-neutral-100 shadow-sm transition-all duration-500 group-hover:shadow-lg sm:w-44 md:w-48 lg:w-56">
                <Image 
                  src={item.img} 
                  alt="" 
                  fill 
                  className="object-cover transition duration-700 group-hover:scale-110" 
                  sizes="(max-width: 768px) 128px, 224px" 
                />
                
                {/* THE INTERNAL LABEL (Bottom Left) */}
                <div className="absolute bottom-2 left-2 z-10">
                  <span className="rounded-lg bg-black/60 px-2 py-1 text-[9px] font-bold uppercase tracking-widest text-white backdrop-blur-md border border-white/10">
                    {item.cat}
                  </span>
                </div>
                
                {/* Subtle gradient for label contrast */}
                <div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-black/40 to-transparent opacity-60" />
              </div>

              {/* 2. TEXT SIDE (Fills remaining space) */}
              <div className="flex flex-1 flex-col">
                <h3 className="line-clamp-2 text-base font-bold leading-tight text-neutral-900 transition-colors group-hover:text-[#0066cc] sm:text-lg lg:text-xl">
                  {item.title}
                </h3>
                
                <p className="mt-2 hidden line-clamp-2 text-sm leading-relaxed text-neutral-500 lg:block">
                  {item.excerpt}
                </p>

                <div className="mt-auto pt-3 flex items-center gap-2 text-[11px] font-semibold text-neutral-400">
                  <span className="text-neutral-900">{item.byline}</span>
                  <span className="h-0.5 w-0.5 rounded-full bg-neutral-300" />
                  <span>{item.date}</span>
                </div>
              </div>

            </Link>
          </article>
        ))}
      </div>

      {/* LOAD MORE - CLEAN iOS BUTTON */}
      <div className="mt-16 flex justify-center">
        <button className="flex items-center gap-3 rounded-2xl bg-neutral-100 px-12 py-4 text-sm font-bold text-neutral-900 transition hover:bg-neutral-200 active:scale-95">
          Mais notícias recentes
          <svg className="h-4 w-4 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M19 9l-7 7-7-7" />
          </svg>
        </button>
      </div>
    </section>
  );
}

export function TvoneAdBanner() {
  return (
    <section className="mx-auto w-full max-w-[1200px] px-4 pb-10">
      <div className="relative overflow-hidden rounded-xl bg-gradient-to-r from-[#0a4d8c] via-[#1e6fb8] to-[#e85c2a] px-6 py-8 text-white md:flex md:items-center md:justify-between md:py-10">
        <div className="max-w-lg">
          <p className="text-[11px] font-semibold uppercase tracking-widest text-white/90">BAI Directo</p>
          <h2 className="mt-2 text-3xl font-bold leading-tight tracking-tight md:text-4xl">Actualização do BAI Directo</h2>
          <p className="mt-2 text-sm text-white/90">Faça as suas operações com mais rapidez e segurança em qualquer dispositivo.</p>
        </div>
        <div className="relative mt-6 h-32 w-full max-w-xs shrink-0 md:mt-0 md:h-36">
          <Image
            src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=400&q=80"
            alt=""
            fill
            className="object-contain object-right"
            sizes="320px"
          />
        </div>
        <span className="absolute right-6 top-1/2 hidden -translate-y-1/2 text-2xl font-black tracking-tight opacity-90 md:block">
          BAI
        </span>
      </div>
    </section>
  );
}

export function TvoneFooter() {
  return (
    <footer className="bg-[#f5f5f7] text-[#1d1d1f]">
      <div className="mx-auto max-w-[980px] px-4 pb-6 pt-10 sm:px-6 md:pb-8 md:pt-12">
        <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-12 lg:gap-8">
          <div className="lg:col-span-5">
            <p className="text-[12px] font-semibold leading-[1.33337] tracking-[0.01em] text-[#1d1d1f]">Sobre a TV ONE</p>
            <div className="mt-3 border-t border-[#d2d2d7] pt-3">
              <p className="mb-1 text-[21px] font-semibold leading-[1.14286] tracking-tight text-[#1d1d1f]">tvone</p>
            </div>
            <div className="mt-4 space-y-3 text-[12px] leading-[1.33337] text-[#6e6e73]">
              <p className="text-pretty">
                A TV ONE é um portal angolano dedicado à informação e ao entretenimento, com a missão de informar,
                educar e envolver o público angolano e todos os interessados nos mais variados temas da atualidade.
              </p>
              <p className="text-pretty">
                Com uma abordagem dinâmica e atual, a TV ONE oferece conteúdos diversificados que abrangem áreas como
                cultura, turismo, moda, celebridades, entretenimento, atualidade, lifestyle, conteúdos virais e
                desporto, proporcionando uma experiência completa e envolvente para os seus leitores e espectadores.
              </p>
            </div>
          </div>

          <div className="lg:col-span-3  lg:border-[#d2d2d7] lg:pl-8">
            <p className="text-[12px] font-semibold leading-[1.33337] tracking-[0.01em] text-[#1d1d1f]">Contactos</p>
            <ul className="mt-3 space-y-3 border-t border-[#d2d2d7] pt-3 text-[12px]">
              <li>
                <span className="block text-[11px] font-normal text-[#6e6e73]">Email</span>
                <a
                  href="mailto:tvone.geral@gmail.com"
                  className="mt-0.5 inline-block text-[12px] text-[#06c] hover:underline"
                >
                  tvone.geral@gmail.com
                </a>
              </li>
              <li>
                <span className="block text-[11px] font-normal text-[#6e6e73]">Call Center</span>
                <a href="tel:+244934292121" className="mt-0.5 inline-block text-[12px] text-[#06c] hover:underline">
                  934 292 121
                </a>
              </li>
            </ul>
          </div>

          <div className="lg:col-span-4 lg:pl-8">
            <p className="text-[12px] font-semibold leading-[1.33337] tracking-[0.01em] text-[#1d1d1f]">
              Redes sociais
            </p>
            <div className="mt-3 flex flex-wrap items-center gap-x-1 gap-y-1 border-t border-[#d2d2d7] pt-4">
              <Link href="#" aria-label="Facebook" className={`${footerSocialIconClass} rounded p-2`}>
                <IconFacebook className="h-[22px] w-[22px]" />
              </Link>
              <Link href="#" aria-label="Instagram" className={`${footerSocialIconClass} rounded p-2`}>
                <IconInstagram className="h-[22px] w-[22px]" />
              </Link>
              <Link href="#" aria-label="YouTube" className={`${footerSocialIconClass} rounded p-2`}>
                <IconYouTube className="h-[22px] w-[22px]" />
              </Link>
            </div>
          </div>
        </div>

        <div className="mt-8 border-t border-[#d2d2d7] pt-6">
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <p className="text-[12px] leading-[1.33337] text-[#6e6e73]">
              Copyright © {new Date().getFullYear()} TV ONE. Todos os direitos reservados.
            </p>
            <p className="text-[12px] text-[#6e6e73]">Angola</p>
          </div>
        </div>
      </div>
    </footer>
  );
}