// site-lecturers.jsx — Lecturer grid

const LECTURERS = [
{ name: 'LAN', kana: 'ラン', en: 'Extension · Design', desc: 'シールエクステ・デザイン提案を得意とする講師。',
  src: 'assets/img/lan.jpg', pos: 'right 30%' },
{ name: 'RIKU', kana: 'リク', en: 'Cut · Sculpting', desc: 'メンズカット・骨格補正を軸にした構築的なカット。',
  src: 'assets/img/riku.jpg', pos: 'center 30%' },
{ name: 'S__1138883_0', kana: 'エス', en: 'Color · Editorial', desc: 'ハイトーンを起点にしたエディトリアルカラー。',
  src: 'assets/img/s.jpg', pos: 'center 25%' },
{ name: 'SARA', kana: 'サラ', en: 'Color · Highlight', desc: '透明感のあるハイライト・ベーシックカラーが得意。',
  src: 'assets/img/sara.jpg', pos: 'center 25%' },
{ name: 'KYOICHI', kana: 'きょーいち', en: 'Black Hair · Braids', desc: 'コーンロウ／ブレイズ／ドレッドを総合的に指導。',
  src: 'assets/img/kyoichi.jpg', pos: 'center 25%' },
{ name: 'YUTO AIZU', kana: '会津 勇斗', en: 'Founder · Cut', desc: 'YuHouseアカデミー代表。サロンワーク全般を指導。',
  src: 'assets/img/aizu.jpg', pos: 'center 25%' },
{ name: 'GOSHI YAMASHIRO', kana: '山代 剛士', en: 'Cut · Mens', desc: 'メンズ専門のショートカット・刈り上げ設計。',
  src: 'assets/img/yamashiro.jpg', pos: 'center 30%' },
{ name: 'TAKERU KOTANI', kana: '小谷 武琉', en: 'Extension · Feather', desc: '羽エクステの装着技術とデザイン構成。',
  src: 'assets/img/kotani.jpg', pos: 'center 35%' },
{ name: 'YOSHITO NIIMURA', kana: '新村 嘉人', en: 'Black Hair · Afro', desc: 'アフロ・ドレッドのテクスチャー作り。',
  src: 'assets/img/niimura.jpg', pos: 'center 25%' },
{ name: 'MIKI TATEISHI', kana: '立石 未希', en: 'Counsel · Design', desc: 'カウンセリングとデザイン提案を体系的に学ぶ。',
  src: 'assets/img/tateishi.jpg', pos: 'center 25%' }];


function LecturerCard({ idx, lecturer, onOpen }) {
  const [hov, setHov] = useState(false);
  const num = String(idx + 1).padStart(2, '0');
  return (
    <button type="button"
    onClick={() => onOpen(idx)}
    onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
    style={{
      display: 'block', textDecoration: 'none', color: 'inherit',
      position: 'relative', overflow: 'hidden', width: '100%',
      border: 'none', padding: 0, textAlign: 'left', cursor: 'pointer',
      font: 'inherit',
      background: BRAND.black, opacity: "1", backgroundImage: "initial", backgroundPosition: "initial", backgroundSize: "initial", backgroundRepeat: "initial", backgroundAttachment: "initial", backgroundOrigin: "initial", backgroundClip: "initial"
    }}>
      <div style={{
        position: 'relative', overflow: 'hidden', aspectRatio: '3 / 4',
        background: '#1a1a1a'
      }}>
        <img
          src={lecturer.src}
          alt={lecturer.name}
          loading="lazy"
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: lecturer.pos || 'center top',
            // Subtle tonal unification so phone snapshots read as a coherent set
            // against the editorial layout (mild desat + warm contrast).
            filter: hov ?
            'grayscale(.05) contrast(1.04) brightness(1.0)' :
            'grayscale(.18) contrast(1.06) brightness(.96) sepia(.04)',
            transform: hov ? 'scale(1.05)' : 'scale(1)',
            transition: 'transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease'
          }} />
        
        {/* Number badge */}
        <div style={{
          position: 'absolute', top: 16, left: 16,
          fontFamily: 'ui-monospace, monospace', fontSize: 10,
          letterSpacing: '.22em', color: BRAND.white,
          background: 'rgba(0,0,0,.55)', padding: '5px 10px'
        }}>N° {num}</div>
        {/* Info band */}
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0,
          padding: '24px 22px 22px',
          background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 70%)',
          color: BRAND.white
        }}>
          <div style={{
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            fontSize: 12, letterSpacing: '.22em', color: BRAND.goldLight
          }}>{lecturer.en}</div>
          <div style={{
            marginTop: 6,
            fontFamily: '"Cormorant Garamond", serif',
            fontSize: 26, letterSpacing: '.04em', lineHeight: 1.1
          }}>{lecturer.name}</div>
          <div style={{
            marginTop: 2,
            fontFamily: '"Shippori Mincho", serif',
            fontSize: 12, letterSpacing: '.14em', color: 'rgba(255,255,255,.7)'
          }}>{lecturer.kana}</div>
        </div>
      </div>
      <div style={{
        padding: '18px 22px 22px', background: BRAND.white, color: BRAND.ink,
        display: 'flex', flexDirection: 'column', gap: 14
      }}>
        <p style={{
          margin: 0, fontFamily: '"Noto Sans JP", sans-serif',
          fontSize: 12, lineHeight: 1.85, letterSpacing: '.04em',
          color: BRAND.mute, textWrap: 'pretty'
        }}>{lecturer.desc}</p>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 12, borderTop: `1px solid ${BRAND.hair}`
        }}>
          <span style={{
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            fontSize: 13, letterSpacing: '.2em',
            color: hov ? BRAND.gold : BRAND.black,
            transition: 'color .3s ease'
          }}>View Profile →</span>
          <span style={{
            fontFamily: 'ui-monospace, monospace',
            fontSize: 10, letterSpacing: '.18em', color: BRAND.mute
          }}>IG · TT</span>
        </div>
      </div>
    </button>);

}

// ── Profile modal ──────────────────────────────────────────────────────────
function LecturerModal({ idx, onClose }) {
  const open = idx !== null;
  const lecturer = open ? LECTURERS[idx] : null;
  const num = open ? String(idx + 1).padStart(2, '0') : '';

  // Lock scroll + ESC to close while open.
  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener('keydown', onKey);
    };
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 200,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: '40px 24px',
        background: 'rgba(26,26,26,.55)',
        backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
        animation: 'lecFade .3s ease',
      }}>
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          position: 'relative', display: 'grid',
          gridTemplateColumns: '0.85fr 1fr',
          width: 'min(880px, 100%)', maxHeight: '86vh', overflow: 'hidden',
          background: BRAND.white, color: BRAND.ink,
          boxShadow: '0 40px 100px -40px rgba(0,0,0,.6)',
          animation: 'lecRise .4s cubic-bezier(.2,.7,.2,1)',
        }}>
        {/* Close */}
        <button type="button" onClick={onClose} aria-label="閉じる"
          style={{
            position: 'absolute', top: 16, right: 16, zIndex: 2,
            width: 40, height: 40, borderRadius: '50%', cursor: 'pointer',
            border: `1px solid ${BRAND.hair}`, background: 'rgba(255,255,255,.9)',
            color: BRAND.ink, fontFamily: '"Cormorant Garamond", serif', fontSize: 22,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>×</button>

        {/* Photo */}
        <div style={{ position: 'relative', background: '#1a1a1a', minHeight: 360 }}>
          <img src={lecturer.src} alt={lecturer.name}
            style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%',
              objectFit: 'cover', objectPosition: lecturer.pos || 'center top',
              filter: 'grayscale(.1) contrast(1.05)',
            }} />
          <div style={{
            position: 'absolute', top: 16, left: 16,
            fontFamily: 'ui-monospace, monospace', fontSize: 10,
            letterSpacing: '.22em', color: BRAND.white,
            background: 'rgba(0,0,0,.55)', padding: '5px 10px',
          }}>N° {num}</div>
        </div>

        {/* Body */}
        <div style={{ padding: '48px 44px', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
          <div style={{
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            fontSize: 13, letterSpacing: '.22em', color: BRAND.gold,
          }}>{lecturer.en}</div>
          <h3 style={{
            margin: '12px 0 0',
            fontFamily: '"Cormorant Garamond", serif', fontWeight: 500,
            fontSize: 40, letterSpacing: '.03em', lineHeight: 1.05, color: BRAND.ink,
          }}>{lecturer.name}</h3>
          <div style={{
            marginTop: 8,
            fontFamily: '"Shippori Mincho", serif',
            fontSize: 14, letterSpacing: '.14em', color: BRAND.mute,
          }}>{lecturer.kana}</div>

          <div style={{
            margin: '28px 0', height: 1, background: BRAND.hair,
          }} />

          <div style={{
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            fontSize: 12, letterSpacing: '.2em', color: BRAND.gold, marginBottom: 16,
          }}>Profile</div>
          <p style={{
            margin: 0, fontFamily: '"Noto Sans JP", sans-serif',
            fontSize: 14, lineHeight: 2.1, letterSpacing: '.04em',
            color: BRAND.ink, textWrap: 'pretty',
          }}>
            ##############################################<br />
            ####################################<br />
            ##############################################<br />
            ####################
          </p>

          <div style={{
            marginTop: 'auto', paddingTop: 36,
            display: 'flex', alignItems: 'center', gap: 20,
          }}>
            <a href="#" onClick={(e) => e.preventDefault()} style={{
              fontFamily: 'ui-monospace, monospace', fontSize: 11,
              letterSpacing: '.2em', color: BRAND.mute, textDecoration: 'none',
            }}>INSTAGRAM ↗</a>
            <span style={{ width: 1, height: 12, background: BRAND.hair }} />
            <a href="#" onClick={(e) => e.preventDefault()} style={{
              fontFamily: 'ui-monospace, monospace', fontSize: 11,
              letterSpacing: '.2em', color: BRAND.mute, textDecoration: 'none',
            }}>TIKTOK ↗</a>
          </div>
        </div>
      </div>
    </div>);

}

function Lecturers() {
  const [active, setActive] = useState(null);
  return (
    <section id="lecturers" style={{
      background: BRAND.white, color: BRAND.ink,
      padding: '160px 80px'
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          marginBottom: 80, gap: 40, flexWrap: 'wrap'
        }}>
          <div>
            <Eyebrow>Lecturers — 04</Eyebrow>
            <div style={{ marginTop: 28 }}>
              <SectionTitle en="Lecturers." jp="講師紹介 / 在籍10名" />
            </div>
          </div>
          <p style={{
            maxWidth: 420, margin: 0,
            fontFamily: '"Noto Sans JP", sans-serif',
            fontSize: 14, lineHeight: 2, letterSpacing: '.04em', color: BRAND.mute
          }}>
            現場の第一線で活躍するヘアアーティストたち。<br />
            得意分野ごとに、深く学べる体制をご用意しています。
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 24
        }}>
          {LECTURERS.map((l, i) => <LecturerCard key={l.name} idx={i} lecturer={l} onOpen={setActive} />)}
        </div>
      </div>

      <LecturerModal idx={active} onClose={() => setActive(null)} />
    </section>);

}

window.Lecturers = Lecturers;
window.LECTURERS = LECTURERS;