// Trust.jsx — trust & verification explainer
// Supports three card styles via `variant` prop:
//   'light'  — soft lavender icon + white card (default, on-page neutral)
//   'dark'   — black cards with radial purple glow (matches DownloadCTA dark)
//   'purple' — solid SeatConnect purple cards (bold brand moment)

const TRUST_FEATURES = [
  { icon: 'id', title: 'Verified identity', copy: 'Stripe-powered ID + payment check for every fan.' },
  { icon: 'lock', title: 'Protected checkout', copy: 'Payments held in escrow until transfer completes.' },
  { icon: 'shield', title: 'Fan-to-fan, direct', copy: 'Real fans and season members. No scalper farms, no bots.' },
];

const TrustIcon = ({ type }) => {
  const common = { width: 22, height: 22, fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (type === 'id') return <svg {...common} viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="12" r="2.5"/><path d="M14 10h4M14 13h3"/></svg>;
  if (type === 'lock') return <svg {...common} viewBox="0 0 24 24"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>;
  if (type === 'chat') return <svg {...common} viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H8l-4 4V6a2 2 0 012-2h13a2 2 0 012 2z"/></svg>;
  if (type === 'shield') return <svg {...common} viewBox="0 0 24 24"><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z"/><path d="M9 12l2 2 4-4"/></svg>;
  return null;
};

const TRUST_VARIANTS = {
  light: {
    cardBg: 'var(--card)',
    cardBorder: '1px solid var(--line)',
    cardRadial: 'none',
    titleColor: 'var(--ink)',
    copyColor: 'var(--ink-3)',
    iconBg: 'var(--accent-soft)',
    iconColor: 'var(--accent-ink)',
    hoverShadow: 'var(--shadow)',
  },
  // Matches HowItWorks active card — deep ink with a purple glow radiating
  // from the top-right corner. This is the "hover" palette used when the
  // default variant is 'light' and the user mouses over a card.
  dark: {
    cardBg: 'var(--ink)',
    cardBorder: '1px solid rgba(255,255,255,0.08)',
    cardRadial: 'radial-gradient(circle at top right, color-mix(in oklab, var(--accent) 45%, transparent) 0%, transparent 55%)',
    titleColor: '#fff',
    copyColor: 'rgba(255,255,255,0.65)',
    iconBg: 'rgba(155,122,240,0.18)',
    iconColor: 'var(--accent-2)',
    hoverShadow: '0 20px 40px rgba(10,8,30,0.35), 0 0 0 1px rgba(255,255,255,0.06)',
  },
  purple: {
    cardBg: 'linear-gradient(160deg, var(--accent) 0%, var(--accent-ink) 100%)',
    cardBorder: '1px solid rgba(255,255,255,0.12)',
    cardRadial: 'radial-gradient(90% 120% at 50% 0%, rgba(255,255,255,0.18) 0%, transparent 55%)',
    titleColor: '#fff',
    copyColor: 'rgba(255,255,255,0.78)',
    iconBg: 'rgba(255,255,255,0.18)',
    iconColor: '#fff',
    hoverShadow: '0 20px 50px rgba(74,37,184,0.45), 0 0 0 1px rgba(255,255,255,0.22)',
  },
};

const Trust = ({ variant = 'light' }) => {
  const v = TRUST_VARIANTS[variant] || TRUST_VARIANTS.light;
  const [hovered, setHovered] = React.useState(-1);

  // Hover palette — reuses the "dark" variant tokens so each card turns into
  // the same deep-ink + top-right purple glow treatment used in "How it works."
  const hoverPalette = TRUST_VARIANTS.dark;

  return (
    <section id="trust" style={{ padding: '120px 0', scrollMarginTop: 80 }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 60 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Trust & Safety</div>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', margin: '0 auto', maxWidth: 820 }}>
            Secure at every step.<br/><span style={{ color: 'var(--accent)' }}>Social at its <em>core</em>.</span>
          </h2>
        </div>

        <div className="sc-card-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, maxWidth: 1100, margin: '0 auto' }}>
          {TRUST_FEATURES.map((f, i) => {
            const isHovered = hovered === i;
            // When base variant is 'light', the card turns purple on hover.
            // When base is already dark/purple, just do the existing lift.
            const enablePurpleHover = variant === 'light';
            const active = enablePurpleHover && isHovered ? hoverPalette : v;
            const cardRadial = enablePurpleHover && isHovered
              ? hoverPalette.cardRadial
              : v.cardRadial;
            const hoverShadow = enablePurpleHover && isHovered
              ? hoverPalette.hoverShadow
              : v.hoverShadow;

            return (
              <div key={i} style={{
                background: active.cardBg,
                border: active.cardBorder,
                borderRadius: 20, padding: 28,
                display: 'flex', flexDirection: 'column', gap: 16,
                transition: 'background 0.35s ease, border-color 0.35s ease, transform 0.3s, box-shadow 0.3s',
                cursor: 'default',
                position: 'relative', overflow: 'hidden',
                transform: isHovered ? 'translateY(-4px)' : 'none',
                boxShadow: isHovered ? hoverShadow : 'none',
              }}
                onMouseEnter={() => setHovered(i)}
                onMouseLeave={() => setHovered(-1)}
              >
                {/* radial glow layer */}
                {cardRadial !== 'none' && (
                  <div aria-hidden="true" style={{
                    position: 'absolute', inset: 0,
                    background: cardRadial,
                    pointerEvents: 'none',
                    transition: 'opacity 0.35s ease',
                    opacity: (enablePurpleHover && !isHovered) ? 0 : 1,
                  }}/>
                )}

                <div style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: active.iconBg, color: active.iconColor,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  position: 'relative',
                  transition: 'background 0.35s ease, color 0.35s ease',
                }}>
                  <TrustIcon type={f.icon}/>
                </div>
                <div style={{ position: 'relative' }}>
                  <div style={{
                    fontSize: 17, fontWeight: 600, marginBottom: 6, letterSpacing: '-0.01em',
                    color: active.titleColor,
                    transition: 'color 0.35s ease',
                  }}>{f.title}</div>
                  <div style={{
                    fontSize: 14, lineHeight: 1.55,
                    color: active.copyColor,
                    transition: 'color 0.35s ease',
                  }}>{f.copy}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Trust });