// Portfolio sections — terminal hero, featured project, other projects, stack, experience, about, contact.

const NAV_LINKS = [
{ id: 'featured', idx: '01', label: 'featured' },
{ id: 'other', idx: '02', label: 'other' },
{ id: 'stack', idx: '03', label: 'stack' },
{ id: 'experience', idx: '04', label: 'experience' },
{ id: 'about', idx: '05', label: 'about' },
{ id: 'contact', idx: '06', label: 'contact' }];


function scrollToId(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const y = el.getBoundingClientRect().top + window.scrollY - 24;
  window.scrollTo({ top: y, behavior: 'smooth' });
}

// ─── top nav ───────────────────────────────────────────────────────
function TopNav() {
  return (
    <header className="nav">
      <div className="container nav__inner">
        <a href="#top" className="nav__brand" onClick={(e) => {e.preventDefault();window.scrollTo({ top: 0, behavior: 'smooth' });}}>
          <span>~/thwin-zan</span>
          <span className="nav__brand-path">/portfolio</span>
        </a>
        <nav className="nav__links">
          {NAV_LINKS.map((l) =>
          <a key={l.id} href={`#${l.id}`} onClick={(e) => {e.preventDefault();scrollToId(l.id);}}>
              <span className="idx">{l.idx}</span>{l.label}
            </a>
          )}
        </nav>
      </div>
    </header>);

}

// ─── sidebar rail (variant B inheritance) ─────────────────────────
function Rail() {
  return (
    <aside className="rail">
      <div>
        <div className="rail__brand">Thwin<br />Zan<span className="dot">.</span></div>
        <div className="rail__title">Full-stack dev · YGN</div>
      </div>
      <div className="status"><span className="status__dot" />Available · Jun ’26</div>
      <div className="rail__hr" />
      <nav className="rail__nav">
        {NAV_LINKS.map((l) =>
        <a key={l.id} href={`#${l.id}`} onClick={(e) => {e.preventDefault();scrollToId(l.id);}}>
            <span className="idx">{l.idx}</span>{l.label}
          </a>
        )}
      </nav>
      <div className="rail__soc">
        <a href="https://github.com/devtzan" target="_blank" rel="noreferrer">↗ github</a>
        <a href="https://linkedin.com/in/thwinzan" target="_blank" rel="noreferrer">↗ linkedin</a>
        <a href="mailto:hi@devtzan.com">↗ hi@devtzan.com</a>
      </div>
    </aside>);

}

// ─── hero ──────────────────────────────────────────────────────────
function Hero() {
  const onSeeWork = () => scrollToId('featured');
  return (
    <section className="section hero" id="top">
      <div className="container">
        <div className="term" role="presentation">
          <div className="term__chrome">
            <span className="term__dot" />
            <span className="term__dot" />
            <span className="term__dot" />
            <span className="term__title">
              <b>zsh</b> — thwin-zan@portfolio  ·  <span className="term__branch">main</span>
            </span>
          </div>
          <div className="term__body">
            <div><span className="prompt">$</span> <span className="cmd">whoami</span></div>
            <h1 className="hero__name">Thwin Zan<span className="dot">.</span></h1>
            <div className="out">full-stack developer · ships production SaaS solo</div>

            <div style={{ marginTop: 22 }}>
              <span className="prompt">$</span> <span className="cmd">cat tagline.txt</span>
            </div>
            <div className="hero__tag">
              I build the parts that actually matter — payments, multi-tenancy,
              auth. Production over polish. Shipped over starred.
            </div>

            <div style={{ marginTop: 22 }}>
              <span className="prompt">$</span> <span className="cmd">ls --options</span>
            </div>
            <div className="cta-row" style={{ marginTop: 10 }}>
              <button className="btn btn--primary" onClick={onSeeWork}>
                <span>./see-featured.sh</span>
                <span className="btn__arrow">↓</span>
              </button>
              <a className="btn" href="https://food.devtzan.com" target="_blank" rel="noreferrer">
                <span>open</span>
                <span>food.devtzan.com</span>
                <span className="btn__arrow">↗</span>
              </a>
            </div>

            <div style={{ marginTop: 18, color: 'var(--muted-2)', fontFamily: 'var(--font-mono)', fontSize: 13 }}>
              <span className="prompt">$</span> <span className="cursor" />
            </div>

            <div style={{ marginTop: 22 }}>
              <div className="status"><span className="status__dot" />Available · Jun ’26</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─── featured project ──────────────────────────────────────────────
function Featured() {
  return (
    <section className="section" id="featured">
      <div className="container">
        <div className="eyebrow">
          <span className="eyebrow__idx">// 01</span>
          <span className="eyebrow__rule" />
          <span>featured · /projects/food</span>
        </div>

        <div className="featured__head">
          <h2>Multi-tenant restaurant<br />ordering SaaS.<br />Built solo. In production.</h2>
          <div className="featured__meta">
            <span><b>·</b> solo</span>
            <span><b>·</b> live</span>
            <span><b>·</b> 2025 → now</span>
          </div>
        </div>

        <div className="featured__grid">
          <div className="feat-side">
            <p className="lede">
              White-label ordering platform. Each restaurant gets its own subdomain,
              branding, and Stripe Connect account — routed by Host header at the edge.
              Same codebase, N storefronts.
            </p>
            <ul className="feat-list">
              <li><div><b>Multi-tenant routing.</b> Host header → tenant resolution in middleware; one Next.js deployment serves every domain.</div></li>
              <li><div><b>White-label per restaurant.</b> Logo, palette, fonts, custom domain — themed at the edge, not the client.</div></li>
              <li><div><b>Real Stripe Connect.</b> Merchant onboarding, direct payouts to restaurants, platform fees, full webhook reconciliation.</div></li>
              <li><div><b>Production infra.</b> AWS S3 uploads, SES transactional email, Clerk auth, Neon Postgres via Prisma, deployed on Vercel.</div></li>
            </ul>
            <div className="chips">
              {['Next.js 16', 'TypeScript', 'Prisma 7', 'Neon Postgres', 'Stripe Connect', 'AWS S3', 'AWS SES', 'Clerk', 'Vercel'].map((t) =>
              <span className="chip" key={t}>{t}</span>
              )}
            </div>
            <div className="feat-links">
              <a href="https://food.devtzan.com" target="_blank" rel="noreferrer">↗ live demo</a>
              <a href="#">↗ case study</a>
              <a href="#">↗ source</a>
            </div>
          </div>

          <div className="browser" aria-label="food.devtzan.com preview">
            <div className="browser__chrome">
              <span className="browser__dot" />
              <span className="browser__dot" />
              <span className="browser__dot" />
              <div className="browser__url">
                <span className="lock">🔒</span>
                <span className="pad">https://</span>
                <span>sashimi.food.devtzan.com</span>
              </div>
            </div>
            <div className="browser__body">
              <Storefront />
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─── other projects ────────────────────────────────────────────────
function OtherProjects() {
  const projects = [
  {
    idx: '02 · a', status: 'wip', statusLabel: 'building',
    title: 'menu-ocr',
    desc: 'PDF & image menus → structured product data. LLM-assisted, hand-tuned for the long tail of restaurant menus.',
    meta: ['Python', 'GPT-4', 'Tesseract']
  },
  {
    idx: '02 · b', status: 'soon', statusLabel: 'planning',
    title: 'shifts',
    desc: 'Time-boxed status app for solo founders. Set a window, broadcast availability, auto-clear when done. Lives in the menu bar.',
    meta: ['SwiftUI', 'macOS']
  },
  {
    idx: '02 · c', status: 'soon', statusLabel: 'soon',
    title: '_______',
    desc: 'Slot reserved for the next thing. Probably more payments. Definitely shipped.',
    meta: ['TBD']
  }];


  return (
    <section className="section" id="other">
      <div className="container">
        <div className="eyebrow">
          <span className="eyebrow__idx">// 02</span>
          <span className="eyebrow__rule" />
          <span>other · /projects/*</span>
        </div>
        <div className="proj-grid">
          {projects.map((p) =>
          <article className="proj-card" key={p.title}>
              <div className="proj-card__top">
                <span>{p.idx}</span>
                <span className={`proj-card__status proj-card__status--${p.status}`}>{p.statusLabel}</span>
              </div>
              <div className="proj-card__title">{p.title}<span className="dot">.</span></div>
              <div className="proj-card__desc">{p.desc}</div>
              <div className="proj-card__foot">
                {p.meta.map((m) => <span key={m}>{m}</span>)}
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ─── stack ─────────────────────────────────────────────────────────
const STACK_PKGS = [
['next', '16.2.6'],
['react', '19.2.4'],
['typescript', '5.x'],
['tailwindcss', '4.x'],
['prisma', '7.8.0'],
['@prisma/adapter-pg', '7.8.0'],
['pg', '8.20'],
['stripe', '22.1.1'],
['@stripe/react-stripe-js', '6.3.0'],
['@clerk/nextjs', '7.3.3'],
['@aws-sdk/client-s3', '3.1045'],
['@aws-sdk/client-ses', '3.1045'],
['zod', '4.4.3']];


const STACK_CATS = [
['frontend', 'Next.js 16 · React 19 · TypeScript · Tailwind 4'],
['backend', 'Prisma 7 · Postgres (pg) · Zod · server actions'],
['infra', 'Vercel · Neon Postgres · AWS S3 · AWS SES'],
['payments', 'Stripe · Stripe Connect · webhooks · reconciliation'],
['auth', 'Clerk · OAuth · session security']];


function Stack({ view }) {
  return (
    <section className="section" id="stack">
      <div className="container">
        <div className="eyebrow">
          <span className="eyebrow__idx">// 03</span>
          <span className="eyebrow__rule" />
          <span>stack · what I reach for</span>
        </div>

        <div className="stack-shell">
          <div className="stack-shell__head">
            <span>
              <span className="prompt">$</span>
              {view === 'tree' ?
              <span>npm ls --depth 0 | grep -v devDep</span> :
              <span>cat stack.yml</span>}
            </span>
            <span>{view === 'tree' ? '12 packages' : '6 layers'}</span>
          </div>

          {view === 'tree' ?
          <div className="stack-tree">
              {STACK_PKGS.map(([pkg, ver], i) =>
            <div className="line" key={pkg}>
                  <span className="br">{i === STACK_PKGS.length - 1 ? '└─' : '├─'}</span>{' '}
                  <span className="pkg">{pkg}</span>
                  <span className="ver">@{ver}</span>
                </div>
            )}
            </div> :

          <dl className="stack-cats">
              {STACK_CATS.map(([k, v]) =>
            <React.Fragment key={k}>
                  <dt>{k}</dt>
                  <dd>{v.split(' · ').map((part, i, arr) =>
                <React.Fragment key={part}>
                      <span>{part}</span>
                      {i < arr.length - 1 && <span className="sep">·</span>}
                    </React.Fragment>
                )}</dd>
                </React.Fragment>
            )}
            </dl>
          }
        </div>
      </div>
    </section>);

}

// ─── experience (git log) ──────────────────────────────────────────
function Experience() {
  const commits = [
  {
    hash: 'a1b2c3d', ref: 'HEAD, 2024 → now',
    co: 'Capital One', role: 'SWE · Card & Payments',
    blurb: 'Production payments systems at scale. Card authorization flows, money movement, the parts customers never see but always notice when they break.'
  },
  {
    hash: 'd4e5f60', ref: '2023 — 2024',
    co: 'United Wholesale Mortgage', role: 'SWE · Employee Platform',
    blurb: 'Internal platform used daily by thousands — social feeds, employee directory, org-wide comms. Owned features end-to-end: UI, API, database.'
  }];


  return (
    <section className="section" id="experience">
      <div className="container">
        <div className="eyebrow">
          <span className="eyebrow__idx">// 04</span>
          <span className="eyebrow__rule" />
          <span>experience · the day job</span>
        </div>

        <div className="gitlog">
          <div className="gitlog__head">
            <span className="prompt">$</span> git log --oneline <b>experience</b>
          </div>
          <div className="gitlog__body">
            {commits.map((c) =>
            <div className="commit" key={c.hash}>
                <div className="commit__line">
                  <span className="commit__hash">{c.hash}</span>
                  <span className="commit__ref">({c.ref})</span>
                  <span className="commit__co">{c.co}</span>
                  <span className="commit__role">— {c.role}</span>
                </div>
                <div className="commit__blurb">{c.blurb}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ─── about ─────────────────────────────────────────────────────────
function About() {
  return (
    <section className="section" id="about">
      <div className="container">
        <div className="eyebrow">
          <span className="eyebrow__idx">// 05</span>
          <span className="eyebrow__rule" />
          <span>about.txt</span>
        </div>
        <div className="about">
          <div className="about__caption">
            cat ~/about.txt<br />
            <span style={{ color: 'var(--muted-2)' }}>4 lines · 44 words</span>
          </div>
          <div className="about__body">
            <em>Fintech</em> at Capital One (Card &amp; Payments).
            Enterprise <em>internal tooling</em> at UWM.
            Building production SaaS solo on the side — schema to Stripe, end to end.
            Big-company depth, indie-shipper urgency.{' '}
            Degree in <em>civil engineering</em> — same obsession with systems
            that don't fall over, different medium.
          </div>
        </div>
      </div>
    </section>);

}

// ─── contact ───────────────────────────────────────────────────────
function Contact() {
  return (
    <section className="section" id="contact">
      <div className="container">
        <div className="eyebrow">
          <span className="eyebrow__idx">// 06</span>
          <span className="eyebrow__rule" />
          <span>contact · say hi</span>
        </div>

        <div className="contact">
          <div><span className="prompt">$</span> open <a href="https://github.com/devtzan" target="_blank" rel="noreferrer"><span className="arg">github.com/devtzan</span> ↗</a></div>
          <div><span className="prompt">$</span> open <a href="https://linkedin.com/in/thwinzan" target="_blank" rel="noreferrer"><span className="arg">linkedin.com/in/thwinzan</span> ↗</a></div>
          <div><span className="prompt">$</span> mail <a href="mailto:hi@devtzan.com"><span className="arg">hi@devtzan.com</span> ↗</a></div>
          <div style={{ color: 'var(--muted-2)' }}><span className="prompt">$</span> <span className="cursor" /></div>
        </div>
      </div>
    </section>);

}

// ─── footer ────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="foot container">
      <span>uptime: since 2018 · last deploy {new Date().toISOString().slice(0, 10)}</span>
      <span>built from scratch · no template · <span style={{ color: 'var(--accent)' }}>exit 0</span></span>
    </footer>);

}

Object.assign(window, {
  TopNav, Rail, Hero, Featured, OtherProjects, Stack, Experience, About, Contact, Footer
});