// ev-theme.jsx — Three design directions for the Evergreen redesign.
// Each direction is a complete design language: type, color, radius, rhythm.

const themes = {
  meridian: {
    id: "meridian",
    name: "Meridian",
    descriptor: "Clean · Clinical · Precise",
    blurb: "Centered typography, hairline rules, generous whitespace. The think-tank.",
    fonts: {
      display: "'DM Serif Display', serif",
      body: "'DM Sans', sans-serif",
    },
    c: {
      primary: "#007878",
      primaryDk: "#005A5A",
      primaryLt: "#E3F3F3",
      accent: "#D4A84B", // warm amber accent for highlights
      ink: "#172627",
      inkMid: "#476A6B",
      inkLight: "#7A9494",
      bg: "#FFFFFF",
      bgSoft: "#F2FAFA",
      bgDark: "#172627",
      line: "#CCE4E4",
    },
    r: { card: 4, btn: 3, tag: 999 },
    h: { weight: 400, ls: "-0.01em" },
    nav: { weight: 400, ls: "0em", tt: "none", size: "0.85rem" },
    hero: "center",
    pageHero: "soft", // bgSoft band
  },
  canopy: {
    id: "canopy",
    name: "Canopy",
    descriptor: "Editorial · Warm · Authoritative",
    blurb: "Off-white paper, serif headlines, magazine cadence. The journal.",
    fonts: {
      display: "'Cormorant Garamond', serif",
      body: "'Jost', sans-serif",
    },
    c: {
      primary: "#2D6E5E",
      primaryDk: "#1B4A3B",
      primaryLt: "#E8F2EE",
      accent: "#C25E2F", // terracotta accent
      ink: "#1D2E26",
      inkMid: "#4A5E54",
      inkLight: "#7A8C82",
      bg: "#F7F5EE",
      bgSoft: "#EDEBE0",
      bgDark: "#1D2E26",
      line: "#C8D2C8",
    },
    r: { card: 2, btn: 0, tag: 0 },
    h: { weight: 400, ls: "-0.02em" },
    nav: { weight: 400, ls: "0.04em", tt: "none", size: "0.85rem" },
    hero: "left",
    pageHero: "soft",
  },
  summit: {
    id: "summit",
    name: "Summit",
    descriptor: "Bold · Architectural · Decisive",
    blurb: "Strong typography, sharp corners, structural grid. The studio.",
    fonts: {
      display: "'Syne', sans-serif",
      body: "'Space Grotesk', sans-serif",
    },
    c: {
      primary: "#008080",
      primaryDk: "#005C5C",
      primaryLt: "#DDF4F4",
      accent: "#FF6B35", // bold orange accent
      ink: "#0E0E0E",
      inkMid: "#555555",
      inkLight: "#888888",
      bg: "#FFFFFF",
      bgSoft: "#F2F2F0",
      bgDark: "#0E0E0E",
      line: "#E0E0E0",
    },
    r: { card: 0, btn: 0, tag: 0 },
    h: { weight: 700, ls: "-0.03em" },
    nav: { weight: 500, ls: "0.06em", tt: "uppercase", size: "0.72rem" },
    hero: "split",
    pageHero: "dark",
  },
};

const AppContext = React.createContext({
  theme: themes.meridian,
  navigate: () => {},
  currentPage: "home",
});

const useTheme = () => React.useContext(AppContext).theme;
const useNavigate = () => React.useContext(AppContext).navigate;
const useCurrentPage = () => React.useContext(AppContext).currentPage;

// Responsive helpers ---------------------------------------------------------
// Breakpoints: mobile <768, tablet 768-1023, desktop 1024+
function __getBp() {
  if (typeof window === "undefined") return "desktop";
  const w = window.innerWidth;
  if (w < 768) return "mobile";
  if (w < 1024) return "tablet";
  return "desktop";
}

function useViewport() {
  const [bp, setBp] = React.useState(__getBp);
  React.useEffect(() => {
    let raf = 0;
    const handler = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => setBp(__getBp()));
    };
    window.addEventListener("resize", handler);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("resize", handler);
    };
  }, []);
  return {
    bp,
    isMobile: bp === "mobile",
    isTablet: bp === "tablet",
    isDesktop: bp === "desktop",
    notDesktop: bp !== "desktop",
  };
}

// Pick a value across breakpoints. Tablet falls back to mobile, mobile to desktop.
function rv(v, mob, tab, desk) {
  if (v.isMobile) return mob !== undefined ? mob : (tab !== undefined ? tab : desk);
  if (v.isTablet) return tab !== undefined ? tab : desk;
  return desk;
}

// Grid template helper — same fallback semantics.
function rcols(v, mob, tab, desk) {
  return rv(v, mob, tab, desk);
}

// Reusable primitives ----------------------------------------------------------

function Container({ children, style, max = 1280 }) {
  const v = useViewport();
  const pad = rv(v, 20, 32, 40);
  return (
    <div style={{ maxWidth: max, margin: "0 auto", padding: `0 ${pad}px`, ...style }}>
      {children}
    </div>
  );
}

function Section({ children, bg, style, py = 120 }) {
  const t = useTheme();
  const v = useViewport();
  // Scale vertical padding down on smaller viewports — desktop whitespace is
  // way too much on a phone.
  const scaled = Math.round(py * rv(v, 0.5, 0.72, 1));
  return (
    <section style={{ background: bg || t.c.bg, padding: `${scaled}px 0`, position: "relative", overflow: "hidden", ...style }}>
      {children}
    </section>
  );
}

function Eyebrow({ children, color, style }) {
  const t = useTheme();
  return (
    <div
      style={{
        fontFamily: t.fonts.body,
        fontSize: "0.72rem",
        fontWeight: 500,
        letterSpacing: "0.14em",
        textTransform: "uppercase",
        color: color || t.c.primary,
        display: "inline-flex",
        alignItems: "center",
        gap: 10,
        ...style,
      }}
    >
      <span style={{ width: 20, height: 1, background: color || t.c.primary, display: "inline-block" }} />
      {children}
    </div>
  );
}

function H2({ children, style }) {
  const t = useTheme();
  return (
    <h2
      style={{
        fontFamily: t.fonts.display,
        fontWeight: t.h.weight,
        fontSize: "clamp(1.8rem, 5.2vw, 3.6rem)",
        lineHeight: 1.08,
        letterSpacing: t.h.ls,
        color: t.c.ink,
        margin: 0,
        textWrap: "balance",
        ...style,
      }}
    >
      {children}
    </h2>
  );
}

function H3({ children, style }) {
  const t = useTheme();
  return (
    <h3
      style={{
        fontFamily: t.fonts.display,
        fontWeight: t.h.weight,
        fontSize: "clamp(1.2rem, 3.6vw, 1.5rem)",
        lineHeight: 1.2,
        letterSpacing: t.h.ls,
        color: t.c.ink,
        margin: 0,
        ...style,
      }}
    >
      {children}
    </h3>
  );
}

function Lead({ children, style }) {
  const t = useTheme();
  return (
    <p
      style={{
        fontFamily: t.fonts.body,
        fontSize: "clamp(1rem, 2.4vw, 1.15rem)",
        lineHeight: 1.65,
        color: t.c.inkMid,
        margin: 0,
        fontWeight: t.id === "canopy" ? 300 : 400,
        ...style,
      }}
    >
      {children}
    </p>
  );
}

function Body({ children, style }) {
  const t = useTheme();
  return (
    <p
      style={{
        fontFamily: t.fonts.body,
        fontSize: "1rem",
        lineHeight: 1.7,
        color: t.c.inkMid,
        margin: 0,
        ...style,
      }}
    >
      {children}
    </p>
  );
}

function Button({ children, variant = "primary", onClick, style }) {
  const t = useTheme();
  const base = {
    fontFamily: t.fonts.body,
    fontSize: "0.88rem",
    fontWeight: t.id === "canopy" ? 400 : 500,
    letterSpacing: t.id === "summit" ? "0.06em" : "0.02em",
    textTransform: t.id === "summit" ? "uppercase" : "none",
    padding: "14px 28px",
    minHeight: 46,
    borderRadius: t.r.btn,
    cursor: "pointer",
    transition: "all 0.2s ease",
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    gap: 8,
    border: "1.5px solid transparent",
    whiteSpace: "nowrap",
  };
  const variants = {
    primary: { background: t.c.primary, color: "#fff", borderColor: t.c.primary },
    ghost: { background: "transparent", color: t.c.primary, borderColor: t.c.primary },
    light: { background: "#fff", color: t.c.primary, borderColor: "#fff" },
    dark: { background: t.c.ink, color: "#fff", borderColor: t.c.ink },
  };
  return (
    <button onClick={onClick} style={{ ...base, ...variants[variant], ...style }}>
      {children}
    </button>
  );
}

function TextLink({ children, onClick, style }) {
  const t = useTheme();
  return (
    <span
      onClick={onClick}
      style={{
        fontFamily: t.fonts.body,
        fontSize: "0.9rem",
        color: t.c.primary,
        cursor: "pointer",
        borderBottom: `1px solid ${t.c.primary}`,
        paddingBottom: 2,
        display: "inline-flex",
        alignItems: "center",
        gap: 6,
        fontWeight: t.id === "canopy" ? 400 : 500,
        ...style,
      }}
    >
      {children}
      <span style={{ display: "inline-block" }}>→</span>
    </span>
  );
}

function Tag({ children, style }) {
  const t = useTheme();
  return (
    <span
      style={{
        display: "inline-block",
        fontFamily: t.fonts.body,
        fontSize: "0.7rem",
        fontWeight: 500,
        letterSpacing: "0.08em",
        textTransform: "uppercase",
        color: t.c.primary,
        background: t.c.primaryLt,
        padding: "5px 12px",
        borderRadius: t.r.tag,
        ...style,
      }}
    >
      {children}
    </span>
  );
}

function PageHero({ eyebrow, title, lead, accent }) {
  const t = useTheme();
  const v = useViewport();
  const useDark = t.pageHero === "dark";
  const bg = useDark ? t.c.bgDark : t.c.bgSoft;
  const ink = useDark ? "#fff" : t.c.ink;
  const inkMid = useDark ? "rgba(255,255,255,0.7)" : t.c.inkMid;
  const padTop = rv(v, 110, 130, 160);
  const padBot = rv(v, 56, 76, 100);
  return (
    <section style={{ background: bg, padding: `${padTop}px 0 ${padBot}px`, position: "relative", overflow: "hidden" }}>
      {useDark && (
        <div
          style={{
            position: "absolute",
            top: 0,
            right: -100,
            width: rv(v, 280, 380, 500),
            height: rv(v, 280, 380, 500),
            background: t.c.primary,
            opacity: 0.15,
            filter: "blur(80px)",
            borderRadius: "50%",
          }}
        />
      )}
      <Container>
        <div style={{ maxWidth: 880, position: "relative" }}>
          <Eyebrow color={useDark ? t.c.primaryLt : t.c.primary} style={{ marginBottom: rv(v, 18, 22, 28) }}>
            {eyebrow}
          </Eyebrow>
          <h1
            style={{
              fontFamily: t.fonts.display,
              fontWeight: t.h.weight,
              fontSize: "clamp(2.2rem, 8vw, 5.5rem)",
              lineHeight: 1.02,
              letterSpacing: t.h.ls,
              color: ink,
              margin: "0 0 24px",
              textWrap: "balance",
            }}
          >
            {title}
            {accent && (
              <span style={{ color: t.c.primary }}>{accent}</span>
            )}
          </h1>
          {lead && (
            <p
              style={{
                fontFamily: t.fonts.body,
                fontSize: "clamp(1rem, 2.6vw, 1.2rem)",
                lineHeight: 1.6,
                color: inkMid,
                margin: 0,
                maxWidth: 640,
                fontWeight: t.id === "canopy" ? 300 : 400,
              }}
            >
              {lead}
            </p>
          )}
        </div>
      </Container>
    </section>
  );
}

// Decorative SVG icons — geometric, no emoji
const Icon = {
  network: (color, size = 32) => (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <circle cx="16" cy="6" r="3" stroke={color} strokeWidth="1.5" />
      <circle cx="6" cy="22" r="3" stroke={color} strokeWidth="1.5" />
      <circle cx="26" cy="22" r="3" stroke={color} strokeWidth="1.5" />
      <path d="M16 9L8 20M16 9L24 20M8 22L24 22" stroke={color} strokeWidth="1.5" />
    </svg>
  ),
  compass: (color, size = 32) => (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <circle cx="16" cy="16" r="12" stroke={color} strokeWidth="1.5" />
      <path d="M11 21L14.5 14.5L21 11L17.5 17.5L11 21Z" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
    </svg>
  ),
  chart: (color, size = 32) => (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <path d="M5 26L5 6M5 26L27 26" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
      <rect x="9" y="18" width="3" height="8" stroke={color} strokeWidth="1.5" />
      <rect x="14.5" y="13" width="3" height="13" stroke={color} strokeWidth="1.5" />
      <rect x="20" y="8" width="3" height="18" stroke={color} strokeWidth="1.5" />
    </svg>
  ),
  flask: (color, size = 32) => (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <path d="M12 5V13L6 24C5 26 6 28 8 28H24C26 28 27 26 26 24L20 13V5" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
      <path d="M10 5L22 5" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
      <path d="M9 21L23 21" stroke={color} strokeWidth="1.5" strokeOpacity="0.5" />
    </svg>
  ),
  spark: (color, size = 32) => (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <path d="M16 4V10M16 22V28M4 16H10M22 16H28M7.5 7.5L11 11M21 21L24.5 24.5M7.5 24.5L11 21M21 11L24.5 7.5" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
      <circle cx="16" cy="16" r="4" stroke={color} strokeWidth="1.5" />
    </svg>
  ),
  peak: (color, size = 32) => (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <path d="M3 26L12 11L17 18L21 13L29 26H3Z" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
      <circle cx="22" cy="7" r="2" stroke={color} strokeWidth="1.5" />
    </svg>
  ),
  water: (color, size = 32) => (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <path d="M16 4C16 4 7 14 7 20C7 24.9706 11.0294 29 16 29C20.9706 29 25 24.9706 25 20C25 14 16 4 16 4Z" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
      <path d="M12 20C12 22.2091 13.7909 24 16 24" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  ),
  home: (color, size = 32) => (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <path d="M4 14L16 4L28 14V27H4V14Z" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
      <rect x="13" y="18" width="6" height="9" stroke={color} strokeWidth="1.5" />
      <rect x="10" y="9" width="3" height="3" stroke={color} strokeWidth="1.2" strokeOpacity="0.6" />
      <rect x="19" y="9" width="3" height="3" stroke={color} strokeWidth="1.2" strokeOpacity="0.6" />
    </svg>
  ),
  fire: (color, size = 32) => (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <path d="M16 3C16 8 12 10 12 15C12 17 13.5 18 15 18C14 16 14.5 14 16 13C18 14 19 16 19 18C19 20.7614 17 23 16 23C13 23 9 21 9 16.5C9 11 16 9 16 3Z" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
      <path d="M22 19C22 25 19 29 16 29C13 29 10 25 10 19" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
    </svg>
  ),
  zero: (color, size = 32) => (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <circle cx="16" cy="16" r="11" stroke={color} strokeWidth="1.5" />
      <path d="M8 24L24 8" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  ),
};

// Avatar — geometric placeholder for team headshots
function Avatar({ name, color, size = 80, variant = 0 }) {
  const t = useTheme();
  const initials = name.split(" ").map(n => n[0]).slice(0, 2).join("");
  const bg = color || t.c.primaryLt;
  const fg = color ? "#fff" : t.c.primary;
  // 4 visual variants for visual variety
  const decorations = [
    null,
    <circle cx={size * 0.85} cy={size * 0.15} r={size * 0.18} fill={fg} opacity="0.15" key="d" />,
    <rect x={0} y={size * 0.7} width={size} height={size * 0.3} fill={fg} opacity="0.12" key="d" />,
    <path d={`M0 ${size * 0.6} Q${size / 2} ${size * 0.4}, ${size} ${size * 0.6} L${size} ${size} L0 ${size} Z`} fill={fg} opacity="0.12" key="d" />,
  ];
  return (
    <svg
      width={size}
      height={size}
      viewBox={`0 0 ${size} ${size}`}
      style={{ borderRadius: t.r.card, display: "block", background: bg }}
    >
      {decorations[variant % 4]}
      <text
        x="50%"
        y="50%"
        dominantBaseline="central"
        textAnchor="middle"
        fontFamily={t.fonts.display}
        fontSize={size * 0.34}
        fontWeight={t.h.weight}
        fill={fg}
        letterSpacing="-0.02em"
      >
        {initials}
      </text>
    </svg>
  );
}

Object.assign(window, {
  themes,
  AppContext,
  useTheme,
  useNavigate,
  useCurrentPage,
  useViewport,
  rv,
  rcols,
  Container,
  Section,
  Eyebrow,
  H2,
  H3,
  Lead,
  Body,
  Button,
  TextLink,
  Tag,
  PageHero,
  Icon,
  Avatar,
});