- {avatarUrl.includes("placeholder") ? (
-
- ) : (
- // eslint-disable-next-line @next/next/no-img-element
- 
- )}
-
- );
+ // Load bookmarks from localStorage
+ useEffect(() => {
+ try {
+ const saved = localStorage.getItem("ipv6_agenda_bookmarks");
+ if (saved) {
+ setBookmarkedIds(JSON.parse(saved));
+ }
+ } catch {
+ // Ignore localStorage errors
+ }
+ }, []);
+
+ // Keyboard shortcut to close modal
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ setSelectedModalItem(null);
+ }
+ };
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, []);
+
+ // Save bookmarks to localStorage
+ const toggleBookmark = (id: number) => {
+ setBookmarkedIds((prev) => {
+ const next = prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id];
+ try {
+ localStorage.setItem("ipv6_agenda_bookmarks", JSON.stringify(next));
+ } catch {
+ // Ignore localStorage errors
+ }
+ return next;
+ });
+ };
+
+ // Convert time display based on selected timezone mode
+ const getTimeDisplay = (item: AgendaItem) => {
+ if (timezoneMode === "UTC") {
+ return item.time_utc ? `${item.time_utc} UTC` : item.time_ict;
+ }
+ if (timezoneMode === "ICT") {
+ return item.time_ict ? `${item.time_ict} ICT` : item.time_utc;
+ }
+ // Local Time mode
+ try {
+ const timeStr = item.time_utc;
+ if (!timeStr) return item.time_ict;
+ const parts = timeStr.split(" - ");
+ if (parts.length < 1) return item.time_ict;
+
+ const parseUtcHourMin = (s: string) => {
+ const m = s.trim().match(/(\d+)[\.:](\d+)\s*(am|pm)/i);
+ if (!m) return null;
+ let h = parseInt(m[1], 10);
+ const min = parseInt(m[2], 10);
+ const period = m[3].toLowerCase();
+ if (period === "pm" && h < 12) h += 12;
+ if (period === "am" && h === 12) h = 0;
+ const d = new Date();
+ d.setUTCHours(h, min, 0, 0);
+ return d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit", hour12: true });
+ };
+
+ const startLocal = parseUtcHourMin(parts[0]);
+ const endLocal = parts[1] ? parseUtcHourMin(parts[1]) : null;
+
+ if (startLocal && endLocal) return `${startLocal} - ${endLocal} (Local)`;
+ if (startLocal) return `${startLocal} (Local)`;
+ return item.time_ict;
+ } catch {
+ return item.time_ict;
+ }
+ };
+
+ // Filter items
+ const filteredItems = useMemo(() => {
+ return (data.items || []).filter((item) => {
+ // Category filter
+ if (selectedCategory !== "All Sessions" && item.category !== selectedCategory) {
+ const categoryMatch =
+ selectedCategory === "Breaks & Networking" && (item.category?.includes("Breaks") || item.category?.includes("Nghỉ"));
+ const ceremonyMatch =
+ selectedCategory === "Ceremonies" && (item.category?.includes("Ceremony") || item.category?.includes("Lễ"));
+ const keynoteMatch =
+ selectedCategory === "Keynotes & Address" && (item.category?.includes("Keynote") || item.category?.includes("Bài phát biểu"));
+ const techMatch =
+ selectedCategory === "Technical & Infrastructure" && (item.category?.includes("Technical") || item.category?.includes("Kỹ thuật"));
+ const forumMatch =
+ selectedCategory === "Forums & Panels" && (item.category?.includes("Forum") || item.category?.includes("Tọa đàm"));
+
+ if (!categoryMatch && !ceremonyMatch && !keynoteMatch && !techMatch && !forumMatch) {
+ return false;
+ }
+ }
+
+ // Bookmark filter
+ if (showOnlyBookmarks && !bookmarkedIds.includes(item.id)) {
+ return false;
+ }
+
+ // Search query
+ if (searchQuery.trim()) {
+ const q = searchQuery.toLowerCase();
+ const matchTitle = item.title?.toLowerCase().includes(q);
+ const matchDesc = item.description?.toLowerCase().includes(q);
+ const matchSpeaker = item.speaker?.toLowerCase().includes(q) || item.speaker_title?.toLowerCase().includes(q);
+ const matchCategory = item.category?.toLowerCase().includes(q);
+ if (!matchTitle && !matchDesc && !matchSpeaker && !matchCategory) {
+ return false;
+ }
+ }
+
+ return true;
+ });
+ }, [data.items, selectedCategory, showOnlyBookmarks, bookmarkedIds, searchQuery]);
+
+ const handlePrint = () => {
+ window.print();
+ };
+
+ const renderAvatar = (avatarUrl?: string, sizeClass: string = "w-9 h-9 lg:w-10 lg:h-10") => {
+ return (
+
+ {avatarUrl ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ ![Speaker]({`${base}${avatarUrl.startsWith("/"))
+ ) : (
+
+ )}
+
+ );
+ };
return (
-
+
+ {/* Printable CSS style overlay for clean PDF / Print export */}
+
+
+ {/* Header */}
+
-
+
{data.eyebrow}
- {/* Timeline Container */}
- @@ -90,126 +269,637 @@ export default function AgendaSection({ data }: Props) {
-
- {/* Central vertical line */}
-
-
- {/* Timeline Items */}
-
- {data.items.map((item, index) => {
- const isEven = index % 2 === 0;
- return (
-
-
- {/* Timeline Dot (glowing on hover) */}
-
-
- {/* Left/Right alternating grid layout */}
-
- );
- })}
+ {/* Main Container */}
+
-
- {isEven ? (
- <>
- {/* Left: Card (Desktop) / Full content (Mobile) */}
-
-
-
-
- {/* Right: Time badge (Desktop-only) */}
-
-
- {item.order}
-
- {/* Mobile-only time badge */}
-
-
-
- {item.time}
-
-
- - {renderFormattedText(item.title)} -
- {!item.description && item.avatar && ( -
- {renderAvatar(item.avatar, "w-10 h-10 lg:w-12 lg:h-12")}
-
- )}
- {item.description && (
-
- {item.avatar && (
-
- )}
-
- {renderAvatar(item.avatar, "w-10 h-10 lg:w-12 lg:h-12")}
-
- )}
-
- {renderFormattedText(item.description)}
-
-
-
- {item.time}
-
-
-
- ) : (
- <>
- {/* Left: Time badge (Desktop-only) */}
-
-
- {item.time}
-
-
-
- {/* Right: Card (Desktop) / Full content (Mobile) */}
-
-
-
- )}
-
-
-
- {item.order}
-
- {/* Mobile-only time badge */}
-
-
-
- {item.time}
-
-
- - {renderFormattedText(item.title)} -
- {!item.description && item.avatar && ( -
- {renderAvatar(item.avatar, "w-10 h-10 lg:w-12 lg:h-12")}
-
- )}
- {item.description && (
-
- {item.avatar && (
-
- )}
-
- {renderAvatar(item.avatar, "w-10 h-10 lg:w-12 lg:h-12")}
-
- )}
-
- {renderFormattedText(item.description)}
-
-
+ {/* Printable Header (Visible only when printing) */}
+
+
+ {/* SESSION DETAIL MODAL (Opens on Row Click in Table View or Detail Click) */}
+ {selectedModalItem && (
+
+
+
+ {/* Event Venue Banner with Direct Google Maps Button */}
+ APAC IPv6, AI & Cloud Summit 2026 - Agenda
+Keangnam Landmark Tower, Hanoi, Vietnam
+
+
+ {/* Control Toolbar */}
+
+
+
+
+ 📍 Google Maps Direct
+
+
+
+
+
+
+
+ Event Venue / Địa điểm tổ chức
+ Keangnam Landmark Tower, Hanoi, Vietnam
+
+ {/* Row 1: Search & My Schedule & Print & View Modes */}
+
+
+ {/* Results Counter Bar */}
+
+ {/* Search Input */}
+
+
+ {/* Row 2: Category Filter Tags */}
+
+ setSearchQuery(e.target.value)}
+ className="w-full pl-9 pr-3 py-2 rounded-full bg-background/80 border border-primary/20 text-on-surface text-xs lg:text-sm focus:outline-none focus:border-primary transition-colors placeholder:text-on-surface-variant/50"
+ />
+
+
+
+ {/* Right Action Controls */}
+
+ {/* My Schedule Filter Button */}
+
+
+ {/* Print / Export PDF Button */}
+
+
+ {/* Timezone Switcher */}
+
+
+ {(["ICT", "UTC", "Local"] as const).map((tz) => (
+
+ ))}
+
+
+ {/* View Mode Toggle */}
+
+
+
+
+
+ {CATEGORIES.map((category) => (
+
+ ))}
+
+
+
+
+ {/* No Results Fallback */}
+ {filteredItems.length === 0 && (
+
+ Showing {filteredItems.length} of {(data.items || []).length} sessions
+ {showOnlyBookmarks && " (My Schedule)"}
+
+
+
+
+
+
+ Event Date: Aug 4, 2026
+
+
+
+ )}
+
+ {/* CARD VIEW: Wider Max Width + Reduced Gaps for Natural Text Flow */}
+ {viewMode === "card" && filteredItems.length > 0 && (
+ No matching sessions found.
+ +
+ {/* Central vertical line */}
+
+
+ {/* Timeline Items */}
+
+ )}
+
+ {/* TABLE VIEW: Responsive Truncated Rows + Click Row to Open Detail Modal */}
+ {viewMode === "table" && filteredItems.length > 0 && (
+
+ {filteredItems.map((item, index) => {
+ const isEven = index % 2 === 0;
+ const isBookmarked = bookmarkedIds.includes(item.id);
+ const orderNum = String(index + 1).padStart(2, "0");
+ const timeText = getTimeDisplay(item);
+ const hasSpeaker = Boolean(item.speaker && item.speaker.trim() !== "");
+
+ return (
+
+
+ {/* Timeline Dot (glowing on hover) */}
+
+
+ {/* Left/Right alternating grid layout */}
+
+ );
+ })}
+
+ {isEven ? (
+ <>
+ {/* Left: Card (Desktop) / Full content (Mobile) */}
+
+
+
+
+ {/* Right: Time badge (Desktop-only) */}
+
+ {/* Top Bar inside Card: Category badge + Order + Star */}
+
+
+
+ {item.category}
+
+
+
+ {/* Mobile-only time badge */}
+
+
+ {orderNum}
+
+
+
+
+
+ {timeText}
+
+
+
+ {/* Session Title */}
+ + {renderFormattedText(item.title)} +
+ + {/* Description & Speaker Info */} +
+ {item.description && (
+
+
+ {renderFormattedText(item.description)}
+
+ )}
+
+ {/* Speaker info with avatar */}
+
+ {hasSpeaker ? (
+ <>
+ {renderAvatar(item.avatar)}
+
+
+ {/* Location Badge */}
+
+
+
+ ) : (
+
+ {item.speaker}
+
+ {item.speaker_title && (
+
+ {item.speaker_title}
+
+ )}
+
+ —
+
+ )}
+
+
+ {item.location || "Main Stage"}
+
+
+
+ {timeText}
+
+ {timezoneMode !== "UTC" && item.time_utc && (
+
+ {item.time_utc} UTC
+
+ )}
+
+
+ ) : (
+ <>
+ {/* Left: Time badge (Desktop-only) */}
+
+
+ {timeText}
+
+ {timezoneMode !== "UTC" && item.time_utc && (
+
+ {item.time_utc} UTC
+
+ )}
+
+
+ {/* Right: Card (Desktop) / Full content (Mobile) */}
+
+
+
+ )}
+
+ {/* Top Bar inside Card: Category badge + Order + Star */}
+
+
+
+ {item.category}
+
+
+
+ {/* Mobile-only time badge */}
+
+
+ {orderNum}
+
+
+
+
+
+ {timeText}
+
+
+
+ {/* Session Title */}
+ + {renderFormattedText(item.title)} +
+ + {/* Description & Speaker Info */} +
+ {item.description && (
+
+ {renderFormattedText(item.description)}
+ )}
+
+ {/* Speaker info with avatar */}
+
+ {hasSpeaker ? (
+ <>
+ {renderAvatar(item.avatar)}
+
+
+ {/* Location Badge */}
+
+
+
+ ) : (
+
+ {item.speaker}
+
+ {item.speaker_title && (
+
+ {item.speaker_title}
+
+ )}
+
+ —
+
+ )}
+
+
+ {item.location || "Main Stage"}
+
+
+
+ )}
+
+
+
+
+ | Time | +Category | +Session Title & Description | +Speaker / Presenter | +Location | +Action | +
|---|---|---|---|---|---|
|
+
+ {getTimeDisplay(item)}
+
+ {timezoneMode !== "UTC" && item.time_utc && (
+
+ {item.time_utc} UTC
+
+ )}
+ |
+
+ {/* Category */}
+ + + {item.category} + + | + + {/* Title & Description (Truncated for clean responsive table layout) */} +
+ + {item.title} ++ {item.description && ( ++ {item.description} + + )} + |
+
+ {/* Speaker */}
+
+ {hasSpeaker ? (
+
+ {renderAvatar(item.avatar, "w-7 h-7 lg:w-8 lg:h-8")}
+
+ ) : (
+ —
+ )}
+
+
+
+ {item.speaker}
+
+ {item.speaker_title && (
+
+ {item.speaker_title}
+
+ )}
+ |
+
+ {/* Location */}
+
+
+
+ {item.location || "Main Stage"}
+
+ |
+
+ {/* Actions: Save Star + Expand indicator */}
+ e.stopPropagation()}>
+
+
+
+
+ |
+
setSelectedModalItem(null)}
+ >
+
+ )}
);
}
diff --git a/app/components/home/HeroSection.tsx b/app/components/home/HeroSection.tsx
index 3c64ed4..79fa108 100644
--- a/app/components/home/HeroSection.tsx
+++ b/app/components/home/HeroSection.tsx
@@ -16,13 +16,25 @@ export default function HeroSection({
e.stopPropagation()}
+ >
+ {/* Modal Header Bar */}
+
+
+
+ {selectedModalItem.category}
+
+
+
+ {/* Session Time & Location Badges */}
+
+
+
+
+
+
+
+ {/* Full Title (Untruncated) */}
+
+
+ {getTimeDisplay(selectedModalItem)}
+
+
+ {selectedModalItem.time_utc && (
+
+ ({selectedModalItem.time_utc} UTC)
+
+ )}
+
+
+
+ {selectedModalItem.location || "Main Stage"}
+
+ + {renderFormattedText(selectedModalItem.title)} +
+ + {/* Full Description (Untruncated) */} + {selectedModalItem.description && ( +
+
+ )}
+
+ {/* Speaker Information */}
+ Description
+ {renderFormattedText(selectedModalItem.description)}
+
+
+
+ {/* Modal Footer */}
+ Speaker / Presenter
+ {selectedModalItem.speaker && selectedModalItem.speaker.trim() !== "" ? (
+
+ {renderAvatar(selectedModalItem.avatar, "w-12 h-12")}
+
+ ) : (
+
+
+
+ {selectedModalItem.speaker}
+
+ {selectedModalItem.speaker_title && (
+
+ {selectedModalItem.speaker_title}
+
+ )}
+ —
+ )}
+
+
+
+
-
+