const { useState, useEffect } = React;

// ---- SVG icons ----
const Arrow = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12h14M13 6l6 6-6 6" />
  </svg>
);
const ArrowUpRight = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M7 17L17 7M8 7h9v9" />
  </svg>
);
const IGIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2.2c3.2 0 3.6 0 4.85.07 3.25.15 4.77 1.7 4.92 4.92.06 1.25.07 1.62.07 4.8 0 3.2 0 3.57-.07 4.82-.15 3.22-1.66 4.77-4.92 4.92-1.25.06-1.62.07-4.85.07-3.2 0-3.57 0-4.82-.07-3.26-.15-4.77-1.7-4.92-4.92C2.2 15.57 2.2 15.2 2.2 12s0-3.55.07-4.8C2.42 3.96 3.93 2.42 7.18 2.27 8.43 2.2 8.8 2.2 12 2.2zm0 2.7c-3.14 0-3.5 0-4.74.07-2.1.1-3.02 1.05-3.12 3.12C4.07 9.32 4.05 9.68 4.05 12s.02 2.68.09 3.91c.1 2.07 1.02 3.02 3.12 3.12 1.24.06 1.6.07 4.74.07s3.5 0 4.74-.07c2.1-.1 3.02-1.05 3.12-3.12.07-1.23.09-1.6.09-3.91s-.02-2.68-.09-3.91c-.1-2.07-1.02-3.02-3.12-3.12C15.5 4.9 15.14 4.9 12 4.9zM12 7a5 5 0 110 10 5 5 0 010-10zm0 2.7a2.3 2.3 0 100 4.6 2.3 2.3 0 000-4.6zm5.25-2.9a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"/>
  </svg>
);
const XIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
    <path d="M18.24 2.25h3.31l-7.23 8.26L22.85 21.75h-6.66l-5.22-6.82-5.96 6.82H1.7l7.73-8.83L1.15 2.25h6.83l4.71 6.23zm-1.16 17.55h1.83L7.01 4.1H5.05z"/>
  </svg>
);

// ---- Subject placeholder SVG ----
function SubjectArt({ variant = 'student' }) {
  // A stylized cutout-style geometric portrait placeholder
  return (
    <svg viewBox="0 0 400 520" preserveAspectRatio="xMidYEnd meet">
      <defs>
        <linearGradient id="sg1" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#2a2d33" />
          <stop offset="1" stopColor="#0f1012" />
        </linearGradient>
        <linearGradient id="sg2" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#3a3f48" />
          <stop offset="1" stopColor="#1a1d22" />
        </linearGradient>
      </defs>
      {/* Body */}
      <path d="M80 520 L80 360 Q80 290 160 275 L240 275 Q320 290 320 360 L320 520 Z" fill="url(#sg1)" />
      {/* Collar detail */}
      <path d="M170 300 L200 340 L230 300 L230 330 L200 360 L170 330 Z" fill="#ffffff" opacity="0.92"/>
      {/* Books/folders */}
      <rect x="148" y="340" width="46" height="140" rx="4" fill="#ff1f8f" transform="rotate(-6 171 410)" />
      <rect x="178" y="335" width="44" height="140" rx="4" fill="#ffd60a" transform="rotate(2 200 405)" />
      <rect x="210" y="342" width="46" height="140" rx="4" fill="#1556ff" transform="rotate(8 233 412)" />
      {/* Head */}
      <ellipse cx="200" cy="200" rx="82" ry="96" fill="url(#sg2)"/>
      {/* Hair */}
      <path d="M118 180 Q110 120 160 100 Q200 80 240 100 Q290 120 282 180 Q282 150 260 140 L140 140 Q118 150 118 180 Z" fill="#0f1012"/>
      {/* Glasses */}
      <circle cx="172" cy="210" r="22" fill="none" stroke="#0f1012" strokeWidth="4"/>
      <circle cx="228" cy="210" r="22" fill="none" stroke="#0f1012" strokeWidth="4"/>
      <line x1="194" y1="210" x2="206" y2="210" stroke="#0f1012" strokeWidth="4"/>
      {/* Smile hint */}
      <path d="M180 240 Q200 252 220 240" stroke="#0f1012" strokeWidth="3" fill="none" strokeLinecap="round"/>
      {/* Arms crossed over books */}
      <path d="M95 380 Q140 355 200 360 Q260 355 305 380 L305 430 Q260 405 200 410 Q140 405 95 430 Z" fill="url(#sg1)"/>
    </svg>
  );
}

// ---- Nav ----
function TopBar({ route, navigate }) {
  const isProg = route.page === 'programs' || route.page === 'program';
  const [open, setOpen] = React.useState(false);
  const items = [
    { k: 'home', label: 'Home' },
    { k: 'about', label: 'About Us' },
    { k: 'programs', label: 'Programs' },
    { k: 'contact', label: 'Contact' },
  ];
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  const go = (k) => { setOpen(false); navigate({ page: k }); };
  return (
    <>
      <header className="topbar">
        <div className="topbar-inner">
          <div className="brand" onClick={() => go('home')}>
            <img src="assets/spu-logo.png" alt="Sripatum University" className="brand-logo" />
            <div className="brand-text">
              OFFICE OF FOREIGN<br/>EDUCATION MGMT.
              <small>International Programs · Bangkok</small>
            </div>
          </div>
          <button
            className={`hamburger ${open ? 'is-open' : ''}`}
            aria-label={open ? 'Close menu' : 'Open menu'}
            onClick={() => setOpen(o => !o)}
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </header>
      <div className={`nav-overlay ${open ? 'is-open' : ''}`} onClick={() => setOpen(false)}>
        <nav className="nav-drawer" onClick={(e) => e.stopPropagation()}>
          {items.map((it, i) => (
            <button
              key={it.k}
              className={(route.page === it.k || (it.k === 'programs' && isProg)) ? 'active' : ''}
              onClick={() => go(it.k)}
              style={{ animationDelay: open ? `${i * 60}ms` : '0ms' }}
            >
              <span className="num">0{i + 1}</span>
              <span className="lbl">{it.label}</span>
            </button>
          ))}
          <div className="nav-foot">
            <div>SPU · OFEM</div>
            <div>International Programs · Bangkok</div>
          </div>
        </nav>
      </div>
    </>
  );
}

// ---- Home ----
function Home({ navigate }) {
  return (
    <main className="fade-in">
      <section className="page">
        <div className="poster-hero">
          {/* Big display + photo on top */}
          <div className="hero-bottom">
            <div>
              <div className="big-display" style={{ fontSize: 'clamp(48px, 7vw, 110px)' }}>
                <span className="line">JOIN</span>
                <span className="line">SPU &mdash;</span>
                <span className="line"><span style={{ color: 'var(--blue)' }}>GO</span> GLOBAL</span>
              </div>
              <div className="hero-subcopy">
                You'll build industry skills in Business, Hospitality, and Aviation &mdash; study across two countries,
                learn from international faculty, and graduate ready for a cross-border career.
              </div>
              <div className="hero-actions">
                <button
                  onClick={() => navigate({ page: 'programs' })}
                  style={{ background: 'var(--ink)', color: 'var(--paper)', fontFamily: 'Archivo Black, sans-serif', fontSize: 14, padding: '16px 24px', borderRadius: 999, letterSpacing: '0.05em', display: 'inline-flex', alignItems: 'center', gap: 10, textTransform: 'uppercase' }}>
                  Explore Programs <Arrow />
                </button>
                <div className="social-pill">
                  <div className="icons"><XIcon/><IGIcon/></div>
                  <div className="txt">Instagram / X: @spu_ofem</div>
                </div>
              </div>
            </div>
            <div className="hero-bottom-art">
              <img src="assets/stacked-trio.png" alt="SPU international students" />
            </div>
          </div>

          {/* 3 cards side by side */}
          <div className="hero-cards">
            <div className="card-block card-blue">
              <div className="card-kicker">LEARN<br/>BUSINESS</div>
              <ul>
                <li>International BBA with NTP Nepal</li>
                <li>Leadership &amp; entrepreneurship</li>
                <li>Finance, marketing, strategy</li>
                <li>Hands-on career-ready training</li>
              </ul>
            </div>
            <div className="card-block card-white">
              <div className="card-kicker sm">LEARN<br/>HOSPITALITY</div>
              <ul>
                <li>Hotel &amp; MICE management</li>
                <li>Tourist experience design</li>
                <li>Food &amp; beverage operations</li>
                <li>Work-integrated learning</li>
              </ul>
            </div>
            <div className="ticket hero-ticket">
              <div className="top">Start Before Doubt Returns</div>
              <div className="mid">
                <div className="lbl">◆ SPU · OFEM</div>
                <div className="big">Seats Still Live</div>
                <div className="sm">3 international programs · Bangkok + Nepal</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Marquee */}
      <div className="marquee">
        <div className="marquee-track">
          <span>INTERNATIONAL PROGRAMS<span className="dot"></span></span>
          <span>BUSINESS MANAGEMENT<span className="dot"></span></span>
          <span>HOTEL &amp; MICE<span className="dot"></span></span>
          <span>AIRLINE BUSINESS<span className="dot"></span></span>
          <span>SPU × NEPAL<span className="dot"></span></span>
          <span>INTERNATIONAL PROGRAMS<span className="dot"></span></span>
          <span>BUSINESS MANAGEMENT<span className="dot"></span></span>
          <span>HOTEL &amp; MICE<span className="dot"></span></span>
          <span>AIRLINE BUSINESS<span className="dot"></span></span>
          <span>SPU × NEPAL<span className="dot"></span></span>
        </div>
      </div>

      {/* Programs strip */}
      <section className="page">
        <div className="section">
          <div className="section-head">
            <div>
              <div className="section-num">§ 02 / OUR PROGRAMS</div>
              <div className="section-title">
                THREE ROUTES<br/>
                <span className="outline">INTO GLOBAL</span><br/>
                <span className="accent">INDUSTRIES.</span>
              </div>
            </div>
            <button onClick={() => navigate({ page: 'programs' })}
              style={{ background: 'var(--ink)', color: 'var(--paper)', fontFamily: 'Archivo Black, sans-serif', fontSize: 13, padding: '14px 22px', borderRadius: 999, letterSpacing: '0.05em', display: 'inline-flex', alignItems: 'center', gap: 10, textTransform: 'uppercase' }}>
              See all <Arrow />
            </button>
          </div>
          <div className="prog-grid">
            {PROGRAMS.map((p, i) => (
              <div key={p.id} className={`prog-card c${i+1}`} onClick={() => navigate({ page: 'program', id: p.id })}>
                <div className="p-code">{p.code} / 0{i+1}</div>
                <div className="p-title">{p.name}</div>
                <div className="p-sub">{p.overview.split('. ')[0]}.</div>
                <div className="p-foot">
                  <div className="p-meta">{p.duration} · {p.partnerCountry}</div>
                  <div className="p-arrow"><ArrowUpRight size={18}/></div>
                </div>
                {p.image && <div className="p-img"><img src={p.image} alt={p.name} /></div>}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Facts band */}
      <section className="page">
        <div className="section" style={{ paddingTop: 0 }}>
          <div className="facts-band">
            <div className="fact"><div className="n"><span className="acc">02</span></div><div className="lbl">Partner Institutions</div></div>
            <div className="fact pink"><div className="n"><span className="acc">03</span></div><div className="lbl">Degree Programs</div></div>
            <div className="fact"><div className="n"><span className="acc">04</span></div><div className="lbl">Year Curriculum</div></div>
            <div className="fact pink"><div className="n"><span className="acc">01</span></div><div className="lbl">Global Mission</div></div>
          </div>
        </div>
      </section>
    </main>
  );
}

// ---- About ----
function About({ navigate }) {
  return (
    <main className="fade-in">
      <section className="page">
        <div className="about-hero">
          <div className="section-num">§ 01 / ABOUT US</div>
          <div className="display-huge" style={{ marginTop: 10 }}>
            <div><span className="blue">BUILDING</span></div>
            <div><span className="outline">MUTUAL</span></div>
            <div><span style={{ color: 'var(--ink)' }}>BENEFIT.</span></div>
          </div>
        </div>

        <div className="about-grid">
          <div className="about-body">
            <p>
              Sripatum University (SPU) has signed a Memorandum of Understanding (MOU) with
              <strong> Kennt College of Technology and Management Pvt. Ltd.</strong> and
              <strong> NTP Hospitality Management College</strong>, based in Nepal.
            </p>
            <p>
              This collaboration is dedicated to fostering mutual benefits for the institutions,
              their students, and faculty members &mdash; creating pathways for international study,
              shared curriculum development, and cross-cultural academic exchange.
            </p>
            <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button onClick={() => navigate({ page: 'programs' })}
                style={{ background: 'var(--ink)', color: 'var(--paper)', fontFamily: 'Archivo Black, sans-serif', fontSize: 13, padding: '14px 22px', borderRadius: 999, letterSpacing: '0.05em', display: 'inline-flex', alignItems: 'center', gap: 10, textTransform: 'uppercase' }}>
                View Programs <Arrow />
              </button>
              <button onClick={() => navigate({ page: 'contact' })}
                style={{ background: 'var(--yellow)', color: 'var(--ink)', fontFamily: 'Archivo Black, sans-serif', fontSize: 13, padding: '14px 22px', borderRadius: 999, letterSpacing: '0.05em', display: 'inline-flex', alignItems: 'center', gap: 10, textTransform: 'uppercase' }}>
                Contact Office <Arrow />
              </button>
            </div>
          </div>

          <div style={{ position: 'relative', minHeight: 420, background: 'var(--blue)', borderRadius: 28, overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px)', backgroundSize: '32px 32px' }}/>
            <div style={{ position: 'absolute', top: 28, left: 28, right: 28, color: 'var(--paper)', zIndex: 2 }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.85 }}>◆ Student Voice</div>
              <div style={{ fontFamily: 'Archivo Black, sans-serif', fontSize: 36, lineHeight: 0.95, textTransform: 'uppercase', letterSpacing: '-0.02em', marginTop: 10 }}>FROM KATHMANDU<br/>TO BANGKOK.</div>
            </div>
            <div style={{ position: 'absolute', bottom: 0, right: 0, width: '90%', height: '88%', display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' }}>
              <img src="assets/male-casual.png" alt="Nepali student" style={{ width: '100%', height: '100%', objectFit: 'contain', objectPosition: 'bottom right', filter: 'drop-shadow(-6px 12px 24px rgba(0,0,0,0.25))' }} />
            </div>
            <div style={{ position: 'absolute', bottom: 20, left: 28, color: 'var(--paper)', zIndex: 2, display: 'flex', gap: 10, alignItems: 'center' }}>
              <div style={{ width: 32, height: 2, background: 'var(--yellow)' }}/>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase' }}>SPU × NEPAL · 2026</div>
            </div>
          </div>
        </div>

        <div className="section">
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 20 }}>
            ◆ MOU Partners
          </div>
          <div className="partners-grid">
            {PARTNERS.map((p, i) => (
              <div key={i} className={`partner-card-p ${i===0 ? 'blue':'pink'}`}>
                <div className="tag">◆ {p.tag}</div>
                <h3>{p.name}</h3>
                <div className="loc">{p.country}</div>
                <div className="desc">{p.desc}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="section">
          <div className="facts-band">
            <div className="fact"><div className="n"><span className="acc">2026</span></div><div className="lbl">Partnerships Active</div></div>
            <div className="fact pink"><div className="n"><span className="acc">NP</span></div><div className="lbl">Partner Country</div></div>
            <div className="fact"><div className="n"><span className="acc">EN</span></div><div className="lbl">Medium of Instruction</div></div>
            <div className="fact pink"><div className="n"><span className="acc">BKK</span></div><div className="lbl">Base Campus</div></div>
          </div>
        </div>
      </section>
    </main>
  );
}

// ---- Programs ----
function Programs({ navigate }) {
  const colors = ['blue', 'pink', 'yellow'];
  return (
    <main className="fade-in">
      <section className="page">
        <div className="about-hero">
          <div className="section-num">§ 02 / OUR PROGRAMS</div>
          <div className="display-huge" style={{ marginTop: 10 }}>
            <div><span className="blue">THREE</span></div>
            <div><span className="outline">BACHELOR'S</span></div>
            <div><span className="pink">DEGREES.</span></div>
          </div>
          <div style={{ maxWidth: 560, marginTop: 28, fontSize: 15, lineHeight: 1.55, color: 'var(--ink-2)', fontWeight: 500 }}>
            All international programs are delivered jointly with academic partners in Nepal &mdash;
            preparing graduates for cross-border careers in business, hospitality, and aviation.
          </div>
        </div>

        <div className="section" style={{ paddingTop: 16 }}>
          <div className="prog-list">
            {PROGRAMS.map((p, i) => (
              <div key={p.id} className={`prog-row ${colors[i]}`} onClick={() => navigate({ page: 'program', id: p.id })}>
                <div className="r-idx">0{i+1} / {p.code}</div>
                <div>
                  <div className="r-title">{p.degree}<br/>in {p.name}</div>
                  <div className="r-meta">{p.type} · {p.duration}</div>
                </div>
                <div className="r-body">
                  {p.overview.split('. ').slice(0, 2).join('. ')}…
                  <div style={{ marginTop: 14, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
                    ◈ {p.partnerShort}
                  </div>
                </div>
                <div className="r-arrow"><ArrowUpRight size={18}/></div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ---- Program Detail ----
function ProgramDetail({ id, navigate }) {
  const p = PROGRAMS.find(x => x.id === id) || PROGRAMS[0];
  const idx = PROGRAMS.findIndex(x => x.id === p.id);
  const color = ['blue', 'pink', 'yellow'][idx] || 'blue';
  const onYellow = color === 'yellow';

  return (
    <main className="fade-in">
      <section className="page">
        <div className="pd-hero">
          <div className="breadcrumb">
            <button onClick={() => navigate({ page: 'home' })}>Home</button>
            <span className="sep">/</span>
            <button onClick={() => navigate({ page: 'programs' })}>Programs</button>
            <span className="sep">/</span>
            <span>{p.name}</span>
          </div>
          <div className={`pd-title-wrap ${color}`}>
            <div>
              <div className="pd-kicker">◆ {p.type}</div>
              <div className="pd-title">{p.degree}<br/>in {p.name}</div>
              <div className="pd-partner">
                SPU partners with <strong>{p.partner}</strong>, based in {p.partnerCountry},
                to deliver this joint international program.
              </div>
            </div>
            <div className="pd-meta-grid">
              <div className="pd-meta-tile"><div className="k">Degree</div><div className="v">{p.degree.replace('Bachelor of ', 'B. ')}</div></div>
              <div className="pd-meta-tile"><div className="k">Duration</div><div className="v">{p.duration}</div></div>
              <div className="pd-meta-tile"><div className="k">Language</div><div className="v">English</div></div>
              <div className="pd-meta-tile"><div className="k">Delivery</div><div className="v">Joint · NP</div></div>
            </div>
          </div>
        </div>

        <div className="pd-section">
          <h2>DETAILS &amp; <span className="outline">CAREER PATHS.</span></h2>
          <div className="pd-overview">
            <p className="body">{p.overview}</p>
            <div className={`pd-overview-art ${color}`}>
              {p.image && <img src={p.image} alt="" />}
              <div className="pd-art-banner">
                SPU <span>◆</span> {p.degree.replace('Bachelor of ', 'B. ')} <span>◆</span> {p.duration}
              </div>
            </div>
          </div>

          <div style={{ marginTop: 40, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--muted)' }}>
            ◈ Career Opportunities
          </div>
          <div className="careers-grid" style={{ '--career-img': `url('assets/prog-${p.code.toLowerCase()}.jpg')` }}>
            {p.careers.map((c, i) => (
              <div key={i} className="career-chip">
                <div className="c-num">0{i+1}</div>
                <div className="c-name">{c}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="pd-section" style={{ padding: '40px 0 80px' }}>
          <div style={{ background: 'var(--ink)', color: 'var(--paper)', borderRadius: 28, padding: 40, display: 'flex', justifyContent: 'space-between', gap: 32, alignItems: 'center', flexWrap: 'wrap' }}>
            <div>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.2em', color: 'var(--yellow)', textTransform: 'uppercase' }}>
                ◆ CONTINUE BROWSING
              </div>
              <div className="display" style={{ fontSize: 36, marginTop: 8, textTransform: 'uppercase' }}>Other Programs</div>
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              {PROGRAMS.filter(x => x.id !== p.id).map(x => (
                <button key={x.id} onClick={() => navigate({ page: 'program', id: x.id })}
                  style={{ background: 'var(--yellow)', color: 'var(--ink)', fontFamily: 'Archivo Black, sans-serif', fontSize: 13, padding: '14px 22px', borderRadius: 999, letterSpacing: '0.03em', display: 'inline-flex', alignItems: 'center', gap: 10, textTransform: 'uppercase' }}>
                  {x.name} <Arrow />
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// ---- Contact ----
function Contact() {
  return (
    <main className="fade-in">
      <section className="page">
        <div className="contact-hero">
          <div className="section-num">§ 04 / CONTACT US</div>
          <div className="display-huge" style={{ marginTop: 10 }}>
            <div><span className="pink">VISIT,</span></div>
            <div><span className="outline">WRITE</span> <span style={{ color: 'var(--ink)' }}>OR</span></div>
            <div><span className="blue">CALL US.</span></div>
          </div>

          <div className="contact-grid">
            <div className="contact-info">
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 20 }}>
                ◆ Office Details
              </div>
              <div className="contact-row"><div className="k">Institution</div><div className="v">Sripatum University</div></div>
              <div className="contact-row"><div className="k">Address</div><div className="v">2410/2 Phahonyothin Rd.<br/>Chatuchak, Bangkok</div></div>
              <div className="contact-row"><div className="k">Telephone</div><div className="v">(+66) 2579 1111</div></div>
              <div className="contact-row"><div className="k">Facsimile</div><div className="v">(+66) 2561 1721</div></div>
              <div className="contact-row"><div className="k">Office</div><div className="v">Foreign Education Mgmt.</div></div>
            </div>

            <div className="contact-map">
              <div className="grid"/>
              <div className="pin"/>
              <div className="coord">13.8553°N · 100.5696°E</div>
              <div>
                <div className="coord" style={{ marginBottom: 12 }}>📍 BANGKOK · CHATUCHAK</div>
                <div className="here">MAIN<br/>CAMPUS.</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// ---- Footer ----
function Footer({ navigate }) {
  return (
    <footer>
      <div className="page">
        <div>
          <img src="assets/spu-logo-white.png" alt="Sripatum University" className="f-logo" />
          <div className="f-brand">OFFICE OF FOREIGN<br/>EDUCATION MGMT.</div>
          <div className="f-desc">
            International programs coordination office of Sripatum University &mdash;
            fostering academic partnerships across borders.
          </div>
        </div>
        <div>
          <div className="f-head">◆ Navigate</div>
          <div className="f-list">
            <button onClick={() => navigate({ page: 'home' })}>Home</button>
            <button onClick={() => navigate({ page: 'about' })}>About Us</button>
            <button onClick={() => navigate({ page: 'programs' })}>Programs</button>
            <button onClick={() => navigate({ page: 'contact' })}>Contact</button>
          </div>
        </div>
        <div>
          <div className="f-head">◆ Programs</div>
          <div className="f-list">
            {PROGRAMS.map(p => (
              <button key={p.id} onClick={() => navigate({ page: 'program', id: p.id })}>{p.name}</button>
            ))}
          </div>
        </div>
        <div>
          <div className="f-head">◆ Visit</div>
          <div className="f-list" style={{ fontSize: 13, lineHeight: 1.55 }}>
            <div>2410/2 Phahonyothin Rd.<br/>Chatuchak, Bangkok</div>
            <div>(+66) 2579 1111</div>
          </div>
        </div>
      </div>
      <div className="f-bottom">
        <div>© 2026 SPU · OFEM</div>
        <div>v2.0 — POSTER EDITION</div>
      </div>
    </footer>
  );
}

// ---- App shell ----
function App() {
  const [route, setRoute] = useState(() => {
    try {
      const stored = localStorage.getItem('ofem-route');
      if (stored) return JSON.parse(stored);
    } catch (e) {}
    return { page: 'home' };
  });

  useEffect(() => {
    try { localStorage.setItem('ofem-route', JSON.stringify(route)); } catch (e) {}
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [route]);

  const navigate = (r) => setRoute(r);

  let body;
  switch (route.page) {
    case 'about':    body = <About navigate={navigate} />; break;
    case 'programs': body = <Programs navigate={navigate} />; break;
    case 'program':  body = <ProgramDetail id={route.id} navigate={navigate} />; break;
    case 'contact':  body = <Contact />; break;
    default:         body = <Home navigate={navigate} />;
  }

  return (
    <div data-screen-label={`${route.page}${route.id ? ' · ' + route.id : ''}`}>
      <TopBar route={route} navigate={navigate} />
      {body}
      <Footer navigate={navigate} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
