import { useState, useEffect, useRef } from ‘react’;
import { ArrowRight, ArrowUpRight, Plus, Minus, Menu, X, MapPin, ChevronRight, ChevronDown, Globe, Zap, Shield, Wrench, Activity, Layers, Cpu, Battery, Sun, Building2, Factory } from ‘lucide-react’;

// ============ DESIGN TOKENS ============
const BRAND = ‘#1E55C8’; // Canadian Solar blue, slightly tuned for dark UI
const BRAND_DEEP = ‘#0A2F7A’;

// ============ HELPERS ============
const useReveal = () => {
const ref = useRef(null);
const [shown, setShown] = useState(false);
useEffect(() => {
if (!ref.current) return;
const o = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setShown(true); o.disconnect(); }
}, { threshold: 0.15 });
o.observe(ref.current);
return () => o.disconnect();
}, []);
return [ref, shown];
};

const Reveal = ({ children, delay = 0, className = ” }) => {
const [ref, shown] = useReveal();
return (

);
};

const Counter = ({ to, suffix = ”, prefix = ”, duration = 1800 }) => {
const ref = useRef(null);
const [val, setVal] = useState(0);
const [started, setStarted] = useState(false);
useEffect(() => {
if (!ref.current) return;
const o = new IntersectionObserver(([e]) => {
if (e.isIntersecting && !started) {
setStarted(true);
const start = performance.now();
const tick = (now) => {
const p = Math.min((now – start) / duration, 1);
const eased = 1 – Math.pow(1 – p, 3);
setVal(to * eased);
if (p < 1) requestAnimationFrame(tick); else setVal(to); }; requestAnimationFrame(tick); } }, { threshold: 0.4 }); o.observe(ref.current); return () => o.disconnect();
}, [to, duration, started]);
const display = Number.isInteger(to) ? Math.round(val).toLocaleString() : val.toFixed(1);
return {prefix}{display}{suffix};
};

// ============ ICON BESS ARRAY ILLUSTRATION ============
// Renders a perspective-style array of BESS containers
const BessArray = ({ tone = ‘light’, rows = 4, cols = 6 }) => {
return (

{/* horizon line */}

{/* container rows in fake perspective */}
{Array.from({ length: rows }).map((_, r) => {
const y = 250 + r * 50;
const scale = 0.55 + r * 0.18;
const w = 130 * scale;
const h = 38 * scale;
const gap = 10 * scale;
const totalW = cols * (w + gap) – gap;
const startX = (1200 – totalW) / 2 – r * 10;
return Array.from({ length: cols + r }).map((_, c) => {
const x = startX + c * (w + gap) – r * 30;
if (x < -w || x > 1200) return null;
return (

{/* roof */}

{/* body */}

{/* door panels */}
{/* led strip */}

);
});
})}

);
};

// Single container hero render
const SoloContainer = ({ glow = true }) => (

{glow && }
{/* shadow */}

{/* container body */}

{/* top */}
{/* front face */}

{/* side face (right) */}
{/* door panels */}
{Array.from({ length: 8 }).map((_, i) => (
))}
{/* horizontal seams */}
{/* LED accent */}

{/* corner castings */}

{/* logo placeholder */}

);

// ============ NAV ============
const Nav = ({ setPage, currentPage }) => {
const [scrolled, setScrolled] = useState(false);
const [open, setOpen] = useState(false);
const [submenu, setSubmenu] = useState(null);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 20);
window.addEventListener(‘scroll’, onScroll);
return () => window.removeEventListener(‘scroll’, onScroll);
}, []);
const items = [
{ label: ‘Products’, sub: [‘SolBank 3.0’, ‘FlexBank’, ‘eBESS’, ‘MV Skid’, ‘EQ-S’], page: ‘product’ },
{ label: ‘Solutions’, sub: [‘Utility-Scale’, ‘Solar + Storage’, ‘C&I’], page: null },
{ label: ‘Projects’, sub: [‘All Projects’, ‘Featured Case’, ‘By Region’], page: ‘project’ },
{ label: ‘Services’, sub: [‘Design’, ‘Build’, ‘Commission’, ‘Operate’], page: null },
{ label: ‘Company’, sub: [‘About’, ‘ESG’, ‘Insights’, ‘Contact’], page: null },
];
return (

);
};

// ============ HOME PAGE ============
const HomePage = ({ setPage }) => {
return (

);
};

// ============ PRODUCT PAGE (SolBank) ============
const ProductPage = ({ setPage }) => {
const [openSpec, setOpenSpec] = useState(‘battery’);
return (

);
};

// ============ PROJECT PAGE ============
const ProjectPage = ({ setPage }) => {
return (

);
};

// ============ FOOTER ============
const Footer = ({ setPage }) => {
const cols = [
{ t: ‘Products’, items: [‘SolBank 3.0’, ‘FlexBank’, ‘eBESS’, ‘MV Skid’, ‘EQ-S’] },
{ t: ‘Solutions’, items: [‘Utility-Scale’, ‘Solar + Storage’, ‘Commercial & Industrial’] },
{ t: ‘Company’, items: [‘About’, ‘ESG & Responsibility’, ‘Heritage’, ‘Careers’] },
{ t: ‘Resources’, items: [‘Insights’, ‘Press’, ‘Events’, ‘Datasheets’] },
];
return (

);
};

// ============ APP ============
export default function App() {
const [page, setPage] = useState(‘home’);
useEffect(() => { window.scrollTo({ top: 0, behavior: ‘instant’ }); }, [page]);
return (

);
}