import { useState, useEffect, useRef } from “react”;

/* ═══════════════════════════════════════════
DESIGN TOKENS (from index.css HSL values)
═══════════════════════════════════════════ */
const T = {
bg: “hsl(220,20%,4%)”,
fg: “hsl(0,0%,95%)”,
card: “hsl(220,18%,8%)”,
cardBorder: “hsla(220,14%,16%,0.5)”,
primary: “hsl(174,72%,50%)”,
primaryFg: “hsl(220,20%,4%)”,
muted: “hsl(220,14%,12%)”,
mutedFg: “hsl(220,10%,55%)”,
border: “hsl(220,14%,16%)”,
gradEnd: “hsl(190,80%,60%)”,
};

/* ═══ SVG icon components (matching lucide icons from source) ═══ */
const Ic = ({ children, size = 24, …p }) => (

);
const Zap = (p) => ;
const ArrowRight = (p) => ;
const ChevronDown = (p) => ;
const Cpu = (p) => ;
const Globe = (p) => ;
const LeafIc = (p) => ;
const Shield = (p) => ;
const Fuel = (p) => ;
const Battery = (p) => ;
const Home = (p) => ;
const Brain = (p) => ;
const Target = (p) => ;
const TreePine = (p) => ;
const Heart = (p) => ;
const Star = (p) => ;
const MapPin = (p) => ;
const Mail = (p) => ;
const Send = (p) => ;
const MenuIc = (p) => ;
const XIc = (p) => ;

/* ═══ Fade-in on scroll ═══ */
function useFade() {
const ref = useRef(null);
const [vis, setVis] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVis(true); }, { threshold: 0.08, rootMargin: “-80px” });
obs.observe(el);
return () => obs.disconnect();
}, []);
return [ref, vis];
}

const Fade = ({ children, delay = 0, className = “”, style: s = {} }) => {
const [ref, vis] = useFade();
return (

);
};

/* ═══ Gradient text ═══ */
const Grad = ({ children }) => (
{children}
);

/* ═══ Glass card ═══ */
const Glass = ({ children, className = “”, style: s = {}, onClick, hoverBorder = true }) => {
const [h, setH] = useState(false);
return (

);
};

/* ═══ Section heading ═══ */
const SHead = ({ label, children }) => (

);

/* ═══ Icon box ═══ */
const IBox = ({ children, size = 48, hovered = false }) => (

);

/* ══════════════════════════════════════════
DATA (exact from source code)
══════════════════════════════════════════ */
const navLinks = [
{ label: “About”, href: “#about” },
{ label: “Leadership”, href: “#leadership” },
{ label: “Services”, href: “#services” },
{ label: “Testimonials”, href: “#testimonials” },
{ label: “Sustainability”, href: “#csr” },
{ label: “Contact”, href: “#contact” },
];

const pillars = [
{ icon: Cpu, title: “Innovation”, desc: “AI-driven charging intelligence” },
{ icon: LeafIc, title: “Sustainability”, desc: “Zero-emission infrastructure” },
{ icon: Shield, title: “Reliability”, desc: “99.9% uptime guarantee” },
{ icon: Globe, title: “Global Scale”, desc: “UK-first, worldwide ambition” },
];

const leaders = [
{ name: “Robert Gray”, role: “Chairman”, desc: “Visionary leader with decades of experience in energy infrastructure and corporate governance, steering Linc\u2019s strategic direction.”, initials: “RG” },
{ name: “Sunday Ariba”, role: “Group CEO”, desc: “Seasoned executive driving Linc\u2019s mission to revolutionise EV charging through innovative business models and global partnerships.”, initials: “SA” },
{ name: “Olamilekan Ajasa”, role: “Chief Technology Officer”, desc: “Technology innovator spearheading AI-powered charging solutions, building the intelligent platform that powers next-generation mobility.”, initials: “OA” },
];

const services = [
{ icon: Fuel, title: “EV Charging Hubs”, desc: “Ultra-fast, strategically located charging hubs delivering rapid power to keep you moving. AI-optimised queuing and energy management for minimal wait times.” },
{ icon: Battery, title: “EV Battery Replacement”, desc: “Swap and go in minutes. Our automated battery replacement stations ensure you\u2019re back on the road faster than ever, with zero downtime.” },
{ icon: Home, title: “Home Installations”, desc: “Smart home charging solutions tailored to your lifestyle. Professional installation with app-controlled scheduling and energy optimisation.” },
{ icon: Brain, title: “Intelligent Charging Platform”, desc: “Our AI-powered platform manages energy distribution, predictive maintenance, and real-time analytics across the entire charging network.” },
];

const testimonials = [
{ name: “James H.”, role: “Fleet Manager, GreenLogistics”, quote: “Linc\u2019s charging hubs have transformed our fleet operations. The AI-optimised scheduling has cut our downtime by 40%.” },
{ name: “Sarah M.”, role: “EV Owner, Edinburgh”, quote: “Home installation was seamless. The app lets me schedule charging during off-peak hours \u2014 saving money and the planet.” },
{ name: “David K.”, role: “Operations Director, UrbanDrive”, quote: “The intelligent platform gives us real-time visibility across all stations. Reliability and innovation at its finest.” },
];

const csrItems = [
{ icon: LeafIc, title: “Decarbonisation”, desc: “Actively reducing carbon emissions through clean energy-powered charging infrastructure across all operations.” },
{ icon: Target, title: “SDG Alignment”, desc: “Contributing to UN Sustainable Development Goals \u2014 particularly affordable clean energy, sustainable cities, and climate action.” },
{ icon: TreePine, title: “Clean Energy”, desc: “Partnering with renewable energy providers to ensure our charging network runs on 100% green electricity.” },
{ icon: Heart, title: “Community Impact”, desc: “Investing in local communities through job creation, education programmes, and accessible EV charging infrastructure.” },
];

/* ══════════════════════════════════════════
MAIN APP
══════════════════════════════════════════ */
export default function LincEVCharging() {
const [menuOpen, setMenuOpen] = useState(false);
const [expanded, setExpanded] = useState(null);
const [form, setForm] = useState({ name: “”, email: “”, message: “” });
const [bounce, setBounce] = useState(0);

useEffect(() => {
const iv = setInterval(() => setBounce(p => (p + 1) % 2), 1000);
return () => clearInterval(iv);
}, []);

const scroll = (href) => {
const el = document.querySelector(href);
if (el) el.scrollIntoView({ behavior: “smooth” });
setMenuOpen(false);
};

const inputStyle = {
width: “100%”, padding: “12px 16px”, borderRadius: 8,
background: T.muted, border: `1px solid ${T.border}`, color: T.fg,
fontFamily: “‘DM Sans’,sans-serif”, fontSize: 14, outline: “none”, transition: “border-color .3s”
};

return (