Market research that
uncovers real advantage.

				
					import { useState, useEffect, useRef } from "react";
import { LineChart, Line, AreaChart, Area, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from "recharts";

// ─── DATA ────────────────────────────────────────────────────────────────────

const NAV_LINKS = ["Services", "Insights", "Case Studies", "Data Lab", "About"];

const SERVICES = [
  { icon: "🔬", title: "Market Research", desc: "Deep-dive qualitative and quantitative research methodologies that uncover hidden market dynamics and competitive positioning opportunities.", tag: "Research" },
  { icon: "📊", title: "Data Analytics", desc: "Advanced analytics pipelines transforming raw business data into structured intelligence that drives measurable outcomes.", tag: "Analytics" },
  { icon: "🧭", title: "Business Strategy", desc: "Evidence-based strategic frameworks built on proprietary datasets, enabling leadership teams to make decisions with confidence.", tag: "Strategy" },
  { icon: "👥", title: "Consumer Insights", desc: "Behavioral analytics and sentiment modelling that decode consumer motivations before they surface in conventional surveys.", tag: "Insights" },
  { icon: "🌐", title: "Competitive Intelligence", desc: "Real-time monitoring and structured analysis of competitor moves, market signals, and emerging industry disruptions.", tag: "Intelligence" },
  { icon: "📈", title: "Growth Advisory", desc: "From market entry to portfolio expansion — we build the data infrastructure and strategic roadmaps your growth demands.", tag: "Advisory" },
];

const INSIGHTS = [
  { category: "Market Report", title: "The Future of B2B SaaS: 2025–2030 Outlook", date: "May 2025", read: "12 min", img: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&q=80", featured: true },
  { category: "Consumer Study", title: "Post-Pandemic Purchasing Behavior Shifts", date: "Apr 2025", read: "8 min", img: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&q=80", featured: false },
  { category: "Industry Analysis", title: "Emerging Markets: Southeast Asia Tech Boom", date: "Mar 2025", read: "15 min", img: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&q=80", featured: false },
  { category: "Data Deep Dive", title: "AI Adoption Curves Across Enterprise Segments", date: "Mar 2025", read: "10 min", img: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&q=80", featured: false },
];

const CASE_STUDIES = [
  { client: "Global Fintech Scale-up", sector: "Financial Services", metric: "+340%", metricLabel: "Revenue Growth", desc: "Restructured go-to-market using segment-level behavioral data; identified three untapped verticals worth $2.4B combined.", color: "#0A2463" },
  { client: "FMCG Conglomerate", sector: "Consumer Goods", metric: "−28%", metricLabel: "Customer Churn", desc: "Deployed predictive churn modelling across 14 product lines, enabling proactive retention campaigns at scale.", color: "#1B4FE4" },
  { client: "Healthcare Network", sector: "Health & Life Sciences", metric: "4.2×", metricLabel: "Market Share Gain", desc: "Entry strategy backed by regional demand mapping; outpaced three incumbents within 18 months of launch.", color: "#0A2463" },
];

const TESTIMONIALS = [
  { name: "Sarah Chen", title: "Chief Strategy Officer, NovaTech", text: "Elixir Insights didn't just give us data — they gave us clarity. Their analysis reshaped our entire product roadmap for 2025.", avatar: "SC" },
  { name: "Marcus Webb", title: "CEO, Orion Capital Partners", text: "The depth of consumer research they delivered was unlike anything we'd seen from traditional consultancies. Genuinely transformative.", avatar: "MW" },
  { name: "Priya Nair", title: "VP Growth, HealthFirst", text: "We entered three new regional markets backed by Elixir's intelligence. Every single one hit profitability ahead of schedule.", avatar: "PN" },
];

const REVENUE_DATA = [
  { q: "Q1'23", value: 42 }, { q: "Q2'23", value: 58 }, { q: "Q3'23", value: 51 },
  { q: "Q4'23", value: 74 }, { q: "Q1'24", value: 82 }, { q: "Q2'24", value: 95 },
  { q: "Q3'24", value: 110 }, { q: "Q4'24", value: 138 },
];

const SEGMENT_DATA = [
  { name: "Financial Services", value: 34, color: "#1B4FE4" },
  { name: "Consumer Goods", value: 26, color: "#0A2463" },
  { name: "Healthcare", value: 22, color: "#3B82F6" },
  { name: "Technology", value: 18, color: "#93C5FD" },
];

const MARKET_DATA = [
  { month: "Jan", research: 65, analytics: 40 }, { month: "Feb", research: 72, analytics: 52 },
  { month: "Mar", research: 68, analytics: 61 }, { month: "Apr", research: 85, analytics: 74 },
  { month: "May", research: 91, analytics: 82 }, { month: "Jun", research: 88, analytics: 79 },
];

const STATS = [
  { value: "12+", label: "Years of Excellence" },
  { value: "340+", label: "Global Clients" },
  { value: "98%", label: "Client Retention" },
  { value: "$4.2B", label: "Value Generated" },
];

// ─── HOOKS ───────────────────────────────────────────────────────────────────

function useInView(threshold = 0.15) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setInView(true); }, { threshold });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, inView];
}

// ─── MICRO COMPONENTS ────────────────────────────────────────────────────────

function FadeIn({ children, delay = 0, className = "" }) {
  const [ref, inView] = useInView();
  return (
    <div ref={ref} className={className} style={{
      opacity: inView ? 1 : 0, transform: inView ? "translateY(0)" : "translateY(28px)",
      transition: `opacity 0.7s ease ${delay}s, transform 0.7s ease ${delay}s`
    }}>{children}</div>
  );
}

function Tag({ children, light }) {
  return (
    <span style={{
      display: "inline-block", padding: "3px 10px", borderRadius: 4,
      fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase",
      background: light ? "rgba(27,79,228,0.08)" : "rgba(27,79,228,0.15)",
      color: "#1B4FE4", border: "1px solid rgba(27,79,228,0.18)"
    }}>{children}</span>
  );
}

function GlowBtn({ children, primary, onClick, href }) {
  const [hov, setHov] = useState(false);
  const base = {
    display: "inline-flex", alignItems: "center", gap: 8, padding: "13px 28px",
    borderRadius: 6, fontFamily: "'DM Sans', sans-serif", fontWeight: 600,
    fontSize: 15, cursor: "pointer", border: "none", textDecoration: "none",
    transition: "all 0.25s ease", userSelect: "none",
  };
  const styles = primary
    ? { ...base, background: hov ? "#1340cc" : "#1B4FE4", color: "#fff", boxShadow: hov ? "0 8px 30px rgba(27,79,228,0.45)" : "0 4px 16px rgba(27,79,228,0.3)" }
    : { ...base, background: "transparent", color: hov ? "#fff" : "#0A2463", border: "1.5px solid #0A2463", boxShadow: hov ? "inset 0 0 0 100px #0A2463" : "none" };
  const El = href ? "a" : "button";
  return <El style={styles} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} onClick={onClick} href={href}>{children}</El>;
}

// ─── SECTIONS ────────────────────────────────────────────────────────────────

function Navbar({ dark }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", fn);
    return () => window.removeEventListener("scroll", fn);
  }, []);
  const bg = scrolled ? "rgba(255,255,255,0.97)" : "transparent";
  const textCol = scrolled ? "#0A2463" : (dark ? "#fff" : "#0A2463");
  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 1000,
      background: bg, backdropFilter: scrolled ? "blur(16px)" : "none",
      boxShadow: scrolled ? "0 1px 0 rgba(0,0,0,0.08)" : "none",
      transition: "all 0.35s ease", padding: "0 5vw",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", display: "flex", alignItems: "center", justifyContent: "space-between", height: 72 }}>
        <a href="#" style={{ textDecoration: "none", display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ width: 32, height: 32, borderRadius: 8, background: "linear-gradient(135deg,#1B4FE4,#0A2463)", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <span style={{ color: "#fff", fontWeight: 800, fontSize: 16, fontFamily: "'DM Sans',sans-serif" }}>E</span>
          </div>
          <span style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 18, color: textCol, letterSpacing: "-0.02em" }}>
            Elixir<span style={{ color: "#1B4FE4" }}>Insights</span>
          </span>
        </a>
        <div style={{ display: "flex", gap: 36, alignItems: "center" }} className="nav-links-desktop">
          {NAV_LINKS.map(l => (
            <a key={l} href={`#${l.toLowerCase().replace(" ", "-")}`} style={{
              fontFamily: "'DM Sans',sans-serif", fontSize: 14, fontWeight: 500,
              color: textCol, textDecoration: "none", opacity: 0.85,
              transition: "opacity 0.2s", letterSpacing: "0.01em"
            }}
              onMouseEnter={e => e.target.style.opacity = 1}
              onMouseLeave={e => e.target.style.opacity = 0.85}
            >{l}</a>
          ))}
          <GlowBtn primary href="#contact">Get Started</GlowBtn>
        </div>
      </div>
      <style>{`@media(max-width:768px){.nav-links-desktop{display:none!important}}`}</style>
    </nav>
  );
}

function Hero() {
  const [t, setT] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setT(p => p + 0.016), 16);
    return () => clearInterval(id);
  }, []);
  return (
    <section id="hero" style={{ minHeight: "100vh", background: "linear-gradient(160deg,#04102b 0%,#0A2463 45%,#0f1e4a 100%)", display: "flex", alignItems: "center", position: "relative", overflow: "hidden" }}>
      {/* animated bg circles */}
      {[...Array(6)].map((_, i) => (
        <div key={i} style={{
          position: "absolute", borderRadius: "50%", border: "1px solid rgba(27,79,228,0.18)",
          width: 200 + i * 140, height: 200 + i * 140,
          top: "50%", left: "50%",
          transform: `translate(-50%,-50%) rotate(${t * (0.3 + i * 0.1)}rad)`,
          transition: "transform 0.016s linear",
          opacity: 0.35 - i * 0.04,
        }} />
      ))}
      {/* floating data points */}
      {[
        { x: "15%", y: "25%", v: "+24.3%" }, { x: "78%", y: "18%", v: "8.2B" },
        { x: "82%", y: "72%", v: "340+" }, { x: "12%", y: "70%", v: "98%" },
      ].map((d, i) => (
        <div key={i} style={{
          position: "absolute", left: d.x, top: d.y,
          background: "rgba(255,255,255,0.06)", backdropFilter: "blur(12px)",
          border: "1px solid rgba(255,255,255,0.1)", borderRadius: 8, padding: "8px 14px",
          fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 15, color: "#fff",
          animation: `float${i % 2} 4s ease-in-out infinite`,
        }}>{d.v}</div>
      ))}
      <style>{`
        @keyframes float0{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
        @keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
      `}</style>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "120px 5vw 80px", position: "relative", zIndex: 1 }}>
        <div style={{ maxWidth: 760 }}>
          <div style={{ marginBottom: 24 }}>
            <Tag>Intelligence that moves markets</Tag>
          </div>
          <h1 style={{
            fontFamily: "'DM Serif Display', Georgia, serif", fontWeight: 400,
            fontSize: "clamp(42px, 6vw, 76px)", lineHeight: 1.08, color: "#fff",
            margin: "0 0 28px", letterSpacing: "-0.02em"
          }}>
            Data-Driven Decisions<br />
            <span style={{ color: "#60A5FA" }}>Start Here.</span>
          </h1>
          <p style={{
            fontFamily: "'DM Sans', sans-serif", fontSize: "clamp(16px,2vw,20px)",
            color: "rgba(255,255,255,0.72)", lineHeight: 1.7, maxWidth: 560, marginBottom: 44
          }}>
            Elixir Insights transforms complex market signals into strategic clarity. We equip the world's most ambitious organizations with the intelligence they need to lead.
          </p>
          <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
            <GlowBtn primary href="#services">Explore Services →</GlowBtn>
            <GlowBtn href="#contact" style={{ color: "#fff", borderColor: "rgba(255,255,255,0.4)" }}>Talk to an Expert</GlowBtn>
          </div>
          <div style={{ display: "flex", gap: 40, marginTop: 60, flexWrap: "wrap" }}>
            {STATS.map((s, i) => (
              <div key={i}>
                <div style={{ fontFamily: "'DM Serif Display',serif", fontSize: 32, color: "#fff", fontWeight: 400 }}>{s.value}</div>
                <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 13, color: "rgba(255,255,255,0.5)", marginTop: 2 }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      {/* bottom gradient blend */}
      <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 120, background: "linear-gradient(to bottom, transparent, #f8f9fc)" }} />
    </section>
  );
}

function About() {
  const pillars = [
    { icon: "🎯", title: "Precision Research", desc: "Every engagement starts with a rigorous research design — no assumptions, no shortcuts." },
    { icon: "⚡", title: "Speed to Insight", desc: "Our proprietary data infrastructure cuts delivery timelines by 60% vs. traditional consultancies." },
    { icon: "🔐", title: "Trusted by Leaders", desc: "Fortune 500 boards and high-growth scale-ups alike rely on our intelligence for critical decisions." },
    { icon: "🌍", title: "Global Coverage", desc: "84 country datasets, 12 proprietary panels, and real-time web intelligence — we don't miss markets." },
  ];
  return (
    <section id="about" style={{ padding: "120px 5vw", background: "#f8f9fc" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <FadeIn>
            <Tag>About Us</Tag>
            <h2 style={{ fontFamily: "'DM Serif Display',serif", fontSize: "clamp(32px,4vw,52px)", color: "#0A2463", margin: "16px 0 24px", lineHeight: 1.15, fontWeight: 400 }}>
              We don't just report data.<br />We interpret it.
            </h2>
            <p style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 17, color: "#445", lineHeight: 1.75, marginBottom: 20 }}>
              Founded by strategy consultants and data scientists, Elixir Insights bridges the gap between raw intelligence and boardroom decisions. We've built proprietary research infrastructure across 84 markets — giving our clients an information advantage that's simply unavailable elsewhere.
            </p>
            <p style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 17, color: "#445", lineHeight: 1.75 }}>
              Our methodology fuses traditional qualitative depth with modern machine learning pipelines — so you get both the story and the statistical confidence behind it.
            </p>
            <div style={{ marginTop: 36 }}>
              <GlowBtn primary href="#services">Our Services →</GlowBtn>
            </div>
          </FadeIn>
          <FadeIn delay={0.15}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
              {pillars.map((p, i) => (
                <div key={i} style={{
                  background: "#fff", borderRadius: 12, padding: "28px 24px",
                  border: "1px solid #e8eaf0", transition: "all 0.3s ease",
                  boxShadow: "0 2px 12px rgba(10,36,99,0.04)"
                }}
                  onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 12px 36px rgba(27,79,228,0.12)"; }}
                  onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 2px 12px rgba(10,36,99,0.04)"; }}
                >
                  <div style={{ fontSize: 28, marginBottom: 12 }}>{p.icon}</div>
                  <div style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 15, color: "#0A2463", marginBottom: 8 }}>{p.title}</div>
                  <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 13, color: "#667", lineHeight: 1.6 }}>{p.desc}</div>
                </div>
              ))}
            </div>
          </FadeIn>
        </div>
      </div>
      <style>{`@media(max-width:768px){#about .grid-2col{grid-template-columns:1fr!important}}`}</style>
    </section>
  );
}

function Services() {
  return (
    <section id="services" style={{ padding: "120px 5vw", background: "#fff" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <FadeIn>
          <div style={{ textAlign: "center", marginBottom: 72 }}>
            <Tag>What We Do</Tag>
            <h2 style={{ fontFamily: "'DM Serif Display',serif", fontSize: "clamp(32px,4vw,52px)", color: "#0A2463", margin: "16px 0 16px", fontWeight: 400 }}>
              Intelligence Services
            </h2>
            <p style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 17, color: "#556", maxWidth: 560, margin: "0 auto", lineHeight: 1.7 }}>
              From raw data collection to boardroom strategy — our service suite covers every layer of the intelligence value chain.
            </p>
          </div>
        </FadeIn>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(300px,1fr))", gap: 28 }}>
          {SERVICES.map((s, i) => (
            <FadeIn key={i} delay={i * 0.07}>
              <div style={{
                background: "#f8f9fc", borderRadius: 16, padding: "36px 32px",
                border: "1px solid #e8eaf0", height: "100%", boxSizing: "border-box",
                transition: "all 0.3s ease", cursor: "default", position: "relative", overflow: "hidden"
              }}
                onMouseEnter={e => {
                  e.currentTarget.style.background = "#0A2463";
                  e.currentTarget.style.transform = "translateY(-6px)";
                  e.currentTarget.style.boxShadow = "0 20px 48px rgba(10,36,99,0.22)";
                  e.currentTarget.querySelectorAll("[data-text]").forEach(el => el.style.color = "#fff");
                  e.currentTarget.querySelectorAll("[data-sub]").forEach(el => el.style.color = "rgba(255,255,255,0.65)");
                  e.currentTarget.querySelectorAll("[data-tag]").forEach(el => { el.style.background = "rgba(255,255,255,0.12)"; el.style.color = "#93C5FD"; el.style.borderColor = "rgba(255,255,255,0.2)"; });
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.background = "#f8f9fc";
                  e.currentTarget.style.transform = "translateY(0)";
                  e.currentTarget.style.boxShadow = "none";
                  e.currentTarget.querySelectorAll("[data-text]").forEach(el => el.style.color = "#0A2463");
                  e.currentTarget.querySelectorAll("[data-sub]").forEach(el => el.style.color = "#556");
                  e.currentTarget.querySelectorAll("[data-tag]").forEach(el => { el.style.background = "rgba(27,79,228,0.08)"; el.style.color = "#1B4FE4"; el.style.borderColor = "rgba(27,79,228,0.18)"; });
                }}
              >
                <div style={{ fontSize: 36, marginBottom: 20 }}>{s.icon}</div>
                <div data-tag style={{
                  display: "inline-block", padding: "3px 10px", borderRadius: 4, marginBottom: 16,
                  fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase",
                  background: "rgba(27,79,228,0.08)", color: "#1B4FE4", border: "1px solid rgba(27,79,228,0.18)",
                  transition: "all 0.3s"
                }}>{s.tag}</div>
                <h3 data-text style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 20, color: "#0A2463", margin: "0 0 12px", transition: "color 0.3s" }}>{s.title}</h3>
                <p data-sub style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 14, color: "#556", lineHeight: 1.7, margin: 0, transition: "color 0.3s" }}>{s.desc}</p>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

function DataViz() {
  const CustomTooltip = ({ active, payload, label }) => {
    if (!active || !payload?.length) return null;
    return (
      <div style={{ background: "#0A2463", border: "none", borderRadius: 8, padding: "10px 16px", fontFamily: "'DM Sans',sans-serif" }}>
        <p style={{ color: "#93C5FD", fontSize: 12, margin: "0 0 4px" }}>{label}</p>
        {payload.map((p, i) => <p key={i} style={{ color: "#fff", fontSize: 14, fontWeight: 600, margin: 0 }}>{p.name}: {p.value}</p>)}
      </div>
    );
  };
  return (
    <section id="data-lab" style={{ padding: "120px 5vw", background: "linear-gradient(180deg,#04102b 0%,#0A2463 100%)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <FadeIn>
          <div style={{ textAlign: "center", marginBottom: 72 }}>
            <Tag>Data Lab</Tag>
            <h2 style={{ fontFamily: "'DM Serif Display',serif", fontSize: "clamp(32px,4vw,52px)", color: "#fff", margin: "16px 0 16px", fontWeight: 400 }}>
              Intelligence, Visualized
            </h2>
            <p style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 17, color: "rgba(255,255,255,0.6)", maxWidth: 520, margin: "0 auto", lineHeight: 1.7 }}>
              Real-time data visualization drawn from our proprietary market intelligence panels.
            </p>
          </div>
        </FadeIn>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(340px,1fr))", gap: 28 }}>
          {[
            {
              title: "Client Revenue Index", subtitle: "Cumulative Q-over-Q growth across portfolio",
              chart: (
                <ResponsiveContainer width="100%" height={200}>
                  <AreaChart data={REVENUE_DATA} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
                    <defs>
                      <linearGradient id="rg" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor="#3B82F6" stopOpacity={0.4} />
                        <stop offset="95%" stopColor="#3B82F6" stopOpacity={0} />
                      </linearGradient>
                    </defs>
                    <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
                    <XAxis dataKey="q" tick={{ fill: "rgba(255,255,255,0.45)", fontSize: 11, fontFamily: "'DM Sans',sans-serif" }} axisLine={false} tickLine={false} />
                    <YAxis tick={{ fill: "rgba(255,255,255,0.45)", fontSize: 11 }} axisLine={false} tickLine={false} />
                    <Tooltip content={<CustomTooltip />} />
                    <Area type="monotone" dataKey="value" name="Index" stroke="#3B82F6" strokeWidth={2.5} fill="url(#rg)" dot={{ fill: "#3B82F6", r: 3 }} />
                  </AreaChart>
                </ResponsiveContainer>
              )
            },
            {
              title: "Market Research Activity", subtitle: "Research vs Analytics output (indexed)",
              chart: (
                <ResponsiveContainer width="100%" height={200}>
                  <BarChart data={MARKET_DATA} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
                    <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
                    <XAxis dataKey="month" tick={{ fill: "rgba(255,255,255,0.45)", fontSize: 11, fontFamily: "'DM Sans',sans-serif" }} axisLine={false} tickLine={false} />
                    <YAxis tick={{ fill: "rgba(255,255,255,0.45)", fontSize: 11 }} axisLine={false} tickLine={false} />
                    <Tooltip content={<CustomTooltip />} />
                    <Bar dataKey="research" name="Research" fill="#1B4FE4" radius={[3, 3, 0, 0]} />
                    <Bar dataKey="analytics" name="Analytics" fill="#60A5FA" radius={[3, 3, 0, 0]} />
                  </BarChart>
                </ResponsiveContainer>
              )
            },
            {
              title: "Client Sector Distribution", subtitle: "% breakdown by industry vertical",
              chart: (
                <div style={{ display: "flex", alignItems: "center", gap: 20, height: 200 }}>
                  <ResponsiveContainer width="55%" height={200}>
                    <PieChart>
                      <Pie data={SEGMENT_DATA} cx="50%" cy="50%" innerRadius={55} outerRadius={80} dataKey="value" strokeWidth={0}>
                        {SEGMENT_DATA.map((e, i) => <Cell key={i} fill={e.color} />)}
                      </Pie>
                      <Tooltip content={<CustomTooltip />} />
                    </PieChart>
                  </ResponsiveContainer>
                  <div style={{ flex: 1 }}>
                    {SEGMENT_DATA.map((d, i) => (
                      <div key={i} style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
                        <div style={{ width: 10, height: 10, borderRadius: 2, background: d.color, flexShrink: 0 }} />
                        <span style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 12, color: "rgba(255,255,255,0.65)" }}>{d.name}</span>
                        <span style={{ marginLeft: "auto", fontFamily: "'DM Sans',sans-serif", fontSize: 13, fontWeight: 700, color: "#fff" }}>{d.value}%</span>
                      </div>
                    ))}
                  </div>
                </div>
              )
            }
          ].map((c, i) => (
            <FadeIn key={i} delay={i * 0.1}>
              <div style={{ background: "rgba(255,255,255,0.04)", borderRadius: 16, padding: "32px 28px", border: "1px solid rgba(255,255,255,0.08)", backdropFilter: "blur(8px)" }}>
                <h3 style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 17, color: "#fff", margin: "0 0 4px" }}>{c.title}</h3>
                <p style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 12, color: "rgba(255,255,255,0.45)", margin: "0 0 24px" }}>{c.subtitle}</p>
                {c.chart}
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

function InsightsSection() {
  const [featured, ...rest] = INSIGHTS;
  return (
    <section id="insights" style={{ padding: "120px 5vw", background: "#fff" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <FadeIn>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, flexWrap: "wrap", gap: 20 }}>
            <div>
              <Tag>Research & Reports</Tag>
              <h2 style={{ fontFamily: "'DM Serif Display',serif", fontSize: "clamp(28px,3.5vw,48px)", color: "#0A2463", margin: "16px 0 0", fontWeight: 400 }}>
                Latest Insights
              </h2>
            </div>
            <GlowBtn href="#insights">View All Reports →</GlowBtn>
          </div>
        </FadeIn>
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 28 }}>
          <FadeIn>
            <div style={{
              borderRadius: 16, overflow: "hidden", border: "1px solid #e8eaf0",
              cursor: "pointer", transition: "all 0.3s", position: "relative"
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 20px 48px rgba(10,36,99,0.14)"; }}
              onMouseLeave={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; }}
            >
              <img src={featured.img} alt={featured.title} style={{ width: "100%", height: 280, objectFit: "cover", display: "block" }} />
              <div style={{ padding: "32px 32px 36px" }}>
                <div style={{ display: "flex", gap: 10, marginBottom: 16 }}>
                  <Tag>{featured.category}</Tag>
                  <span style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 12, color: "#889", alignSelf: "center" }}>{featured.date} · {featured.read} read</span>
                </div>
                <h3 style={{ fontFamily: "'DM Serif Display',serif", fontWeight: 400, fontSize: 26, color: "#0A2463", margin: "0 0 14px", lineHeight: 1.25 }}>{featured.title}</h3>
                <a href="#" style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 14, fontWeight: 600, color: "#1B4FE4", textDecoration: "none" }}>Read Full Report →</a>
              </div>
            </div>
          </FadeIn>
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            {rest.map((r, i) => (
              <FadeIn key={i} delay={0.1 + i * 0.08}>
                <div style={{
                  display: "flex", gap: 18, borderRadius: 12, padding: "20px", border: "1px solid #e8eaf0",
                  cursor: "pointer", transition: "all 0.3s"
                }}
                  onMouseEnter={e => { e.currentTarget.style.transform = "translateX(4px)"; e.currentTarget.style.background = "#f8f9fc"; }}
                  onMouseLeave={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.background = "#fff"; }}
                >
                  <img src={r.img} alt={r.title} style={{ width: 80, height: 80, objectFit: "cover", borderRadius: 8, flexShrink: 0 }} />
                  <div>
                    <Tag light>{r.category}</Tag>
                    <h4 style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 600, fontSize: 14, color: "#0A2463", margin: "8px 0 6px", lineHeight: 1.4 }}>{r.title}</h4>
                    <span style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 12, color: "#889" }}>{r.date} · {r.read}</span>
                  </div>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function CaseStudies() {
  return (
    <section id="case-studies" style={{ padding: "120px 5vw", background: "#f8f9fc" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <FadeIn>
          <div style={{ textAlign: "center", marginBottom: 72 }}>
            <Tag>Case Studies</Tag>
            <h2 style={{ fontFamily: "'DM Serif Display',serif", fontSize: "clamp(32px,4vw,52px)", color: "#0A2463", margin: "16px 0 16px", fontWeight: 400 }}>
              Outcomes That Speak
            </h2>
            <p style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 17, color: "#556", maxWidth: 500, margin: "0 auto", lineHeight: 1.7 }}>
              We measure our success by the outcomes we create — not the reports we deliver.
            </p>
          </div>
        </FadeIn>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(300px,1fr))", gap: 28 }}>
          {CASE_STUDIES.map((c, i) => (
            <FadeIn key={i} delay={i * 0.1}>
              <div style={{
                background: "#fff", borderRadius: 16, padding: "40px 36px", border: "1px solid #e8eaf0",
                transition: "all 0.3s", boxShadow: "0 2px 12px rgba(10,36,99,0.04)"
              }}
                onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-6px)"; e.currentTarget.style.boxShadow = "0 20px 48px rgba(10,36,99,0.14)"; }}
                onMouseLeave={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "0 2px 12px rgba(10,36,99,0.04)"; }}
              >
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 28 }}>
                  <div>
                    <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 12, color: "#889", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6 }}>{c.sector}</div>
                    <div style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 17, color: "#0A2463" }}>{c.client}</div>
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <div style={{ fontFamily: "'DM Serif Display',serif", fontSize: 36, color: "#1B4FE4", lineHeight: 1, fontWeight: 400 }}>{c.metric}</div>
                    <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 11, color: "#889", marginTop: 2 }}>{c.metricLabel}</div>
                  </div>
                </div>
                <div style={{ height: 1, background: "#e8eaf0", marginBottom: 20 }} />
                <p style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 14, color: "#556", lineHeight: 1.7, margin: 0 }}>{c.desc}</p>
                <a href="#" style={{ display: "inline-block", marginTop: 20, fontFamily: "'DM Sans',sans-serif", fontSize: 13, fontWeight: 600, color: "#1B4FE4", textDecoration: "none" }}>Read Full Story →</a>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const [active, setActive] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setActive(p => (p + 1) % TESTIMONIALS.length), 5000);
    return () => clearInterval(id);
  }, []);
  const t = TESTIMONIALS[active];
  return (
    <section id="testimonials" style={{ padding: "120px 5vw", background: "#fff" }}>
      <div style={{ maxWidth: 860, margin: "0 auto", textAlign: "center" }}>
        <FadeIn>
          <Tag>Testimonials</Tag>
          <h2 style={{ fontFamily: "'DM Serif Display',serif", fontSize: "clamp(28px,3.5vw,48px)", color: "#0A2463", margin: "16px 0 60px", fontWeight: 400 }}>
            What Our Clients Say
          </h2>
        </FadeIn>
        <FadeIn>
          <div style={{ position: "relative", minHeight: 200 }}>
            <div key={active} style={{ animation: "fadeSlide 0.5s ease" }}>
              <p style={{ fontFamily: "'DM Serif Display',serif", fontSize: "clamp(18px,2.5vw,26px)", color: "#0A2463", lineHeight: 1.6, fontStyle: "italic", marginBottom: 40, fontWeight: 400 }}>
                "{t.text}"
              </p>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 16 }}>
                <div style={{ width: 52, height: 52, borderRadius: "50%", background: "linear-gradient(135deg,#1B4FE4,#0A2463)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 16, color: "#fff" }}>{t.avatar}</div>
                <div style={{ textAlign: "left" }}>
                  <div style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 15, color: "#0A2463" }}>{t.name}</div>
                  <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 13, color: "#889" }}>{t.title}</div>
                </div>
              </div>
            </div>
          </div>
          <div style={{ display: "flex", justifyContent: "center", gap: 10, marginTop: 40 }}>
            {TESTIMONIALS.map((_, i) => (
              <button key={i} onClick={() => setActive(i)} style={{
                width: i === active ? 28 : 10, height: 10, borderRadius: 5,
                background: i === active ? "#1B4FE4" : "#cdd",
                border: "none", cursor: "pointer", transition: "all 0.3s"
              }} />
            ))}
          </div>
        </FadeIn>
      </div>
      <style>{`@keyframes fadeSlide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}`}</style>
    </section>
  );
}

function CTABanner() {
  return (
    <section style={{ padding: "100px 5vw", background: "linear-gradient(135deg,#04102b 0%,#0A2463 60%,#1B4FE4 100%)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: -60, right: -60, width: 400, height: 400, borderRadius: "50%", background: "rgba(27,79,228,0.2)", filter: "blur(80px)" }} />
      <div style={{ maxWidth: 860, margin: "0 auto", textAlign: "center", position: "relative", zIndex: 1 }}>
        <FadeIn>
          <h2 style={{ fontFamily: "'DM Serif Display',serif", fontSize: "clamp(32px,5vw,60px)", color: "#fff", margin: "0 0 24px", fontWeight: 400, lineHeight: 1.12 }}>
            Ready to unlock insights<br />for your business?
          </h2>
          <p style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 18, color: "rgba(255,255,255,0.65)", marginBottom: 44, maxWidth: 500, margin: "0 auto 44px", lineHeight: 1.7 }}>
            Join 340+ organizations that trust Elixir Insights to power their most critical decisions.
          </p>
          <div style={{ display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
            <a href="#contact" style={{
              display: "inline-flex", alignItems: "center", gap: 8, padding: "14px 32px",
              background: "#fff", color: "#0A2463", borderRadius: 6, fontFamily: "'DM Sans',sans-serif",
              fontWeight: 700, fontSize: 15, textDecoration: "none", transition: "all 0.25s",
              boxShadow: "0 4px 20px rgba(0,0,0,0.2)"
            }}
              onMouseEnter={e => { e.target.style.transform = "translateY(-2px)"; e.target.style.boxShadow = "0 8px 32px rgba(0,0,0,0.3)"; }}
              onMouseLeave={e => { e.target.style.transform = "none"; e.target.style.boxShadow = "0 4px 20px rgba(0,0,0,0.2)"; }}
            >
              Schedule a Consultation →
            </a>
            <a href="#insights" style={{
              display: "inline-flex", alignItems: "center", gap: 8, padding: "14px 32px",
              background: "transparent", color: "#fff", borderRadius: 6, fontFamily: "'DM Sans',sans-serif",
              fontWeight: 600, fontSize: 15, textDecoration: "none", border: "1.5px solid rgba(255,255,255,0.35)",
              transition: "all 0.25s"
            }}
              onMouseEnter={e => e.target.style.borderColor = "rgba(255,255,255,0.8)"}
              onMouseLeave={e => e.target.style.borderColor = "rgba(255,255,255,0.35)"}
            >
              Explore Reports
            </a>
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

function ContactSection() {
  const [form, setForm] = useState({ name: "", email: "", company: "", message: "" });
  const [sent, setSent] = useState(false);
  const submit = () => { if (form.name && form.email) setSent(true); };
  return (
    <section id="contact" style={{ padding: "120px 5vw", background: "#f8f9fc" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "start" }}>
        <FadeIn>
          <Tag>Get In Touch</Tag>
          <h2 style={{ fontFamily: "'DM Serif Display',serif", fontSize: "clamp(28px,3.5vw,48px)", color: "#0A2463", margin: "16px 0 24px", fontWeight: 400 }}>
            Start the conversation
          </h2>
          <p style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 16, color: "#556", lineHeight: 1.75, marginBottom: 40 }}>
            Whether you're exploring a specific research question or need a comprehensive market intelligence partner, our team is ready to help.
          </p>
          {[
            { icon: "📧", label: "Email", value: "hello@elixirinsights.com" },
            { icon: "📍", label: "Headquarters", value: "London · New York · Singapore" },
            { icon: "⏱", label: "Response Time", value: "Within 24 business hours" },
          ].map((c, i) => (
            <div key={i} style={{ display: "flex", gap: 16, marginBottom: 24 }}>
              <div style={{ fontSize: 22 }}>{c.icon}</div>
              <div>
                <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 12, color: "#889", textTransform: "uppercase", letterSpacing: "0.06em" }}>{c.label}</div>
                <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 15, fontWeight: 600, color: "#0A2463", marginTop: 2 }}>{c.value}</div>
              </div>
            </div>
          ))}
        </FadeIn>
        <FadeIn delay={0.15}>
          {sent ? (
            <div style={{ background: "#fff", borderRadius: 16, padding: "60px 40px", border: "1px solid #e8eaf0", textAlign: "center" }}>
              <div style={{ fontSize: 56, marginBottom: 20 }}>✅</div>
              <h3 style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 22, color: "#0A2463", margin: "0 0 12px" }}>Message Received!</h3>
              <p style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 15, color: "#556" }}>We'll be in touch within 24 hours.</p>
            </div>
          ) : (
            <div style={{ background: "#fff", borderRadius: 16, padding: "48px 40px", border: "1px solid #e8eaf0", boxShadow: "0 4px 24px rgba(10,36,99,0.06)" }}>
              {[
                { key: "name", label: "Full Name", ph: "Jane Smith" },
                { key: "email", label: "Work Email", ph: "jane@company.com" },
                { key: "company", label: "Company", ph: "Acme Corp" },
              ].map(f => (
                <div key={f.key} style={{ marginBottom: 20 }}>
                  <label style={{ display: "block", fontFamily: "'DM Sans',sans-serif", fontSize: 13, fontWeight: 600, color: "#0A2463", marginBottom: 8 }}>{f.label}</label>
                  <input
                    placeholder={f.ph} value={form[f.key]}
                    onChange={e => setForm(p => ({ ...p, [f.key]: e.target.value }))}
                    style={{ width: "100%", padding: "12px 16px", borderRadius: 8, border: "1.5px solid #dde", fontFamily: "'DM Sans',sans-serif", fontSize: 14, outline: "none", boxSizing: "border-box", transition: "border 0.2s", background: "#fafbfc" }}
                    onFocus={e => e.target.style.borderColor = "#1B4FE4"}
                    onBlur={e => e.target.style.borderColor = "#dde"}
                  />
                </div>
              ))}
              <div style={{ marginBottom: 28 }}>
                <label style={{ display: "block", fontFamily: "'DM Sans',sans-serif", fontSize: 13, fontWeight: 600, color: "#0A2463", marginBottom: 8 }}>Message</label>
                <textarea
                  rows={4} placeholder="Tell us about your research needs..."
                  value={form.message} onChange={e => setForm(p => ({ ...p, message: e.target.value }))}
                  style={{ width: "100%", padding: "12px 16px", borderRadius: 8, border: "1.5px solid #dde", fontFamily: "'DM Sans',sans-serif", fontSize: 14, outline: "none", boxSizing: "border-box", resize: "vertical", background: "#fafbfc", transition: "border 0.2s" }}
                  onFocus={e => e.target.style.borderColor = "#1B4FE4"}
                  onBlur={e => e.target.style.borderColor = "#dde"}
                />
              </div>
              <button onClick={submit} style={{
                width: "100%", padding: "14px", borderRadius: 8, border: "none",
                background: "#1B4FE4", color: "#fff", fontFamily: "'DM Sans',sans-serif",
                fontWeight: 700, fontSize: 15, cursor: "pointer", transition: "all 0.25s"
              }}
                onMouseEnter={e => { e.target.style.background = "#1340cc"; e.target.style.boxShadow = "0 8px 24px rgba(27,79,228,0.35)"; }}
                onMouseLeave={e => { e.target.style.background = "#1B4FE4"; e.target.style.boxShadow = "none"; }}
              >
                Send Message →
              </button>
            </div>
          )}
        </FadeIn>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    { title: "Services", links: ["Market Research", "Data Analytics", "Business Strategy", "Consumer Insights", "Competitive Intelligence"] },
    { title: "Company", links: ["About Us", "Our Team", "Careers", "Press & Media", "ESG Report"] },
    { title: "Resources", links: ["Insights Blog", "Research Reports", "Case Studies", "Webinars", "API Docs"] },
  ];
  return (
    <footer style={{ background: "#04102b", padding: "80px 5vw 40px" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 48, marginBottom: 64 }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 20 }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: "linear-gradient(135deg,#1B4FE4,#3B82F6)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <span style={{ color: "#fff", fontWeight: 800, fontSize: 16, fontFamily: "'DM Sans',sans-serif" }}>E</span>
              </div>
              <span style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 18, color: "#fff", letterSpacing: "-0.02em" }}>
                Elixir<span style={{ color: "#60A5FA" }}>Insights</span>
              </span>
            </div>
            <p style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 14, color: "rgba(255,255,255,0.45)", lineHeight: 1.7, maxWidth: 280, marginBottom: 28 }}>
              Transforming market complexity into strategic clarity for the world's most ambitious organizations.
            </p>
            <div style={{ display: "flex", gap: 10 }}>
              {["LinkedIn", "Twitter", "GitHub"].map(s => (
                <a key={s} href="#" style={{ padding: "8px 14px", borderRadius: 6, border: "1px solid rgba(255,255,255,0.12)", fontFamily: "'DM Sans',sans-serif", fontSize: 12, color: "rgba(255,255,255,0.55)", textDecoration: "none", transition: "all 0.2s" }}
                  onMouseEnter={e => { e.target.style.borderColor = "rgba(255,255,255,0.4)"; e.target.style.color = "#fff"; }}
                  onMouseLeave={e => { e.target.style.borderColor = "rgba(255,255,255,0.12)"; e.target.style.color = "rgba(255,255,255,0.55)"; }}
                >{s}</a>
              ))}
            </div>
          </div>
          {cols.map(col => (
            <div key={col.title}>
              <div style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 13, color: "#fff", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 20 }}>{col.title}</div>
              {col.links.map(l => (
                <a key={l} href="#" style={{ display: "block", fontFamily: "'DM Sans',sans-serif", fontSize: 14, color: "rgba(255,255,255,0.45)", textDecoration: "none", marginBottom: 12, transition: "color 0.2s" }}
                  onMouseEnter={e => e.target.style.color = "#fff"}
                  onMouseLeave={e => e.target.style.color = "rgba(255,255,255,0.45)"}
                >{l}</a>
              ))}
            </div>
          ))}
        </div>
        <div style={{ borderTop: "1px solid rgba(255,255,255,0.08)", paddingTop: 32, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
          <span style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 13, color: "rgba(255,255,255,0.3)" }}>© 2025 Elixir Insights Ltd. All rights reserved.</span>
          <div style={{ display: "flex", gap: 24 }}>
            {["Privacy Policy", "Terms of Service", "Cookie Policy"].map(l => (
              <a key={l} href="#" style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 13, color: "rgba(255,255,255,0.3)", textDecoration: "none" }}>{l}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

// ─── APP ─────────────────────────────────────────────────────────────────────

export default function App() {
  useEffect(() => {
    document.title = "Elixir Insights — Market Intelligence & Strategy";
    // Load Google Fonts
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap";
    document.head.appendChild(link);
    // Smooth scroll
    document.documentElement.style.scrollBehavior = "smooth";
  }, []);

  return (
    <div style={{ fontFamily: "'DM Sans', sans-serif", overflowX: "hidden" }}>
      <Navbar dark />
      <Hero />
      <About />
      <Services />
      <DataViz />
      <InsightsSection />
      <CaseStudies />
      <Testimonials />
      <CTABanner />
      <ContactSection />
      <Footer />
    </div>
  );
}