/* ═══════════════════════════════════════════════════════════
   GEMILANG — SUB-PAGES  (Team · Program · Reach Out) + BottomNav
   Loaded after the core script; references React (global) and
   window.NorthStar / window.GOLD set by the core inline script.
   Unique local names avoid cross-script lexical collisions.
   ═══════════════════════════════════════════════════════════ */
const PGOLD = '#c8a45a';
const PINK = '#2a1f0e';
const _useState = React.useState;
const _useEffect = React.useEffect;

/* fade-in on mount */
function useEnter(delay) {
  const [on, setOn] = _useState(false);
  _useEffect(() => {const t = setTimeout(() => setOn(true), (delay || 0) + 40);return () => clearTimeout(t);}, []);
  return on;
}

/* ─────────────── LINE-ART MOTIFS (stroke = currentColor) ─────────────── */
const GSTAR = (cx, cy, r) => {
  const p = [];
  for (let i = 0; i < 8; i++) {
    const ang = Math.PI / 4 * i - Math.PI / 2;
    const rad = i % 2 === 0 ? r : r * 0.4;
    p.push(`${(cx + Math.cos(ang) * rad).toFixed(1)} ${(cy + Math.sin(ang) * rad).toFixed(1)}`);
  }
  return 'M' + p.join(' L') + ' Z';
};

function TeamArt() {
  return (
    <svg viewBox="0 0 240 200" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <g opacity=".5">
        <circle cx="58" cy="92" r="22" />
        <path d="M22 168 q36 -50 72 0" />
      </g>
      <g opacity=".5">
        <circle cx="182" cy="92" r="22" />
        <path d="M146 168 q36 -50 72 0" />
      </g>
      <circle cx="120" cy="80" r="29" />
      <path d="M74 172 q46 -60 92 0" />
      <path d={GSTAR(120, 26, 13)} fill={PGOLD} stroke="none" />
    </svg>);

}

function ProgramArt() {
  const dots = [];
  for (let r = 0; r < 3; r++) {
    for (let c = 0; c < 4; c++) {
      const cx = 56 + c * 36,cy = 100 + r * 30;
      const hi = r === 1 && c === 1;
      if (hi) continue;
      dots.push(<circle key={r + '-' + c} cx={cx} cy={cy} r="4" fill="currentColor" stroke="none" opacity=".5" />);
    }
  }
  return (
    <svg viewBox="0 0 240 200" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <rect x="36" y="50" width="168" height="132" rx="14" />
      <line x1="36" y1="84" x2="204" y2="84" />
      <line x1="78" y1="36" x2="78" y2="62" />
      <line x1="162" y1="36" x2="162" y2="62" />
      {dots}
      <circle cx="92" cy="130" r="13" stroke={PGOLD} strokeWidth="2.8" />
      <path d={GSTAR(180, 158, 11)} fill={PGOLD} stroke="none" />
    </svg>);

}

function ReachArt() {
  return (
    <svg viewBox="0 0 240 200" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <g opacity=".45">
        <rect x="92" y="44" width="120" height="84" rx="9" />
        <path d="M92 54 l60 44 60 -44" />
      </g>
      <rect x="34" y="80" width="124" height="86" rx="9" />
      <path d="M34 90 l62 45 62 -45" />
      <path d={GSTAR(196, 150, 12)} fill={PGOLD} stroke="none" />
    </svg>);

}

/* ─────────────── SOCIAL / CONTACT ICONS (placeholders) ─────────────── */
const ICO = {
  linkedin:
  <g><rect x="2.6" y="2.6" width="18.8" height="18.8" rx="3.4" /><line x1="7" y1="10.4" x2="7" y2="17" /><circle cx="7" cy="6.9" r="0.9" /><line x1="11.3" y1="17" x2="11.3" y2="10.4" /><path d="M11.3 13.2c0-1.6 1.2-2.8 2.8-2.8s2.8 1.2 2.8 2.8V17" /></g>,

  x: <g><line x1="5" y1="5" x2="19" y2="19" /><line x1="19" y1="5" x2="5" y2="19" /></g>,
  globe: <g><circle cx="12" cy="12" r="9" /><ellipse cx="12" cy="12" rx="3.8" ry="9" /><line x1="3" y1="12" x2="21" y2="12" /></g>,
  scholar: <g><path d="M2.5 9 12 5l9.5 4L12 13z" /><path d="M6.5 11v4.2c0 1.6 11 1.6 11 0V11" /><line x1="21.5" y1="9" x2="21.5" y2="14" /></g>,
  github: <g><polyline points="9 8 5.5 12 9 16" /><polyline points="15 8 18.5 12 15 16" /><line x1="13" y1="6.5" x2="11" y2="17.5" /></g>,
  mail: <g><rect x="3" y="5" width="18" height="14" rx="2.5" /><path d="M3.5 7l8.5 6 8.5-6" /></g>,
  instagram: <g><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.2" cy="6.8" r="0.9" fill="currentColor" stroke="none" /></g>
};

function Icon({ name, size }) {
  return (
    <svg width={size || 18} height={size || 18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      {ICO[name]}
    </svg>);

}

function SocialRow({ icons }) {
  const list = icons || ['linkedin', 'x', 'globe', 'scholar', 'github'];
  return (
    <div className="gm-soc">
      {list.map((n) =>
      <a key={n} href="#" onClick={(e) => e.preventDefault()} aria-label={n}><Icon name={n} /></a>
      )}
    </div>);

}

/* ─────────────── SHARED TOP CHROME ─────────────── */
function PageTop({ onBack }) {
  return (
    <div className="gm-top">
      <button className="gm-back" onClick={onBack}>
        <span style={{ display: 'inline-block' }}>←</span> Kembali
      </button>
      <span className="gm-wordmark">GEMILANG</span>
      <span style={{ width: 80 }} />
    </div>);

}

/* ═══════════════════ BOTTOM NAV (home) ═══════════════════ */
function BottomNav({ onNavigate }) {
  const items = [
  { key: 'team', label: 'Team', Art: TeamArt },
  { key: 'program', label: 'Program', Art: ProgramArt }];

  // Set this to the real address later, e.g. 'mailto:hello@gemilang.club'
  const REACH_OUT_EMAIL = 'mailto:gemilang.ext@protonmail.com';

  return (
    <section className="gm-nav-section">
      <div className="gm-nav-eyebrow">
        <i></i><span>Jelajahi</span><i></i>
      </div>
      <div className="gm-nav">
        {items.map(({ key, label, Art }) =>
        <button key={key} className="gm-nav__item" onClick={() => onNavigate(key)}>
            <div className="gm-nav__art"><Art /></div>
            <div className="gm-nav__label">{label}</div>
          </button>
        )}
        <a className="gm-nav__item" href={REACH_OUT_EMAIL}>
          <div className="gm-nav__art"><ReachArt /></div>
          <div className="gm-nav__label">Reach Out</div>
        </a>
      </div>
    </section>);

}

/* ═══════════════════ TEAM ═══════════════════ */
// Set each `linkedin` to the member's profile URL later.
const TEAM_SLOTS = [
{ name: 'Nama Lengkap', role: 'Co-Founder', linkedin: '#' },
{ name: 'Nama Lengkap', role: 'Co-Founder', linkedin: '#' },
{ name: 'Nama Lengkap', role: 'Operations', linkedin: '#' },
{ name: 'Nama Lengkap', role: 'Design', linkedin: '#' },
{ name: 'Nama Lengkap', role: 'Tech', linkedin: '#' },
{ name: 'Nama Lengkap', role: 'Partnerships', linkedin: '#' }];


function TeamCard({ slot, i }) {
  const on = useEnter(120 + i * 70);
  return (
    <div className="gm-card" style={{ opacity: on ? 1 : 0, transform: on ? 'none' : 'translateY(20px)', transition: 'opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1)' }}>
      <a
        className="gm-photo"
        href={slot.linkedin}
        target="_blank"
        rel="noopener noreferrer"
        aria-label={`LinkedIn — ${slot.name}`}
        onClick={(e) => {if (slot.linkedin === '#') e.preventDefault();}}>
        <span className="gm-photo__tag">Foto</span>
        <svg className="gm-photo__glyph" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="32" cy="25" r="13" />
          <path d="M11 57c2-13 11-19 21-19s19 6 21 19" />
        </svg>
      </a>
      <div className="gm-name" style={{ fontFamily: "\"Antique Olive Nord\"" }}>{slot.name}</div>
      <div className="gm-role" style={{ fontFamily: "\"Antique Olive Nord\"" }}>{slot.role}</div>
    </div>);

}

function Team({ onBack }) {
  const on = useEnter(80);
  return (
    <div className="gm-page">
      <PageTop onBack={onBack} />
      <div className="gm-titlerow">
        <div>
          <h1 className="gm-title" style={{ opacity: on ? 1 : 0, transform: on ? 'none' : 'translateY(14px)', transition: 'opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1)' }}>Team</h1>
        </div>
        <img className="gm-corner-sketch" src="athens-lines.png" alt="" />
      </div>
      <div className="gm-grid">
        {TEAM_SLOTS.map((s, i) => <TeamCard key={i} slot={s} i={i} />)}
      </div>
    </div>);

}

/* ═══════════════════ PROGRAM ═══════════════════ */
function Program({ onBack }) {
  const on = useEnter(80);
  const Star = window.NorthStar;
  return (
    <div className="gm-page">
      <PageTop onBack={onBack} />
      <div className="gm-titlerow">
        <img className="gm-corner-sketch" src="athens-lines.png" alt="" />
      </div>

      <div className="gm-empty">
        {Star ? <Star /> : null}
        <div className="gm-empty__season">PROGRAM 2025 — 2026</div>
        <div className="gm-empty__big">UPCOMING SOON</div>
        <div className="gm-empty__line"></div>
      </div>
    </div>);

}

/* ═══════════════════ REACH OUT ═══════════════════ */
const CHANNELS = [
{ ico: 'mail', k: 'Email', v: 'gemilang.ext@protonmail.com', href: 'mailto:gemilang.ext@protonmail.com' },
{ ico: 'instagram', k: 'Instagram', v: '@gemilang', href: '#' },
{ ico: 'linkedin', k: 'LinkedIn', v: 'Gemilang', href: '#' },
{ ico: 'github', k: 'GitHub', v: 'gemilang', href: '#' }];


function ReachOut({ onBack }) {
  const on = useEnter(80);
  return (
    <div className="gm-page">
      <PageTop onBack={onBack} />
      <div className="gm-titlerow">
        <div>
          <h1 className="gm-title" style={{ opacity: on ? 1 : 0, transform: on ? 'none' : 'translateY(14px)', transition: 'opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1)' }}>Reach Out</h1>
          <p className="gm-reach-lead">
            Punya ide gila, mau kolaborasi, atau pengin gabung bareng? Pintu kami selalu terbuka — kirim pesan.
          </p>
          <a className="gm-reach-cta" href="mailto:gemilang.ext@protonmail.com">
            <span>Kirim Email</span><span>→</span>
          </a>
        </div>
        <div className="gm-corner-sketch" style={{ color: PINK, opacity: 1, mixBlendMode: 'normal' }}>
          <ReachArt />
        </div>
      </div>

      <div className="gm-channels">
        {CHANNELS.map((c) =>
        <a key={c.k} className="gm-channel" href={c.href} onClick={(e) => {if (c.href === '#') e.preventDefault();}}>
            <span className="gm-channel__ico"><Icon name={c.ico} size={22} /></span>
            <span style={{ display: 'flex', flexDirection: 'column', gap: 3, minWidth: 0 }}>
              <span className="gm-channel__k">{c.k}</span>
              <span className="gm-channel__v" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.v}</span>
            </span>
          </a>
        )}
      </div>
    </div>);

}

Object.assign(window, { BottomNav, Team, Program, ReachOut });