// Site sections — Home / About / Writing / Work / Contact
// Direction A (Terminal Engineer), warmed (voice dial 70).

const Logo = ({ size = 32 }) => (
  <img src="assets/logo-ma.png" width={size} height={size} alt="MA"
       style={{ display: 'block', borderRadius: size }} />
);

// ─────────────────────────────────────────────────────────────
// HOME
// ─────────────────────────────────────────────────────────────
function HomeSection() {
  const [typed, setTyped] = React.useState('');
  const full = '$ whoami';
  React.useEffect(() => {
    let i = 0;
    const t = setInterval(() => {
      i++; setTyped(full.slice(0, i));
      if (i >= full.length) clearInterval(t);
    }, 80);
    return () => clearInterval(t);
  }, []);

  return (
    <section id="home" className="codegrid" style={{ paddingTop: 80, paddingBottom: 100 }}>
      <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--accent)', marginBottom: 28 }}>
            {typed}<span className="cursor" />
          </div>
          <h1 style={{
            fontFamily: 'var(--font-sans)', fontSize: 'clamp(48px, 7vw, 84px)', fontWeight: 700,
            lineHeight: 0.95, letterSpacing: '-0.035em',
          }}>
            Hi, I'm Adrian.<br />
            I build software<br />
            <span style={{ color: 'var(--accent)' }}>like it matters</span><span style={{ color: 'var(--accent-2)' }}>.</span>
          </h1>
          <p style={{ marginTop: 32, fontSize: 19, lineHeight: 1.55, color: 'var(--fg-mute)', maxWidth: 580 }}>
            Full-stack developer, fifteen years in. I've taught hundreds of people
            how to write their first line of code — and right now I'm a student
            again, learning to build with AI agents. This site is where I think
            out loud about both.
          </p>
          <div style={{ display: 'flex', gap: 16, marginTop: 40, alignItems: 'center', flexWrap: 'wrap' }}>
            <a className="btn btn-primary" href="#writing">→ Read what I'm writing</a>
            <a className="btn btn-ghost" href="#about">cat ./about.md</a>
          </div>
        </div>

        {/* Terminal card */}
        <div className="terminal hero-terminal">
          <div className="term-bar">
            <span className="term-dot" style={{ background: '#ff5f56' }} />
            <span className="term-dot" style={{ background: '#ffbd2e' }} />
            <span className="term-dot" style={{ background: '#27c93f' }} />
            <span style={{ marginLeft: 'auto' }}>~/adrian — zsh</span>
          </div>
          <div className="term-body">
            <div><span className="prompt">$</span> stat adrian.marcu</div>
            <div className="out">
              <div>name<span className="v">.......... Adrian Marcu</span></div>
              <div>role<span className="v">.......... full-stack · PHP · AI</span></div>
              <div>shipping<span className="v">...... since 2012</span></div>
              <div>students<span className="v">...... 200+ mentored</span></div>
              <div>focus<span className="v">......... coding with agents</span></div>
            </div>
            <div style={{ marginTop: 14 }}><span className="prompt">$</span> echo $TAGLINE</div>
            <div className="out" style={{ color: 'var(--accent-2)', fontStyle: 'italic' }}>
              "Nobody cares more than me."
            </div>
            <div style={{ marginTop: 14 }}>
              <span className="prompt">$</span> <span className="cursor" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// ABOUT
// ─────────────────────────────────────────────────────────────
function AboutSection() {
  return (
    <section id="about">
      <div className="shell">
        <div className="section-tag"><span className="sigil">$</span>cat ./about.md</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'flex-start' }}>
          <div style={{ position: 'sticky', top: 100 }}>
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 56px)', lineHeight: 1, letterSpacing: '-0.03em', fontWeight: 700 }}>
              The long way around.
            </h2>
            <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 18, fontFamily: 'var(--font-mono)', fontSize: 12 }}>
              {[
                ['2012', 'first paid line of code'],
                ['2016', 'joined KeepCalling'],
                ['2019', 'became a technical trainer'],
                ['2024', 'started building with agents'],
                ['2026', 'writing about it'],
              ].map(([y, t]) => (
                <div key={y} style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: 16, color: 'var(--fg-mute)' }}>
                  <span style={{ color: 'var(--accent)' }}>{y}</span>
                  <span>{t}</span>
                </div>
              ))}
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 28, fontSize: 19, lineHeight: 1.65, color: 'var(--fg)' }}>
            <p>
              I started writing code in 2012, picking up freelance projects
              before most people had heard the word "responsive." Fifteen
              years later I've shipped PHP backends, React frontends,
              Magento extensions, Spryker microservices, and the occasional
              DevOps fire-drill — usually all in the same week.
            </p>
            <p style={{ color: 'var(--fg-mute)' }}>
              Somewhere in the middle, I started teaching. First as a
              technical trainer at Azimut Vision, then as a mentor at
              Școala Informală de IT. I thought I'd hate standing in front
              of a room. I didn't. Watching someone write their first{' '}
              <span style={{ color: 'var(--accent)', fontFamily: 'var(--font-mono)', fontSize: 17 }}>console.log("hello")</span> and
              realize they just talked to a machine — that never gets old.
              One of my students invited me to his wedding, which I think is
              the best performance review I'm ever going to get.
            </p>
            <p>
              These days I'm spending most of my brain on{' '}
              <strong style={{ color: 'var(--accent)' }}>coding with agents</strong>{' '}
              — pairing Claude with real client work on production Spryker
              and Node.js codebases. What works, what doesn't, what's
              actually useful versus what just demos well. I'm not an expert
              at it yet. I'm writing about it precisely because I'm not.
            </p>
            <div style={{
              marginTop: 12, padding: '24px 28px',
              borderLeft: '3px solid var(--accent)',
              background: 'var(--bg-2)', borderRadius: '0 12px 12px 0',
            }}>
              <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 26, lineHeight: 1.3 }}>
                Nobody cares more than me.
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-mute)', marginTop: 8 }}>
                // the only credential that matters
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// WRITING
// ─────────────────────────────────────────────────────────────
const POSTS = [
  {
    cat: 'AGENTS', date: '02 May 2026', read: '8 min',
    title: 'The four agent failures I keep hitting (and what fixes them).',
    excerpt: 'A field log of the dumb mistakes my agents make on real codebases. Spoiler: most of them are my prompts, not the model.',
    href: 'agent-failures.html',
  },
  {
    cat: 'TUTORIAL', date: '24 Apr 2026', read: '12 min',
    title: "Setting up an agent that won't silently break your repo.",
    excerpt: 'Step-by-step: scoped permissions, a dry-run gate, a review loop, and the exact prompt that saved me from a force-push.',
    href: 'agent-safe-repo.html',
  },
  {
    cat: 'AI NEWS', date: '15 Apr 2026', read: '4 min',
    title: "What this week's model release actually means for me.",
    excerpt: 'Cutting through the benchmark noise with one question: did anything in my actual workflow get easier today? Sometimes yes.',
    href: 'model-release.html',
  },
  {
    cat: 'TUTORIAL', date: '02 Apr 2026', read: '15 min',
    title: 'Teaching juniors to pair with an agent without forgetting how to code.',
    excerpt: 'Notes from a class I ran last month. The trick is making them write the failing test first — even if the agent finishes it.',
    href: 'teaching-juniors.html',
  },
];

function WritingSection() {
  return (
    <section id="writing" style={{ background: 'var(--bg-2)' }}>
      <div className="shell">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, gap: 32, flexWrap: 'wrap' }}>
          <div>
            <div className="section-tag"><span className="sigil">$</span>ls ./writing</div>
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 56px)', lineHeight: 1, letterSpacing: '-0.03em', fontWeight: 700 }}>
              Field notes from<br />the workshop.
            </h2>
            <p style={{ marginTop: 20, fontSize: 17, color: 'var(--fg-mute)', maxWidth: 560, lineHeight: 1.55 }}>
              Mostly about coding with AI agents — what's working, what's
              embarrassing, what I'd tell a junior. Plus the occasional tutorial.
            </p>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-mute)' }}>
            {POSTS.length} posts · updated weekly
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
          {POSTS.map((p) => (
            <a key={p.href} href={p.href} className="card" style={{
              padding: 28, display: 'flex', flexDirection: 'column', gap: 16,
              cursor: 'pointer',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em',
                  color: 'var(--accent)', padding: '4px 10px',
                  border: '1px solid color-mix(in oklab, var(--accent) 40%, transparent)',
                  borderRadius: 999,
                }}>{p.cat}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-dim)' }}>
                  {p.date} · {p.read}
                </span>
              </div>
              <h3 style={{ fontSize: 24, lineHeight: 1.2, fontWeight: 600, letterSpacing: '-0.02em' }}>
                {p.title}
              </h3>
              <p style={{ fontSize: 14.5, color: 'var(--fg-mute)', lineHeight: 1.55 }}>
                {p.excerpt}
              </p>
              <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 8, color: 'var(--accent)', fontFamily: 'var(--font-mono)', fontSize: 12 }}>
                read.md →
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// WORK
// ─────────────────────────────────────────────────────────────
const WORK = [
  {
    id: '01', tag: 'FULLSTACK',
    title: 'Agile Networks Technologies',
    meta: 'Sibiu · 2022–Present',
    stack: 'Node.js · Spryker · Next.js',
    note: 'Full-stack across Node.js, Spryker, Symfony, Next.js and Shopware. The kind of shop where you ship it and you own it.',
  },
  {
    id: '02', tag: 'BACKEND',
    title: 'KeepCalling',
    meta: 'Sibiu · 2016–2022',
    stack: 'PHP · MySQL · various',
    note: 'Six years on a high-traffic telecom platform. Learned what "scale" actually means when real people are making real phone calls.',
  },
  {
    id: '03', tag: 'E-COMM',
    title: 'Freelance e-commerce',
    meta: 'Various · 2012–2022',
    stack: 'PHP · Magento · OpenCart',
    note: 'Nine years of Magento extensions, custom modules, and production migrations. The kind of work where you own the whole stack.',
  },
  {
    id: '04', tag: 'TEACHING',
    title: 'Mentor & Technical Trainer',
    meta: 'Azimut / Școala Inf. IT · 2019–',
    stack: 'JS · React · patience',
    note: '200+ students through intro-to-code programs. Still mentoring. One of them invited me to his wedding — best review I\'ve had.',
  },
  {
    id: '05', tag: 'AI',
    title: 'Agent-assisted code review',
    meta: 'Side project · 2025–',
    stack: 'Claude · Node.js · Hono',
    note: 'Building a tool that pairs Claude with real PR workflows on Spryker codebases. Writing about it as I go — see the field notes.',
  },
];

function WorkSection() {
  return (
    <section id="work">
      <div className="shell">
        <div className="section-tag"><span className="sigil">$</span>ls -la ./work</div>
        <h2 style={{ fontSize: 'clamp(40px, 5vw, 56px)', lineHeight: 1, letterSpacing: '-0.03em', fontWeight: 700, marginBottom: 16 }}>
          Things I've shipped.
        </h2>
        <p style={{ fontSize: 17, color: 'var(--fg-mute)', maxWidth: 600, lineHeight: 1.55, marginBottom: 56 }}>
          A short list. NDAs and old habits keep most of it private — these
          are the projects I can talk about without lawyering myself.
        </p>

        <div className="work-table" style={{
          border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden',
          fontFamily: 'var(--font-mono)',
        }}>
          <div className="work-head" style={{
            display: 'grid', gridTemplateColumns: '60px 110px 1fr 200px 80px',
            gap: 24, padding: '14px 24px',
            background: 'var(--bg-2)', borderBottom: '1px solid var(--line)',
            fontSize: 11, letterSpacing: '0.1em', color: 'var(--fg-mute)',
          }}>
            <span>#</span><span>TYPE</span><span>PROJECT</span><span>STACK</span><span style={{ textAlign: 'right' }}></span>
          </div>
          {WORK.map((w, i) => (
            <div key={w.id} className="work-row" style={{
              display: 'grid', gridTemplateColumns: '60px 110px 1fr 200px 80px',
              gap: 24, padding: '24px',
              borderBottom: i < WORK.length - 1 ? '1px solid var(--line)' : 'none',
              alignItems: 'center', fontFamily: 'var(--font-sans)',
              cursor: 'pointer', transition: 'background .12s',
            }}
            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-2)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <span className="work-num" style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-dim)' }}>{w.id}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', color: 'var(--accent)' }}>{w.tag}</span>
              <div>
                <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>{w.title}</div>
                <div style={{ fontSize: 13.5, color: 'var(--fg-mute)', marginTop: 4, lineHeight: 1.5 }}>{w.note}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-dim)', marginTop: 6 }}>{w.meta}</div>
              </div>
              <span className="work-stack" style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-mute)' }}>{w.stack}</span>
              <span className="work-arrow" style={{ textAlign: 'right', color: 'var(--accent)', fontFamily: 'var(--font-mono)', fontSize: 12 }}>→</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// CONTACT
// ─────────────────────────────────────────────────────────────
function ContactSection() {
  return (
    <section id="contact" style={{ background: 'var(--bg-2)' }}>
      <div className="shell">
        <div className="section-tag"><span className="sigil">$</span>./say-hi</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <h2 style={{ fontSize: 'clamp(44px, 5.5vw, 64px)', lineHeight: 0.98, letterSpacing: '-0.03em', fontWeight: 700 }}>
              Tell me what<br />you're building.
            </h2>
            <p style={{ marginTop: 24, fontSize: 18, color: 'var(--fg-mute)', maxWidth: 540, lineHeight: 1.55 }}>
              I'm not looking for work right now — but I love a good
              conversation about agents, teaching, or that one bug that
              kept you up last Tuesday. Email is fastest.
            </p>
            <div style={{ marginTop: 40, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <a href="mailto:hello@marcuadrian.dev" className="btn btn-primary">
                hello@marcuadrian.dev →
              </a>
              <a href="https://linkedin.com/in/adrianmarcu-94920556" target="_blank" rel="noopener noreferrer" className="btn btn-ghost">in/adrianmarcu</a>
            </div>
          </div>

          <div className="terminal">
            <div className="term-bar">
              <span className="term-dot" style={{ background: '#ff5f56' }} />
              <span className="term-dot" style={{ background: '#ffbd2e' }} />
              <span className="term-dot" style={{ background: '#27c93f' }} />
              <span style={{ marginLeft: 'auto' }}>~/adrian — contact</span>
            </div>
            <div className="term-body">
              <div><span className="prompt">$</span> ls ./channels</div>
              <div className="out">
                <div><span className="v">email</span> ......... hello@marcuadrian.dev</div>
                <div><span className="v">linkedin</span> ...... in/adrianmarcu</div>
                <div><span className="v">location</span> ...... Sibiu, Romania</div>
                <div><span className="v">writing</span> ....... this very page</div>
              </div>
              <div style={{ marginTop: 14 }}><span className="prompt">$</span> uptime</div>
              <div className="out"><span className="v">15 years, still curious</span></div>
              <div style={{ marginTop: 14 }}>
                <span className="prompt">$</span> <span className="cursor" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// NAV + FOOTER
// ─────────────────────────────────────────────────────────────
function Nav({ theme, accent, onThemeChange, onAccentChange }) {
  const [active, setActive] = React.useState('home');
  React.useEffect(() => {
    const ids = ['home','about','writing','work','contact'];
    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) setActive(e.target.id); });
    }, { rootMargin: '-40% 0px -55% 0px' });
    ids.forEach(id => { const el = document.getElementById(id); if (el) obs.observe(el); });
    return () => obs.disconnect();
  }, []);
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#home" className="nav-brand">
          <Logo size={50} />
          <span>marcu.adrian</span>
          <span className="path">~/</span>
        </a>
        <div className="nav-links">
          {['home','about','writing','work','contact'].map(id => (
            <a key={id} href={`#${id}`} className={active === id ? 'active' : ''}>./{id}</a>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div className="nav-status">
            <span className="dot" />
            building in public
          </div>
          <button
            className="theme-btn"
            onClick={() => onThemeChange(theme === 'dark' ? 'light' : 'dark')}
            title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
          >{theme === 'dark' ? 'light' : 'dark'}</button>
          <button
            className="theme-btn"
            onClick={() => onAccentChange(accent === 'teal' ? 'orange' : 'teal')}
            style={{ color: accent === 'teal' ? 'var(--teal)' : 'var(--orange)', borderColor: accent === 'teal' ? 'var(--teal)' : 'var(--orange)' }}
            title={`Switch to ${accent === 'teal' ? 'orange' : 'teal'} accent`}
          >{accent}</button>
        </div>
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer>
      <div className="shell footer-inner">
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>
            <span style={{ color: 'var(--accent)' }}>$</span> echo $TAGLINE
          </div>
          <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--fg)', marginTop: 6 }}>
            Nobody cares more than me.
          </div>
        </div>
        <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
          <a href="mailto:hello@marcuadrian.dev">hello@marcuadrian.dev</a>
          <a href="https://linkedin.com/in/adrianmarcu-94920556" target="_blank" rel="noopener noreferrer">in/adrianmarcu</a>
          <span>Sibiu, Romania</span>
        </div>
        <div>© 2026 · built by hand</div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  HomeSection, AboutSection, WritingSection, WorkSection, ContactSection,
  Nav, Footer,
});
