/* global React, BorderBeam */
const { useState, useRef } = React;

/* ============================================================================
   Retainers — three-tier card grid with rotating glow border, color-coded per
   tier (Maintain graphite, Build chrome, Lead red). Middle tier raised slightly,
   "Recommended" tier (Lead) flagged with a corner ribbon.
   ============================================================================ */

const TIERS = [
  {
    key: "maintain",
    name: "Maintain",
    price: "$450",
    cadence: "/MO",
    accent: "var(--color-maintain)",
    accentRGB: "129, 136, 145",
    headline: "Something breaks. You find out it's already fixed.",
    raised: false,
    included: [
      "Crashes investigated, not just restarted",
      "Performance kept where it should be",
      "Discord response measured in minutes",
    ],
  },
  {
    key: "build",
    name: "Build",
    price: "$650",
    cadence: "/MO",
    accent: "var(--color-build)",
    accentRGB: "200, 204, 210",
    headline: "Every month, your server ships something new.",
    raised: false,
    included: [
      "New features built, tested, deployed monthly",
      "Economy and systems stay balanced",
      "Everything in Maintain",
    ],
  },
  {
    key: "lead",
    name: "Lead",
    price: "$1,000",
    cadence: "/MO",
    accent: "var(--color-lead)",
    accentRGB: "200, 48, 47",
    headline: "One line item. Your entire stack covered.",
    raised: true,
    badge: "RECOMMENDED",
    included: [
      "Everything in Build",
      "3D assets made when your server needs them",
      "Database and infra managed end-to-end",
    ],
  },
];

function Retainers() {
  return (
    <section
      id="retainers"
      data-screen-label="07 Retainers"
      style={{
        position: "relative",
        minHeight: "100vh",
        padding: "10rem clamp(2rem, 6vw, 6rem) 8rem",
        background: "var(--color-base)",
      }}
    >
      {/* Header */}
      <div style={{ marginBottom: "5rem", maxWidth: 920, position: "relative" }}>
        <div className="reveal-up" style={{
          fontFamily: "var(--font-body)", fontSize: 10,
          letterSpacing: "0.4em", textTransform: "uppercase",
          color: "var(--color-accent)", marginBottom: "1.2rem",
          display: "flex", alignItems: "center", gap: 12,
        }}>
          <span style={{ width: 36, height: 1, background: "var(--color-accent)" }}></span>
          [07] // RETAINERS
        </div>
        <h2 className="reveal-up" style={{
          fontFamily: "var(--font-display)", fontWeight: 700,
          fontSize: "clamp(2rem, 5.5vw, 5.2rem)",
          letterSpacing: "-0.04em", lineHeight: 0.92,
          textTransform: "uppercase", color: "var(--color-ink)", margin: 0,
        }}>
          One slot. <span style={{ color: "var(--color-accent-warm)" }}>One server.</span>
          <br />
          One month.
        </h2>
      </div>

      <div className="retainer-grid" style={{
        display: "grid",
        gap: 22,
        gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
        alignItems: "stretch",
      }}>
        {TIERS.map((t, i) => <TierCard key={t.key} tier={t} index={i} />)}
      </div>

      <style>{`
        @media (max-width: 1024px) {
          .retainer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function FootItem() { return null; }

/* ----- TierCard ----------------------------------------------------------- */
function TierCard({ tier, index }) {
  const [hover, setHover] = useState(false);
  const ref = useRef(null);
  const [tilt, setTilt] = useState({ rx: 0, ry: 0 });
  const onMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width;
    const py = (e.clientY - r.top) / r.height;
    setTilt({ rx: -(py - 0.5) * 4, ry: (px - 0.5) * 4 });
  };
  const onLeave = () => { setHover(false); setTilt({ rx: 0, ry: 0 }); };

  return (
    <div
      ref={ref}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={onLeave}
      onMouseMove={onMove}
      data-cursor="PICK"
      className="reveal-up"
      style={{
        position: "relative",
        borderRadius: 16,
        padding: 1,                       // 1px wrapper for rotating conic
        // Rotating conic-gradient border
        background: `conic-gradient(from var(--card-glow-angle, 0deg),
                      ${tier.accent} 0%,
                      var(--color-accent-warm) 25%,
                      transparent 45%,
                      transparent 80%,
                      ${tier.accent} 100%)`,
        animation: "card-border-rotate 6s linear infinite",
        transform: `perspective(900px) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg) translateY(${tier.raised ? -16 : 0}px) translateZ(${hover ? 8 : 0}px)`,
        transition: "transform 0.4s var(--ease-out)",
        willChange: "transform",
      }}
    >
      <div style={{
        position: "relative",
        background: "var(--color-surface)",
        borderRadius: 15,
        padding: "32px 28px",
        height: "100%",
        display: "flex", flexDirection: "column",
        overflow: "hidden",
      }}>
        {/* Inner glow halo */}
        <div aria-hidden="true" style={{
          position: "absolute", inset: 0, borderRadius: 15, pointerEvents: "none",
          background: `radial-gradient(120% 60% at 50% 0%, rgba(${tier.accentRGB},0.16), transparent 60%)`,
        }}></div>

        {/* Badge */}
        {tier.badge && (
          <div style={{
            position: "absolute", top: 18, right: 18,
            fontFamily: "var(--font-body)", fontSize: 9,
            letterSpacing: "0.4em", textTransform: "uppercase",
            color: "var(--color-base)",
            background: tier.accent,
            padding: "5px 9px",
          }}>{tier.badge}</div>
        )}

        {/* Head row */}
        <div style={{
          position: "relative",
          display: "flex", justifyContent: "space-between", alignItems: "flex-start",
          gap: 12,
        }}>
          <div>
            <div style={{
              fontFamily: "var(--font-body)", fontSize: 10,
              letterSpacing: "0.4em", textTransform: "uppercase",
              color: tier.accent, marginBottom: 8,
            }}>
              TIER 0{index + 1}
            </div>
            <h3 style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: "2.2rem", letterSpacing: "-0.04em", lineHeight: 1.0,
              textTransform: "uppercase", color: "var(--color-ink)",
              margin: 0,
            }}>
              {tier.name}
            </h3>
          </div>
          <div style={{ textAlign: "right" }}>
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: "2.4rem", letterSpacing: "-0.04em",
              color: "var(--color-ink)", lineHeight: 1,
            }}>{tier.price}</div>
            <div style={{
              fontFamily: "var(--font-body)", fontSize: 10,
              letterSpacing: "0.4em", textTransform: "uppercase",
              color: "var(--color-ink-muted)",
              marginTop: 4,
            }}>{tier.cadence}</div>
          </div>
        </div>

        {/* Headline */}
        <p style={{
          fontFamily: "var(--font-display)", fontWeight: 700,
          fontSize: "clamp(1rem, 1.4vw, 1.25rem)",
          letterSpacing: "-0.02em", lineHeight: 1.15,
          textTransform: "uppercase",
          color: tier.accent,
          marginTop: 28, marginBottom: 0,
          maxWidth: "22ch",
        }}>
          {tier.headline}
        </p>

        {/* Divider */}
        <div style={{
          height: 1,
          background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent)",
          margin: "26px 0 22px",
        }}></div>

        {/* Included */}
        <ul style={{
          listStyle: "none", padding: 0, margin: 0,
          fontFamily: "var(--font-body)", fontSize: 12, lineHeight: 1.65,
          color: "var(--color-ink-muted)",
          flex: 1,
        }}>
          {tier.included.map((line, i) => (
            <li key={i} style={{
              display: "flex", alignItems: "flex-start", gap: 10,
              marginBottom: 10,
            }}>
              <span style={{ color: tier.accent, lineHeight: 1.8, flex: "0 0 auto" }}>▸</span>
              <span>{line}</span>
            </li>
          ))}
        </ul>

        {/* CTA */}
        <a
          href="https://discord.gg/hRZeHwWyHG"
          target="_blank"
          rel="noreferrer"
          data-cursor="START"
          style={{
            marginTop: 24,
            fontFamily: "var(--font-body)", fontSize: 11,
            letterSpacing: "0.3em", textTransform: "uppercase",
            textDecoration: "none",
            color: tier.raised ? "var(--color-base)" : "var(--color-ink)",
            background: tier.raised ? tier.accent : "transparent",
            border: tier.raised ? `1px solid ${tier.accent}` : "1px solid rgba(255,255,255,0.18)",
            padding: "14px 18px",
            textAlign: "center",
            transition: "background 0.25s ease, color 0.25s ease, border-color 0.25s ease",
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = tier.accent;
            e.currentTarget.style.color = "var(--color-base)";
            e.currentTarget.style.borderColor = tier.accent;
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = tier.raised ? tier.accent : "transparent";
            e.currentTarget.style.color = tier.raised ? "var(--color-base)" : "var(--color-ink)";
            e.currentTarget.style.borderColor = tier.raised ? tier.accent : "rgba(255,255,255,0.18)";
          }}
        >
          {tier.key === "lead" ? "Reserve a Lead slot" : tier.key === "build" ? "Start building" : "Start a conversation"} <span style={{ opacity: 0.8 }}>→</span>
        </a>
      </div>
    </div>
  );
}

Object.assign(window, { Retainers });