ipv6-sims/app/components/home/SpeakerSpotlightSection.tsx

"use client";

const BASE = process.env.NEXT_PUBLIC_BASE_PATH || "";

type SpeakerItem = {
  name: string;
  title: string;
  photo: string;
  quote: string;
};

type Props = {
  data: {
    eyebrow: string;
    title: string;
    items: SpeakerItem[];
  };
};

export default function SpeakerSpotlightSection({ data }: Props) {
  const speaker = data.items[0];

  return (
    <section className="py-16 lg:py-32 max-w-hd mx-auto px-[var(--spacing-gutter)]" id="speakers">
      {/* Section header */}
      <div className="mb-10 lg:mb-16">
        <span className="font-[var(--font-label-caps)] text-xs lg:text-sm text-primary block mb-3 lg:mb-4 tracking-[0.25em] uppercase">
          {data.eyebrow}
        </span>
        <h2 className="font-[var(--font-display-lg)] text-on-surface text-[clamp(2rem,4vw+1rem,4.5rem)] leading-tight">
          {data.title}
        </h2>
      </div>

      {/* Card: 3/10 image — 7/10 quote */}
      <div className="glass-panel rounded-[2rem] overflow-hidden shadow-2xl shadow-primary/5 flex flex-col lg:flex-row items-stretch">

        {/* LEFT — 30%: ảnh + tên + chức danh */}
        <div className="lg:w-[30%] flex flex-col items-center justify-center p-8 lg:p-12 text-center border-b lg:border-b-0 lg:border-r border-primary/10">
          {/* Ảnh tròn */}
          <div className="relative mb-6 lg:mb-8">
            {/* Ring gold trang trí */}
            <div className="absolute inset-0 border-2 border-primary/30 rounded-full scale-110 pointer-events-none" />
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={`${BASE}${speaker.photo}`}
              alt={speaker.name}
              className="w-36 h-36 lg:w-56 lg:h-56 rounded-full object-cover object-top border-4 border-surface"
            />
          </div>

          {/* Tên */}
          <h4 className="font-[var(--font-display-lg)] text-xl lg:text-[26px] text-on-surface mb-2 leading-tight">
            {speaker.name}
          </h4>

          {/* Chức danh */}
          <p className="font-[var(--font-label-caps)] text-xs lg:text-sm text-primary tracking-widest uppercase leading-relaxed">
            {speaker.title}
          </p>
        </div>

        {/* RIGHT — 70%: quote dàn hàng ngang */}
        <div className="lg:w-[70%] relative flex items-center p-8 lg:p-16 xl:p-20">
          {/* Dấu nháy mở trang trí */}
          <div
            className="absolute top-4 left-6 lg:top-8 lg:left-10 pointer-events-none select-none text-primary opacity-20 font-[var(--font-display-lg)] leading-none"
            style={{ fontSize: "clamp(6rem, 12vw, 11rem)" }}
            aria-hidden="true"
          >
            &#x201C;
          </div>

          <div className="relative z-10 w-full">
            {/* Quote */}
            <blockquote className="font-[var(--font-display-lg)] not-italic text-on-surface leading-[1.4] text-[clamp(1.2rem,2vw+0.6rem,2.25rem)] mb-8 lg:mb-10">
              &ldquo;{speaker.quote}&rdquo;
            </blockquote>

            {/* Gold divider */}
            <div className="h-[2px] w-20 bg-primary rounded-full mb-5 lg:mb-6" />

            {/* Attribution nhỏ */}
            <p className="font-[var(--font-label-caps)] text-xs lg:text-sm text-on-surface-variant/50 uppercase tracking-widest">
              {speaker.name}&nbsp;&mdash;&nbsp;{speaker.title}
            </p>
          </div>
        </div>

      </div>
    </section>
  );
}