// variation-a.jsx — "Mission Control"
// Dark, cinematic landing with full-bleed NASA globe + glass headline panel.
// Confident-warm tone, big KPI typography, two paths (Work / Learning).

const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA, useRef: useRefA } = React;

// ────────────────────────────────────────────────────────────────────────────
// Small sparkline / mini-viz components used as design furniture
// ────────────────────────────────────────────────────────────────────────────

function Sparkline({ data, color = "#ff6b35", height = 32, fill = true }) {
  const W = 200,H = height;
  const max = Math.max(...data),min = Math.min(...data);
  const range = max - min || 1;
  const pts = data.map((v, i) => {
    const x = i / (data.length - 1) * W;
    const y = H - (v - min) / range * H * 0.85 - 2;
    return [x, y];
  });
  const path = pts.map((p, i) => i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`).join(" ");
  const area = `${path} L${W},${H} L0,${H} Z`;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{ display: "block", width: "100%", height: H }}>
      {fill && <path d={area} fill={color} opacity="0.18" />}
      <path d={path} fill="none" stroke={color} strokeWidth="2" strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
    </svg>);

}

function BarRow({ values, color = "#ff6b35", height = 36, gap = 3 }) {
  const max = Math.max(...values);
  return (
    <div style={{ display: "flex", alignItems: "flex-end", gap, height }}>
      {values.map((v, i) =>
      <div key={i} style={{
        flex: 1,
        height: `${v / max * 100}%`,
        background: color,
        opacity: 0.4 + v / max * 0.6,
        borderRadius: 1
      }} />
      )}
    </div>);

}

function DonutKPI({ value, label, color = "#ff6b35", size = 120, thick = 10 }) {
  const r = (size - thick) / 2;
  const c = 2 * Math.PI * r;
  const pct = Math.min(1, value / 100);
  return (
    <div style={{ position: "relative", width: size, height: size, flexShrink: 0 }}>
      <svg width={size} height={size}>
        <circle cx={size / 2} cy={size / 2} r={r} stroke="rgba(255,255,255,0.08)" strokeWidth={thick} fill="none" />
        <circle cx={size / 2} cy={size / 2} r={r}
        stroke={color} strokeWidth={thick} fill="none"
        strokeDasharray={`${c * pct} ${c}`}
        strokeLinecap="round"
        transform={`rotate(-90 ${size / 2} ${size / 2})`} />
      </svg>
      <div style={{
        position: "absolute", inset: 0, display: "flex", flexDirection: "column",
        alignItems: "center", justifyContent: "center", color: "white"
      }}>
        <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: size * 0.22, lineHeight: 1 }}>{label}</div>
      </div>
    </div>);

}

// ────────────────────────────────────────────────────────────────────────────
// Hero with globe + glass panel
// ────────────────────────────────────────────────────────────────────────────

function HeroA({ tweaks }) {
  const { events, loading } = window.useEonetEvents(80);
  const [inView, setInView] = useStateA(null);
  const [selectedId, setSelectedId] = useStateA(null);
  const [selectionMode, setSelectionMode] = useStateA("auto");
  const accent = tweaks.accent;

  // Build display feed sorted by date desc
  const feed = useMemoA(() => {
    return [...events].sort((a, b) => a.date < b.date ? 1 : -1);
  }, [events]);

  const selected = useMemoA(() => feed.find((ev) => ev.id === selectedId) || null, [feed, selectedId]);
  const active = selected || inView;

  const handleInView = (ev) => {
    setInView(ev);
    if (selectionMode === "auto") setSelectedId(ev ? ev.id : null);
  };

  const handleSelect = (ev) => {
    setSelectedId(ev.id);
    setSelectionMode("manual");
  };

  return (
    <section style={{
      position: "relative",
      minHeight: "100vh",
      background: tweaks.darkBg,
      overflow: "hidden",
      color: "white"
    }}>
      <style>{`
        @media (max-width: 1024px) {
          .hero-grid {
            grid-template-columns: 1fr !important;
            gap: 32px !important;
            padding: 48px 32px 64px !important;
          }
        }
        @media (max-width: 768px) {
          .hero-grid {
            padding: 40px 24px 48px !important;
            gap: 24px !important;
          }
          .hero-headline {
            font-size: clamp(48px, 8vw, 72px) !important;
          }
          .hero-content {
            gap: 16px !important;
          }
          .hero-scroll-cue {
            display: none !important;
          }
        }
      `}</style>
      {/* Ambient grain + radial gradient */}
      <div style={{
        position: "absolute", inset: 0,
        background: `radial-gradient(1200px 800px at 30% 40%, ${hexA(accent, 0.18)}, transparent 60%),
                     radial-gradient(900px 600px at 80% 80%, rgba(80, 120, 200, 0.12), transparent 70%)`,
        pointerEvents: "none"
      }} />

      {/* Nav removed */}

      {/* Globe — anchored inside the 1400px content column so it tracks with
                     the "Earth, Right Now" panel rather than the viewport edge. */}
      <style>{`
        .hero-globe-wrap {
          position: absolute;
          right: max(calc((100% - 1400px) / 2 - 60px), -80px);
          top: 50%;
          width: 820px;
          height: 820px;
          transform-origin: center;
          transform: translateY(-50%);
          z-index: 0;
        }
        @media (max-width: 1200px) {
          .hero-globe-wrap { transform: translateY(-50%) scale(0.78); right: -60px; }
        }
        @media (max-width: 1024px) {
          .hero-globe-wrap {
            transform: translateY(-50%) scale(0.65);
            right: -100px;
            top: 50%;
            bottom: auto;
          }
        }
        @media (max-width: 768px) {
          .hero-globe-wrap {
            transform: translateY(-50%) scale(0.42);
            right: -160px;
            top: 50%;
            bottom: auto;
          }
        }
      `}</style>
      <div className="hero-globe-wrap" style={{
        opacity: tweaks.globeOpacity,
        pointerEvents: "none"
      }}>
        <window.NasaGlobe
          size={820}
          dark={true}
          accent={accent}
          events={events}
          rotationSpeed={tweaks.rotationSpeed}
          mapStyle="country"
          mapColors={{
            ocean: "rgba(1,1,0,0.82)",
            land: "rgba(255,255,255,0.006)",
            coastline: "rgba(255,255,255,0.02)",
            border: "rgba(255,255,255,0.009)",
            grid: "rgba(255,255,255,0.003)"
          }}
          atmosphereScale={1.07}
          atmosphereIntensity={0.42}
          onActiveChange={handleInView}
          onEventSelect={handleSelect}
          selectedEventId={selectedId} />
      </div>

      {/* Content layout */}
      <div className="hero-grid" style={{
        position: "relative",
        maxWidth: 1400,
        margin: "0 auto",
        padding: "clamp(48px, 8vw, 80px) clamp(16px, 5vw, 56px) clamp(40px, 8vw, 64px)",
        display: "grid",
        gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 1fr)",
        gap: "clamp(24px, 4vw, 48px)",
        minHeight: "100vh"
      }}>
        {/* Left: identity + headline glass panel */}
        <div style={{ display: "flex", flexDirection: "column", justifyContent: "flex-end", gap: "clamp(16px, 3vw, 24px)", paddingBottom: "clamp(12px, 2vw, 24px)", position: "relative", zIndex: 2 }}>
          {/* Status pill */}
          <div style={{
            position: "relative",
            zIndex: 4,
            display: "flex",
            alignItems: "center",
            gap: "clamp(8px, 2vw, 12px)",
            width: "100%",
            color: "rgba(255,255,255,0.65)",
            fontSize: "clamp(10px, 1.5vw, 12px)",
            letterSpacing: "0.14em",
            textTransform: "uppercase",
            pointerEvents: "none",
            flexWrap: "wrap"
          }}>
            <span style={{ width: 8, height: 8, borderRadius: 8, background: "#3ddc84", boxShadow: `0 0 12px #3ddc84`, flex: "0 0 auto" }} />
            <span style={{ flex: "0 0 auto" }}>Live · NASA EONET feed · {feed.length} active events</span>
            <span style={{
              position: "relative",
              flex: "1 1 auto",
              height: 1,
              maxWidth: 610,
              background: `
                linear-gradient(90deg, transparent 78%, rgba(13,11,8,0.86) 100%),
                repeating-linear-gradient(90deg, rgba(61,220,132,0.42) 0 4px, transparent 4px 14px)
              `,
              opacity: 0.82,
              minWidth: 200
            }}>
              <span style={{
                position: "absolute",
                right: 42,
                top: "50%",
                width: 5,
                height: 5,
                borderRadius: 5,
                background: "rgba(61,220,132,0.18)",
                transform: "translateY(-50%)",
                boxShadow: "0 0 10px rgba(61,220,132,0.12)"
              }} />
            </span>
          </div>

          {/* Glass panel containing the headline */}
          <div style={{
            background: "rgba(20, 18, 14, 0.45)",
            backdropFilter: "blur(20px) saturate(140%)",
            WebkitBackdropFilter: "blur(20px) saturate(140%)",
            border: "1px solid rgba(255,255,255,0.08)",
            borderRadius: "clamp(16px, 3vw, 24px)",
            padding: "clamp(24px, 5vw, 44px) clamp(20px, 5vw, 48px)",
            boxShadow: "0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06)"
          }}>
            <div className="hero-headline" style={{
              fontFamily: tweaks.displayFont,
              fontWeight: 600,
              fontSize: "clamp(48px, 9vw, 132px)",
              lineHeight: 0.92,
              letterSpacing: "-0.04em",
              color: "white",
              textWrap: "balance"
            }}>
              <div>Data</div>
              <div style={{ display: "flex", alignItems: "center", gap: "clamp(10px, 2vw, 18px)", flexWrap: "wrap" }}>
                <span style={{ color: accent, fontWeight: "400" }}>+</span>
                <span style={{ fontFamily: tweaks.scriptFont, fontStyle: "italic", fontWeight: 400 }}>Design</span>
                <span style={{ color: accent }}>.</span>
              </div>
            </div>

            <div className="hero-content" style={{ marginTop: "clamp(16px, 3vw, 28px)", display: "flex", flexDirection: "column", gap: "clamp(12px, 2vw, 16px)" }}>
              <p style={{
                margin: 0, fontSize: "clamp(14px, 2vw, 18px)", lineHeight: 1.5,
                color: "rgba(255,255,255,0.78)",
                textWrap: "pretty"
              }}>
                We teach millions of people to communicate better with their data and <span style={{ color: accent }}>help brands turn boring data into stories that can't be ignored.</span>
              </p>
              <Signature />
            </div>

            <div style={{ marginTop: "clamp(16px, 3vw, 24px)", display: "flex", gap: "clamp(8px, 2vw, 12px)", flexWrap: "wrap" }}>
              <BigCTA label={tweaks.ctaPrimary} accent={accent} primary href="https://www.patreon.com/c/BigExcelEnergy" />
              <BigCTA label="Book a consult →" accent={accent} href="#work" />
            </div>
          </div>

          {/* Trusted-by logo strip */}
          <ClientStrip />
        </div>

        {/* Right: live event feed panel */}
        <div style={{ display: "flex", flexDirection: "column", justifyContent: "flex-end", paddingBottom: "clamp(12px, 2vw, 24px)", position: "relative", zIndex: 2 }}>
          <EventFeed feed={feed} active={active} accent={accent} loading={loading} selectedId={selectedId} onSelect={handleSelect} />
        </div>


      </div>
    </section>);

}

function NavA({ accent }) {
  const [mobileMenuOpen, setMobileMenuOpen] = useStateA(false);

  return (
    <div style={{
      position: "absolute", top: 0, left: 0, right: 0, zIndex: 5,
      padding: "clamp(16px, 4vw, 28px) clamp(16px, 5vw, 56px)",
      display: "flex", alignItems: "center", justifyContent: "space-between",
      maxWidth: "100%", margin: "0 auto"
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: "clamp(8px, 2vw, 12px)" }}>
        <Logomark accent={accent} />
        <div style={{ fontSize: "clamp(11px, 2.5vw, 13px)", fontWeight: 600, letterSpacing: "0.02em" }}>
          Joshua Cottrell-Schloemer
          <div style={{ fontSize: "clamp(9px, 2vw, 10.5px)", fontWeight: 400, color: "rgba(255,255,255,0.55)", letterSpacing: "0.08em", textTransform: "uppercase", marginTop: 2 }}>
            Data Communications · Design & Strategy
          </div>
        </div>
      </div>
      
      {/* Desktop nav */}
      <nav className="hero-nav" style={{ display: "flex", gap: "clamp(20px, 4vw, 36px)", fontSize: "clamp(11px, 2vw, 13px)", color: "rgba(255,255,255,0.75)" }}>
        <a style={navLinkStyle} href="#work">Work</a>
        <a style={navLinkStyle} href="#learning">Learning</a>
        <a style={navLinkStyle} href="#about">About</a>
        <a style={navLinkStyle} href="#contact">Contact</a>
      </nav>
      
      <NavCTA accent={accent} />
    </div>);

}

const navLinkStyle = {
  textDecoration: "none", color: "inherit", letterSpacing: "0.02em", fontWeight: 500
};

function NavCTA({ accent }) {
  const [hover, setHover] = useStateA(false);
  return (
    <a href="#contact"
    onMouseEnter={() => setHover(true)}
    onMouseLeave={() => setHover(false)}
    style={{
      background: "white", color: "#0a0a0a",
      padding: "10px 18px", borderRadius: 999,
      fontSize: 12.5, fontWeight: 600,
      textDecoration: "none", display: "flex", alignItems: "center", gap: 8,
      boxShadow: hover ? `0 8px 24px ${hexA(accent, 0.35)}` : "0 2px 8px rgba(0,0,0,0.2)",
      transform: hover ? "translateY(-1px)" : "translateY(0)",
      transition: "all .2s cubic-bezier(0.2, 0.8, 0.2, 1)"
    }}>
      <span style={{
        width: 6, height: 6, background: accent, borderRadius: 6,
        boxShadow: `0 0 8px ${hexA(accent, 0.6)}`
      }} />
      Let's talk
    </a>);

}

function Logomark({ accent }) {
  return (
    <svg width="32" height="32" viewBox="0 0 32 32">
      <rect x="0" y="0" width="32" height="32" rx="8" fill="#1a1814" />
      <text x="16" y="22" textAnchor="middle" fontFamily="'Space Grotesk', sans-serif" fontWeight="700" fontSize="18" fill="white">J</text>
      <circle cx="25" cy="8" r="3" fill={accent} />
    </svg>);

}

function Signature() {
  return (
    <div style={{ color: "rgba(255,255,255,0.55)" }}>
      <div style={{ fontFamily: "'Caveat', cursive", fontSize: 28, lineHeight: 1, color: "rgba(255,255,255,0.85)" }}>~ Josh</div>
      <div style={{ fontSize: 10.5, letterSpacing: "0.12em", textTransform: "uppercase", marginTop: 4 }}>Excel MVP · @BigExcelEnergy</div>
    </div>);

}

function BigCTA({ label, accent, primary, href }) {
  const [hover, setHover] = useStateA(false);
  
  const handleClick = (e) => {
    if (href && href.startsWith('#')) {
      e.preventDefault();
      const element = document.querySelector(href);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
  };
  
  return (
    <a href={href || "#"}
    onClick={handleClick}
    target={href && !href.startsWith('#') ? "_blank" : undefined}
    rel={href && !href.startsWith('#') ? "noopener noreferrer" : undefined}
    onMouseEnter={() => setHover(true)}
    onMouseLeave={() => setHover(false)}
    style={{
      display: "inline-flex", alignItems: "center", gap: 10,
      padding: "14px 22px",
      background: primary ? accent : hover ? "rgba(255,255,255,0.06)" : "transparent",
      color: primary ? "#0a0a0a" : "white",
      border: primary ? "none" : `1px solid ${hover ? "rgba(255,255,255,0.4)" : "rgba(255,255,255,0.22)"}`,
      borderRadius: 999,
      fontSize: 14, fontWeight: 600,
      textDecoration: "none",
      transform: hover ? "translateY(-1px)" : "translateY(0)",
      boxShadow: primary && hover ? `0 10px 28px ${hexA(accent, 0.45)}` : "none",
      transition: "all .2s cubic-bezier(0.2, 0.8, 0.2, 1)"
    }}>
      {label}
    </a>);

}

function KpiCell({ n, label, sub }) {
  return (
    <div style={{ background: "rgba(20,18,14,0.6)", padding: "16px 18px" }}>
      <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 32, lineHeight: 1, color: "white" }}>{n}</div>
      <div style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)", marginTop: 4 }}>{label}</div>
      <div style={{ marginTop: 10 }}>{sub}</div>
    </div>);

}

function MvpTimeline({ accent }) {
  // Two awards (2024, 2025) — current. 2026 is the next horizon.
  const points = [
  { year: 2024, active: true },
  { year: 2025, active: true },
  { year: 2026, active: false }];

  return (
    <div style={{ display: "flex", alignItems: "flex-end", gap: 4, height: 24, paddingTop: 2 }}>
      {points.map((p, i) =>
      <React.Fragment key={p.year}>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 3 }}>
            <div style={{
            width: 7, height: 7, borderRadius: 7,
            background: p.active ? accent : "transparent",
            border: p.active ? "none" : "1.2px dashed rgba(255,255,255,0.32)",
            boxShadow: p.active ? `0 0 8px ${hexA(accent, 0.55)}` : "none"
          }} />
            <div style={{ fontSize: 8.5, color: "rgba(255,255,255,0.45)", fontVariantNumeric: "tabular-nums", letterSpacing: "0.04em" }}>{p.year}</div>
          </div>
          {i < points.length - 1 &&
        <div style={{
          flex: 1, height: 1, marginBottom: 12,
          background: points[i + 1].active ?
          hexA(accent, 0.7) :
          "repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 3px, transparent 3px 6px)"
        }} />
        }
        </React.Fragment>
      )}
    </div>);

}

// ────────────────────────────────────────────────────────────────────────────
// Brand logo strip (Trusted by) — typographic marks tuned per brand
// ────────────────────────────────────────────────────────────────────────────

function ClientStrip() {
  return (
    <div style={{
      display: "flex", alignItems: "center", gap: 28,
      background: "rgba(255,255,255,0.025)",
      border: "1px solid rgba(255,255,255,0.06)",
      borderRadius: 16,
      padding: "14px 22px"
    }}>
      <div style={{
        flexShrink: 0,
        fontSize: 10.5, color: "rgba(255,255,255,0.45)",
        letterSpacing: "0.16em", textTransform: "uppercase",
        lineHeight: 1.3, maxWidth: 100
      }}>TRUSTED BY TEAMS AT

      </div>
      <div style={{ width: 1, alignSelf: "stretch", background: "rgba(255,255,255,0.08)", margin: "4px 0" }} />
      <div style={{
        flex: 1,
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 20, color: "rgba(255,255,255,0.78)"
      }}>
        <MicrosoftMark />
        <PhilipsMark />
        <KelloggsMark />
        <NovoMark />
      </div>
    </div>);

}

const LOGO_BASE_STYLE = {
  display: "block",
  objectFit: "contain",
  opacity: 0.85,
  filter: "drop-shadow(0 0 1px rgba(0,0,0,0.4))"
};

function MicrosoftMark() {
  return (
    <img
      src="./moustoo8-pasted-1777618173300-0.png"
      alt="Microsoft"
      style={{ ...LOGO_BASE_STYLE, height: 22, width: "auto" }} />);


}

function PhilipsMark() {
  return (
    <img
      src="./moustoo9-pasted-1777618191590-0.png"
      alt="Philips"
      style={{ ...LOGO_BASE_STYLE, height: 32, width: "auto" }} />);


}

function KelloggsMark() {
  return (
    <img
      src="./moustoo8-pasted-1777618199153-0.png"
      alt="Kellogg's"
      style={{ ...LOGO_BASE_STYLE, height: 28, width: "auto" }} />);


}

function NovoMark() {
  return (
    <img
      src="./moustoo9-pasted-1777618183847-0.png"
      alt="Novo Nordisk"
      style={{ ...LOGO_BASE_STYLE, height: 34, width: "auto" }} />);


}

// ────────────────────────────────────────────────────────────────────────────
// Live event feed panel
// ────────────────────────────────────────────────────────────────────────────

function EventFeed({ feed, active, accent, loading, selectedId, onSelect }) {
  const activeId = active ? active.id : feed[0] && feed[0].id;
  const scrollRef = useRefA(null);

  useEffectA(() => {
    if (!activeId || !scrollRef.current) return;
    const container = scrollRef.current;
    const el = container.querySelector(`[data-a-event-id="${CSS.escape(String(activeId))}"]`);
    if (!el) return;
    const elTop = el.offsetTop - container.offsetTop;
    const elBottom = elTop + el.offsetHeight;
    if (elTop < container.scrollTop || elBottom > container.scrollTop + container.clientHeight) {
      container.scrollTop = elTop - container.clientHeight / 2 + el.offsetHeight / 2;
    }
  }, [activeId]);

  return (
    <div style={{
      background: "rgba(15, 13, 10, 0.28)",
      backdropFilter: "blur(18px) saturate(140%)",
      WebkitBackdropFilter: "blur(18px) saturate(140%)",
      border: "1px solid rgba(255,255,255,0.08)",
      borderRadius: 20,
      padding: 20,
      maxHeight: 300,
      display: "flex", flexDirection: "column",
      boxShadow: "0 20px 60px rgba(0,0,0,0.4)"
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ width: 22, height: 22, borderRadius: 6, background: "rgba(255,255,255,0.08)", display: "grid", placeItems: "center", fontSize: 11 }}>◯</div>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: "white" }}>Earth, Right Now</div>
            <div style={{ fontSize: 10.5, color: "rgba(255,255,255,0.5)", letterSpacing: "0.06em" }}>NASA EONET · auto-updates</div>
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 6, color: "rgba(255,255,255,0.65)", fontSize: 10.5, letterSpacing: "0.14em", textTransform: "uppercase" }}>
          <span style={{ width: 6, height: 6, borderRadius: 6, background: "#3ddc84", boxShadow: "0 0 10px #3ddc84", animation: "pulseDot 1.6s ease-in-out infinite" }} />
          LIVE
        </div>
      </div>

      <div ref={scrollRef} style={{ overflowY: "auto", display: "flex", flexDirection: "column", gap: 3, flex: 1, paddingRight: 4, scrollbarWidth: "thin", scrollbarColor: "rgba(255,255,255,0.18) transparent" }}>
        {(loading ? Array.from({ length: 5 }) : feed).map((ev, i) => {
          if (!ev) return <SkeletonRow key={i} />;
          const isActive = ev.id === activeId;
          const isSelected = ev.id === selectedId;
          return <EventRow key={ev.id} ev={ev} active={isActive} selected={isSelected} accent={accent} onSelect={() => onSelect && onSelect(ev)} />;
        })}
      </div>

    </div>);

}

function EventRow({ ev, active, selected, accent, onSelect }) {
  const cat = ev.category || "Event";
  const date = ev.date ? new Date(ev.date) : null;
  const dStr = date ? date.toLocaleDateString(undefined, { month: "short", day: "numeric" }) : "—";
  const dotAccent = selected ? "#ff9a3d" : accent;
  return (
    <div onClick={onSelect} data-a-event-id={ev.id} style={{
      display: "grid",
      gridTemplateColumns: "auto 1fr auto",
      gap: 12,
      alignItems: "center",
      borderRadius: 10,
      cursor: "pointer",
      background: active ? `linear-gradient(90deg, ${hexA(selected ? "#ff9a3d" : accent, selected ? 0.16 : 0.09)}, transparent)` : "transparent",
      border: active ? `1px solid ${hexA(selected ? "#ff9a3d" : accent, selected ? 0.32 : 0.18)}` : "1px solid transparent",
      boxShadow: selected ? `0 0 14px ${hexA("#ff9a3d", 0.10)}` : "none",
      transition: "all .25s ease",
      padding: "7px 10px"
    }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
        <div style={{
          width: 8, height: 8, borderRadius: 8,
          background: selected ? "#ff9a3d" : active ? accent : "rgba(255,255,255,0.25)",
          boxShadow: active ? `0 0 8px ${hexA(selected ? "#ff9a3d" : accent, 0.55)}` : "none"
        }} />
        <div style={{ fontSize: 9.5, color: "rgba(255,255,255,0.45)", fontVariantNumeric: "tabular-nums" }}>{dStr}</div>
      </div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: 11.5, fontWeight: active ? 700 : 500, color: active ? "white" : "rgba(255,255,255,0.78)", lineHeight: 1.3, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
          {ev.title}
        </div>
        <div style={{ fontSize: 9, color: "rgba(255,255,255,0.45)", marginTop: 2, letterSpacing: "0.04em", textTransform: "uppercase", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
          {cat} · {ev.lat.toFixed(1)}°, {ev.lng.toFixed(1)}°
        </div>
      </div>
      <div style={{ fontSize: 9.5, color: selected ? "#ff9a3d" : active ? accent : "rgba(255,255,255,0.3)", fontWeight: active ? 700 : 400 }}>
        {selected ? "● SELECTED" : active ? "● LIVE" : ""}
      </div>
    </div>);

}

function SkeletonRow() {
  return (
    <div style={{ padding: "10px 12px", display: "flex", gap: 12, alignItems: "center" }}>
      <div style={{ width: 8, height: 8, borderRadius: 8, background: "rgba(255,255,255,0.15)" }} />
      <div style={{ flex: 1 }}>
        <div style={{ height: 8, background: "rgba(255,255,255,0.1)", borderRadius: 4, width: "70%" }} />
        <div style={{ height: 6, background: "rgba(255,255,255,0.06)", borderRadius: 4, width: "40%", marginTop: 6 }} />
      </div>
    </div>);

}

// ────────────────────────────────────────────────────────────────────────────
// Section: Two paths (Work / Learning) — bento style
// ────────────────────────────────────────────────────────────────────────────

function PathsA({ tweaks }) {
  const accent = tweaks.accent;
  return (
    <section id="work" style={{ background: "#0a0907", color: "white", padding: "clamp(60px, 12vw, 120px) clamp(16px, 5vw, 56px)" }}>
      <style>{`
        @media (max-width: 768px) {
          .paths-header {
            grid-template-columns: 1fr !important;
            gap: 24px !important;
          }
          .paths-header > div:last-child {
            text-align: left !important;
          }
          .paths-grid {
            grid-template-columns: 1fr !important;
          }
          .path-column {
            padding: 24px !important;
          }
        }
      `}</style>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        {/* Section header */}
        <div className="paths-header" style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: "clamp(24px, 4vw, 48px)", alignItems: "end", marginBottom: "clamp(32px, 5vw, 56px)" }}>
          <div>
            <div style={{ fontSize: "clamp(10px, 1.5vw, 11.5px)", color: accent, letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: "clamp(12px, 2vw, 18px)", display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ width: 28, height: 1, background: hexA(accent, 0.6) }} />
              Two ways forward
            </div>
            <h2 style={{
              margin: 0, fontFamily: tweaks.displayFont, fontWeight: 600,
              fontSize: "clamp(36px, 7vw, 84px)", lineHeight: 0.95, letterSpacing: "-0.03em"
            }}>
              <span style={{ color: accent, fontStyle: "italic", fontWeight: 300 }}>Work together,</span><br />
              or <span style={{ color: "white" }}>learn together</span><span style={{ color: "white" }}>.</span>
            </h2>
          </div>
          <div style={{ fontSize: "clamp(12px, 1.5vw, 13px)", color: "rgba(255,255,255,0.55)", maxWidth: 280, textAlign: "right" }}>Pick a door. Or scroll past — there's an About section + data viz samples below.

          </div>
        </div>

        {/* Bento grid */}
        <div className="paths-grid" style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: "clamp(16px, 3vw, 24px)" }}>
          {/* WORK */}
          <PathColumn
            tag="Work"
            num="01"
            title="Work together"
            subtitle="For brands and teams who need their data to land. Consulting, reviews, sponsorships, licensing."
            accent={accent}
            color="#ff6b35"
            icon="◆"
            tweaks={tweaks}
            items={[
            { label: "Consulting", desc: "Strategy + design for data-heavy products. Project minimums typically start at $5K.", icon: <ConsultIcon accent={accent} />, big: "01" },
            { label: "Dashboard & Report Reviews", desc: "Async feedback to help you level up your reports. 10 minute custom videos for $100 or 3 hour async review sessions for $1K.", icon: <DashIcon accent={accent} />, big: "02" },
            { label: "Sponsorships", desc: "Reach 480K+ data-curious people on TikTok and 20K via newsletter.", icon: <SponsorIcon accent={accent} />, big: "03" },
            { label: "Licensing", desc: "License my visuals, templates, or visual systems for internal use, reporting or marketing.", icon: <LicenseIcon accent={accent} />, big: "04" }]
            } />
          
          {/* LEARNING */}
          <PathColumn
            tag="Learning"
            num="02"
            title="Learn together"
            subtitle="Free templates, paid templates, deep-dive tutorials, and a small community on Patreon."
            accent="#5ec3a8"
            color="#5ec3a8"
            icon="✦"
            tweaks={tweaks}
            items={[
            { label: "Free Template Newsletter", desc: "20K subscribers. One Excel template a week, beautifully designed.", icon: <NewsIcon accent="#5ec3a8" />, big: "01" },
            { label: "Patreon", desc: "Monthly dashboard reviews, template files, and better access for questions and support.", icon: <PatreonIcon accent="#5ec3a8" />, big: "02" },
            { label: "Template Pack", desc: "20 production-ready Excel templates. One-time purchase, lifetime updates.", icon: <PackIcon accent="#5ec3a8" />, big: "03" },
            { label: "TikTok & YouTube", desc: "@BigExcelEnergy — short-form Excel design, almost daily.", icon: <SocialIcon accent="#5ec3a8" />, big: "04" }]
            } />
          
        </div>
      </div>
    </section>);

}

function PathColumn({ tag, num, title, subtitle, items, accent, color, icon, tweaks }) {
  const [dialogOpen, setDialogOpen] = useStateA(null);
  
  return (
    <div className="path-column" style={{
      background: "linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01))",
      border: "1px solid rgba(255,255,255,0.08)",
      borderRadius: "clamp(20px, 4vw, 28px)",
      padding: "clamp(20px, 4vw, 32px)",
      display: "flex", flexDirection: "column", gap: "clamp(16px, 3vw, 24px)",
      position: "relative", overflow: "hidden"
    }}>
      {/* Large faded serif number — watermark, very low opacity */}
      <div style={{
        position: "absolute", top: -30, right: -10,
        fontFamily: tweaks && tweaks.displayFont || "'Fraunces', Georgia, serif",
        fontWeight: 700,
        fontSize: "clamp(180px, 30vw, 280px)", lineHeight: 1, letterSpacing: "-0.06em",
        color: hexA(color, 0.07),
        userSelect: "none", pointerEvents: "none"
      }}>{num}</div>

      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", position: "relative" }}>
        <div style={{ fontSize: "clamp(9px, 1.5vw, 11px)", color: color, letterSpacing: "0.18em", textTransform: "uppercase" }}>{tag}</div>
        {/* Dark glass icon box — sits clearly above the number */}
        <div style={{
          width: "clamp(40px, 8vw, 48px)", height: "clamp(40px, 8vw, 48px)", borderRadius: "clamp(10px, 2vw, 14px)",
          background: "rgba(10,9,7,0.82)",
          border: `1.5px solid ${hexA(color, 0.55)}`,
          display: "grid", placeItems: "center",
          color: color, fontSize: "clamp(16px, 3vw, 20px)",
          backdropFilter: "blur(8px)",
          boxShadow: `0 0 0 1px rgba(0,0,0,0.4), inset 0 1px 0 ${hexA(color, 0.12)}`
        }}>{icon}</div>
      </div>
      <div style={{ position: "relative" }}>
        <div style={{
          fontFamily: tweaks && tweaks.displayFont || "'Fraunces', Georgia, serif",
          fontWeight: 600, fontSize: "clamp(32px, 6vw, 42px)", letterSpacing: "-0.02em", lineHeight: 1
        }}>
          {title}
        </div>
        <div style={{ fontSize: "clamp(12px, 2vw, 14px)", color: "rgba(255,255,255,0.6)", marginTop: "clamp(8px, 1.5vw, 10px)", maxWidth: 360 }}>{subtitle}</div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(8px, 2vw, 12px)", position: "relative" }}>
        {items.map((it, i) => {
          let actionLabel = "Explore";
          let onAction = null;
          let href = null;
          
          if (it.label === "Consulting") {
            actionLabel = "Get in Touch";
            onAction = () => setDialogOpen("consulting");
          } else if (it.label === "Dashboard & Report Reviews") {
            href = "https://www.patreon.com/c/bigexcelenergy/shop";
            actionLabel = "View Products";
          } else if (it.label === "Sponsorships") {
            actionLabel = "Get in Touch";
            onAction = () => setDialogOpen("sponsorships");
          } else if (it.label === "Licensing") {
            actionLabel = "Get in Touch";
            onAction = () => setDialogOpen("licensing");
          } else if (it.label === "Free Template Newsletter") {
            href = "https://excel.kit.com";
            actionLabel = "Subscribe";
          } else if (it.label === "Patreon") {
            href = "https://www.patreon.com/c/BigExcelEnergy";
            actionLabel = "Join";
          } else if (it.label === "Template Pack") {
            href = "https://excel.kit.com/products/everything";
            actionLabel = "Buy Now";
          } else if (it.label === "TikTok & YouTube") {
            actionLabel = "Follow";
            onAction = () => setDialogOpen("social");
          }
          
          return <PathCard key={i} {...it} color={color} actionLabel={actionLabel} onAction={onAction} href={href} />;
        })}
      </div>
      
      {/* Dialogs */}
      <EmailDialog 
        isOpen={dialogOpen === "consulting"}
        onClose={() => setDialogOpen(null)}
        title="Let's Work Together"
        message="I'm happy to hear you want to work together. Send over as many details as possible to:"
        subtext="The more details you share, the better. Including a budget range is recommended and will make it easier for me to tell you if I'm the right guy for the job."
      />
      
      <EmailDialog 
        isOpen={dialogOpen === "sponsorships"}
        onClose={() => setDialogOpen(null)}
        title="Sponsorship Inquiry"
        message="I'd love to discuss this opportunity. Send over as many details as possible to:"
        subtext="The more details you share, the better. Including a budget range is recommended and will make it easier for me to tell you if I'm the right guy for the job."
      />
      
      <EmailDialog 
        isOpen={dialogOpen === "licensing"}
        onClose={() => setDialogOpen(null)}
        title="Licensing Inquiry"
        message="Let's discuss your licensing needs. Send over as many details as possible to:"
        subtext="The more details you share, the better. Including a budget range is recommended and will make it easier for me to tell you if I'm the right guy for the job."
      />
      
      {dialogOpen === "social" && (
        <div onClick={() => setDialogOpen(null)} style={{
          position: "fixed", inset: 0, zIndex: 100,
          background: "rgba(6,5,3,0.97)", backdropFilter: "blur(24px)",
          display: "flex", alignItems: "center", justifyContent: "center",
          cursor: "zoom-out"
        }}>
          <div onClick={(e) => e.stopPropagation()} style={{
            background: "rgba(15,13,10,0.8)",
            border: "1px solid rgba(255,255,255,0.12)",
            borderRadius: 20,
            padding: "40px 48px",
            maxWidth: 500,
            textAlign: "center",
            cursor: "auto"
          }}>
            <h3 style={{ margin: "0 0 24px 0", fontSize: 24, fontWeight: 600 }}>Follow on Social</h3>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <a href="https://www.tiktok.com/@bigexcelenergy" target="_blank" rel="noopener noreferrer" style={{
                background: "rgba(255,255,255,0.08)",
                border: "1px solid rgba(255,255,255,0.15)",
                color: "white",
                padding: "14px 16px",
                borderRadius: 12,
                fontSize: 15,
                fontWeight: 600,
                textDecoration: "none",
                cursor: "pointer",
                transition: "all .3s ease",
                display: "block"
              }}>
                TikTok →
              </a>
              <a href="https://www.youtube.com/channel/UCuAiO0SWqrJHXYVCY4PaE7A" target="_blank" rel="noopener noreferrer" style={{
                background: "rgba(255,255,255,0.08)",
                border: "1px solid rgba(255,255,255,0.15)",
                color: "white",
                padding: "14px 16px",
                borderRadius: 12,
                fontSize: 15,
                fontWeight: 600,
                textDecoration: "none",
                cursor: "pointer",
                transition: "all .3s ease",
                display: "block"
              }}>
                YouTube →
              </a>
            </div>
            
            <button onClick={() => setDialogOpen(null)} style={{
              marginTop: 24,
              background: "rgba(255,255,255,0.06)",
              border: "1px solid rgba(255,255,255,0.12)",
              color: "rgba(255,255,255,0.7)",
              padding: "10px 20px",
              borderRadius: 8,
              fontSize: 13,
              cursor: "pointer",
              transition: "all .2s ease",
              width: "100%"
            }}>
              Close
            </button>
          </div>
        </div>
      )}
    </div>);

}

function PathCard({ label, desc, icon, big, color, onAction, actionLabel, href }) {
  const [hover, setHover] = useStateA(false);
  
  const handleClick = (e) => {
    e.preventDefault();
    if (onAction) {
      onAction();
    } else if (href) {
      window.open(href, '_blank');
    }
  };
  
  return (
    <button onClick={handleClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
    style={{
      textDecoration: "none", color: "inherit",
      background: hover ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.28)",
      border: `1px solid ${hover ? hexA(color, 0.35) : "rgba(255,255,255,0.06)"}`,
      borderRadius: 16,
      padding: "20px 18px 18px",
      display: "flex", flexDirection: "column", gap: 10,
      cursor: "pointer",
      transform: hover ? "translateY(-2px)" : "translateY(0)",
      transition: "all .25s cubic-bezier(0.2, 0.8, 0.2, 1)",
      minHeight: 160,
      position: "relative",
      overflow: "hidden"
    }}>
      
      {/* Subtle accent halo on hover */}
      <div style={{
        position: "absolute", inset: 0,
        background: hover ? `radial-gradient(360px 200px at 100% 0%, ${hexA(color, 0.08)}, transparent 70%)` : "transparent",
        transition: "all .3s ease",
        pointerEvents: "none"
      }} />
      <div style={{ display: "flex", alignItems: "center", gap: 10, position: "relative", zIndex: 1 }}>
        <div style={{ flexShrink: 0, width: 36, height: 36, borderRadius: 10, background: hexA(color, hover ? 0.22 : 0.15), display: "grid", placeItems: "center", transition: "background .2s ease" }}>
          {icon}
        </div>
        <div style={{ fontWeight: 600, fontSize: 14.5, lineHeight: 1.25 }}>{label}</div>
      </div>
      <div style={{ fontSize: 12, color: "rgba(255,255,255,0.55)", lineHeight: 1.45, position: "relative", zIndex: 1, textAlign: "left" }}>{desc}</div>
      <div style={{
        marginTop: "auto",
        display: "flex", alignItems: "center", gap: 8,
        fontSize: 11.5, fontWeight: 500, letterSpacing: "0.04em",
        color: color,
        opacity: 1,
        transform: hover ? "translateX(0)" : "translateX(0)",
        transition: "all .25s ease",
        position: "relative", zIndex: 1
      }}>
        {actionLabel || "Explore"} <span style={{ transform: hover ? "translateX(4px)" : "translateX(0)", transition: "transform .25s ease" }}>→</span>
      </div>
    </button>);

}

// Email copy dialog
function EmailDialog({ isOpen, onClose, title, message, subtext }) {
  const [copied, setCopied] = useStateA(false);
  const email = "cottrell@hey.com";
  
  const handleCopy = () => {
    navigator.clipboard.writeText(email).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    });
  };
  
  if (!isOpen) return null;
  
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, zIndex: 100,
      background: "rgba(6,5,3,0.97)", backdropFilter: "blur(24px)",
      display: "flex", alignItems: "center", justifyContent: "center",
      cursor: "zoom-out"
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: "rgba(15,13,10,0.8)",
        border: "1px solid rgba(255,255,255,0.12)",
        borderRadius: 20,
        padding: "40px 48px",
        maxWidth: 500,
        textAlign: "left",
        cursor: "auto"
      }}>
        <h3 style={{ margin: "0 0 16px 0", fontSize: 24, fontWeight: 600, textAlign: "center" }}>{title}</h3>
        <p style={{ margin: "0 0 24px 0", fontSize: 14, color: "rgba(255,255,255,0.75)", lineHeight: 1.6 }}>{message}</p>
        
        <button onClick={handleCopy} style={{
          width: "100%",
          background: copied ? "rgba(61,220,132,0.2)" : "rgba(255,255,255,0.08)",
          border: `1px solid ${copied ? "rgba(61,220,132,0.5)" : "rgba(255,255,255,0.15)"}`,
          color: copied ? "#3ddc84" : "white",
          padding: "14px 16px",
          borderRadius: 12,
          fontSize: 15,
          fontWeight: 600,
          cursor: "pointer",
          transition: "all .3s ease",
          display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8,
          position: "relative"
        }}>
          <span>{copied ? "✓ Copied!" : email}</span>
          <span style={{
            fontSize: 11,
            color: copied ? "#3ddc84" : "rgba(255,255,255,0.5)",
            backgroundColor: copied ? "rgba(61,220,132,0.15)" : "rgba(255,255,255,0.1)",
            padding: "4px 8px",
            borderRadius: 6,
            transition: "all .3s ease",
            whiteSpace: "nowrap"
          }}>
            {copied ? "✓" : "Click to copy"}
          </span>
        </button>
        
        <p style={{ margin: "24px 0 0 0", fontSize: 13, color: "rgba(255,255,255,0.55)", lineHeight: 1.6 }}>{subtext}</p>
        
        <button onClick={onClose} style={{
          marginTop: 24,
          background: "rgba(255,255,255,0.06)",
          border: "1px solid rgba(255,255,255,0.12)",
          color: "rgba(255,255,255,0.7)",
          padding: "10px 20px",
          borderRadius: 8,
          fontSize: 13,
          cursor: "pointer",
          transition: "all .2s ease"
        }}>
          Close
        </button>
      </div>
    </div>);
}

// Inline icons (simple geometric)
function ConsultIcon({ accent }) {return <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="5" cy="6" r="2" stroke={accent} strokeWidth="1.4" /><circle cx="11" cy="10" r="2" stroke={accent} strokeWidth="1.4" /><path d="M5 8v2M11 8V6" stroke={accent} strokeWidth="1.4" /></svg>;}
function DashIcon({ accent }) {return <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="5" height="5" rx="1" stroke={accent} strokeWidth="1.4" /><rect x="9" y="2" width="5" height="3" rx="1" stroke={accent} strokeWidth="1.4" /><rect x="2" y="9" width="3" height="5" rx="1" stroke={accent} strokeWidth="1.4" /><rect x="7" y="7" width="7" height="7" rx="1" stroke={accent} strokeWidth="1.4" /></svg>;}
function SponsorIcon({ accent }) {return <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 12l8-8M12 12v-8h-8" stroke={accent} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>;}
function LicenseIcon({ accent }) {return <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="3" y="3" width="10" height="10" rx="2" stroke={accent} strokeWidth="1.4" /><path d="M6 8l2 2 3-4" stroke={accent} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>;}
function NewsIcon({ accent }) {return <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1" stroke={accent} strokeWidth="1.4" /><path d="M4 6h8M4 9h6M4 11h4" stroke={accent} strokeWidth="1.4" strokeLinecap="round" /></svg>;}
function PatreonIcon({ accent }) {return <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="10" cy="6" r="4" stroke={accent} strokeWidth="1.4" /><rect x="2" y="2" width="2" height="12" fill={accent} /></svg>;}
function PackIcon({ accent }) {return <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 5l6-3 6 3v6l-6 3-6-3V5z" stroke={accent} strokeWidth="1.4" strokeLinejoin="round" /><path d="M2 5l6 3 6-3M8 8v7" stroke={accent} strokeWidth="1.4" /></svg>;}
function SocialIcon({ accent }) {return <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M9 2v9a3 3 0 1 1-3-3" stroke={accent} strokeWidth="1.4" strokeLinecap="round" /><circle cx="11" cy="5" r="2" stroke={accent} strokeWidth="1.4" /></svg>;}

// ────────────────────────────────────────────────────────────────────────────
// About / Case study strip
// ────────────────────────────────────────────────────────────────────────────

function AboutA({ tweaks }) {
  const accent = tweaks.accent;
  return (
    <section id="about" style={{ background: "#0a0907", color: "white", padding: "clamp(40px, 8vw, 40px) clamp(16px, 5vw, 56px) clamp(80px, 12vw, 120px)" }}>
      <style>{`
        @media (max-width: 768px) {
          .about-grid {
            grid-template-columns: 1fr !important;
          }
          .about-portrait {
            min-height: 380px !important;
          }
          .about-portrait img {
            height: 70% !important;
          }
          .about-bio {
            gap: 16px !important;
          }
        }
      `}</style>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <div className="about-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: "clamp(24px, 4vw, 48px)", alignItems: "stretch" }}>
          {/* Portrait card */}
          <div className="about-portrait" style={{
            background: "linear-gradient(180deg, #2b1d10, #0a0907)",
            border: "1px solid rgba(255,255,255,0.08)",
            borderRadius: "clamp(20px, 4vw, 28px)",
            padding: "clamp(20px, 4vw, 32px)",
            position: "relative", overflow: "hidden",
            display: "flex", flexDirection: "column", justifyContent: "space-between",
            minHeight: "clamp(380px, 60vw, 520px)"
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", position: "relative", zIndex: 2 }}>
              <div style={{ fontSize: "clamp(9px, 1.5vw, 11px)", color: accent, letterSpacing: "0.18em", textTransform: "uppercase", display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{ width: 24, height: 1, background: hexA(accent, 0.6) }} />
                About
              </div>
              <div style={{ fontSize: "clamp(9px, 1.2vw, 10.5px)", color: "rgba(255,255,255,0.4)", letterSpacing: "0.08em", textTransform: "uppercase" }}>@BigExcelEnergy</div>
            </div>
            <img src="./josh-portrait.png" alt="Josh" style={{
              position: "absolute", bottom: 0, right: -20, height: "82%", objectFit: "contain", zIndex: 1,
              filter: "drop-shadow(0 20px 40px rgba(0,0,0,0.4))"
            }} />
            <div style={{
              position: "relative", zIndex: 2, maxWidth: 280,
              background: "rgba(10,9,7,0.68)",
              backdropFilter: "blur(18px)",
              WebkitBackdropFilter: "blur(18px)",
              borderRadius: "clamp(12px, 2vw, 16px)",
              border: "1px solid rgba(255,255,255,0.08)",
              padding: "clamp(12px, 2vw, 16px) clamp(14px, 3vw, 20px)"
            }}>
              <div style={{ fontFamily: "'Caveat', cursive", fontSize: "clamp(28px, 5vw, 36px)", color: accent, lineHeight: 1 }}>Hi, I'm Josh.</div>
              <div style={{ fontSize: "clamp(10px, 1.5vw, 12px)", color: "rgba(255,255,255,0.55)", marginTop: 6, letterSpacing: "0.08em", textTransform: "uppercase" }}>EXCEL MVP · COFOUNDER OF MARKET.SPACE (ACQ. 2016) · CREATOR OF @BIGEXCELENERGY

              </div>
            </div>
          </div>

          {/* Bio + clients */}
          <div className="about-bio" style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", gap: "clamp(16px, 3vw, 24px)", paddingBottom: "clamp(20px, 3vw, 32px)" }}>
            <h3 style={{
              margin: 0, fontFamily: tweaks.displayFont, fontWeight: 500,
              fontSize: "clamp(28px, 5vw, 56px)", lineHeight: 1.05, letterSpacing: "-0.02em",
              textWrap: "balance"
            }}>
              Making data actionable requires a deep understanding and genuine care for the people who interact with it.<br/>
              <span style={{ color: accent, fontStyle: "italic", fontFamily: tweaks.scriptFont, fontWeight: 400 }}>
I help brands care.</span>
            </h3>

            {/* Stats KPI strip — anchored to bottom, aligns with "Hi, I'm Josh" panel */}
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 1,
                background: "rgba(255,255,255,0.06)", borderRadius: "clamp(12px, 2vw, 16px)", overflow: "hidden",
                border: "1px solid rgba(255,255,255,0.06)"
              }}>
              <KpiCell n="480K" label="TikTok followers" sub={<Sparkline data={[12, 18, 22, 28, 40, 55, 78, 110, 148, 210]} color={accent} height={28} />} />
              <KpiCell n="20K" label="Newsletter subs" sub={<BarRow values={[3, 5, 4, 7, 8, 11, 9, 12, 15, 18, 22]} color={accent} height={24} />} />
              <KpiCell n="2×" label="Microsoft MVP" sub={<MvpTimeline accent={accent} />} />
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function FactCard({ label, value, sub, accent }) {
  return (
    <div style={{
      background: "rgba(255,255,255,0.03)",
      border: "1px solid rgba(255,255,255,0.08)",
      borderRadius: 16, padding: "20px 22px"
    }}>
      <div style={{ fontSize: 10.5, color: "rgba(255,255,255,0.45)", letterSpacing: "0.12em", textTransform: "uppercase" }}>{label}</div>
      <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 24, marginTop: 8, color: "white" }}>{value}</div>
      <div style={{ fontSize: 12, color: "rgba(255,255,255,0.55)", marginTop: 6, lineHeight: 1.4 }}>{sub}</div>
    </div>);

}

// ────────────────────────────────────────────────────────────────────────────
// Work showcase
// ────────────────────────────────────────────────────────────────────────────

const WORKS_DATA = [
{ src: "./mouy27md-1733882867863.jpeg", title: "California Wildfires", year: "2022" },
{ src: "./mouy27mb-1752215054884.jpeg", title: "World Languages", year: "2023" },
{ src: "./mouy27m8-1736540299189.jpeg", title: "Cost of Life Abroad", year: "2023" },
{ src: "./mouy27m8-1751260506893.jpeg", title: "US Tech Adoption", year: "2024" },
{ src: "./mouy27m5-1756703135438.jpeg", title: "Global Migration Flows", year: "2022" },
{ src: "./mouy27m0-1768653309951.jpeg", title: "Hurricane Frequency", year: "2024" },
{ src: "./mouy27lz-1757484381982.jpeg", title: "Near Earth Objects", year: "2024" }];


function WorkShowcaseA({ tweaks }) {
  const [lightbox, setLightboxA] = useStateA(null);
  const [paused, setPausedA] = useStateA(false);
  const accent = tweaks.accent;

  // Duplicate for seamless infinite loop
  const strip = [...WORKS_DATA, ...WORKS_DATA];

  const prevLb = () => setLightboxA((i) => i > 0 ? i - 1 : WORKS_DATA.length - 1);
  const nextLb = () => setLightboxA((i) => i < WORKS_DATA.length - 1 ? i + 1 : 0);

  return (
    <section style={{ padding: "clamp(60px, 12vw, 96px) 0 clamp(50px, 8vw, 80px)", background: tweaks.darkBg, position: "relative", overflow: "hidden" }}>
      <style>{`
        @media (max-width: 768px) {
          .work-header {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 20px !important;
          }
          .work-header > div:last-child {
            display: none !important;
          }
          .film-card {
            width: 280px !important;
            height: 200px !important;
          }
        }
      `}</style>

      {/* Lightbox */}
      {lightbox !== null &&
      <div
        onClick={() => setLightboxA(null)}
        style={{
          position: "absolute", inset: 0, zIndex: 80,
          background: "rgba(6,5,3,0.97)", backdropFilter: "blur(24px)",
          display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
          cursor: "zoom-out"
        }}>
        
          <img
          src={WORKS_DATA[lightbox].src}
          onClick={(e) => e.stopPropagation()}
          style={{ maxWidth: "82%", maxHeight: "76%", objectFit: "contain", borderRadius: 4, boxShadow: "0 40px 100px rgba(0,0,0,0.8)" }} />
        
          <div style={{ marginTop: 20, display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
            <div style={{ fontSize: 13, fontFamily: tweaks.displayFont, color: "rgba(255,255,255,0.85)", letterSpacing: "0.02em" }}>
              {WORKS_DATA[lightbox].title}
            </div>
            <div style={{ fontSize: 10, letterSpacing: "0.15em", color: "rgba(255,255,255,0.3)", textTransform: "uppercase" }}>
              {lightbox + 1} of {WORKS_DATA.length} · click anywhere to close
            </div>
          </div>
          <button onClick={(e) => {e.stopPropagation();prevLb();}} style={{
          position: "absolute", left: 32, top: "50%", transform: "translateY(-50%)",
          background: "rgba(255,255,255,0.07)", border: "1px solid rgba(255,255,255,0.14)",
          color: "white", fontSize: 24, width: 48, height: 48, borderRadius: 6,
          cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center"
        }}>‹</button>
          <button onClick={(e) => {e.stopPropagation();nextLb();}} style={{
          position: "absolute", right: 32, top: "50%", transform: "translateY(-50%)",
          background: "rgba(255,255,255,0.07)", border: "1px solid rgba(255,255,255,0.14)",
          color: "white", fontSize: 24, width: 48, height: 48, borderRadius: 6,
          cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center"
        }}>›</button>
        </div>
      }

      {/* Header */}
      <div className="work-header" style={{ padding: "0 clamp(16px, 5vw, 56px) clamp(32px, 5vw, 44px)", maxWidth: 1400, margin: "0 auto", display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: "clamp(16px, 3vw, 40px)" }}>
        <div>
          <div style={{ fontSize: "clamp(9px, 1.5vw, 10px)", letterSpacing: "0.18em", textTransform: "uppercase", color: accent, marginBottom: "clamp(12px, 2vw, 16px)" }}>
            Selected Work
          </div>
          <div style={{ fontFamily: tweaks.displayFont, fontWeight: 600, fontSize: "clamp(32px, 6vw, 44px)", lineHeight: 1.05, letterSpacing: "-0.03em" }}>
            Let's make something{" "}
            <span style={{ fontStyle: "italic", fontFamily: tweaks.scriptFont, fontWeight: 400, color: accent }}>
              worth caring about
            </span>.
          </div>
        </div>
        <div style={{ fontSize: "clamp(11px, 1.5vw, 13px)", color: "rgba(255,255,255,0.4)", flexShrink: 0, marginLeft: 40, paddingBottom: 6 }}>
          Hover to pause · click to expand
        </div>
      </div>

      {/* Filmstrip — auto-scrolling, pauses on hover */}
      <div
        onMouseEnter={() => setPausedA(true)}
        onMouseLeave={() => setPausedA(false)}
        style={{ position: "relative", overflow: "hidden" }}>
        
        <style>{`
          @keyframes filmroll {
            from { transform: translateX(0); }
            to   { transform: translateX(-50%); }
          }
        `}</style>
        <div style={{
          display: "flex",
          gap: 10,
          width: "max-content",
          animation: "filmroll 48s linear infinite",
          animationPlayState: paused ? "paused" : "running"
        }}>
          {strip.map((w, i) =>
          <FilmCard
            key={i}
            work={w}
            accent={accent}
            onExpand={() => setLightboxA(i % WORKS_DATA.length)} />

          )}
        </div>

        {/* Left fade — blends strip into dark bg */}
        <div style={{
          position: "absolute", left: 0, top: 0, bottom: 0, width: 120,
          background: `linear-gradient(to right, ${tweaks.darkBg} 0%, transparent 100%)`,
          pointerEvents: "none", zIndex: 10
        }} />
        {/* Right fade */}
        <div style={{
          position: "absolute", right: 0, top: 0, bottom: 0, width: 120,
          background: `linear-gradient(to left, ${tweaks.darkBg} 0%, transparent 100%)`,
          pointerEvents: "none", zIndex: 10
        }} />
      </div>
    </section>);

}

function FilmCard({ work, accent, onExpand }) {
  const [hover, setHoverFC] = useStateA(false);
  return (
    <div className="film-card"
    onMouseEnter={() => setHoverFC(true)}
    onMouseLeave={() => setHoverFC(false)}
    onClick={onExpand}
    style={{
      width: "clamp(280px, 60vw, 400px)", height: "clamp(200px, 45vw, 280px)", flexShrink: 0,
      borderRadius: 8, overflow: "hidden",
      position: "relative", cursor: "zoom-in",
      border: `1px solid ${hover ? accent + "44" : "rgba(255,255,255,0.06)"}`,
      transition: "border-color 0.25s ease",
      background: "#0a0807"
    }}>
      
      <img
        src={work.src}
        style={{
          width: "100%", height: "100%",
          objectFit: "cover", display: "block",
          transform: hover ? "scale(1.04)" : "scale(1)",
          transition: "transform 0.5s cubic-bezier(0.2,0.8,0.2,1)",
          filter: hover ? "brightness(1.08)" : "brightness(1)"
        }} />
      

      {/* Vignette */}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, transparent 28%, transparent 52%, rgba(0,0,0,0.72) 100%)",
        pointerEvents: "none"
      }} />

      {/* Title strip at bottom */}
      <div style={{
        position: "absolute", bottom: 0, left: 0, right: 0,
        padding: "clamp(6px, 2vw, 10px) clamp(10px, 2vw, 14px)",
        display: "flex", justifyContent: "space-between", alignItems: "flex-end"
      }}>
        <div style={{ fontSize: "clamp(9px, 1.5vw, 11px)", letterSpacing: "0.08em", color: "rgba(255,255,255,0.8)", fontFamily: "inherit" }}>
          {work.title}
        </div>
        <div style={{ fontSize: "clamp(8px, 1.2vw, 10px)", letterSpacing: "0.1em", color: "rgba(255,255,255,0.35)" }}>
          {work.year}
        </div>
      </div>

      {/* Expand icon on hover */}
      {hover &&
      <div style={{
        position: "absolute", top: 12, right: 12,
        width: 28, height: 28, borderRadius: 4,
        background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.25)",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontSize: 13, color: "white"
      }}>⤢</div>
      }
    </div>);

}

// ────────────────────────────────────────────────────────────────────────────
// Footer / contact
// ────────────────────────────────────────────────────────────────────────────

function FooterA({ tweaks }) {
  const accent = tweaks.accent;
  return (
    <section id="contact" style={{ background: tweaks.darkBg, color: "white", padding: "clamp(50px, 8vw, 72px) clamp(16px, 5vw, 56px) clamp(40px, 6vw, 56px)", position: "relative", overflow: "hidden" }}>
      <style>{`
        @media (max-width: 768px) {
          .footer-grid {
            grid-template-columns: 1fr 1fr !important;
          }
          .footer-bottom {
            flex-direction: column !important;
            gap: 16px !important;
          }
        }
      `}</style>
      <div style={{
        position: "absolute", inset: 0,
        background: `radial-gradient(720px 420px at 82% 82%, ${hexA(accent, 0.12)}, transparent 72%)`,
        pointerEvents: "none"
      }} />
      <div style={{ maxWidth: 1400, margin: "0 auto", position: "relative" }}>
        <div style={{
          height: 1,
          background: "linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.16) 18%, rgba(255,255,255,0.08) 72%, transparent)",
          marginBottom: "clamp(20px, 3vw, 34px)"
        }} />
        <div className="footer-grid" style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr 1fr 1fr", gap: "clamp(24px, 3vw, 40px)" }}>
          <FooterCol title="Email" links={[{ label: "cottrell@hey.com", href: "mailto:cottrell@hey.com" }]} accent={accent} />
          <FooterCol title="Work" links={[{ label: "Consulting", href: "#work" }, { label: "Reviews", href: "#work" }, { label: "Sponsorships", href: "#work" }, { label: "Licensing", href: "#work" }]} accent={accent} />
          <FooterCol title="Learning" links={[{ label: "Newsletter", href: "https://excel.kit.com" }, { label: "Patreon", href: "https://www.patreon.com/c/BigExcelEnergy" }, { label: "Template Pack", href: "https://excel.kit.com/products/everything" }, { label: "TikTok", href: "https://www.tiktok.com/@bigexcelenergy" }]} accent={accent} />
          <FooterCol title="Elsewhere" links={[{ label: "YouTube", href: "https://www.youtube.com/channel/UCuAiO0SWqrJHXYVCY4PaE7A" }, { label: "LinkedIn", href: "https://www.linkedin.com/in/joshcottrell/" }, { label: "Linktree", href: "https://excel.kit.com" }]} accent={accent} />
        </div>
        <div className="footer-bottom" style={{
          marginTop: "clamp(32px, 5vw, 54px)",
          paddingTop: "clamp(16px, 2vw, 22px)",
          borderTop: "1px solid rgba(255,255,255,0.06)",
          display: "flex",
          justifyContent: "space-between",
          fontSize: "clamp(9px, 1.2vw, 11px)",
          color: "rgba(255,255,255,0.36)",
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          gap: "clamp(12px, 2vw, 24px)"
        }}>
          <span>© 2026 Joshua Cottrell-Schloemer</span>
          <span>Built with care · Data + Design</span>
        </div>
      </div>
    </section>);

}

function FooterCol({ title, links, accent }) {
  return (
    <div>
      <div style={{ fontSize: "clamp(9px, 1.5vw, 11px)", color: accent, letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: "clamp(12px, 2vw, 16px)" }}>{title}</div>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "clamp(6px, 1.5vw, 10px)" }}>
        {links.map((l, i) => <FooterLink key={i} {...l} accent={accent} />)}
      </ul>
    </div>);

}

function FooterLink({ label, href, accent }) {
  const [hover, setHover] = useStateA(false);
  return (
    <li>
      <a href={href || "#"}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        color: hover ? "white" : "rgba(255,255,255,0.78)",
        textDecoration: "none", fontSize: "clamp(11px, 1.5vw, 14px)",
        display: "inline-flex", alignItems: "center", gap: 6,
        transition: "color .15s ease"
      }}>
        <span style={{
          width: hover ? 10 : 0,
          height: 1,
          background: accent,
          transition: "width .2s ease",
          display: "inline-block"
        }} />
        {label}
      </a>
    </li>);

}

// ────────────────────────────────────────────────────────────────────────────

function hexA(hex, alpha) {
  // Convert #rrggbb to rgba()
  const h = hex.replace("#", "");
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

window.VariationA = function VariationA({ tweaks }) {
  return (
    <div style={{ width: "100%", background: tweaks.darkBg, fontFamily: tweaks.bodyFont }}>
      <style>{`
        @keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } }
        @keyframes scrollCue { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(4px); opacity: 1; } }
      `}</style>
      <HeroA tweaks={tweaks} />
      <PathsA tweaks={tweaks} />
      <AboutA tweaks={tweaks} />
      <WorkShowcaseA tweaks={tweaks} />
      <FooterA tweaks={tweaks} />
    </div>
  );
};