import Image from "next/image";
import { ArrowUpLeft } from "lucide-react";
import { Button } from "@/components/ui/button";
import FeaturedEvents from "@/components/home/FeaturedEvents";
import FeaturedPosts from "@/components/home/FeaturedPosts";
import ContentActionLink from "@/components/ContentActionLink";
import type { HomeContentPage, SiteContent } from "@/lib/content-cms";
import type { EventListItemSchema, PostListSchema } from "@/lib/types";

type HomeProps = {
  content: HomeContentPage;
  siteContent: SiteContent;
  events: EventListItemSchema[];
  posts: PostListSchema[];
};

export default function Home({ content, siteContent, events, posts }: HomeProps) {
  const heroImage = content.hero_image || siteContent.logo || {
    url: "/favicon.ico",
    alt: siteContent.short_name || "نشان انجمن",
  };

  return (
    <main className="bg-background" dir="rtl">
      <section className="border-b border-border/70 bg-brand-wash/45" aria-labelledby="home-hero-title">
        <div className="container mx-auto grid items-center gap-8 px-4 py-10 md:grid-cols-[1.15fr_0.85fr] md:gap-12 md:px-8 md:py-16 lg:px-12">
          <div>
            <p className="mb-3 text-sm font-semibold text-brand-deep">
              {siteContent.faculty_subline}
            </p>
            <h1 id="home-hero-title" className="max-w-3xl text-3xl font-extrabold leading-[1.4] text-brand-deep sm:text-4xl sm:leading-[1.4] md:text-5xl md:leading-[1.15]">
              {content.hero_heading || content.title}
            </h1>
            <p className="mt-4 max-w-2xl text-base leading-8 text-muted-foreground md:text-lg">
              {content.intro}
            </p>
            {content.hero_body ? (
              <p className="mt-2 max-w-2xl text-sm leading-7 text-muted-foreground">
                {content.hero_body}
              </p>
            ) : null}
            <div className="mt-6 flex flex-col gap-3 sm:flex-row">
              <Button asChild className="min-h-11 rounded-[10px] px-5">
                <ContentActionLink
                  href={content.hero_action_url}
                  fallbackHref="/events"
                  className="inline-flex items-center gap-2"
                >
                  {content.hero_action_label}
                  <ArrowUpLeft aria-hidden="true" className="h-4 w-4" />
                </ContentActionLink>
              </Button>
              <Button asChild variant="outline" className="home-hero-secondary min-h-11 rounded-[10px] border-primary/35 bg-background px-5 text-primary">
                <ContentActionLink href={content.hero_secondary_action_url} fallbackHref="/blog">
                  {content.hero_secondary_action_label || siteContent.navigation.blog}
                </ContentActionLink>
              </Button>
            </div>
          </div>

          <div className="relative order-first grid min-h-48 place-items-center overflow-hidden rounded-2xl border border-border/80 bg-brand-wash px-6 py-10 md:order-none md:min-h-[320px]">
            <div className="pointer-events-none absolute inset-4 rounded-xl border border-primary/20" aria-hidden="true" />
            <div className="pointer-events-none absolute inset-x-0 top-0 h-1.5 bg-accent" aria-hidden="true" />
            <div className="pointer-events-none absolute -bottom-24 -left-16 h-56 w-56 rounded-full border border-primary/20" aria-hidden="true" />
            <Image
              src={heroImage.url}
              alt={heroImage.alt || "تصویر معرفی انجمن"}
              width={240}
              height={240}
              unoptimized
              className="relative z-10 h-36 w-36 object-contain drop-shadow-xl md:h-48 md:w-48"
              priority
            />
          </div>
        </div>
      </section>

      <FeaturedEvents content={content} events={events} />
      <FeaturedPosts content={content} siteContent={siteContent} posts={posts} />

      <section className="bg-primary text-primary-foreground" aria-labelledby="home-participation-title">
        <div className="container mx-auto flex flex-col gap-6 px-4 py-12 md:flex-row md:items-center md:justify-between md:px-8 md:py-16 lg:px-12">
          {content.participation_image ? (
            <div className="hidden h-24 w-24 shrink-0 place-items-center overflow-hidden rounded-2xl border border-primary-foreground/20 bg-background/10 p-2 md:grid">
              <Image
                src={content.participation_image.url}
                alt={content.participation_image.alt || ""}
                width={96}
                height={96}
                unoptimized
                className="h-full w-full object-contain"
              />
            </div>
          ) : null}
          <div className="max-w-2xl">
            <h2 id="home-participation-title" className="text-2xl font-bold leading-relaxed md:text-3xl">
              {content.participation_heading}
            </h2>
            <p className="mt-2 text-sm leading-7 opacity-90 md:text-base">
              {content.participation_body}
            </p>
          </div>
          <div className="flex flex-col gap-3 sm:flex-row">
            <Button asChild className="min-h-11 rounded-[10px] bg-accent px-5 text-accent-foreground hover:bg-accent/90">
              <ContentActionLink href={content.participation_action_url} fallbackHref="/auth" className="inline-flex items-center gap-2">
                {content.participation_action_label}
                <ArrowUpLeft aria-hidden="true" className="h-4 w-4" />
              </ContentActionLink>
            </Button>
            <Button asChild variant="outline" className="min-h-11 rounded-[10px] border-primary-foreground/45 bg-transparent px-5 text-primary-foreground hover:bg-primary-foreground/10 hover:text-primary-foreground">
              <ContentActionLink href={content.participation_secondary_action_url} fallbackHref="/about">
                {content.participation_secondary_action_label}
              </ContentActionLink>
            </Button>
          </div>
        </div>
      </section>
    </main>
  );
}