@fayz-ai/plugin-linkinbio 0.9.1 → 0.10.1

package/src/public/BioPageRenderer.tsx

@@ -1,251 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import { ChevronUp, MessageCircle } from 'lucide-react';
-import type { BioPage, BioBlock } from '../types';
-import { getBlock } from './registry';
-import { Reveal } from './components/Reveal';
-import { MediaKit } from './components/MediaKit';
-import HeroSection from './blocks/HeroSection';
-import BioSection from './blocks/BioSection';
-import GallerySection from './blocks/GallerySection';
-import VideoGridSection from './blocks/VideoGridSection';
-import SocialLinksSection from './blocks/SocialLinksSection';
-import EmbedSection from './blocks/EmbedSection';
-import ProjectSection from './blocks/ProjectSection';
-import StatsSection from './blocks/StatsSection';
-import VenueListSection from './blocks/VenueListSection';
-import CTASection from './blocks/CTASection';
-import TextSection from './blocks/TextSection';
-import ProfileHeader from './blocks/ProfileHeader';
-import LinksBlock from './blocks/LinksBlock';
-import MusicReleasesBlock from './blocks/MusicReleasesBlock';
-import TourDatesBlock from './blocks/TourDatesBlock';
-import FeaturedBlock from './blocks/FeaturedBlock';
-
-export interface BioPageRendererProps {
-  page: BioPage;
-  /** Optional "made with" footer link. Omit for just the copyright line. */
-  poweredBy?: { label: string; url: string };
-}
-
-// Blocks that get alternating backgrounds in scroll mode (hero/header/cta excluded).
-const ALT_BG_TYPES = new Set(['bio', 'gallery', 'video-grid', 'project', 'embed', 'stats', 'venue-list', 'text', 'social-links']);
-
-export default function BioPageRenderer({ page, poweredBy }: BioPageRendererProps) {
-  const { identity, branding, sections, floatingCta } = page;
-  const isHub = page.layout === 'hub';
-  const scrollRef = useRef<HTMLDivElement | null>(null);
-  const [scrollProgress, setScrollProgress] = useState(0);
-  const [showFloatingCta, setShowFloatingCta] = useState(false);
-
-  // Scroll progress & floating CTA visibility
-  useEffect(() => {
-    const container = scrollRef.current?.closest('.fixed.inset-0') as HTMLElement | null;
-    if (!container) return;
-
-    const onScroll = () => {
-      const { scrollTop, scrollHeight, clientHeight } = container;
-      const progress = scrollHeight > clientHeight ? scrollTop / (scrollHeight - clientHeight) : 0;
-      setScrollProgress(progress);
-      setShowFloatingCta(scrollTop > clientHeight * 0.5);
-    };
-
-    container.addEventListener('scroll', onScroll, { passive: true });
-    return () => container.removeEventListener('scroll', onScroll);
-  }, []);
-
-  // Assign alternating bg to non-hero/cta sections (scroll mode only)
-  let altIndex = 0;
-  const sectionBgs: Map<string, string | undefined> = new Map();
-  if (!isHub) {
-    for (const s of sections) {
-      if (s.visible === false) continue;
-      if (ALT_BG_TYPES.has(s.type)) {
-        const bgs = [undefined, 'var(--pk-alt-bg)', 'var(--pk-alt-bg2)'];
-        sectionBgs.set(s.id, bgs[altIndex % bgs.length]);
-        altIndex++;
-      }
-    }
-  }
-
-  function renderInner(section: BioBlock) {
-    // Host-registered niche blocks win over the built-in switch.
-    const Custom = getBlock(section.type);
-    if (Custom) return <Custom block={section as never} page={page} />;
-    switch (section.type) {
-      case 'hero':
-        return <HeroSection section={section} identity={identity} branding={branding} />;
-      case 'profile-header':
-        return <ProfileHeader section={section} page={page} />;
-      case 'bio':
-        return <BioSection section={section} />;
-      case 'gallery':
-        return <GallerySection section={section} />;
-      case 'video-grid':
-        return <VideoGridSection section={section} />;
-      case 'social-links':
-        return <SocialLinksSection section={section} />;
-      case 'embed':
-        return <EmbedSection section={section} />;
-      case 'project':
-        return <ProjectSection section={section} />;
-      case 'stats':
-        return <StatsSection section={section} />;
-      case 'venue-list':
-        return <VenueListSection section={section} />;
-      case 'cta':
-        return <CTASection section={section} />;
-      case 'text':
-        return <TextSection section={section} />;
-      case 'links':
-        return <LinksBlock section={section} />;
-      case 'music-releases':
-        return <MusicReleasesBlock section={section} />;
-      case 'tour-dates':
-        return <TourDatesBlock section={section} />;
-      case 'featured':
-        return <FeaturedBlock section={section} />;
-      default:
-        return null;
-    }
-  }
-
-  function renderSection(section: BioBlock, index: number) {
-    if (section.visible === false) return null;
-    const inner = renderInner(section);
-    if (inner === null) return null;
-
-    // ── Hub layout: everything sits inside the mobile-width column (padding is
-    //    provided by the wrapper below). The header renders without a reveal
-    //    (it's above the fold); other blocks fade in on scroll.
-    if (isHub) {
-      // Header breaks out of the column padding to sit full-bleed on mobile;
-      // on desktop it becomes a contained rounded card within the column.
-      if (section.type === 'profile-header')
-        return (
-          <div key={section.id} className="-mx-3 -mt-3 sm:mx-0 sm:mt-0">
-            {inner}
-          </div>
-        );
-      return <Reveal key={section.id}>{inner}</Reveal>;
-    }
-
-    // ── Scroll (press-kit) layout: full-width sections, alternating bg ──
-    if (section.type === 'hero') return <div key={section.id}>{inner}</div>;
-    const bg = sectionBgs.get(section.id);
-    return (
-      <div key={section.id} style={bg ? { backgroundColor: bg } : undefined}>
-        <Reveal delay={index === 0 ? 0 : 40}>{inner}</Reveal>
-      </div>
-    );
-  }
-
-  return (
-    <div ref={scrollRef} className="min-h-full">
-      {/* Scroll progress bar */}
-      <div className="fixed top-0 left-0 right-0 z-50 h-[3px]" style={{ backgroundColor: 'transparent' }}>
-        <div
-          className="h-full transition-[width] duration-100 ease-out"
-          style={{
-            width: `${scrollProgress * 100}%`,
-            background: `linear-gradient(90deg, var(--pk-primary), var(--pk-accent))`,
-          }}
-        />
-      </div>
-
-      {/* Sections + footer. Hub = a centered mobile-width column (komi/linktree
-          style) that stays phone-width even on desktop, with breathing room so
-          the hero reads as a rounded floating card. */}
-      <div className={isHub ? 'max-w-[480px] mx-auto px-3 sm:px-4 pt-3 pb-6' : ''}>
-        {sections.map(renderSection)}
-
-        {/* Footer */}
-        <footer className="pt-10 pb-24 px-6 text-center" style={{ backgroundColor: 'var(--pk-bg)' }}>
-          <p className="text-xs opacity-40" style={{ color: 'var(--pk-muted)' }}>
-            &copy; {new Date().getFullYear()} {identity.name}
-          </p>
-          {poweredBy && (
-            <a
-              href={poweredBy.url}
-              className="text-xs opacity-25 mt-1 hover:opacity-40 transition-opacity"
-              style={{ color: 'var(--pk-muted)' }}
-            >
-              {poweredBy.label}
-            </a>
-          )}
-        </footer>
-      </div>
-
-      {/* Floating actions — hub: circular stack (scroll-to-top + primary action,
-          presskitpro style); scroll: the classic wide pill. */}
-      {isHub ? (
-        <div className="fixed z-50 right-4 bottom-6 flex flex-col items-center gap-3">
-          <button
-            type="button"
-            aria-label="Voltar ao topo"
-            onClick={() =>
-              (scrollRef.current?.closest('.fixed.inset-0') as HTMLElement | null)?.scrollTo({
-                top: 0,
-                behavior: 'smooth',
-              })
-            }
-            className="flex items-center justify-center w-11 h-11 rounded-full transition-all duration-300"
-            style={{
-              opacity: showFloatingCta ? 1 : 0,
-              transform: showFloatingCta ? 'none' : 'translateY(12px)',
-              pointerEvents: showFloatingCta ? 'auto' : 'none',
-              color: 'var(--pk-primary)',
-              border: '1.5px solid var(--pk-primary)',
-              backgroundColor: 'color-mix(in srgb, var(--pk-bg) 70%, transparent)',
-              backdropFilter: 'blur(6px)',
-            }}
-          >
-            <ChevronUp size={20} />
-          </button>
-          <MediaKit page={page} variant="fab" />
-          {floatingCta && (
-            <a
-              href={floatingCta.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label={floatingCta.label}
-              className="flex items-center justify-center w-14 h-14 rounded-full transition-transform hover:scale-105"
-              style={{
-                backgroundColor: 'var(--pk-primary)',
-                color: 'var(--pk-bg)',
-                boxShadow: '0 8px 28px rgba(0,0,0,0.45)',
-              }}
-            >
-              <MessageCircle size={24} />
-            </a>
-          )}
-        </div>
-      ) : (
-        floatingCta && (
-          <a
-            href={floatingCta.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="fixed z-50 transition-all duration-500 ease-out"
-            style={{
-              bottom: showFloatingCta ? '2rem' : '-4rem',
-              left: '50%',
-              transform: 'translateX(-50%)',
-              opacity: showFloatingCta ? 1 : 0,
-              backgroundColor: 'var(--pk-primary)',
-              color: 'var(--pk-bg)',
-              fontFamily: 'var(--pk-font-heading)',
-              borderRadius: '9999px',
-              padding: '1rem 2.5rem',
-              fontSize: '1rem',
-              fontWeight: 700,
-              letterSpacing: '0.1em',
-              boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
-            }}
-          >
-            {floatingCta.label}
-          </a>
-        )
-      )}
-    </div>
-  );
-}

package/src/public/__tests__/manifest.test.ts

@@ -1,39 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { assertPluginManifestContract } from '@fayz-ai/core/testing';
-import { createPublicLinkInBioPlugin } from '../createPublicLinkInBioPlugin';
-import type { BioPage } from '../../types';
-
-const demo: BioPage = {
-  identity: { name: 'Demo', slug: 'demo', genres: [] },
-  branding: {
-    primaryColor: '#F97316',
-    secondaryColor: '#FFB347',
-    accentColor: '#FFCF40',
-    backgroundColor: '#0A0A0A',
-    textColor: '#FFFFFF',
-    mutedTextColor: '#9CA3AF',
-  },
-  seo: {},
-  socialLinks: [],
-  sections: [{ id: 'hero', type: 'hero', backgroundImageUrl: '', showGenres: true }],
-};
-
-describe('createPublicLinkInBioPlugin', () => {
-  it('returns a manifest that passes the plugin contract', () => {
-    const { manifest } = createPublicLinkInBioPlugin({ seed: { demo } });
-    expect(() => assertPluginManifestContract(manifest)).not.toThrow();
-  });
-
-  it('exposes a public route at basePath/:slug', () => {
-    const { manifest } = createPublicLinkInBioPlugin({ basePath: '/p' });
-    const route = manifest.routes.find((r) => r.guard === 'public');
-    expect(route?.path).toBe('/p/:slug');
-    expect(route?.component).toBeTruthy();
-  });
-
-  it('mock provider resolves a seeded page and returns null for unknown slugs', async () => {
-    const { dataProvider } = createPublicLinkInBioPlugin({ useSupabase: false, seed: { demo } });
-    expect(await dataProvider.getBySlug('demo')).toEqual(demo);
-    expect(await dataProvider.getBySlug('nope')).toBeNull();
-  });
-});

package/src/public/blocks/BioSection.tsx

@@ -1,66 +0,0 @@
-import type { BioSection as BioSectionType } from '../../types';
-import { renderMarkdown } from '../utils';
-
-interface Props {
-  section: BioSectionType;
-}
-
-export default function BioSection({ section }: Props) {
-  const hasImage = section.imageUrl && section.imagePosition !== 'none';
-  const isTop = section.imagePosition === 'top';
-  const isSide = section.imagePosition === 'left' || section.imagePosition === 'right';
-  const isRight = section.imagePosition === 'right';
-
-  return (
-    <section className="py-16 md:py-24 px-6" id={section.id}>
-      <div className="max-w-4xl mx-auto">
-        {section.title && (
-          <h2
-            className="text-3xl md:text-4xl font-bold mb-8"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {section.title}
-          </h2>
-        )}
-
-        <div className={isSide && hasImage ? `grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-start` : ''}>
-          {hasImage && isTop && (
-            <img
-              src={section.imageUrl}
-              alt=""
-              className="w-full max-h-96 object-cover mb-8"
-              style={{ borderRadius: 'var(--pk-radius)' }}
-              loading="lazy"
-            />
-          )}
-
-          {hasImage && isSide && !isRight && (
-            <img
-              src={section.imageUrl}
-              alt=""
-              className="w-full aspect-[3/4] object-cover"
-              style={{ borderRadius: 'var(--pk-radius)' }}
-              loading="lazy"
-            />
-          )}
-
-          <div
-            className="prose prose-invert max-w-none text-base md:text-lg leading-relaxed [&_p]:mb-4 [&_strong]:font-semibold [&_a]:underline [&_a]:decoration-[var(--pk-primary)]"
-            style={{ color: 'var(--pk-muted)' }}
-            dangerouslySetInnerHTML={{ __html: renderMarkdown(section.content) }}
-          />
-
-          {hasImage && isSide && isRight && (
-            <img
-              src={section.imageUrl}
-              alt=""
-              className="w-full aspect-[3/4] object-cover"
-              style={{ borderRadius: 'var(--pk-radius)' }}
-              loading="lazy"
-            />
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/CTASection.tsx

@@ -1,56 +0,0 @@
-import type { CTASection as CTASectionType } from '../../types';
-import { renderMarkdown } from '../utils';
-
-interface Props {
-  section: CTASectionType;
-}
-
-export default function CTASection({ section }: Props) {
-  return (
-    <section className="py-24 md:py-36 px-6 text-center" id={section.id}>
-      <div className="max-w-2xl mx-auto">
-        {section.title && (
-          <h2
-            className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {section.title}
-          </h2>
-        )}
-
-        {section.content && (
-          <div
-            className="text-base md:text-lg mb-10 [&_p]:mb-2"
-            style={{ color: 'var(--pk-muted)' }}
-            dangerouslySetInnerHTML={{ __html: renderMarkdown(section.content) }}
-          />
-        )}
-
-        <div className="flex flex-col sm:flex-row items-center justify-center gap-5">
-          {section.ctaButtons.map((btn) => {
-            const isPrimary = btn.variant === 'primary';
-            const isOutline = btn.variant === 'outline';
-            return (
-              <a
-                key={btn.url}
-                href={btn.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center justify-center px-10 py-4 text-base font-bold tracking-[0.1em] uppercase transition-all duration-300 hover:scale-105 min-w-[200px]"
-                style={{
-                  backgroundColor: isPrimary ? 'var(--pk-primary)' : isOutline ? 'transparent' : 'var(--pk-secondary)',
-                  color: isPrimary ? 'var(--pk-bg)' : 'var(--pk-text)',
-                  border: isOutline ? '2px solid rgba(255,255,255,0.2)' : 'none',
-                  borderRadius: '9999px',
-                  boxShadow: isPrimary ? '0 8px 32px rgba(0,0,0,0.3)' : 'none',
-                }}
-              >
-                {btn.label}
-              </a>
-            );
-          })}
-        </div>
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/EmbedSection.tsx

@@ -1,53 +0,0 @@
-import type { EmbedSection as EmbedSectionType } from '../../types';
-
-interface Props {
-  section: EmbedSectionType;
-}
-
-export default function EmbedSection({ section }: Props) {
-  const isVideo = section.aspectRatio === '16:9' || section.embedType === 'youtube';
-  const height = section.height ?? (isVideo ? undefined : 352);
-
-  return (
-    <section className="py-16 md:py-24 px-6" id={section.id}>
-      <div className="max-w-4xl mx-auto">
-        {section.title && (
-          <h2
-            className="text-3xl md:text-4xl font-bold mb-8"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {section.title}
-          </h2>
-        )}
-
-        {section.embedHtml && section.embedType === 'custom' ? (
-          <div
-            className="overflow-hidden"
-            style={{ borderRadius: 'var(--pk-radius)' }}
-            dangerouslySetInnerHTML={{ __html: section.embedHtml }}
-          />
-        ) : isVideo ? (
-          <div className="aspect-video overflow-hidden" style={{ borderRadius: 'var(--pk-radius)' }}>
-            <iframe
-              src={section.embedUrl}
-              className="h-full w-full"
-              allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
-              loading="lazy"
-              title={section.title ?? 'Embed'}
-            />
-          </div>
-        ) : (
-          <div className="overflow-hidden" style={{ borderRadius: 'var(--pk-radius)', height }}>
-            <iframe
-              src={section.embedUrl}
-              className="w-full h-full"
-              allow="autoplay; clipboard-write; encrypted-media; fullscreen"
-              loading="lazy"
-              title={section.title ?? 'Embed'}
-            />
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/FeaturedBlock.tsx

@@ -1,70 +0,0 @@
-import { ArrowUpRight } from 'lucide-react';
-import type { FeaturedSection } from '../../types';
-
-interface Props {
-  section: FeaturedSection;
-}
-
-export default function FeaturedBlock({ section }: Props) {
-  return (
-    <section className="py-6" id={section.id}>
-      {section.title && (
-        <h2
-          className="text-xl md:text-2xl font-bold mb-4 px-1"
-          style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-        >
-          {section.title}
-        </h2>
-      )}
-      <a
-        href={section.url}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="group flex items-center gap-4 p-4 overflow-hidden transition-all duration-300 hover:scale-[1.01]"
-        style={{
-          borderRadius: 'var(--pk-radius)',
-          border: '1px solid rgba(255,255,255,0.09)',
-          background:
-            'linear-gradient(135deg, color-mix(in srgb, var(--pk-primary) 14%, transparent), rgba(255,255,255,0.03) 55%)',
-        }}
-      >
-        {section.imageUrl && (
-          <div
-            className="shrink-0 w-20 h-20 overflow-hidden"
-            style={{ borderRadius: 'calc(var(--pk-radius) - 4px)' }}
-          >
-            <img
-              src={section.imageUrl}
-              alt={section.headline}
-              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
-              loading="lazy"
-            />
-          </div>
-        )}
-        <div className="min-w-0 flex-1">
-          <p className="text-base font-bold leading-tight" style={{ color: 'var(--pk-text)', fontFamily: 'var(--pk-font-heading)' }}>
-            {section.headline}
-          </p>
-          {section.subtitle && (
-            <p className="text-xs mt-1 line-clamp-2" style={{ color: 'var(--pk-muted)' }}>
-              {section.subtitle}
-            </p>
-          )}
-          {section.ctaLabel && (
-            <span
-              className="inline-flex items-center gap-1 mt-2 px-3 py-1 text-xs font-semibold rounded-full"
-              style={{ backgroundColor: 'var(--pk-primary)', color: 'var(--pk-bg)' }}
-            >
-              {section.ctaLabel}
-            </span>
-          )}
-        </div>
-        <ArrowUpRight
-          size={20}
-          className="shrink-0 opacity-50 group-hover:opacity-90 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all"
-          style={{ color: 'var(--pk-text)' }}
-        />
-      </a>
-    </section>
-  );
-}

package/src/public/blocks/GallerySection.tsx

@@ -1,148 +0,0 @@
-import { useState } from 'react';
-import type { GallerySection as GallerySectionType, BioMediaItem } from '../../types';
-
-interface Props {
-  section: GallerySectionType;
-}
-
-function isInstagramEmbed(item: BioMediaItem) {
-  return item.url.includes('instagram.com');
-}
-
-function getInstagramEmbedUrl(url: string) {
-  // Convert instagram reel/post URL to embed URL
-  const match = url.match(/instagram\.com\/(reel|p)\/([^/?]+)/);
-  if (match) return `https://www.instagram.com/${match[1]}/${match[2]}/embed`;
-  return url;
-}
-
-function MediaItem({ item, index, cols, isFeatured, onImageClick }: {
-  item: BioMediaItem;
-  index: number;
-  cols: number;
-  isFeatured: boolean;
-  onImageClick: (i: number) => void;
-}) {
-  if (isInstagramEmbed(item)) {
-    return (
-      <div
-        className={`overflow-hidden ${isFeatured && index === 0 ? 'col-span-2' : ''}`}
-        style={{ borderRadius: 'var(--pk-radius)' }}
-      >
-        <iframe
-          src={getInstagramEmbedUrl(item.url)}
-          className="w-full border-0"
-          style={{ minHeight: cols <= 2 ? '500px' : '420px' }}
-          loading="lazy"
-          // @ts-expect-error React wants lowercase for custom DOM attributes
-          allowtransparency="true"
-          allow="encrypted-media"
-          title={item.alt ?? 'Instagram'}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <img
-      src={item.url}
-      alt={item.alt ?? ''}
-      className={`w-full object-cover cursor-pointer hover:opacity-90 transition-opacity ${
-        isFeatured && index === 0 ? 'col-span-2 aspect-[16/9]' : 'aspect-square'
-      }`}
-      style={{ borderRadius: 'var(--pk-radius)' }}
-      loading="lazy"
-      onClick={() => onImageClick(index)}
-    />
-  );
-}
-
-export default function GallerySection({ section }: Props) {
-  const [lightboxIdx, setLightboxIdx] = useState<number | null>(null);
-  const cols = section.columns ?? 3;
-  const isFeatured = section.layout === 'featured-grid';
-  const isCarousel = section.layout === 'carousel';
-
-  // Only images for lightbox navigation
-  const imageItems = section.media.filter((m) => !isInstagramEmbed(m));
-
-  return (
-    <section className="py-16 md:py-24 px-6" id={section.id}>
-      <div className="max-w-5xl mx-auto">
-        {section.title && (
-          <h2
-            className="text-3xl md:text-4xl font-bold mb-8"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {section.title}
-          </h2>
-        )}
-
-        {isCarousel ? (
-          <div className="flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4 -mx-6 px-6 scrollbar-hide">
-            {section.media.map((item, i) => (
-              <div key={i} className="flex-none w-72 md:w-96 snap-center">
-                <MediaItem item={item} index={i} cols={cols} isFeatured={false} onImageClick={setLightboxIdx} />
-              </div>
-            ))}
-          </div>
-        ) : (
-          <div
-            className={`grid gap-3 md:gap-4 ${
-              isFeatured
-                ? 'grid-cols-2'
-                : cols === 2
-                  ? 'grid-cols-1 sm:grid-cols-2'
-                  : cols === 4
-                    ? 'grid-cols-2 md:grid-cols-4'
-                    : 'grid-cols-2 md:grid-cols-3'
-            }`}
-          >
-            {section.media.map((item, i) => (
-              <MediaItem key={i} item={item} index={i} cols={cols} isFeatured={isFeatured} onImageClick={setLightboxIdx} />
-            ))}
-          </div>
-        )}
-
-        {/* Lightbox — images only */}
-        {lightboxIdx !== null && imageItems[lightboxIdx] && (
-          <div
-            className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4"
-            onClick={() => setLightboxIdx(null)}
-          >
-            <button
-              className="absolute top-4 right-4 text-white text-3xl font-light hover:opacity-70 z-10"
-              onClick={() => setLightboxIdx(null)}
-            >
-              &times;
-            </button>
-            <button
-              className="absolute left-4 top-1/2 -translate-y-1/2 text-white text-4xl font-light hover:opacity-70 z-10"
-              onClick={(e) => {
-                e.stopPropagation();
-                setLightboxIdx((lightboxIdx - 1 + imageItems.length) % imageItems.length);
-              }}
-            >
-              &#8249;
-            </button>
-            <button
-              className="absolute right-4 top-1/2 -translate-y-1/2 text-white text-4xl font-light hover:opacity-70 z-10"
-              onClick={(e) => {
-                e.stopPropagation();
-                setLightboxIdx((lightboxIdx + 1) % imageItems.length);
-              }}
-            >
-              &#8250;
-            </button>
-            <img
-              src={imageItems[lightboxIdx].url}
-              alt={imageItems[lightboxIdx].alt ?? ''}
-              className="max-h-[85vh] max-w-[90vw] object-contain"
-              onClick={(e) => e.stopPropagation()}
-            />
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}