343 lines
16 KiB
TypeScript
343 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { X, MapPin, Calendar, Leaf, CheckCircle2, Factory, Presentation, Image as ImageIcon } from "lucide-react";
|
|
import Image from "next/image";
|
|
import { useEffect, useState } from "react";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
export interface CaseStudyData {
|
|
id: string;
|
|
title: string;
|
|
location: string;
|
|
nodeType: string;
|
|
application: string;
|
|
stats: string;
|
|
mediaFileName?: string | null;
|
|
projectOverview?: string | null;
|
|
energySavings?: string | null;
|
|
galleryJson?: string | null;
|
|
eventDate?: string | null;
|
|
}
|
|
|
|
interface ModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
data: CaseStudyData | null;
|
|
}
|
|
|
|
function nodeToSlug(title: string): string {
|
|
return title.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, '');
|
|
}
|
|
|
|
const renderMarkdown = (text: string) => {
|
|
if (!text) return null;
|
|
const lines = text.split('\n');
|
|
const elements: React.ReactNode[] = [];
|
|
|
|
let listItems: React.ReactNode[] = [];
|
|
let isOrderedList = false;
|
|
|
|
let inTable = false;
|
|
let tableHeaders: string[] = [];
|
|
let tableRows: string[][] = [];
|
|
|
|
const pushTable = () => {
|
|
if (inTable) {
|
|
elements.push(
|
|
<div key={`table-${elements.length}`} className="my-8 w-full overflow-x-auto pb-4 [scrollbar-width:none]">
|
|
<table className="w-full text-left border-collapse min-w-[500px] shadow-lg rounded-2xl overflow-hidden border border-black/5 dark:border-white/5">
|
|
<thead>
|
|
<tr className="bg-[#F5F5F7] dark:bg-[#1D1D1F]">
|
|
{tableHeaders.map((th, i) => (
|
|
<th key={i} className={`p-4 border-b border-black/5 dark:border-white/10 text-xs uppercase tracking-widest font-semibold ${i === tableHeaders.length - 1 ? 'text-[#0066CC] dark:text-[#4DA6FF] bg-[#0066CC]/5 dark:bg-[#4DA6FF]/5' : 'text-[#1D1D1F] dark:text-white'}`}>
|
|
{parseInline(th)}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white dark:bg-[#0A0A0C]">
|
|
{tableRows.map((row, rIdx) => (
|
|
<tr key={rIdx} className="hover:bg-black/5 dark:hover:bg-white/[0.02] transition-colors group">
|
|
{row.map((cell, cIdx) => (
|
|
<td key={cIdx} className={`p-4 border-b border-black/5 dark:border-white/5 text-sm ${cIdx === 0 ? 'text-[#86868B] dark:text-[#A1A1A6] font-medium' : cIdx === row.length - 1 ? 'text-[#1D1D1F] dark:text-white font-semibold bg-[#0066CC]/5 dark:bg-[#4DA6FF]/5 group-hover:bg-[#0066CC]/10 dark:group-hover:bg-[#4DA6FF]/10 transition-colors' : 'text-[#1D1D1F]/80 dark:text-white/80'}`}>
|
|
{parseInline(cell)}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
inTable = false;
|
|
tableHeaders = [];
|
|
tableRows = [];
|
|
}
|
|
};
|
|
|
|
const pushList = () => {
|
|
if (listItems.length > 0) {
|
|
elements.push(
|
|
isOrderedList ? (
|
|
<ol key={`ol-${elements.length}`} className="list-decimal ml-6 mb-6 text-[#86868B] dark:text-[#A1A1A6] space-y-2 text-base font-light marker:text-[#0066CC] dark:marker:text-[#4DA6FF]">
|
|
{listItems}
|
|
</ol>
|
|
) : (
|
|
<ul key={`ul-${elements.length}`} className="list-disc ml-6 mb-6 text-[#86868B] dark:text-[#A1A1A6] space-y-2 text-base font-light marker:text-[#0066CC] dark:marker:text-[#4DA6FF]">
|
|
{listItems}
|
|
</ul>
|
|
)
|
|
);
|
|
listItems = [];
|
|
}
|
|
};
|
|
|
|
const parseInline = (str: string) => {
|
|
const boldRegex = /\*\*(.*?)\*\*/g;
|
|
const italicRegex = /\*(.*?)\*/g;
|
|
let parts = str.split(boldRegex);
|
|
return parts.map((part, i) => {
|
|
if (i % 2 === 1) return <strong key={i} className="font-medium text-[#1D1D1F] dark:text-white">{part}</strong>;
|
|
let subParts = part.split(italicRegex);
|
|
return subParts.map((subPart, j) => {
|
|
if (j % 2 === 1) return <em key={`${i}-${j}`} className="italic text-[#1D1D1F]/90 dark:text-white/90">{subPart}</em>;
|
|
return subPart;
|
|
});
|
|
});
|
|
};
|
|
|
|
lines.forEach((line, idx) => {
|
|
const trimmed = line.trim();
|
|
|
|
if (!trimmed) {
|
|
pushList(); pushTable();
|
|
return;
|
|
}
|
|
|
|
if (trimmed.startsWith('|') && trimmed.endsWith('|')) {
|
|
pushList();
|
|
const cells = trimmed.split('|').filter((_, i, arr) => i !== 0 && i !== arr.length - 1).map(c => c.trim());
|
|
if (!inTable) { inTable = true; tableHeaders = cells; }
|
|
else if (cells.every(c => c.match(/^[-:]+$/))) { }
|
|
else { tableRows.push(cells); }
|
|
return;
|
|
} else {
|
|
pushTable();
|
|
}
|
|
|
|
const imgMatch = trimmed.match(/^!\[(.*?)\]\((.*?)\)$/);
|
|
if (imgMatch) {
|
|
pushList(); pushTable();
|
|
elements.push(
|
|
<div key={`img-${idx}`} className="relative w-full my-8 rounded-2xl overflow-hidden border border-black/10 dark:border-white/10 shadow-lg bg-[#F5F5F7] dark:bg-[#1D1D1F]">
|
|
<img src={imgMatch[2]} alt={imgMatch[1]} className="w-full h-auto object-cover hover:scale-105 transition-transform duration-700" loading="lazy" />
|
|
</div>
|
|
);
|
|
return;
|
|
}
|
|
|
|
const h3Match = trimmed.match(/^###\s*(.*)/);
|
|
if (h3Match) { pushList(); pushTable(); elements.push(<h3 key={idx} className="text-xl mt-8 mb-3 font-medium text-[#0066CC] dark:text-[#4DA6FF]">{parseInline(h3Match[1])}</h3>); return; }
|
|
|
|
const h2Match = trimmed.match(/^##\s*(.*)/);
|
|
if (h2Match) { pushList(); pushTable(); elements.push(<h2 key={idx} className="text-2xl mt-10 mb-4 font-light text-[#1D1D1F] dark:text-white tracking-tight">{parseInline(h2Match[1])}</h2>); return; }
|
|
|
|
const h1Match = trimmed.match(/^#\s*(.*)/);
|
|
if (h1Match) { pushList(); pushTable(); elements.push(<h1 key={idx} className="text-3xl mt-10 mb-5 font-light text-[#1D1D1F] dark:text-white tracking-tight">{parseInline(h1Match[1])}</h1>); return; }
|
|
|
|
const quoteMatch = trimmed.match(/^>\s*(.*)/);
|
|
if (quoteMatch) {
|
|
pushList(); pushTable();
|
|
elements.push(
|
|
<blockquote key={idx} className="border-l-4 border-[#0066CC] dark:border-[#4DA6FF] pl-5 py-2 my-6 text-lg font-light italic text-[#1D1D1F]/70 dark:text-[#A1A1A6] bg-[#0066CC]/5 dark:bg-[#4DA6FF]/5 rounded-r-xl">
|
|
{parseInline(quoteMatch[1])}
|
|
</blockquote>
|
|
);
|
|
return;
|
|
}
|
|
|
|
const ulMatch = trimmed.match(/^[-*]\s+(.*)/);
|
|
if (ulMatch) { isOrderedList = false; listItems.push(<li key={idx} className="leading-relaxed pl-2">{parseInline(ulMatch[1])}</li>); return; }
|
|
|
|
const olMatch = trimmed.match(/^\d+\.\s*(.*)/);
|
|
if (olMatch) { isOrderedList = true; listItems.push(<li key={idx} className="leading-relaxed pl-2">{parseInline(olMatch[1])}</li>); return; }
|
|
|
|
pushList();
|
|
elements.push(<p key={idx} className="text-[#86868B] dark:text-[#A1A1A6] font-light leading-relaxed mb-4 text-base">{parseInline(trimmed)}</p>);
|
|
});
|
|
|
|
pushList();
|
|
pushTable();
|
|
|
|
return <>{elements}</>;
|
|
};
|
|
|
|
export default function CaseStudyModal({ isOpen, onClose, data }: ModalProps) {
|
|
const [gallery, setGallery] = useState<string[]>([]);
|
|
const t = useTranslations("CaseStudyModal");
|
|
|
|
useEffect(() => {
|
|
if (isOpen) document.body.style.overflow = "hidden";
|
|
else document.body.style.overflow = "unset";
|
|
return () => { document.body.style.overflow = "unset"; };
|
|
}, [isOpen]);
|
|
|
|
useEffect(() => {
|
|
if (data?.galleryJson) {
|
|
try {
|
|
setGallery(JSON.parse(data.galleryJson));
|
|
} catch (e) {
|
|
setGallery([]);
|
|
}
|
|
} else {
|
|
setGallery([]);
|
|
}
|
|
}, [data]);
|
|
|
|
if (!data) return null;
|
|
|
|
const isEvent = data.nodeType === "event";
|
|
const isHQ = data.nodeType === "hq";
|
|
const nodeSlug = nodeToSlug(data.title);
|
|
const coverImage = data.mediaFileName ? `/cases/${nodeSlug}/${data.mediaFileName}` : null;
|
|
|
|
let formattedDate = null;
|
|
let isUpcoming = false;
|
|
if (data.eventDate) {
|
|
const eventD = new Date(data.eventDate);
|
|
formattedDate = eventD.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
|
|
isUpcoming = eventD > new Date();
|
|
}
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{isOpen && (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6 md:p-12">
|
|
<motion.div
|
|
initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
|
|
onClick={onClose}
|
|
className="absolute inset-0 bg-black/60 backdrop-blur-md"
|
|
/>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40, scale: 0.95 }}
|
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
exit={{ opacity: 0, y: 20, scale: 0.95 }}
|
|
transition={{ type: "spring", damping: 25, stiffness: 300 }}
|
|
className="relative w-full max-w-4xl bg-white dark:bg-[#0A0A0C] border border-black/10 dark:border-white/10 rounded-[2rem] md:rounded-[3rem] shadow-2xl overflow-hidden flex flex-col max-h-[90vh]"
|
|
>
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute top-6 right-6 z-50 w-10 h-10 bg-black/50 hover:bg-black/80 backdrop-blur-md text-white rounded-full flex items-center justify-center transition-colors border border-white/20"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
|
|
<div className="flex-1 overflow-y-auto [scrollbar-width:none]">
|
|
|
|
<div className="relative w-full h-64 md:h-96 bg-[#1D1D1F] overflow-hidden">
|
|
{coverImage ? (
|
|
<Image src={coverImage} alt={data.title} fill className="object-cover" />
|
|
) : (
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(0,102,204,0.4)_0%,transparent_100%)] flex items-center justify-center">
|
|
<Factory size={64} className="text-white/10" />
|
|
</div>
|
|
)}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-white via-white/20 dark:from-[#0A0A0C] dark:via-[#0A0A0C]/20 to-transparent" />
|
|
|
|
<div className="absolute bottom-6 left-6 md:left-10 flex items-center gap-2">
|
|
<div className="bg-[#0066CC] text-white px-3 py-1.5 rounded-full text-[10px] font-bold uppercase tracking-widest flex items-center gap-1.5 shadow-lg">
|
|
{isEvent ? <Presentation size={12} /> : isHQ ? <MapPin size={12} /> : <Factory size={12} />}
|
|
{isEvent ? t("typeEvent") : isHQ ? t("typeHQ") : t("typeInstall")}
|
|
</div>
|
|
<div className="bg-white/90 dark:bg-black/80 backdrop-blur-md text-[#1D1D1F] dark:text-[#F5F5F7] border border-black/5 dark:border-white/10 px-3 py-1.5 rounded-full text-[10px] font-bold uppercase tracking-widest shadow-lg">
|
|
{data.application.replace("-", " ")}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6 md:p-10 lg:p-12 relative -mt-4 bg-white dark:bg-[#0A0A0C] rounded-t-[2rem] md:rounded-t-[3rem] z-10">
|
|
|
|
<div className="mb-10">
|
|
<h2 className="text-4xl md:text-5xl font-light text-[#1D1D1F] dark:text-[#F5F5F7] tracking-tight mb-4">
|
|
{data.title}
|
|
</h2>
|
|
<div className="flex flex-wrap items-center gap-4 md:gap-8 text-sm text-[#86868B]">
|
|
<span className="flex items-center gap-1.5"><MapPin size={16} /> {data.location}</span>
|
|
{formattedDate && (
|
|
<span className={`flex items-center gap-1.5 ${isUpcoming ? 'text-[#0066CC] dark:text-[#4DA6FF] font-medium' : ''}`}>
|
|
<Calendar size={16} /> {formattedDate} {isUpcoming && "(Upcoming)"}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-10">
|
|
<div className="bg-[#F5F5F7] dark:bg-[#1D1D1F] p-5 rounded-2xl border border-transparent dark:border-white/5">
|
|
<span className="text-[10px] uppercase tracking-widest text-[#86868B] block mb-1">
|
|
{isEvent ? t("keyHighlight") : t("keyMetric")}
|
|
</span>
|
|
<span className="text-lg md:text-xl font-medium text-[#1D1D1F] dark:text-white leading-tight">
|
|
{data.stats}
|
|
</span>
|
|
</div>
|
|
|
|
{data.energySavings && (
|
|
<div className="bg-[#0066CC]/5 dark:bg-[#4DA6FF]/10 p-5 rounded-2xl border border-[#0066CC]/10 dark:border-[#4DA6FF]/20">
|
|
<span className="text-[10px] uppercase tracking-widest text-[#0066CC] dark:text-[#4DA6FF] block mb-1 flex items-center gap-1">
|
|
{isEvent ? <MapPin size={10} /> : <Leaf size={10} />}
|
|
{isEvent ? t("locationStand") : t("energyImpact")}
|
|
</span>
|
|
<span className="text-lg md:text-xl font-medium text-[#0066CC] dark:text-[#4DA6FF] leading-tight">
|
|
{data.energySavings}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="col-span-2 md:col-span-1 bg-[#F5F5F7] dark:bg-[#1D1D1F] p-5 rounded-2xl border border-transparent dark:border-white/5 flex flex-col justify-center">
|
|
<span className="text-[10px] uppercase tracking-widest text-[#86868B] block mb-1">{t("systemStatus")}</span>
|
|
<span className="flex items-center gap-2 text-sm font-medium text-emerald-600 dark:text-emerald-400">
|
|
<CheckCircle2 size={16} />
|
|
{/* 🔥 AQUÍ ESTABA EL ERROR: Simplificamos la lógica 🔥 */}
|
|
{isEvent ? (isUpcoming ? t("scheduled") : t("concluded")) : t("operational")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{data.projectOverview ? (
|
|
<div className="max-w-none mb-12">
|
|
<h3 className="text-2xl font-light mb-6 text-[#1D1D1F] dark:text-white">
|
|
{isEvent ? t("eventOverview") : t("projectChronicle")}
|
|
</h3>
|
|
{renderMarkdown(data.projectOverview)}
|
|
</div>
|
|
) : (
|
|
<div className="py-12 text-center border-2 border-dashed border-black/5 dark:border-white/5 rounded-2xl mb-12">
|
|
<p className="text-[#86868B] text-sm uppercase tracking-widest">{t("pendingData")}</p>
|
|
</div>
|
|
)}
|
|
|
|
{gallery.length > 0 && (
|
|
<div>
|
|
<h3 className="text-2xl font-light mb-6 text-[#1D1D1F] dark:text-white flex items-center gap-2">
|
|
<ImageIcon size={20} className="text-[#86868B]" /> {t("mediaGallery")}
|
|
</h3>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{gallery.map((imgSrc, idx) => (
|
|
<div key={idx} className={`relative rounded-2xl overflow-hidden bg-[#1D1D1F] border border-black/10 dark:border-white/10 ${idx === 0 && gallery.length % 2 !== 0 ? 'sm:col-span-2 h-64 md:h-80' : 'h-48 md:h-64'}`}>
|
|
<Image src={`/cases/${nodeSlug}/${imgSrc}`} alt={`Gallery image ${idx + 1}`} fill className="object-cover hover:scale-105 transition-transform duration-700" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
} |