// Stephan Bail - terminal-style portfolio, bilingual (DE / EN).
// Single-variant production build. No design-variant toggle.

function detectLang() {
  try {
    const stored = localStorage.getItem('sb_lang');
    if (stored === 'de' || stored === 'en') return stored;
  } catch (e) {}
  try {
    const nav = (navigator.language || '').toLowerCase();
    if (nav.startsWith('de')) return 'de';
  } catch (e) {}
  return 'en';
}

function detectTheme() {
  try {
    const stored = localStorage.getItem('sb_theme');
    if (stored === 'light' || stored === 'dark') return stored;
  } catch (e) {}
  return 'dark';
}

function App() {
  const [lang, setLang] = React.useState(detectLang);
  const [theme, setTheme] = React.useState(detectTheme);
  const [tick, setTick] = React.useState(0);
  const [imprintOpen, setImprintOpen] = React.useState(false);

  React.useEffect(() => {
    if (theme === 'light') {
      document.documentElement.dataset.theme = 'light';
    } else {
      delete document.documentElement.dataset.theme;
    }
    const tm = document.querySelector('meta[name="theme-color"]');
    if (tm) tm.setAttribute('content', theme === 'light' ? '#f7f8fa' : '#0b0d10');
    try { localStorage.setItem('sb_theme', theme); } catch (e) {}
  }, [theme]);

  React.useEffect(() => {
    try { localStorage.setItem('sb_lang', lang); } catch (e) {}
    document.documentElement.lang = lang;
    const c = window.CONTENT[lang];
    document.title = c.meta.title;
    const m = document.querySelector('meta[name="description"]');
    if (m) m.setAttribute('content', c.meta.description);
  }, [lang]);

  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setImprintOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const c = window.CONTENT[lang];
  const now = new Date().toISOString().slice(0, 19).replace('T', ' ') + ' UTC';

  return (
    <div className="vb-root">
      <div className="vb-topbar">
        <div className="vb-topbar-l">
          <span>~/stephanbail <span className="tag">(main)</span></span>
          <span className="vb-hide-sm">● synced</span>
        </div>
        <div className="vb-brand">stephanbail.com<span className="blink">_</span></div>
        <div className="vb-topbar-r">
          <a href="#about">{c.nav.about}</a>
          <a href="#expertise">{c.nav.expertise}</a>
          <a href="#work">{c.nav.work}</a>
          <a href="#product">{c.nav.product}</a>
          <a href="#contact">{c.nav.contact}</a>
          <div className="vb-lang" role="group" aria-label={c.langToggle.label}>
            <button
              className={lang === 'en' ? 'active' : ''}
              onClick={() => setLang('en')}
              aria-pressed={lang === 'en'}
            >{c.langToggle.en}</button>
            <button
              className={lang === 'de' ? 'active' : ''}
              onClick={() => setLang('de')}
              aria-pressed={lang === 'de'}
            >{c.langToggle.de}</button>
          </div>
          <div className="vb-theme" role="group" aria-label={c.themeToggle.label}>
            <button
              className={theme === 'dark' ? 'active' : ''}
              onClick={() => setTheme('dark')}
              aria-pressed={theme === 'dark'}
              title={c.themeToggle.dark}
            >
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
            </button>
            <button
              className={theme === 'light' ? 'active' : ''}
              onClick={() => setTheme('light')}
              aria-pressed={theme === 'light'}
              title={c.themeToggle.light}
            >
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <circle cx="12" cy="12" r="4"/>
                <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <div className="vb-ribbon">
        <a className="vb-ribbon-main" href={c.product.url} target="_blank" rel="noreferrer" aria-label={c.ribbon.ariaLabel}>
          <img src={c.product.icon} alt="" className="vb-ribbon-icon" />
          <span className="vb-ribbon-badge">{c.ribbon.badge}</span>
          <span className="vb-ribbon-product">{c.ribbon.product}</span>
          <span className="vb-ribbon-sep">·</span>
          <span className="vb-ribbon-tagline">{c.ribbon.tagline}</span>
        </a>
        <div className="vb-ribbon-platforms">
          <span className="vb-ribbon-prompt">{c.ribbon.prompt}</span>
          {c.ribbon.platforms.map(p => (
            <a key={p} href={c.product.url} target="_blank" rel="noreferrer" className="vb-ribbon-platform">
              {p}
            </a>
          ))}
        </div>
      </div>

      <div className="vb-status">
        <div className="vb-status-cell">
          <div className="vb-status-k">{c.status.location_k}</div>
          <div className="vb-status-v">{c.status.location_v}</div>
        </div>
        <div className="vb-status-cell">
          <div className="vb-status-k">{c.status.region_k}</div>
          <div className="vb-status-v">{c.status.region_v}</div>
        </div>
        <div className="vb-status-cell">
          <div className="vb-status-k">{c.status.since_k}</div>
          <div className="vb-status-v"><span className="acc">{c.status.since_v_num}</span> {c.status.since_v_tail}</div>
        </div>
        <div className="vb-status-cell">
          <div className="vb-status-k">{c.status.clock_k}</div>
          <div className="vb-status-v">{now}</div>
        </div>
      </div>

      <header className="vb-hero">
        <div className="vb-hero-inner">
          <div>
            <div className="vb-portrait-wrap">
              <div className="vb-portrait">
                <img src="images/stephanbail_small.jpg" alt="Stephan Bail" />
                <span className="vb-portrait-dot" aria-hidden="true" title="Available" />
              </div>
              <div className="vb-prompt">
                <span className="u">stephan</span>@<span className="h">azure-arch</span>:<span className="c">~</span>$ whoami
              </div>
            </div>
            <div className="vb-eyebrow">{c.hero.eyebrow}</div>
            <h1>Microsoft Azure<br /><span className="accent">Architect.</span></h1>
            <div className="vb-hero-facts">
              {c.hero.facts.map((f, i) => (
                <span key={i} className={`vb-hero-fact ${f.kind}`}>
                  {f.kind === 'pulse' && <span className="vb-hero-fact-dot" aria-hidden="true" />}
                  {f.text}
                </span>
              ))}
            </div>
            <div className="sub">~ 8+ yrs on Azure · .NET 9 · C# 13 · DE / EN ~</div>
            <p className="lead">{c.hero.lead}</p>
            <div className="vb-cta-row">
              <a className="vb-btn primary" href={c.hero.cta_href} target="_blank" rel="noreferrer">$ {c.hero.cta} ↓</a>
              <a className="vb-btn" href={c.hero.cta2_href} target="_blank" rel="noreferrer">$ {c.hero.cta2} ↓</a>
            </div>
          </div>
          <div>
            <pre className="vb-ascii">{`┌─ ${c.ascii.title} ───────────────┐
  ${c.ascii.apiVersion}
  ${c.ascii.kind}
  ${c.ascii.meta}
${c.ascii.name_label}`}<span className="k">{c.ascii.name_value}</span>{`
${c.ascii.based_label}`}<span className="v">{c.ascii.based_value}</span>{`
${c.ascii.remote_label}`}<span className="v">{c.ascii.remote_value}</span>{`
  ${c.ascii.spec}
${c.ascii.focus}
`}{c.ascii.focus_items.map((f, i) => (
  <React.Fragment key={f}>{`      - `}<span className="h">{f}</span>{`\n`}</React.Fragment>
))}{`  ${c.ascii.since}
  ${c.ascii.product}
  ${c.ascii.langs}
└──────────────────────────────────┘`}</pre>
          </div>
        </div>
      </header>

      <section className="vb-section" id="about">
        <div className="vb-sec-head">
          <div className="vb-sec-kicker">{c.summary.kicker}</div>
          <div className="vb-sec-id">{c.sectionIds.about}</div>
        </div>
        <div className="vb-sum">
          <div>
            <h2 style={{ marginBottom: 24 }}>{c.summary.title}</h2>
            <p>{c.summary.body}</p>
          </div>
          <div className="vb-stats">
            {c.summary.stats.map(([v, k]) => (
              <div key={k} className="vb-stat">
                <div className="vb-stat-v">{v}</div>
                <div className="vb-stat-k">{k}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="vb-section" id="expertise">
        <div className="vb-sec-head">
          <div className="vb-sec-kicker">{c.expertise.kicker}</div>
          <h2>{c.expertise.title}</h2>
          <div className="vb-sec-id">{c.sectionIds.services}</div>
        </div>
        <div className="vb-exp">
          {c.expertise.items.map((it, i) => (
            <div key={it.t} className="vb-exp-cell">
              <div className="num">{String(i + 1).padStart(2, '0')}</div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
              <div className="tags">{it.tags.map(t => <span key={t} className="tag">{t}</span>)}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="vb-section" id="work">
        <div className="vb-sec-head">
          <div className="vb-sec-kicker">{c.work.kicker}</div>
          <h2>{c.work.title}</h2>
          <div className="vb-sec-id">{c.sectionIds.work}</div>
        </div>
        <div className="vb-work-list">
          <div className="vb-work-hdr">
            <div>{c.work.hdr.year}</div>
            <div>{c.work.hdr.client}</div>
            <div>{c.work.hdr.role}</div>
            <div>{c.work.hdr.scope}</div>
            <div style={{ textAlign: 'right' }}>{c.work.hdr.stack}</div>
          </div>
          {c.work.items.map((w) => (
            <div key={w.client} className="vb-work-row">
              <div className="year">{w.year}</div>
              <div className="client-cell">
                <span className="client">{w.client}</span>
                {w.industry && <span className="industry">{w.industry}</span>}
              </div>
              <div className="role">{w.role}</div>
              {w.highlights ? (
                <ul className="scope-bullets">
                  {w.highlights.map((h, i) => (
                    <li key={i}><span className="bmark">▸</span>{h}</li>
                  ))}
                </ul>
              ) : (
                <div className="scope">{w.scope}</div>
              )}
              <div className="stack">{w.stack.map(s => <span key={s}>{s}</span>)}</div>
            </div>
          ))}
        </div>
        <div className="vb-caption">// {c.work.caption}</div>
      </section>

      <section className="vb-section">
        <div className="vb-sec-head">
          <div className="vb-sec-kicker">{c.founder.kicker}</div>
          <div className="vb-sec-id">{c.sectionIds.founder}</div>
        </div>
        <div className="vb-founder">
          <div><div className="vb-founder-year">{c.founder.period}</div></div>
          <div>
            <h3>{c.founder.title}</h3>
            <div className="vb-founder-org">{c.founder.org}</div>
            <p>{c.founder.desc}</p>
          </div>
        </div>
      </section>

      <section className="vb-section vb-product-section" id="product">
        <div className="vb-sec-head">
          <div className="vb-sec-kicker">{c.product.kicker}</div>
          <h2>{c.product.title}</h2>
          <div className="vb-sec-id">{c.sectionIds.product}</div>
        </div>
        <div className="vb-product">
          <div className="vb-product-left">
            <a className="vb-product-icon" href={c.product.url} target="_blank" rel="noreferrer" aria-label="KeyVault Studio">
              <img src={c.product.icon} alt="KeyVault Studio" />
            </a>
            <div className="vb-product-bymark">{lang === 'de' ? 'von mir entwickelt' : 'built by me'}</div>
            <div className="vb-product-role">{c.product.role}</div>
          </div>
          <div className="vb-product-right">
            <div className="vb-product-tagline">{c.product.tagline}</div>
            <p className="vb-product-body">{c.product.body}</p>
            {c.product.proof && (
              <div className="vb-product-proof">{c.product.proof}</div>
            )}
            <ul className="vb-product-bullets">
              {c.product.bullets.map((b, i) => (
                <li key={i}><span className="vb-product-bullet-mark">▸</span>{b}</li>
              ))}
            </ul>
            {c.product.stack && (
              <div className="vb-product-stack">
                <div className="vb-product-stack-label">{c.product.stack_label}</div>
                <div className="vb-product-stack-pills">
                  {c.product.stack.map(s => <span key={s} className="vb-product-stack-pill">{s}</span>)}
                </div>
              </div>
            )}
            <a className="vb-btn primary" href={c.product.url} target="_blank" rel="noreferrer">{c.product.cta}</a>
          </div>
        </div>
      </section>

      <section className="vb-section">
        <div className="vb-sec-head">
          <div className="vb-sec-kicker">{c.skills.kicker}</div>
          <h2>{c.skills.title}</h2>
          <div className="vb-sec-id">{c.sectionIds.skills}</div>
        </div>
        <div className="vb-skills-grid">
          {c.skills.items.map(([n, v]) => (
            <div key={n} className="vb-skill">
              <div className="vb-skill-head"><span>{n}</span><span>{v}%</span></div>
              <div className="vb-skill-bar">
                <div className="vb-skill-fill" style={{ transform: `scaleX(${v / 100})` }} />
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="vb-section">
        <div className="vb-sec-head">
          <div className="vb-sec-kicker">{c.testimonial.kicker}</div>
          <div className="vb-sec-id">{c.sectionIds.testimonial}</div>
        </div>
        <div className="vb-quote">
          <blockquote>{c.testimonial.quote}</blockquote>
          <div className="vb-quote-by">
            <img src={c.testimonial.photo} alt={c.testimonial.by} />
            <div><strong>{c.testimonial.by}</strong>, {c.testimonial.org}</div>
          </div>
        </div>
      </section>

      <section className="vb-section" id="contact">
        <div className="vb-sec-head">
          <div className="vb-sec-kicker">{c.contact.kicker}</div>
          <div className="vb-sec-id">{c.sectionIds.contact}</div>
        </div>
        <div className="vb-contact">
          <div>
            <h2>{c.contact.title} <span className="accent">{c.contact.title_accent}</span>.</h2>
            <p>{c.contact.body}</p>
            <a className="vb-btn primary" href={`mailto:${c.contact.email}`}>{c.contact.cta}</a>
          </div>
          <div className="vb-contact-card">
            <div className="vb-contact-card-hdr">
              <span>● contact.json</span>
              <span>{tick % 2 === 0 ? '●' : '○'} live</span>
            </div>
            <div className="vb-contact-card-body">
              <div className="vb-contact-line">
                <div className="k">email:</div>
                <div className="v"><a href={`mailto:${c.contact.email}`}>{c.contact.email}</a></div>
              </div>
              <div className="vb-contact-line">
                <div className="k">phone:</div>
                <div className="v"><a href={`tel:${c.contact.phone.replace(/\s/g, '')}`}>{c.contact.phone}</a></div>
              </div>
              <div className="vb-contact-line">
                <div className="k">location:</div>
                <div className="v">{c.contact.location}</div>
              </div>
              {c.contact.links.map(([k, v]) => (
                <div key={k} className="vb-contact-line">
                  <div className="k">{k.toLowerCase()}:</div>
                  <div className="v"><a href={`https://${v}`} target="_blank" rel="noreferrer">{v}</a></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <footer className="vb-footer">
        <div>{c.footer.left}</div>
        <div className="center">{c.footer.center}</div>
        <div className="right"><a onClick={() => setImprintOpen(true)}>{c.footer.right}</a></div>
      </footer>

      {imprintOpen && (
        <div className="vb-modal" onClick={() => setImprintOpen(false)} role="dialog" aria-modal="true" aria-labelledby="imprint-title">
          <div className="vb-modal-card" onClick={e => e.stopPropagation()}>
            <button className="vb-modal-close" onClick={() => setImprintOpen(false)} aria-label="Close">×</button>
            <h2 id="imprint-title">{c.imprint.title}</h2>
            {c.imprint.sections.map(([h, b]) => (
              <div key={h}><h3>{h}</h3><p>{b}</p></div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

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