// Andrew Hilburn portfolio — single direction (V3 Featured) with Work / About tabs.

const THEMES = {
  light: { bg: '#fafaf7', panel: '#ffffff', fg: '#141413', muted: '#6b6b66', line: 'rgba(20,20,19,0.10)', accent: '#c5391d', ph: '#ece9e2', phInk: '#9a958b' },
  warm:  { bg: '#f1ebe0', panel: '#f7f2e9', fg: '#2a221a', muted: '#7a6c5d', line: 'rgba(42,34,26,0.14)', accent: '#b8472a', ph: '#e6dfd1', phInk: '#9c8d79' },
  dark:  { bg: '#16140f', panel: '#1d1a14', fg: '#f0ebe0', muted: '#8e8678', line: 'rgba(240,235,224,0.10)', accent: '#e08a5c', ph: '#221f18', phInk: '#5a534a' },
};

function themeVars(theme) {
  const t = THEMES[theme] || THEMES.warm;
  return {
    '--bg': t.bg, '--panel': t.panel, '--fg': t.fg, '--muted': t.muted,
    '--line': t.line, '--accent': t.accent, '--ph': t.ph, '--ph-ink': t.phInk,
  };
}

function Arrow({ size = 14, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" style={style}>
      <path d="M3.5 10.5L10.5 3.5M10.5 3.5H4.5M10.5 3.5V9.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function Thumb({ label, ratio = '4/3', image, style }) {
  if (image) {
    return (
      <div style={{
        aspectRatio: ratio,
        background: 'var(--ph)',
        backgroundImage: `url(${image})`,
        backgroundSize: 'cover',
        backgroundPosition: 'top center',
        backgroundRepeat: 'no-repeat',
        ...style,
      }} role="img" aria-label={label} />
    );
  }
  return (
    <div style={{
      aspectRatio: ratio,
      background: 'var(--ph)',
      backgroundImage: 'repeating-linear-gradient(135deg, transparent 0 12px, rgba(0,0,0,0.025) 12px 13px)',
      color: 'var(--ph-ink)',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-start',
      padding: '14px 16px',
      fontFamily: '"Geist Mono", ui-monospace, monospace',
      fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase',
      ...style,
    }}>
      {label}
    </div>
  );
}

function Pill({ children, style, accent }) {
  return (
    <span style={{
      display: 'inline-block', padding: '4px 10px',
      border: `1px solid ${accent ? 'var(--accent)' : 'var(--line)'}`,
      borderRadius: 999,
      fontFamily: '"Geist Mono", monospace', fontSize: 10,
      letterSpacing: '0.08em', textTransform: 'uppercase',
      color: accent ? 'var(--accent)' : 'var(--muted)',
      whiteSpace: 'nowrap',
      ...style,
    }}>{children}</span>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Header / tab nav — used by both pages
// ─────────────────────────────────────────────────────────────────────────────

function Header({ tab, setTab }) {
  const Tab = ({ id, label }) => {
    const active = tab === id;
    return (
      <button
        onClick={() => setTab(id)}
        style={{
          appearance: 'none', border: 0, background: 'transparent',
          padding: '8px 4px', cursor: 'pointer',
          fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
          color: active ? 'var(--fg)' : 'var(--muted)',
          position: 'relative',
          transition: 'color .2s',
        }}
        onMouseEnter={(e) => { if (!active) e.currentTarget.style.color = 'var(--fg)'; }}
        onMouseLeave={(e) => { if (!active) e.currentTarget.style.color = 'var(--muted)'; }}
      >
        {label}
        <span style={{
          position: 'absolute', left: 4, right: 4, bottom: 2, height: 2,
          background: 'var(--accent)', borderRadius: 2,
          transform: active ? 'scaleX(1)' : 'scaleX(0)',
          transformOrigin: 'left center',
          transition: 'transform .25s cubic-bezier(.2,.7,.3,1)',
        }} />
      </button>
    );
  };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 5,
      backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
      background: 'color-mix(in oklab, var(--bg) 82%, transparent)',
      borderBottom: '1px solid var(--line)',
      display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center',
      padding: '14px 40px', gap: 24,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 500, whiteSpace: 'nowrap', minWidth: 0 }}>
        <span style={{
          flex: '0 0 auto',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          width: 28, height: 28, borderRadius: 8, background: 'var(--accent)',
          color: '#fff', fontFamily: '"Geist Mono", monospace',
          fontSize: 11, letterSpacing: '0.04em',
        }}>AH</span>
        <span>Andrew Hilburn</span>
      </div>
      <nav style={{ display: 'flex', gap: 28, justifySelf: 'center' }}>
        <Tab id="work" label="Work" />
        <Tab id="about" label="About" />
      </nav>
      <a href={`mailto:${PROFILE.email}`} style={{
        justifySelf: 'end',
        textDecoration: 'none', color: 'var(--fg)', fontSize: 14,
        padding: '8px 14px', borderRadius: 999, border: '1px solid var(--line)',
        whiteSpace: 'nowrap',
      }}>
        Get in touch ↗
      </a>
    </header>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Work page
// ─────────────────────────────────────────────────────────────────────────────

function WorkPage() {
  const main = PROJECTS.find(p => p.feature === 'main');
  const secondaries = PROJECTS.filter(p => p.feature === 'secondary');
  const rest = PROJECTS.filter(p => !p.feature);

  return (
    <main style={{ maxWidth: 1180, margin: '0 auto', padding: '72px 40px 96px' }}>
      {/* Hero */}
      <div style={{ maxWidth: 820, marginBottom: 72 }}>
        <Pill style={{ marginBottom: 22 }}>● Available for new work</Pill>
        <h1 style={{
          fontFamily: 'Geist, sans-serif', fontWeight: 500,
          fontSize: 76, lineHeight: 1.02, letterSpacing: '-0.035em',
          margin: '18px 0 22px',
        }}>
          Connecting advanced problems with{' '}
          <span style={{ color: 'var(--accent)' }}>technology-enhanced</span>{' '}
          solutions.
        </h1>
        <p style={{
          fontSize: 19, color: 'var(--muted)', maxWidth: 580,
          margin: 0, lineHeight: 1.55,
        }}>
          I build practical software for the specialty coffee industry — dashboards, calculators, and operations tools that quietly do their job.
        </p>
      </div>

      {/* Featured */}
      <a href={main.url} target="_blank" rel="noopener noreferrer" className="ft-card" style={{ marginBottom: 24 }}>
        <Thumb label={`${main.num} — ${main.name}`} ratio="21/9" image={main.image} />
        <div style={{ padding: '24px 28px 26px', display: 'grid', gridTemplateColumns: '1fr auto', gap: 24 }}>
          <div>
            <div style={{ display: 'flex', gap: 10, marginBottom: 10 }}>
              <Pill>{main.tag}</Pill>
              <Pill accent>★ Main feature</Pill>
            </div>
            <h3 style={{ fontSize: 30, margin: '0 0 6px', fontWeight: 500, letterSpacing: '-0.02em' }}>{main.name}</h3>
            <p style={{ margin: 0, color: 'var(--muted)', maxWidth: 620, fontSize: 15 }}>{main.desc}</p>
          </div>
          <div className="ft-arrow" style={{ alignSelf: 'flex-end' }}><Arrow size={22} /></div>
        </div>
      </a>

      {/* Secondary */}
      <div style={{ display: 'grid', gap: 16, marginBottom: 48 }}>
        {secondaries.map((s) => (
          <a key={s.id} href={s.url} target="_blank" rel="noopener noreferrer" className="ft-card">
            <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', alignItems: 'stretch' }}>
              <Thumb label={`${s.num} — ${s.name}`} ratio="auto" image={s.image} style={{ height: '100%' }} />
              <div style={{ padding: '24px 28px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <div style={{ display: 'flex', gap: 10, marginBottom: 10 }}>
                  <Pill>{s.tag}</Pill>
                  <Pill>Secondary</Pill>
                </div>
                <h3 style={{ fontSize: 24, margin: '0 0 6px', fontWeight: 500, letterSpacing: '-0.015em' }}>{s.name}</h3>
                <p style={{ margin: 0, color: 'var(--muted)', fontSize: 14 }}>{s.desc}</p>
              </div>
            </div>
          </a>
        ))}
      </div>

      {/* Section header */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: 18, paddingTop: 8,
      }}>
        <h2 style={{ fontSize: 18, fontWeight: 500, margin: 0, letterSpacing: '-0.01em' }}>
          More projects
        </h2>
        <span style={{
          fontFamily: '"Geist Mono", monospace', fontSize: 11, letterSpacing: '0.08em',
          color: 'var(--muted)', textTransform: 'uppercase',
        }}>
          {rest.length} additional
        </span>
      </div>

      {/* Grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
        {rest.map(p => (
          <a key={p.id} href={p.url} target="_blank" rel="noopener noreferrer" className="ft-card">
            <Thumb label={`${p.num} — ${p.name}`} ratio="16/10" image={p.image} />
            <div style={{ padding: '20px 24px 22px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                <Pill>{p.tag}</Pill>
                <span className="ft-arrow"><Arrow size={16} /></span>
              </div>
              <h3 style={{ fontSize: 19, margin: '0 0 4px', fontWeight: 500, letterSpacing: '-0.01em' }}>{p.name}</h3>
              <p style={{ margin: 0, color: 'var(--muted)', fontSize: 13.5 }}>{p.desc}</p>
            </div>
          </a>
        ))}
      </div>
    </main>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// About page
// ─────────────────────────────────────────────────────────────────────────────

function AboutPage({ setTab }) {
  return (
    <main style={{ maxWidth: 1180, margin: '0 auto', padding: '88px 40px 96px' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start',
      }}>
        {/* Left column — heading */}
        <div style={{ position: 'sticky', top: 96 }}>
          <Pill style={{ marginBottom: 22 }}>About</Pill>
          <h1 style={{
            fontFamily: 'Geist, sans-serif', fontWeight: 500,
            fontSize: 64, lineHeight: 1.04, letterSpacing: '-0.035em',
            margin: '12px 0 28px',
          }}>
            Hi, I'm Andrew.
          </h1>
          <p style={{
            fontSize: 17, color: 'var(--muted)', margin: '0 0 28px',
            lineHeight: 1.55, maxWidth: 420,
          }}>
            Based wherever the coffee is good. Quietly enthusiastic about spreadsheets that grow into apps.
          </p>

          <div style={{
            display: 'grid', gridTemplateColumns: 'auto 1fr',
            columnGap: 20, rowGap: 12, fontSize: 14,
            paddingTop: 24, borderTop: '1px solid var(--line)',
          }}>
            <span style={{ color: 'var(--muted)' }}>Builds</span>
            <span>Dashboards, calculators, internal tools</span>
            <span style={{ color: 'var(--muted)' }}>Focus</span>
            <span>Specialty coffee operations</span>
            <span style={{ color: 'var(--muted)' }}>Stack</span>
            <span>SQL, BI tools, lightweight web apps</span>
            <span style={{ color: 'var(--muted)' }}>Status</span>
            <span style={{ color: 'var(--accent)' }}>Available for new work</span>
          </div>
        </div>

        {/* Right column — long-form */}
        <div style={{ paddingTop: 56 }}>
          <p style={{ fontSize: 22, lineHeight: 1.5, margin: '0 0 28px', letterSpacing: '-0.005em' }}>
            I work at the intersection of business operations and software — translating messy real-world processes into tools that are sharper, faster, and easier to live with.
          </p>
          <p style={{ fontSize: 18, lineHeight: 1.6, margin: '0 0 40px', color: 'var(--muted)' }}>
            My focus has been the specialty coffee industry: roasteries, multi-location cafes, and the supply chains that connect them. Most of the projects below started as a problem someone described to me, and ended as something they could click.
          </p>

          <h3 style={{
            fontSize: 13, fontFamily: '"Geist Mono", monospace',
            letterSpacing: '0.1em', textTransform: 'uppercase',
            color: 'var(--muted)', fontWeight: 500,
            margin: '0 0 16px',
          }}>How I work</h3>
          <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 40px', display: 'grid', gap: 14 }}>
            {[
              ['Listen first.', 'Most useful tools start with a 30-minute conversation, not a feature list.'],
              ['Smallest viable thing.', 'A working prototype beats a polished spec — and gets to feedback faster.'],
              ['Ship to a real desk.', 'Tools earn their keep when someone uses them on a Monday morning.'],
            ].map(([head, body], i) => (
              <li key={i} style={{
                display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 14,
                paddingBottom: 14, borderBottom: '1px solid var(--line)',
              }}>
                <span style={{
                  fontFamily: '"Geist Mono", monospace', fontSize: 12,
                  color: 'var(--muted)', paddingTop: 2,
                }}>0{i + 1}</span>
                <span>
                  <strong style={{ fontWeight: 500 }}>{head}</strong>
                  <span style={{ color: 'var(--muted)' }}> {body}</span>
                </span>
              </li>
            ))}
          </ul>

          <div style={{
            background: 'var(--panel)', border: '1px solid var(--line)',
            borderRadius: 14, padding: 24,
            display: 'grid', gridTemplateColumns: '1fr auto', gap: 20,
            alignItems: 'center',
          }}>
            <div>
              <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 4 }}>
                Have a problem worth solving?
              </div>
              <div style={{ color: 'var(--muted)', fontSize: 14 }}>
                Quick replies, no decks required.
              </div>
            </div>
            <a href={`mailto:${PROFILE.email}`} style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '12px 18px', borderRadius: 999, background: 'var(--accent)',
              color: '#fff', textDecoration: 'none', fontWeight: 500, fontSize: 14,
            }}>
              {PROFILE.email}
              <Arrow size={14} />
            </a>
          </div>

          <button
            onClick={() => setTab('work')}
            style={{
              marginTop: 32, appearance: 'none', background: 'transparent',
              border: 0, padding: 0, cursor: 'pointer',
              color: 'var(--muted)', fontFamily: 'inherit', fontSize: 14,
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = 'var(--fg)'}
            onMouseLeave={(e) => e.currentTarget.style.color = 'var(--muted)'}
          >
            ← See the work
          </button>
        </div>
      </div>
    </main>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Top-level
// ─────────────────────────────────────────────────────────────────────────────

function Portfolio({ theme }) {
  // Read initial tab from URL hash so deep links work; persist on change.
  const [tab, setTabState] = React.useState(() => {
    if (typeof window === 'undefined') return 'work';
    const h = (window.location.hash || '').replace('#', '');
    return h === 'about' ? 'about' : 'work';
  });
  const setTab = React.useCallback((next) => {
    setTabState(next);
    if (typeof window !== 'undefined') {
      try { window.history.replaceState(null, '', '#' + next); } catch (e) {}
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  }, []);

  return (
    <div
      data-screen-label={tab === 'work' ? 'Work' : 'About'}
      style={{
        ...themeVars(theme),
        background: 'var(--bg)', color: 'var(--fg)',
        minHeight: '100vh',
        fontFamily: 'Geist, ui-sans-serif, system-ui, sans-serif',
        fontSize: 15, lineHeight: 1.5,
      }}
    >
      <style>{`
        a { color: inherit; }
        .ft-card{display:block;color:inherit;text-decoration:none;
          border:1px solid var(--line);border-radius:14px;background:var(--panel);
          overflow:hidden;transition:transform .25s, border-color .25s, box-shadow .25s}
        .ft-card:hover{transform:translateY(-3px);border-color:var(--accent);
          box-shadow:0 18px 40px -20px rgba(0,0,0,0.18)}
        .ft-card:hover .ft-arrow{transform:translate(2px,-2px);color:var(--accent)}
        .ft-arrow{transition:all .25s;color:var(--muted)}
        .page-fade{animation:pageFade .35s cubic-bezier(.2,.7,.3,1)}
        @keyframes pageFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
      `}</style>

      <Header tab={tab} setTab={setTab} />

      <div key={tab} className="page-fade">
        {tab === 'work' ? <WorkPage /> : <AboutPage setTab={setTab} />}
      </div>

      <footer style={{
        maxWidth: 1180, margin: '0 auto',
        padding: '32px 40px 48px',
        borderTop: '1px solid var(--line)',
        display: 'flex', justifyContent: 'space-between',
        color: 'var(--muted)', fontSize: 12,
        fontFamily: '"Geist Mono", monospace', letterSpacing: '0.04em',
      }}>
        <span>© 2026 Andrew Hilburn</span>
        <span>Last updated · May 2026</span>
      </footer>
    </div>
  );
}

window.Portfolio = Portfolio;