// mentors.jsx — Jay Brunswick + PG Banker
// Two-mentor model; rich bios surfaced on Home + Profile.

const { useState: useStateM, useEffect: useEffectM } = React;
const { Card, DisplayHeading, Chip } = window.LAUNCH_SCREENS_1;

const MENTORS = [
  {
    id: 'jay',
    lbl: 'JB',
    name: 'Jay Brunswick',
    role: 'PRODUCER · A&R · VINTAGE MUSIC GROUP',
    color: '#C72820',
    palette: ['#C72820', '#7A1A0A'],
    rate: 100,
    credits: ['RIAA Gold certified songwriter', '170+ cuts to his name', '2 Billboard Top 40 country singles'],
    bio: "Jay is an RIAA Gold certified songwriter with over 170 cuts and two Billboard Top 40 country singles. He hears arrangement and structure before anything else — if your song has bones, he'll find them. Honest in feedback, blunt about the market, generous with time.",
    availability: '2 SLOTS THIS WEEK',
  },
  {
    id: 'pg',
    lbl: 'PG',
    name: 'PG Banker',
    role: 'SONGWRITER · PRODUCER · LOGIC PRO CERTIFIED',
    color: '#7A5AE0',
    palette: ['#7A5AE0', '#150A33'],
    rate: 100,
    credits: ['Logic Pro certified engineer', '1,000+ track placements', 'Placed on Fox Sports & major networks'],
    bio: "PG is a songwriter, Logic Pro certified engineer and music producer with over 1,000 track placements on networks like Fox Sports. Knows what makes a chorus stick, what kills a verse, and how to make a track sync-ready from the first bar. Best for artists ready to sharpen lyrics, topline, and production.",
    availability: '4 SLOTS THIS WEEK',
  },
];

// ────────────────────────────────────────────────────────
// MentorAvatar — circular portrait with deep-field bg + initials
// ────────────────────────────────────────────────────────
function MentorAvatar({ mentor, size = 56 }) {
  const fontSize = Math.max(14, size * 0.32);
  // Coaches loaded from Supabase may not carry a 2-stop palette — derive one.
  const palette = (mentor.palette && mentor.palette.length >= 2)
    ? mentor.palette
    : [mentor.color || '#C72820', '#0A0A0A'];
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      position: 'relative', overflow: 'hidden', flexShrink: 0,
      background: '#0A0A0A',
      boxShadow: `0 8px 24px ${mentor.color}40`,
    }}>
      {/* deep field bg */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(assets/deep-field.png)',
        backgroundSize: 'cover', backgroundPosition: 'center',
        opacity: 0.55, filter: 'saturate(1.1)',
      }} />
      {/* color tint */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(135deg, ${palette[0]}88 0%, ${palette[1]} 100%)`,
        mixBlendMode: 'multiply',
      }} />
      {/* highlight */}
      <div style={{
        position: 'absolute', top: '10%', left: '15%',
        width: '40%', height: '25%', borderRadius: '50%',
        background: 'rgba(255,255,255,0.25)', filter: 'blur(8px)',
      }} />
      {/* initials */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'Anton, "Archivo Black", system-ui',
        color: '#fff', fontSize, letterSpacing: 1,
        textShadow: '0 2px 8px rgba(0,0,0,0.6)',
      }}>{mentor.lbl}</div>
    </div>
  );
}

// ────────────────────────────────────────────────────────
// MentorsBlock — full-bio card list for Profile / dedicated section
// ────────────────────────────────────────────────────────
function MentorsBlock({ theme, onBookSession }) {
  // Roster comes from the Supabase `coaches` table (admin-managed). Adding a
  // coach there makes it appear here automatically. Falls back to the built-in
  // list in demo mode / while loading.
  const [mentors, setMentors] = useStateM(MENTORS);
  useEffectM(() => {
    let alive = true;
    if (window.LAUNCH_USER && window.LAUNCH_USER.fetchCoaches) {
      window.LAUNCH_USER.fetchCoaches().then((list) => {
        if (alive && list && list.length) setMentors(list);
      });
    }
    return () => { alive = false; };
  }, []);

  const minRate = mentors.reduce((lo, m) => Math.min(lo, m.rate || 100), Infinity);
  return (
    <div>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        marginBottom: 10,
      }}>
        <span style={{
          fontFamily: theme.fontMono, fontSize: 11, color: theme.muted,
          letterSpacing: 1, fontWeight: 600,
        }}>YOUR MENTORS · {mentors.length}</span>
        <span style={{
          fontFamily: theme.fontMono, fontSize: 10, color: theme.accent,
          letterSpacing: 0.5, fontWeight: 700,
        }}>${isFinite(minRate) ? minRate : 100}/HR · BOOK ANY TIME</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {mentors.map(m => (
          <Card key={m.id} theme={theme} style={{ padding: 16, overflow: 'hidden' }}>
            {/* head row */}
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
              <MentorAvatar mentor={m} size={72} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontFamily: theme.fontDisplay, fontSize: 22, color: theme.text,
                  letterSpacing: 0.3, lineHeight: 1, textTransform: 'uppercase',
                }}>{m.name}</div>
                <div style={{
                  fontFamily: theme.fontMono, fontSize: 9, color: theme.accent,
                  letterSpacing: 1, fontWeight: 700, marginTop: 6,
                }}>{m.role}</div>
                <div style={{
                  fontFamily: theme.fontMono, fontSize: 9, color: theme.muted,
                  letterSpacing: 0.8, fontWeight: 600, marginTop: 4,
                }}>● {m.availability}</div>
              </div>
            </div>

            {/* bio */}
            <div style={{
              fontFamily: theme.fontBody, fontSize: 13, color: theme.text,
              lineHeight: 1.55, marginTop: 12,
            }}>{m.bio}</div>

            {/* credits */}
            <div style={{
              display: 'flex', flexDirection: 'column', gap: 4,
              marginTop: 10, paddingTop: 10,
              borderTop: `1px solid ${theme.border}`,
            }}>
              {m.credits.map((c, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ color: theme.accent, fontSize: 10 }}>★</span>
                  <span style={{
                    fontFamily: theme.fontMono, fontSize: 10, color: theme.muted,
                    letterSpacing: 0.5, fontWeight: 600,
                  }}>{c.toUpperCase()}</span>
                </div>
              ))}
            </div>

            {/* CTA row */}
            <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
              <button onClick={() => onBookSession && onBookSession('mentor-' + m.id)} style={{
                flex: 1, padding: '12px', borderRadius: 12,
                background: theme.accent, color: theme.onAccent, border: 'none',
                fontFamily: theme.fontDisplay, fontSize: 13, letterSpacing: 1,
                cursor: 'pointer', textTransform: 'uppercase',
              }}>BOOK SESSION · ${m.rate || 100}/HR</button>
              <button style={{
                padding: '12px 16px', borderRadius: 12,
                background: 'transparent', color: theme.text,
                border: `1px solid ${theme.border}`,
                fontFamily: theme.fontMono, fontSize: 11, fontWeight: 700,
                letterSpacing: 1, cursor: 'pointer', textTransform: 'uppercase',
              }}>MESSAGE</button>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

window.LAUNCH_MENTORS = { MENTORS, MentorAvatar, MentorsBlock };