+
+
+
+ );
+}
+
+export function InteractiveCover({
+ src,
+ alt,
+ mode = 'hover',
+ className,
+}: InteractiveCoverProps) {
+ const [activeId, setActiveId] = useState
+
+ );
+}
diff --git a/src/components/library/organisms/InteractiveCover/InteractiveCover.types.ts b/src/components/library/organisms/InteractiveCover/InteractiveCover.types.ts
new file mode 100644
index 00000000..2f99557f
--- /dev/null
+++ b/src/components/library/organisms/InteractiveCover/InteractiveCover.types.ts
@@ -0,0 +1,13 @@
+import type { HotspotMode } from './useHotspotTrigger';
+
+export interface InteractiveCoverProps {
+ /** Cover artwork rendered behind the hotspots. */
+ src: string;
+ alt: string;
+ /**
+ * How a hotspot reveals its card. Defaults to 'hover'; flip to 'click' for
+ * touch-first contexts without touching any markup.
+ */
+ mode?: HotspotMode;
+ className?: string;
+}
diff --git a/src/components/library/organisms/InteractiveCover/coverHotspots.ts b/src/components/library/organisms/InteractiveCover/coverHotspots.ts
new file mode 100644
index 00000000..1ba9875a
--- /dev/null
+++ b/src/components/library/organisms/InteractiveCover/coverHotspots.ts
@@ -0,0 +1,135 @@
+import type { LibraryInfoCardProps } from '@components/library/molecules/LibraryInfoCard';
+
+/**
+ * All geometry is expressed in percentages of the cover's 1440x852 design
+ * frame, so hotspots track the artwork as it scales responsively without any
+ * runtime measurement. Library content is static for now and will later be fed
+ * from the six real libraries — keeping geometry and data separate means that
+ * swap is data-only.
+ */
+
+interface Box {
+ left: number;
+ top: number;
+ width: number;
+ height?: number;
+}
+
+export interface CoverHotspot {
+ id: string;
+ /** Invisible trigger region over the building itself. */
+ hit: Box;
+ /** Glow silhouette overlay (house + tree + leader line). */
+ highlight: { src: string; alt: string } & Box;
+ /** Top-left anchor of the info card at the end of the leader line. */
+ card: { left: number; top: number };
+ library: Omit
+ {coverHotspots.map(hotspot => (
+
+