---
import { ArrowUpRight, Globe } from 'lucide-react';

import type { ResearchAreaPage } from '@/data/research-area-pages';

type Props = {
  area: ResearchAreaPage;
};

const { area } = Astro.props;

const accentStyle = `--area-accent: ${area.accent.foreground}; --area-accent-soft: ${area.accent.soft}; --area-accent-bg: ${area.accent.background}; --area-accent-header: ${area.accent.header}; --area-accent-border: ${area.accent.border};`;
---

<div style={accentStyle}>
<section class="border-b bg-[var(--area-accent-header)]">
  <div class="container py-14 md:py-18">
    <div class="max-w-3xl">
      <p class="text-sm font-medium text-[var(--area-accent)]">
        Research Area
      </p>
      <h1 class="mt-4 text-3xl font-semibold leading-tight md:text-5xl">
        {area.title}
      </h1>
      <p class="mt-5 text-lg leading-relaxed text-muted-foreground">
        {area.description}
      </p>
    </div>
  </div>
</section>

{
  area.featuredVideo && (
    <section class="border-b bg-[var(--area-accent-header)]">
      <div class="container pb-12">
        <div class="max-w-4xl">
          <div class="mb-4 flex flex-wrap items-end justify-between gap-3">
            <div>
              <p class="text-sm font-medium text-[var(--area-accent)]">
                Featured Video
              </p>
              <h2 class="mt-2 text-2xl font-semibold">
                {area.featuredVideo.title}
              </h2>
            </div>
            <a
              href={area.featuredVideo.href}
              class="inline-flex items-center gap-1 text-sm font-medium text-[var(--area-accent)] underline-offset-4 hover:underline"
              target="_blank"
              rel="noreferrer"
            >
              Watch on YouTube <ArrowUpRight className="size-3.5" />
            </a>
          </div>
          <div class="overflow-hidden rounded-lg border border-[var(--area-accent-border)] bg-white shadow-sm">
            <div class="aspect-video">
              <iframe
                src={area.featuredVideo.embedUrl}
                title={area.featuredVideo.title}
                class="h-full w-full"
                loading="lazy"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerpolicy="strict-origin-when-cross-origin"
                allowfullscreen
              ></iframe>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

<section class="section-padding">
  <div class="container">
    <div class="grid gap-10 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
      <div>
        <p class="text-sm font-medium text-[var(--area-accent)]">Research Themes</p>
        <h2 class="mt-3 text-2xl font-semibold md:text-3xl">
          What the group works on
        </h2>
        <div class="mt-5 flex flex-wrap gap-2">
          {
            area.themes.map((theme) => (
              <span class="rounded-full border border-[var(--area-accent-border)] bg-white px-3 py-1 text-sm text-muted-foreground">
                {theme}
              </span>
            ))
          }
        </div>
      </div>

      <div>
        <p class="text-sm font-medium text-[var(--area-accent)]">Faculty</p>
        <h2 class="mt-3 text-2xl font-semibold md:text-3xl">
          People shaping this area
        </h2>
        <div class="mt-5 grid gap-4 sm:grid-cols-2">
          {
            area.faculty.map((faculty) => (
              <article class="rounded-lg border border-border bg-card p-5 shadow-sm">
                <div class="flex items-start justify-between gap-3">
                  <div>
                    <h3 class="font-semibold">{faculty.name}</h3>
                    <p class="mt-1 text-sm text-muted-foreground">
                      {faculty.title}
                    </p>
                  </div>
                  {faculty.profile && (
                    <a
                      href={faculty.profile}
                      class="inline-flex size-8 shrink-0 items-center justify-center rounded-full border border-[var(--area-accent-border)] bg-white text-[var(--area-accent)] transition-colors hover:border-[var(--area-accent)]"
                      target="_blank"
                      rel="noreferrer"
                      title="Open faculty profile"
                      aria-label={`Open profile for ${faculty.name}`}
                    >
                      <Globe className="size-4" />
                    </a>
                  )}
                </div>
                <p class="mt-4 text-sm leading-relaxed text-muted-foreground">
                  {faculty.focus}
                </p>
              </article>
            ))
          }
        </div>
      </div>
    </div>
  </div>
</section>

<section class="border-y bg-muted/30">
  <div class="container py-12">
    <div class="grid gap-8 lg:grid-cols-2">
      <div>
        <p class="text-sm font-medium text-[var(--area-accent)]">Selected Publications</p>
        <h2 class="mt-3 text-2xl font-semibold">
          Recent Publications
        </h2>
        <div class="mt-5 space-y-4">
          {
            area.publications.map((publication) => (
              <article class="rounded-lg border bg-background p-5">
                <h3 class="font-semibold">{publication.title}</h3>
                <p class="mt-2 text-sm leading-relaxed text-muted-foreground">
                  {publication.detail}
                </p>
                {publication.href && (
                  <a
                    href={publication.href}
                    class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-[var(--area-accent)] underline-offset-4 hover:underline"
                    target="_blank"
                    rel="noreferrer"
                  >
                    Read more <ArrowUpRight className="size-3.5" />
                  </a>
                )}
              </article>
            ))
          }
        </div>
      </div>

      <div>
        <p class="text-sm font-medium text-[var(--area-accent)]">Projects & Outputs</p>
        <h2 class="mt-3 text-2xl font-semibold">
          Representative Projects
        </h2>
        <div class="mt-5 space-y-4">
          {
            area.projects.map((project) => (
              <article class="rounded-lg border bg-background p-5">
                <h3 class="font-semibold">{project.title}</h3>
                <p class="mt-2 text-sm leading-relaxed text-muted-foreground">
                  {project.detail}
                </p>
                {project.href && (
                  <a
                    href={project.href}
                    class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-[var(--area-accent)] underline-offset-4 hover:underline"
                    target="_blank"
                    rel="noreferrer"
                  >
                    Read more <ArrowUpRight className="size-3.5" />
                  </a>
                )}
              </article>
            ))
          }
        </div>
      </div>
    </div>
  </div>
</section>
</div>
