/* ============================================================================
   app-a.jsx — DESIGN A page components ("Editorial" · Archivo)
   Reads content from props (fed by runtime.js → content-a.js or the editor).
   Exposes window.PAGES = { home, about, reel, credits, contact }.
   ========================================================================== */
(function () {
  const Media = window.Media;
  const useBreakpoint = window.useBreakpoint;
  const ReelGallery = window.ReelGallery;
  const SocialBar = window.SocialBar;

  /* palette */
  const accent = '#a8552a', bone = '#e8dcc4', espresso = '#1c1814',
        muted = '#a89878', surface = '#231d17';
  const fontUI = '"Archivo", system-ui, sans-serif';

  /* responsive helper: pick(desktop, tablet, phone) */
  function mk(bp) {
    const P = bp === 'phone', T = bp === 'tablet';
    return function (d, t, p) { return P ? p : (T ? (t === undefined ? d : t) : d); };
  }
  function Root(props) {
    const bp = props.bp;
    return React.createElement('div', {
      style: {
        width: bp === 'desktop' ? 1440 : '100%',
        maxWidth: 1440, margin: '0 auto',
        background: espresso, color: bone, fontFamily: fontUI,
        overflow: 'hidden'
      }
    }, props.children);
  }

  /* shared nav */
  function NavBar({ active, all, bp }) {
    const r = mk(bp);
    const meta = all.meta || {};
    const nav = all.nav || {};
    const links = [['home', 'Home', 'index.html'], ['about', 'About', 'about.html'], ['reel', 'Reel', 'reel.html'],
                   ['credits', 'Credits', 'credits.html'], ['contact', 'Contact', 'contact.html']]
                  .filter(function (x) { return nav[x[0]] !== false; });
    return (
      <header style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: r('28px 64px', '24px 40px', '18px 20px'),
        borderBottom: `1px solid ${surface}`, flexWrap: 'wrap', gap: 12,
        fontFamily: fontUI, fontSize: 11, letterSpacing: '0.18em',
        textTransform: 'uppercase', fontWeight: 500,
      }}>
        <div style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
          <span style={{ color: bone, fontWeight: 800, letterSpacing: '0.12em' }}>{meta.brand}</span>
          <span style={{ color: muted }}>{meta.union}</span>
        </div>
        <nav style={{ display: 'flex', gap: r(36, 24, 16), flexWrap: 'wrap' }}>
          {links.map(([key, n, href]) => (
            <a key={n} href={href} style={{
              color: active === n ? bone : muted, textDecoration: 'none',
              borderBottom: active === n ? `1px solid ${accent}` : 'none', paddingBottom: 2,
            }}>{n}</a>
          ))}
        </nav>
        {bp !== 'phone' &&
          <a href={meta.resumeFile} target="_blank" rel="noopener noreferrer" style={{ color: accent, textDecoration: 'none', borderBottom: `1px solid ${accent}`, paddingBottom: 2 }}>
            {meta.resumeLabel}
          </a>}
      </header>
    );
  }

  function SiteFooter({ all, bp }) {
    const r = mk(bp);
    const home = all.home || {};
    const f = all.footer || {};
    const ci = all.contactInfo || {};
    const meta = all.meta || {};
    const showMats = f.showMaterials !== false;
    const mats = (Array.isArray(f.materials) ? f.materials : [
      { label: 'Résumé ↓ PDF', useResume: true, newTab: true },
      { label: 'Headshots ↓', href: 'contact.html', newTab: false },
      { label: 'Reel ↗', href: 'reel.html', newTab: false }
    ]).filter((m) => m && m.label && (m.href || m.useResume));
    const creditText = (f.creditText != null && f.creditText !== '') ? f.creditText : 'Site by michaelarondesign.com';
    const creditUrl = f.creditUrl || 'https://michaelarondesign.com';
    const showCredit = f.showCredit !== false;
    const lp = (href, newTab) => (newTab || /^https?:\/\//i.test(href || '') || /\.pdf(\?|#|$)/i.test(href || '')) ? { href, target: '_blank', rel: 'noopener noreferrer' } : { href };
    return (
      <footer style={{ padding: r('100px 64px 64px', '72px 40px 48px', '48px 20px 36px') }}>
        <div style={{ display: 'grid', gridTemplateColumns: r(showMats ? '1.4fr 1fr 1fr 1fr' : '1.4fr 1fr 1fr', '1fr 1fr', '1fr'), gap: 48, alignItems: 'start' }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, marginBottom: 18 }}>{home.contactEyebrow}</div>
            <h2 style={{ fontWeight: 800, fontSize: r(44, 40, 34), margin: 0, lineHeight: 1, letterSpacing: '-0.02em' }}>Let's <span style={{ color: accent, fontWeight: 500 }}>talk</span>.</h2>
            <p style={{ marginTop: 18, fontSize: 16, lineHeight: 1.6, color: muted, maxWidth: 360 }}>{home.contactLead}</p>
          </div>
          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: muted, marginBottom: 12 }}>Direct</div>
            <a href={'tel:' + (ci.phone || '').replace(/[^0-9+]/g, '')} style={{ display: 'block', color: bone, textDecoration: 'none', fontSize: 18, fontWeight: 600, letterSpacing: '0.02em' }}>{ci.phone}</a>
            <a href={'mailto:' + ci.email} style={{ display: 'block', fontSize: 18, fontWeight: 600, marginTop: 6, color: accent, textDecoration: 'none' }}>{ci.email}</a>
          </div>
          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: muted, marginBottom: 12 }}>Stats</div>
            <div style={{ fontSize: 15, fontWeight: 500, lineHeight: 1.7, whiteSpace: 'pre-line' }}>{home.stats2}</div>
          </div>
          {showMats && (
            <div>
              <div style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: muted, marginBottom: 12 }}>Materials</div>
              {mats.map((m, i) => {
                const mhref = m.useResume ? ((all.meta && all.meta.resumeFile) || '') : m.href;
                return <a key={i} {...lp(mhref, m.newTab)} style={{ display: 'block', fontSize: 14, fontWeight: 500, color: bone, textDecoration: 'none', borderBottom: i < mats.length - 1 ? `1px solid ${surface}` : 'none', padding: '10px 0' }}>{m.label}</a>;
              })}
            </div>
          )}
        </div>
        <div style={{ marginTop: 72, paddingTop: 28, borderTop: `1px solid ${surface}`, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, flexWrap: 'wrap', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: muted }}>
          <span>{meta.copyright}</span>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
            <SocialBar social={all.social} color={muted} accent={accent} size={28} />
            {showCredit ? <a {...lp(creditUrl, true)} style={{ fontSize: 9.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: muted, textDecoration: 'none', borderBottom: `1px solid ${surface}`, paddingBottom: 2 }}>{creditText}</a> : null}
          </div>
          <span>{ci.cityLine}</span>
        </div>
      </footer>
    );
  }

  function Footer({ all, bp }) {
    return <SiteFooter all={all} bp={bp} />;
  }

  /* =====================  HOME  ===================== */
  function Home({ c, all }) {
    const bp = useBreakpoint(); const r = mk(bp);
    const gallery = ((all.reel && all.reel.gallery) || []).filter(g => g && g.thumb && g.video);
    const hasGallery = gallery.length > 0;
    return (
      <Root bp={bp}>
        <NavBar active="Home" all={all} bp={bp} />

        {/* hero */}
        <section style={{
          display: 'grid', gridTemplateColumns: r('1fr 1.05fr', '1fr 1fr', '1fr'),
          minHeight: bp === 'phone' ? 'auto' : 760, borderBottom: `1px solid ${surface}`,
        }}>
          <div style={{ padding: r('88px 64px 64px', '72px 40px 48px', '48px 20px 36px'), display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, marginBottom: r(32, 24, 20) }}>
                <span style={{ color: muted }}>{c.eyebrowNo} ·</span> {c.eyebrow}
              </div>
              <h1 style={{ fontWeight: 900, fontSize: r(152, 110, 64), lineHeight: 0.86, letterSpacing: '-0.045em', margin: 0, color: bone }}>
                {c.nameLine1}<br /><span style={{ color: accent, letterSpacing: '-0.05em' }}>{c.nameLine2}</span>
              </h1>
              <p style={{ marginTop: r(40, 32, 24), fontSize: r(19, 18, 16), lineHeight: 1.5, color: bone, maxWidth: 440, fontWeight: 300 }}>{window.__rich(c.intro, accent)}</p>
            </div>
            <div style={{
              display: 'grid', gridTemplateColumns: r('repeat(4,1fr)', 'repeat(4,1fr)', 'repeat(2,1fr)'),
              gap: 24, paddingTop: 32, marginTop: bp === 'phone' ? 36 : 0, borderTop: `1px solid ${surface}`,
              fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase',
            }}>
              {c.stats.map((s) => (
                <div key={s.label}>
                  <div style={{ color: muted, marginBottom: 8 }}>{s.label}</div>
                  <div style={{ color: bone, fontSize: 15, fontWeight: 600, letterSpacing: 0, textTransform: 'none' }}>{s.value}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ position: 'relative', background: '#0f0c0a', minHeight: bp === 'phone' ? 420 : 'auto' }}>
            <Media value={c.heroPortrait} alt="Michael Aron portrait" placeholder="Headshot — vertical / 3:4" style={{ position: 'absolute', inset: 0 }} />
            <div style={{ position: 'absolute', bottom: 24, right: 24, writingMode: 'vertical-rl', transform: 'rotate(180deg)', fontSize: 10, letterSpacing: '0.3em', color: muted, textTransform: 'uppercase' }}>{c.heroCaption}</div>
          </div>
        </section>

        {/* selected work */}
        <section style={{ padding: r('120px 64px 100px', '88px 40px', '56px 20px'), borderBottom: `1px solid ${surface}` }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 56, gap: 16, flexWrap: 'wrap' }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, marginBottom: 16 }}>{c.workEyebrow}</div>
              <h2 style={{ fontWeight: 900, fontSize: r(64, 52, 38), margin: 0, lineHeight: 1, letterSpacing: '-0.02em' }}>{c.workTitle}</h2>
            </div>
            {(!all.footer || all.footer.showFullCredits !== false) && <a href="credits.html" style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: muted, textDecoration: 'none' }}>Full credits →</a>}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: r('repeat(3,1fr)', 'repeat(2,1fr)', '1fr'), gap: 28 }}>
            {c.work.map((w, i) => (
              <article key={i} style={{ position: 'relative', border: w.featured ? `1px solid ${accent}` : `1px solid ${surface}`, background: w.featured ? 'rgba(168,85,42,0.06)' : 'transparent' }}>
                <div style={{ aspectRatio: '4 / 5', background: '#0f0c0a', position: 'relative', overflow: 'hidden' }}>
                  <Media value={w.image} alt={w.title} placeholder={w.title} />
                  {w.featured && <div style={{ position: 'absolute', top: 16, left: 16, padding: '5px 10px', background: accent, color: espresso, fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 600 }}>Now in production</div>}
                </div>
                <div style={{ padding: '20px 22px 24px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: muted, marginBottom: 12 }}>
                    <span>{w.role}</span><span>{w.year}</span>
                  </div>
                  <h3 style={{ fontWeight: 700, fontSize: 22, margin: 0, lineHeight: 1.2, color: bone, letterSpacing: '-0.01em' }}>{w.title}</h3>
                  <div style={{ marginTop: 10, fontSize: 14, color: muted }}>{w.meta}</div>
                </div>
              </article>
            ))}
          </div>
        </section>

        {/* bio essay */}
        <section style={{ padding: r('120px 64px', '88px 40px', '56px 20px'), borderBottom: `1px solid ${surface}`, display: 'grid', gridTemplateColumns: r('180px 1fr 1fr', '1fr 1fr', '1fr'), gap: r(64, 40, 28) }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent }}>{c.bioEyebrow}</div>
            <div style={{ fontSize: 13, fontWeight: 500, color: muted, marginTop: 8, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{c.bioKicker}</div>
          </div>
          <div style={{ gridColumn: bp === 'tablet' ? 'span 2' : 'auto' }}>
            <h2 style={{ fontWeight: 400, fontSize: r(56, 46, 34), margin: 0, lineHeight: 1.05, letterSpacing: '-0.015em' }}>
              {c.bioHeadlineA}<span style={{ color: accent, fontWeight: 500 }}>{c.bioHeadlineAccent}</span>{c.bioHeadlineB}
            </h2>
            <p style={{ marginTop: 36, fontSize: r(19, 18, 16), lineHeight: 1.65, color: bone, opacity: 0.92, textWrap: 'pretty' }}>
              <span style={{ float: 'left', fontSize: 110, lineHeight: 0.82, padding: '14px 16px 0 0', color: accent, fontWeight: 900, letterSpacing: '-0.04em' }}>I</span>
              {c.bioLead}
            </p>
          </div>
          <div>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: bone, opacity: 0.85, marginTop: 0, textWrap: 'pretty' }}>{c.bioPara2}</p>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: bone, opacity: 0.85, marginTop: 22, textWrap: 'pretty' }}>{c.bioPara3}</p>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: accent, marginTop: 22, fontWeight: 500, textWrap: 'pretty' }}>{c.bioPara4}</p>
          </div>
        </section>

        {/* reel */}
        <section style={{ padding: r('120px 64px', '88px 40px', '56px 20px'), borderBottom: `1px solid ${surface}` }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 48, gap: 16, flexWrap: 'wrap' }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, marginBottom: 16 }}>{c.reelEyebrow}</div>
              <h2 style={{ fontWeight: 900, fontSize: r(64, 52, 36), margin: 0, lineHeight: 1, letterSpacing: '-0.02em' }}>{c.reelTitle}</h2>
            </div>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: muted }}>{c.reelMeta}</div>
          </div>
          {hasGallery
            ? <ReelGallery clips={gallery} accent={accent} muted={muted} surface={surface} stageBg="#0a0807" />
            : <PlayerFrame poster={c.reelPoster} video={c.reelVideo} />}
        </section>

        {/* other chapters */}
        <section style={{ padding: r('120px 64px', '88px 40px', '56px 20px'), borderBottom: `1px solid ${surface}` }}>
          <div style={{ marginBottom: 56 }}>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, marginBottom: 16 }}>{c.chaptersEyebrow}</div>
            <h2 style={{ fontWeight: 400, fontSize: r(72, 54, 38), margin: 0, lineHeight: 1, letterSpacing: '-0.02em' }}>{c.chaptersTitle}</h2>
            <p style={{ marginTop: 24, fontSize: 18, lineHeight: 1.55, color: muted, fontStyle: 'italic', whiteSpace: bp === 'desktop' ? 'nowrap' : 'normal' }}>{c.chaptersLead}</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: r('repeat(3,1fr)', 'repeat(3,1fr)', '1fr'), gap: 36 }}>
            {c.chapters.filter((ch) => ch && ch.on !== false && (ch.title || ch.era || ch.body)).map((ch, i) => (
              <div key={i} style={{ borderTop: `1px solid ${surface}`, paddingTop: 28 }}>
                <div style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, marginBottom: 14 }}>{ch.era}</div>
                <h3 style={{ fontWeight: 800, fontSize: 26, margin: 0, lineHeight: 1.2, color: bone, letterSpacing: '-0.01em' }}>{ch.title}</h3>
                <p style={{ marginTop: 16, fontSize: 15, lineHeight: 1.65, color: muted, textWrap: 'pretty' }}>{ch.body}</p>
              </div>
            ))}
          </div>
        </section>

        {/* contact footer */}
        <Footer all={all} bp={bp} />
      </Root>
    );
  }

  /* shared video player frame with corner brackets + play button */
  function PlayerFrame({ poster, video, big }) {
    if (video) {
      return <div style={{ position: 'relative', aspectRatio: '16 / 9', background: '#0a0807', border: `1px solid ${surface}` }}>
        <Media value={video} poster={poster} placeholder="Reel video (.mp4)" />
      </div>;
    }
    const sz = big ? 112 : 96;
    return (
      <div style={{ position: 'relative', aspectRatio: '16 / 9', background: '#0a0807', border: `1px solid ${surface}` }}>
        <Media value={poster} alt="Reel poster" placeholder="Reel poster frame · 16:9" />
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }}>
          <div style={{ width: sz, height: sz, borderRadius: '50%', border: `1.5px solid ${bone}`, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(28,24,20,0.4)', backdropFilter: 'blur(4px)' }}>
            <div style={{ width: 0, height: 0, borderLeft: `${big ? 26 : 22}px solid ${bone}`, borderTop: `${big ? 16 : 14}px solid transparent`, borderBottom: `${big ? 16 : 14}px solid transparent`, marginLeft: 6 }} />
          </div>
        </div>
        {[{ top: 16, left: 16, borderTop: `1px solid ${accent}`, borderLeft: `1px solid ${accent}` },
          { top: 16, right: 16, borderTop: `1px solid ${accent}`, borderRight: `1px solid ${accent}` },
          { bottom: 16, left: 16, borderBottom: `1px solid ${accent}`, borderLeft: `1px solid ${accent}` },
          { bottom: 16, right: 16, borderBottom: `1px solid ${accent}`, borderRight: `1px solid ${accent}` }
        ].map((s, i) => <div key={i} style={{ position: 'absolute', width: 28, height: 28, ...s }} />)}
      </div>
    );
  }

  /* =====================  ABOUT  ===================== */
  function About({ c, all }) {
    const bp = useBreakpoint(); const r = mk(bp);
    const prod = (c.productionShots || []).filter((p) => p && p.on !== false && p.image);
    const hasProd = prod.length > 0;
    return (
      <Root bp={bp}>
        <NavBar active="About" all={all} bp={bp} />
        <section style={{ display: 'grid', gridTemplateColumns: r('1fr 1.1fr', '1fr 1fr', '1fr'), minHeight: bp === 'phone' ? 'auto' : 640, borderBottom: `1px solid ${surface}` }}>
          <div style={{ padding: r('88px 64px 64px', '72px 40px 48px', '48px 20px 36px'), display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, marginBottom: 32 }}><span style={{ color: muted }}>{c.eyebrow}</span></div>
              <h1 style={{ fontWeight: 900, fontSize: r(128, 96, 60), lineHeight: 0.88, letterSpacing: '-0.045em', margin: 0, color: bone }}>{c.titleLine1}<br /><span style={{ color: accent }}>{c.titleLine2}</span></h1>
              <p style={{ marginTop: 36, fontSize: r(19, 18, 16), lineHeight: 1.55, color: bone, maxWidth: 460, opacity: 0.85 }}>{window.__rich(c.lead, accent)}</p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24, paddingTop: 32, marginTop: bp === 'phone' ? 32 : 0, borderTop: `1px solid ${surface}`, fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
              {c.stats.map((s) => (<div key={s.label}><div style={{ color: muted, marginBottom: 8 }}>{s.label}</div><div style={{ color: bone, fontSize: r(22, 20, 18), fontWeight: 800, letterSpacing: '-0.01em', textTransform: 'none' }}>{s.value}</div></div>))}
            </div>
          </div>
          <div style={{ position: 'relative', background: '#0f0c0a', minHeight: bp === 'phone' ? 400 : 'auto' }}>
            <Media value={c.heroPortrait} alt="Michael Aron" placeholder="Candid portrait" style={{ position: 'absolute', inset: 0 }} />
          </div>
        </section>

        <section style={{ padding: r('120px 64px', '88px 40px', '56px 20px'), borderBottom: `1px solid ${surface}` }}>
          <div style={{ display: 'grid', gridTemplateColumns: r('180px 1fr', '1fr', '1fr'), gap: r(64, 24, 20), marginBottom: 72 }}>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent }}>{c.actsEyebrow}</div>
            <h2 style={{ fontWeight: 900, fontSize: r(64, 50, 34), margin: 0, lineHeight: 1, letterSpacing: '-0.04em', maxWidth: 900 }}>{c.actsTitleA}<span style={{ color: accent }}>{c.actsTitleAccent}</span>{c.actsTitleB}</h2>
          </div>
          {c.acts.map((act, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: r('180px 1fr 1fr', '1fr 1fr', '1fr'), gap: r(64, 32, 20), paddingTop: 56, paddingBottom: 56, borderTop: `1px solid ${surface}` }}>
              <div>
                <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, fontWeight: 600 }}>{act.num}</div>
                <div style={{ fontSize: 13, color: muted, marginTop: 8, letterSpacing: '0.08em' }}>{act.year}</div>
              </div>
              <div><h3 style={{ fontWeight: 900, fontSize: r(44, 36, 28), margin: 0, lineHeight: 1.02, letterSpacing: '-0.03em', color: bone }}>{act.title}</h3></div>
              <div style={{ gridColumn: bp === 'tablet' ? 'span 2' : 'auto' }}>
                {act.body.map((p, j) => <p key={j} style={{ fontSize: 16, lineHeight: 1.65, color: bone, opacity: 0.85, margin: j === 0 ? 0 : '20px 0 0', textWrap: 'pretty' }}>{p}</p>)}
              </div>
            </div>
          ))}
        </section>

        <section style={{ padding: r('120px 64px', '88px 40px', '56px 20px'), borderBottom: `1px solid ${surface}` }}>
          <div style={{ marginBottom: 56 }}>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, marginBottom: 16 }}>{c.timelineEyebrow}</div>
            <h2 style={{ fontWeight: 900, fontSize: r(64, 50, 34), margin: 0, lineHeight: 1, letterSpacing: '-0.04em' }}>{c.timelineTitle}</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: r('repeat(2,1fr)', 'repeat(2,1fr)', '1fr'), columnGap: 96, rowGap: 0 }}>
            {c.timeline.map((t, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '88px 1fr', gap: 24, alignItems: 'baseline', padding: '20px 0', borderTop: `1px solid ${surface}` }}>
                <div style={{ fontSize: 22, fontWeight: 800, color: accent, letterSpacing: '-0.01em' }}>{t.year}</div>
                <div style={{ fontSize: 16, lineHeight: 1.5, color: bone, opacity: 0.9 }}>{t.event}</div>
              </div>
            ))}
          </div>
        </section>

        <section style={{ padding: r('120px 64px', '88px 40px', '56px 20px'), borderBottom: `1px solid ${surface}` }}>
          <div style={{ marginBottom: 56 }}>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, marginBottom: 16 }}>{c.galleryEyebrow}</div>
            <h2 style={{ fontWeight: 900, fontSize: r(64, 50, 34), margin: 0, lineHeight: 1, letterSpacing: '-0.04em' }}>{c.galleryTitle}</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: r('repeat(4,1fr)', 'repeat(2,1fr)', 'repeat(2,1fr)'), gap: 16 }}>
            {c.gallery.map((p, i) => (
              <figure key={i} style={{ margin: 0, gridRow: p.tall && bp !== 'phone' ? 'span 2' : 'auto' }}>
                <div style={{ aspectRatio: p.tall ? '3 / 5' : '4 / 3', background: '#0f0c0a' }}>
                  <Media value={p.image} alt={p.caption} placeholder=" " lightbox group="a-gallery" caption={p.caption} />
                </div>
                <figcaption style={{ marginTop: 10, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: muted, fontWeight: 500 }}>{p.caption}</figcaption>
              </figure>
            ))}
          </div>
        </section>

        {hasProd && (
        <section style={{ padding: r('120px 64px', '88px 40px', '56px 20px'), borderBottom: `1px solid ${surface}` }}>
          <div style={{ marginBottom: 44, maxWidth: 720 }}>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, marginBottom: 16 }}>{c.productionEyebrow}</div>
            <h2 style={{ fontWeight: 900, fontSize: r(64, 50, 34), margin: 0, lineHeight: 1, letterSpacing: '-0.04em' }}>{c.productionTitle}</h2>
            {c.productionLead ? <p style={{ marginTop: 20, fontSize: 17, lineHeight: 1.55, color: muted, textWrap: 'pretty' }}>{window.__rich(c.productionLead, accent)}</p> : null}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: r(30, 24, 18), justifyContent: 'center', padding: '16px 0 8px' }}>
            {prod.map((p, i) => {
              const rot = [-3, 2.5, -1.5, 3, -2.5, 1.5][i % 6];
              return (
                <figure key={i} style={{ margin: 0, width: bp === 'phone' ? '78vw' : 268, maxWidth: 300, background: bone, padding: '12px 12px 0', boxShadow: '0 18px 40px rgba(0,0,0,.45)', transform: `rotate(${rot}deg)`, transition: 'transform .25s ease' }}
                  onMouseEnter={(e) => { e.currentTarget.style.transform = 'rotate(0deg) scale(1.04)'; e.currentTarget.style.zIndex = 5; }}
                  onMouseLeave={(e) => { e.currentTarget.style.transform = `rotate(${rot}deg)`; e.currentTarget.style.zIndex = 'auto'; }}>
                  <div style={{ aspectRatio: '1 / 1', background: '#0f0c0a', overflow: 'hidden', cursor: 'zoom-in' }}>
                    <Media value={p.image} alt={p.caption} placeholder=" " lightbox group="a-prod" caption={p.caption} />
                  </div>
                  <figcaption style={{ padding: '14px 6px 18px', textAlign: 'center', color: espresso }}>
                    <div style={{ fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em' }}>{p.caption}</div>
                    {p.project ? <div style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#8a7a5c', marginTop: 4 }}>{p.project}</div> : null}
                  </figcaption>
                </figure>
              );
            })}
          </div>
        </section>
        )}
        <Footer all={all} bp={bp} mid="Download resume ↓" />
      </Root>
    );
  }

  /* =====================  REEL  ===================== */
  function Reel({ c, all }) {
    const bp = useBreakpoint(); const r = mk(bp);
    const gallery = (c.gallery || []).filter(g => g && g.thumb && g.video);
    const hasGallery = gallery.length > 0;
    return (
      <Root bp={bp}>
        <NavBar active="Reel" all={all} bp={bp} />
        <section style={{ padding: r('88px 64px 48px', '72px 40px 40px', '48px 20px 32px'), borderBottom: `1px solid ${surface}`, display: 'grid', gridTemplateColumns: r('1fr 1fr', '1fr', '1fr'), gap: r(64, 32, 24), alignItems: 'end' }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, marginBottom: 24 }}><span style={{ color: muted }}>{c.eyebrow}</span></div>
            <h1 style={{ fontWeight: 900, fontSize: r(144, 104, 60), lineHeight: 0.88, letterSpacing: '-0.045em', margin: 0, color: bone }}>{c.titleLine1}<br /><span style={{ color: accent }}>{c.titleLine2}</span></h1>
          </div>
          <div>
            <p style={{ fontSize: r(20, 18, 16), lineHeight: 1.55, color: bone, opacity: 0.88, margin: 0, maxWidth: 480, textWrap: 'pretty' }}>{window.__rich(c.lead, accent)}</p>
            <div style={{ marginTop: 32, display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: muted }}>
              <span>{c.metaUpdated}</span><span style={{ color: surface }}>·</span><span>{c.metaRuntime}</span>
            </div>
          </div>
        </section>

        <section style={{ padding: r('48px 64px 120px', '40px 40px 88px', '32px 20px 56px'), borderBottom: `1px solid ${surface}` }}>
          <div style={{ position: 'relative' }}>
            {hasGallery
              ? <ReelGallery clips={gallery} accent={accent} muted={muted} surface={surface} stageBg="#0a0807" />
              : <React.Fragment>
                  <PlayerFrame poster={c.poster} video={c.video} big />
                  {!c.video &&
                    <div style={{ position: 'absolute', bottom: 36, left: 36, right: 36, zIndex: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', pointerEvents: 'none' }}>
                      <div>
                        <div style={{ fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: accent, fontWeight: 600, marginBottom: 10 }}>{c.nowPlayingTag}</div>
                        <div style={{ fontWeight: 900, fontSize: r(56, 44, 28), color: bone, letterSpacing: '-0.035em', lineHeight: 0.95 }}>{c.nowPlayingName}</div>
                      </div>
                    </div>}
                </React.Fragment>}
          </div>
          {!hasGallery && (
          <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: r('180px 1fr', '1fr', '1fr'), gap: r(64, 24, 20) }}>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent }}>{c.chaptersLabel}</div>
            <div>
              {c.chapters.map((ch, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '80px 1fr auto', alignItems: 'baseline', padding: '18px 0', borderTop: `1px solid ${surface}` }}>
                  <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.1em', color: accent }}>{ch.time}</div>
                  <div>
                    <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.015em', color: bone }}>{ch.title}</div>
                    <div style={{ fontSize: 14, color: muted, marginTop: 4 }}>{ch.meta}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
        </section>

        {!hasGallery && (
        <section style={{ padding: r('120px 64px', '88px 40px', '56px 20px'), borderBottom: `1px solid ${surface}` }}>
          <div style={{ marginBottom: 56 }}>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, marginBottom: 16 }}>{c.archiveEyebrow}</div>
            <h2 style={{ fontWeight: 900, fontSize: r(64, 50, 34), margin: 0, lineHeight: 1, letterSpacing: '-0.04em' }}>{c.archiveTitle}</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: r('repeat(3,1fr)', 'repeat(2,1fr)', '1fr'), gap: 24 }}>
            {c.archive.map((a, i) => (
              <article key={i} style={{ border: `1px solid ${surface}` }}>
                <div style={{ aspectRatio: '16 / 9', background: '#0f0c0a', position: 'relative' }}>
                  <Media value={a.video || a.image} poster={a.image} alt={a.tag} placeholder={a.tag} />
                </div>
                <div style={{ padding: '22px 22px 26px' }}>
                  <div style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, fontWeight: 600, marginBottom: 10 }}>{a.tag}</div>
                  <p style={{ fontSize: 14, lineHeight: 1.55, color: bone, opacity: 0.82, margin: 0 }}>{a.body}</p>
                  <div style={{ marginTop: 16, fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: muted, fontWeight: 500 }}>{a.meta}</div>
                </div>
              </article>
            ))}
          </div>
        </section>
        )}

        <Footer all={all} bp={bp} />
      </Root>
    );
  }

  /* =====================  CREDITS  ===================== */
  function Credits({ c, all }) {
    const bp = useBreakpoint(); const r = mk(bp);
    const cols = '88px 2.2fr 1.2fr 1.1fr 1.3fr 140px';
    return (
      <Root bp={bp}>
        <NavBar active="Credits" all={all} bp={bp} />
        <section style={{ padding: r('88px 64px 56px', '72px 40px 48px', '48px 20px 36px'), borderBottom: `1px solid ${surface}`, display: 'grid', gridTemplateColumns: r('1.2fr 1fr', '1fr', '1fr'), gap: r(64, 32, 24), alignItems: 'end' }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, marginBottom: 24 }}><span style={{ color: muted }}>{c.eyebrow}</span></div>
            <h1 style={{ fontWeight: 900, fontSize: r(144, 104, 56), lineHeight: 0.86, letterSpacing: '-0.045em', margin: 0, color: bone }}>{c.titleLine1}<br /><span style={{ color: accent }}>{c.titleLine2}</span></h1>
          </div>
          <div>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: bone, opacity: 0.85, margin: 0, maxWidth: 460, textWrap: 'pretty' }}>{window.__rich(c.lead, accent)}</p>
            <div style={{ marginTop: 28, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <a href={all.meta.resumeFile} target="_blank" rel="noopener noreferrer" style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600, color: espresso, background: accent, padding: '14px 22px', textDecoration: 'none' }}>{c.primaryCta}</a>
              <a href={all.meta.resumeFile} target="_blank" rel="noopener noreferrer" style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600, color: bone, border: `1px solid ${surface}`, padding: '14px 22px', textDecoration: 'none' }}>{c.secondaryCta}</a>
            </div>
          </div>
        </section>

        <section style={{ padding: r('64px 64px 88px', '48px 40px 72px', '36px 20px 48px') }}>
          {bp !== 'phone' &&
            <div style={{ display: 'grid', gridTemplateColumns: cols, padding: '0 0 14px', borderBottom: `1px solid ${surface}`, fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: muted, fontWeight: 600 }}>
              <div>Year</div><div>Title</div><div>Role</div><div>Network · Studio</div><div>Notes</div><div style={{ textAlign: 'right' }}>Status</div>
            </div>}
          {c.groups.map((g, gi) => (
            <div key={gi} style={{ marginTop: 40 }}>
              <div style={{ fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase', color: accent, fontWeight: 700, paddingBottom: 12, marginBottom: 4 }}>{g.head}</div>
              {g.rows.map((row, i) => (
                bp === 'phone' ? (
                  <div key={i} style={{ padding: '18px 0', borderTop: `1px solid ${surface}` }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: row.hot ? accent : muted, fontWeight: 600, letterSpacing: '0.08em' }}><span>{row.year}</span><span style={{ textTransform: 'uppercase', letterSpacing: '0.18em', fontSize: 10 }}>{row.hot ? '● Current' : 'Available'}</span></div>
                    <div style={{ fontSize: 20, fontWeight: 700, color: bone, marginTop: 8, letterSpacing: '-0.015em' }}>{row.title}</div>
                    <div style={{ fontSize: 14, color: bone, opacity: 0.88, marginTop: 4 }}>{row.role}{row.net ? ' · ' + row.net : ''}</div>
                    {row.note && <div style={{ fontSize: 13, color: muted, marginTop: 4 }}>{row.note}</div>}
                  </div>
                ) : (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: cols, alignItems: 'baseline', padding: '20px 0', borderTop: `1px solid ${surface}` }}>
                    <div style={{ fontSize: 14, fontWeight: 600, color: row.hot ? accent : muted, letterSpacing: '0.05em' }}>{row.year}</div>
                    <div style={{ fontSize: 22, fontWeight: 700, color: bone, lineHeight: 1.2, letterSpacing: '-0.015em' }}>{row.title}</div>
                    <div style={{ fontSize: 15, color: bone, opacity: 0.88 }}>{row.role}</div>
                    <div style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: muted, fontWeight: 500 }}>{row.net}</div>
                    <div style={{ fontSize: 14, color: muted }}>{row.note}</div>
                    <div style={{ textAlign: 'right', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 600, color: row.hot ? accent : muted }}>{row.hot ? '● Current' : 'Available'}</div>
                  </div>
                )
              ))}
            </div>
          ))}
        </section>

        <section style={{ padding: r('88px 64px', '72px 40px', '48px 20px'), borderTop: `1px solid ${surface}`, borderBottom: `1px solid ${surface}` }}>
          <div style={{ display: 'grid', gridTemplateColumns: r('repeat(4,1fr)', 'repeat(2,1fr)', '1fr'), gap: 36 }}>
            {c.skills.map((col, i) => (
              <div key={i}>
                <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, fontWeight: 600, marginBottom: 16 }}>{col.h}</div>
                {col.items.map((it, j) => <div key={j} style={{ fontSize: 15, lineHeight: 1.5, color: bone, opacity: 0.88, padding: '8px 0', borderTop: `1px solid ${surface}` }}>{it}</div>)}
              </div>
            ))}
          </div>
        </section>
        <Footer all={all} bp={bp} mid="Download résumé ↓" />
      </Root>
    );
  }

  /* =====================  CONTACT  ===================== */
  function Contact({ c, all }) {
    const bp = useBreakpoint(); const r = mk(bp);
    const inputStyle = { width: '100%', boxSizing: 'border-box', background: 'transparent', border: 'none', borderBottom: `1px solid ${surface}`, padding: '14px 0', color: bone, fontSize: 17, fontFamily: fontUI, outline: 'none' };
    const labelStyle = { fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: muted, fontWeight: 600, marginBottom: 8, display: 'block' };
    const mailto = 'mailto:' + all.contactInfo.email + '?subject=Inquiry%20for%20Michael%20Aron';
    return (
      <Root bp={bp}>
        <NavBar active="Contact" all={all} bp={bp} />
        <section style={{ padding: r('120px 64px 88px', '88px 40px 64px', '52px 20px 40px'), borderBottom: `1px solid ${surface}` }}>
          <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, marginBottom: 28 }}><span style={{ color: muted }}>{c.eyebrow}</span></div>
          <h1 style={{ fontWeight: 900, fontSize: r(192, 120, 64), lineHeight: 0.86, letterSpacing: '-0.05em', margin: 0, maxWidth: 1100 }}>{c.titleA}<span style={{ color: accent }}>{c.titleAccent}</span></h1>
          <p style={{ marginTop: 32, fontSize: r(22, 19, 16), lineHeight: 1.5, color: bone, opacity: 0.85, maxWidth: 720 }}>{window.__rich(c.lead, accent)}</p>
        </section>

        <section style={{ borderBottom: `1px solid ${surface}` }}>
          <div style={{ display: 'grid', gridTemplateColumns: r('repeat(3,1fr)', 'repeat(3,1fr)', '1fr') }}>
            {c.cards.map((card, i) => {
              const href = card.label.toLowerCase().includes('phone') ? 'tel:' + card.value.replace(/[^0-9+]/g, '')
                : card.label.toLowerCase().includes('email') ? 'mailto:' + card.value : null;
              const inner = (
                <React.Fragment>
                  <div style={{ fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: accent, fontWeight: 600, marginBottom: 18 }}>{card.label}</div>
                  <div style={{ fontSize: r(32, 26, 24), fontWeight: 800, color: bone, letterSpacing: '-0.02em', lineHeight: 1.1 }}>{card.value}</div>
                  <div style={{ marginTop: 16, fontSize: 14, color: muted, lineHeight: 1.55 }}>{card.meta}</div>
                </React.Fragment>
              );
              const st = { padding: r('56px 48px', '40px 32px', '36px 20px'), borderRight: i < 2 && bp !== 'phone' ? `1px solid ${surface}` : 'none', borderBottom: bp === 'phone' && i < 2 ? `1px solid ${surface}` : 'none', textDecoration: 'none', display: 'block', color: bone };
              return href ? <a key={i} href={href} style={st}>{inner}</a> : <div key={i} style={st}>{inner}</div>;
            })}
          </div>
        </section>

        <section style={{ padding: r('120px 64px', '88px 40px', '52px 20px'), display: 'grid', gridTemplateColumns: c.showForm === false ? '1fr' : r('1.4fr 1fr', '1fr', '1fr'), gap: r(96, 48, 40), borderBottom: `1px solid ${surface}` }}>
          {c.showForm !== false && (
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, marginBottom: 16 }}>{c.formEyebrow}</div>
            <h2 style={{ fontWeight: 900, fontSize: r(56, 44, 32), margin: 0, lineHeight: 1, letterSpacing: '-0.035em' }}>{c.formTitle}</h2>
            <p style={{ marginTop: 16, fontSize: 16, color: muted, lineHeight: 1.55, maxWidth: 480 }}>{c.formLead}</p>
            <form action={mailto} method="get" style={{ marginTop: 48, display: 'grid', gridTemplateColumns: bp === 'phone' ? '1fr' : '1fr 1fr', gap: '32px 32px' }}>
              <div><label style={labelStyle}>Your name</label><input style={inputStyle} placeholder="Jane Casting" /></div>
              <div><label style={labelStyle}>Company / Production</label><input style={inputStyle} placeholder="Studio or production co." /></div>
              <div><label style={labelStyle}>Email</label><input style={inputStyle} placeholder="you@studio.com" /></div>
              <div><label style={labelStyle}>Phone (optional)</label><input style={inputStyle} placeholder="—" /></div>
              <div style={{ gridColumn: bp === 'phone' ? 'auto' : 'span 2' }}>
                <label style={labelStyle}>Project brief</label>
                <textarea rows={5} style={{ ...inputStyle, resize: 'vertical', lineHeight: 1.5 }} placeholder="Role, project, dates, location. A few sentences is fine." />
              </div>
              <div style={{ gridColumn: bp === 'phone' ? 'auto' : 'span 2', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap', marginTop: 8 }}>
                <div style={{ fontSize: 13, color: muted }}>Opens your email app, pre-addressed.</div>
                <a href={mailto} style={{ fontSize: 13, letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 700, background: accent, color: espresso, padding: '18px 32px', textDecoration: 'none' }}>Send inquiry →</a>
              </div>
            </form>
          </div>
          )}
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, marginBottom: 24 }}>Factsheet</div>
            <div>
              {c.factsheet.map((f, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 0', borderBottom: `1px solid ${surface}` }}>
                  <span style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: muted, fontWeight: 500 }}>{f.k}</span>
                  <span style={{ fontSize: 15, fontWeight: 600, color: bone }}>{f.v}</span>
                </div>
              ))}
            </div>
            {c.showPressKit !== false && (
            <React.Fragment>
            <div style={{ marginTop: 48, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent, marginBottom: 14 }}>Press kit</div>
            {c.pressKit.map((p, i) => (
              <a key={i} {...(/\.pdf(\?|#|$)/i.test(p.file || '') ? { href: p.file, target: '_blank', rel: 'noopener noreferrer' } : { href: p.file, download: true })} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '14px 0', borderBottom: `1px solid ${surface}`, color: bone, textDecoration: 'none' }}>
                <span style={{ fontSize: 15, fontWeight: 600 }}>{p.label} ↓</span>
                <span style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: muted, fontWeight: 500 }}>{p.meta}</span>
              </a>
            ))}
            </React.Fragment>
            )}
          </div>
        </section>

        <section style={{ padding: r('100px 64px', '80px 40px', '52px 20px'), textAlign: 'center', borderBottom: `1px solid ${surface}` }}>
          <div style={{ fontWeight: 900, fontSize: r(56, 44, 30), letterSpacing: '-0.035em', lineHeight: 1.1, maxWidth: 980, margin: '0 auto' }}>{c.closingA}<span style={{ color: accent }}>{c.closingAccent}</span></div>
        </section>
        <Footer all={all} bp={bp} />
      </Root>
    );
  }

  window.PAGES = { home: Home, about: About, reel: Reel, credits: Credits, contact: Contact };
})();