// Five Nodes — agent launcher (4 cards, click → open dashboard in new tab)

const FiveNodesLogo = ({ size = 28 }) => (
  <img
    src="Logo.png"
    alt="Five Nodes"
    style={{
      display: "block",
      height: size,
      width: "auto",
      imageRendering: "-webkit-optimize-contrast",
    }}
  />
);

const AGENTS = [
  {
    id: "realestate",
    slug: "FN-001",
    name: "Five Nodes Real Estate",
    desc: "Real estate sales & client mgmt",
    color: "oklch(0.55 0.18 305)",
    tint: "oklch(0.97 0.02 305)",
    userMsg: "Looking for a 3-bed villa under 2.5M.",
    agentMsg: "I have 6 listings in that range — want me to filter by area?",
    url: "./realestate/index.html",
  },
  {
    id: "autopulse",
    slug: "FN-002",
    name: "Five Nodes Car Dealership",
    desc: "Dealership sales & service",
    color: "oklch(0.6 0.18 25)",
    tint: "oklch(0.97 0.02 25)",
    userMsg: "I want to buy a RAV4 2026.",
    agentMsg: "We have 4 in stock — XLE, Hybrid, and 2 Limited trims. Test drive?",
    url: "./Automobile/index.html",
  },
  {
    id: "unitrack",
    slug: "FN-003",
    name: "Five Nodes UniTrack",
    desc: "Admissions & student engagement",
    color: "oklch(0.55 0.16 255)",
    tint: "oklch(0.97 0.02 255)",
    userMsg: "Help me apply for fall '26 transfer.",
    agentMsg: "I see 4 programs match your transcript — start with CS at Davis?",
    url: "./University/index.html",
  },
  {
    id: "medwatch",
    slug: "FN-004",
    name: "Five Nodes Hospital",
    desc: "Patient appts & hospital ops",
    color: "oklch(0.55 0.12 195)",
    tint: "oklch(0.97 0.02 195)",
    userMsg: "Reschedule my Thursday cardiology visit.",
    agentMsg: "Found 3 openings next week with Dr. Patel. Tuesday 2:15pm?",
    url: "./Medical/index.html",
  },
];

const useViewportWidth = () => {
  const [w, setW] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1280);
  React.useEffect(() => {
    const onResize = () => setW(window.innerWidth);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return w;
};

const VariationA = () => {
  const [hovered, setHovered] = React.useState(null);
  const vw = useViewportWidth();
  const isPhone = vw < 640;
  const isTablet = vw >= 640 && vw < 980;
  const isLaptop = vw >= 980 && vw < 1280;

  const open = (a) => { window.location.href = a.url; };

  const responsiveRoot = {
    ...varAStyles.root,
    width: '100%',
    maxWidth: 1280,
    margin: '0 auto',
    minHeight: isPhone ? 'auto' : 880,
    padding: isPhone
      ? '18px 18px 28px'
      : isTablet
        ? '22px 28px 32px'
        : '28px 56px 40px',
  };

  const responsiveH1 = {
    ...varAStyles.h1,
    fontSize: isPhone ? 38 : isTablet ? 48 : 64,
    letterSpacing: isPhone ? -0.6 : -1.4,
  };

  const responsiveGrid = {
    ...varAStyles.grid,
    gridTemplateColumns: isPhone ? '1fr' : 'repeat(2, 1fr)',
    gap: isPhone ? 14 : 18,
  };

  const responsiveLogoSize = isPhone ? 48 : isTablet ? 58 : 70;

  const responsiveHero = {
    ...varAStyles.hero,
    paddingTop: isPhone ? 28 : isTablet ? 36 : 48,
    paddingBottom: isPhone ? 22 : isTablet ? 28 : 36,
  };

  return (
    <div style={responsiveRoot}>
      <header style={varAStyles.topbar}>
        <div style={varAStyles.brandWrap}><FiveNodesLogo size={responsiveLogoSize} /></div>
      </header>

      <section style={responsiveHero}>
        <h1 style={responsiveH1}>
          Pick an agent <em style={varAStyles.h1Em}>to start testing</em>
        </h1>
        <p style={varAStyles.sub}>
          Choose an industry below. You'll be taken to that agent's live
          dashboard — try real prompts, inspect tool calls, share the thread.
        </p>
      </section>

      <section style={responsiveGrid}>
        {AGENTS.map((a) => {
          const isHover = hovered === a.id;
          return (
            <button
              key={a.id}
              onMouseEnter={() => setHovered(a.id)}
              onMouseLeave={() => setHovered(null)}
              onClick={() => open(a)}
              style={{
                ...varAStyles.card,
                borderColor: isHover ? a.color : "oklch(0.92 0.005 80)",
                boxShadow: isHover
                  ? `0 1px 0 rgba(20,18,15,0.02), 0 22px 50px -28px ${a.color.replace(")", " / 0.35)")}`
                  : "0 1px 0 rgba(20,18,15,0.02)",
                transform: isHover ? "translateY(-3px)" : "translateY(0)",
              }}
            >
              <div style={{ ...varAStyles.chrome, background: a.tint }}>
                <div style={varAStyles.chromeDots}>
                  <span style={{ ...varAStyles.chromeDot, background: a.color, opacity: 0.85 }} />
                  <span style={{ ...varAStyles.chromeDot, background: a.color, opacity: 0.55 }} />
                  <span style={{ ...varAStyles.chromeDot, background: a.color, opacity: 0.3 }} />
                </div>
                <span style={varAStyles.chromeId}>{a.slug}</span>
                <span style={varAStyles.chromeStatus}>
                  <span style={varAStyles.statusDot} /> Live
                </span>
              </div>

              <div style={varAStyles.cardId}>
                <div style={varAStyles.cardName}>
                  {a.name.startsWith("Five Nodes") ? (
                    <>
                      <span style={{ color: "oklch(0.16 0.01 80)" }}>Five Nodes</span>
                      <span style={{ color: a.color }}>{a.name.slice("Five Nodes".length)}</span>
                    </>
                  ) : (
                    a.name
                  )}
                </div>
                <div style={varAStyles.cardDesc}>{a.desc}</div>
              </div>

              <div style={varAStyles.chat}>
                <div style={varAStyles.userBubble}>{a.userMsg}</div>
                <div style={{ ...varAStyles.agentBubble, background: a.tint, color: "oklch(0.22 0.01 80)" }}>
                  <span style={{ ...varAStyles.agentBubbleEdge, background: a.color }} />
                  {a.agentMsg}
                </div>
              </div>

              <div style={varAStyles.cardFoot}>
                <span style={varAStyles.openCta}>
                  Open dashboard
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style={{ marginLeft: 4 }}>
                    <path d="M4 2h6v6M10 2L4 8" stroke={a.color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </span>
              </div>
            </button>
          );
        })}
      </section>

      <footer style={varAStyles.foot}>
        <span>4 agents available</span>
        <span style={varAStyles.footSep}>·</span>
        <span>Live testing environment</span>
        <span style={varAStyles.footSep}>·</span>
        <span style={varAStyles.footStatus}>
          <span style={varAStyles.statusDot} /> All systems operational
        </span>
      </footer>
    </div>
  );
};

const varAStyles = {
  root: {
    background: "oklch(0.98 0.005 80)",
    color: "oklch(0.2 0.01 80)",
    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
    boxSizing: "border-box",
    display: "flex",
    flexDirection: "column",
  },
  topbar: {
    display: "flex", alignItems: "center", justifyContent: "space-between",
    paddingBottom: 18,
    borderBottom: "1px solid oklch(0.94 0.005 80)",
  },
  brandWrap: { color: "oklch(0.18 0.01 80)", display: "flex", alignItems: "center" },
  nav: { display: "flex", alignItems: "center", gap: 6 },
  navLink: { fontSize: 13, color: "oklch(0.45 0.005 80)", padding: "8px 12px", cursor: "pointer" },

  hero: { paddingTop: 48, paddingBottom: 36, width: "100%" },
  eyebrow: {
    display: "inline-flex", alignItems: "center", gap: 8,
    fontSize: 12, fontWeight: 500, letterSpacing: 0.4, textTransform: "uppercase",
    color: "oklch(0.45 0.005 80)",
    padding: "6px 12px",
    border: "1px solid oklch(0.92 0.005 80)",
    borderRadius: 999,
    background: "white",
    marginBottom: 22,
  },
  eyebrowDot: {
    width: 6, height: 6, borderRadius: 99,
    background: "oklch(0.62 0.16 145)",
    boxShadow: "0 0 0 3px oklch(0.62 0.16 145 / 0.18)",
  },
  h1: {
    fontFamily: "'Instrument Serif', 'Times New Roman', serif",
    fontWeight: 400, fontSize: 64, lineHeight: 1.02, letterSpacing: -1.4,
    margin: "0 0 16px",
    color: "oklch(0.18 0.01 80)",
  },
  h1Em: { fontStyle: "italic", color: "oklch(0.45 0.15 280)" },
  sub: {
    fontSize: 16, lineHeight: 1.55,
    color: "oklch(0.4 0.005 80)",
    margin: 0, width: "100%",
  },

  grid: {
    display: "grid",
    gridTemplateColumns: "repeat(2, 1fr)",
    gap: 18,
    marginBottom: 32,
  },
  card: {
    position: "relative",
    background: "white",
    border: "1px solid oklch(0.92 0.005 80)",
    borderRadius: 18,
    padding: 0,
    textAlign: "left",
    cursor: "pointer",
    fontFamily: "inherit",
    color: "inherit",
    display: "flex",
    flexDirection: "column",
    overflow: "hidden",
    transition: "all 220ms cubic-bezier(0.2, 0.8, 0.2, 1)",
  },

  chrome: {
    display: "flex",
    alignItems: "center",
    gap: 10,
    padding: "10px 16px",
    borderBottom: "1px solid oklch(0.94 0.005 80 / 0.7)",
  },
  chromeDots: { display: "flex", gap: 5 },
  chromeDot: { width: 8, height: 8, borderRadius: 99 },
  chromeId: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11, fontWeight: 500, letterSpacing: 0.3,
    color: "oklch(0.35 0.01 80)",
    marginLeft: 4,
  },
  chromeStatus: {
    marginLeft: "auto",
    display: "inline-flex", alignItems: "center", gap: 6,
    fontSize: 10.5, fontWeight: 500, letterSpacing: 0.4, textTransform: "uppercase",
    color: "oklch(0.4 0.005 80)",
  },

  cardId: { padding: "20px 22px 14px" },
  cardName: {
    fontFamily: "'Instrument Serif', serif",
    fontWeight: 400, fontSize: 36, letterSpacing: -0.7,
    lineHeight: 1, color: "oklch(0.16 0.01 80)",
    marginBottom: 6,
  },
  cardDesc: {
    fontSize: 13.5, lineHeight: 1.45,
    color: "oklch(0.45 0.005 80)",
  },

  chat: {
    padding: "4px 22px 18px",
    display: "flex",
    flexDirection: "column",
    gap: 8,
  },
  userBubble: {
    alignSelf: "flex-end",
    maxWidth: "85%",
    padding: "9px 13px",
    borderRadius: "14px 14px 4px 14px",
    background: "oklch(0.96 0.005 80)",
    border: "1px solid oklch(0.93 0.005 80)",
    fontSize: 12.5, lineHeight: 1.45,
    color: "oklch(0.28 0.01 80)",
  },
  agentBubble: {
    position: "relative",
    alignSelf: "flex-start",
    maxWidth: "92%",
    padding: "10px 14px 10px 16px",
    borderRadius: "14px 14px 14px 4px",
    fontSize: 12.5, lineHeight: 1.45,
    overflow: "hidden",
  },
  agentBubbleEdge: {
    position: "absolute",
    left: 0, top: 8, bottom: 8,
    width: 3,
    borderRadius: 99,
  },

  cardFoot: {
    display: "flex", alignItems: "center", justifyContent: "flex-end",
    padding: "12px 22px 16px",
    borderTop: "1px solid oklch(0.95 0.005 80)",
    marginTop: "auto",
  },
  openCta: {
    display: "inline-flex", alignItems: "center",
    fontSize: 13, fontWeight: 500,
    color: "oklch(0.3 0.01 80)",
  },

  statusDot: {
    width: 6, height: 6, borderRadius: 99,
    background: "oklch(0.62 0.16 145)",
    boxShadow: "0 0 0 3px oklch(0.62 0.16 145 / 0.18)",
  },

  foot: {
    marginTop: "auto",
    paddingTop: 24,
    borderTop: "1px solid oklch(0.94 0.005 80)",
    display: "flex", alignItems: "center", gap: 10,
    flexWrap: "wrap",
    fontSize: 12, color: "oklch(0.5 0.005 80)",
  },
  footSep: { color: "oklch(0.85 0.005 80)" },
  footStatus: { display: "inline-flex", alignItems: "center", gap: 6 },
};

window.VariationA = VariationA;
window.FiveNodesLogo = FiveNodesLogo;