// Direction A — "Field Notes"
// Rugged journal: sage/olive, cream, stencil accents, typewriter body, serif display.
// Feels like a war correspondent's notebook.

const A_COLORS = {
  paper: '#e8e4d9',
  paperDark: '#d9d3c2',
  ink: '#1d1f17',
  olive: '#3d4a2a',
  oliveD: '#2a3319',
  rust: '#8a3a1c',
  faded: '#6b6556',
  rule: '#b8b1a0',
};

const A_FONT_SERIF = "'Playfair Display', 'Libre Caslon Text', Georgia, serif";
const A_FONT_MONO = "'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace";
const A_FONT_SANS = "'Inter Tight', 'Helvetica Neue', system-ui, sans-serif";
const A_FONT_STENCIL = "'Black Ops One', 'Stardos Stencil', 'Impact', sans-serif";

function FieldNotesPortfolio() {
  const d = window.PAUL_DATA;
  const [hovered, setHovered] = React.useState(null);
  const [viewportWidth, setViewportWidth] = React.useState(() => window.innerWidth);

  React.useEffect(() => {
    const onResize = () => setViewportWidth(window.innerWidth);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const isMobile = viewportWidth < 768;
  const isTablet = viewportWidth < 1100;
  const pagePadX = isMobile ? 20 : isTablet ? 32 : 60;
  const sectionPadY = isMobile ? 48 : 72;
  const heroTitleSize = isMobile ? 52 : isTablet ? 68 : 86;
  const sectionTitleSize = isMobile ? 38 : isTablet ? 46 : 54;
  const contactTitleSize = isMobile ? 42 : isTablet ? 52 : 64;
  const bodySerifSize = isMobile ? 19 : 22;
  const factsColumns = isMobile ? 1 : d.facts.length;

  return (
    <div style={{
      width: '100%', minHeight: '100%', background: A_COLORS.paper,
      color: A_COLORS.ink, fontFamily: A_FONT_SANS,
      backgroundImage: `
        repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(61,74,42,0.06) 31px, rgba(61,74,42,0.06) 32px),
        radial-gradient(circle at 15% 20%, rgba(138,58,28,0.04), transparent 40%),
        radial-gradient(circle at 85% 70%, rgba(61,74,42,0.05), transparent 40%)
      `,
    }}>
      {/* ==== MASTHEAD ==== */}
      <div style={{
        borderBottom: `2px solid ${A_COLORS.ink}`,
        padding: isMobile ? '18px 20px 16px' : `24px ${pagePadX}px 18px`,
        display: 'flex',
        alignItems: isMobile ? 'flex-start' : 'center',
        justifyContent: 'space-between',
        flexDirection: isMobile ? 'column' : 'row',
        gap: isMobile ? 16 : 24,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 12 : 18 }}>
          <div style={{
            width: isMobile ? 40 : 44, height: isMobile ? 40 : 44, border: `2px solid ${A_COLORS.ink}`, display: 'flex',
            alignItems: 'center', justifyContent: 'center', fontFamily: A_FONT_STENCIL,
            fontSize: isMobile ? 18 : 20, color: A_COLORS.oliveD, letterSpacing: 1,
          }}>PS</div>
          <div>
            <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: isMobile ? 2 : 3, color: A_COLORS.faded, textTransform: 'uppercase' }}>
              VOL. XIII · DISPATCH {(new Date().getTime() % 900 + 100)}
            </div>
            <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: isMobile ? 1.5 : 2, color: A_COLORS.faded, textTransform: 'uppercase', marginTop: 2 }}>
              Dana Point, CA · Est. 2012
            </div>
          </div>
        </div>
        <div style={{
          display: 'flex',
          gap: isMobile ? 14 : 28,
          flexWrap: 'wrap',
          fontFamily: A_FONT_MONO,
          fontSize: 11,
          letterSpacing: isMobile ? 1 : 2,
          textTransform: 'uppercase',
        }}>
          <a href="#work" style={{ color: A_COLORS.ink, textDecoration: 'none', borderBottom: `1.5px solid ${A_COLORS.rust}` }}>Work</a>
          <a href="#outlets" style={{ color: A_COLORS.ink, textDecoration: 'none' }}>Outlets</a>
          <a href="#appearances" style={{ color: A_COLORS.ink, textDecoration: 'none' }}>On Air</a>
          <a href="#press" style={{ color: A_COLORS.ink, textDecoration: 'none' }}>Press</a>
          <a href="#contact" style={{ color: A_COLORS.ink, textDecoration: 'none' }}>Contact</a>
        </div>
      </div>

      {/* ==== HERO ==== */}
      <div style={{
        padding: `${isMobile ? 36 : 56}px ${pagePadX}px ${isMobile ? 30 : 40}px`,
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1.1fr 0.9fr' : '1.35fr 1fr',
        gap: isMobile ? 32 : 56,
        borderBottom: `1px solid ${A_COLORS.rule}`,
      }}>
        <div>
          <div style={{ fontFamily: A_FONT_MONO, fontSize: 11, letterSpacing: isMobile ? 2 : 3, color: A_COLORS.rust, textTransform: 'uppercase', marginBottom: 14 }}>
            ◆ Writer · Editor · Marine
          </div>
          <h1 style={{
            fontFamily: A_FONT_SERIF, fontWeight: 700, fontSize: heroTitleSize, lineHeight: 0.95,
            margin: 0, letterSpacing: -2, color: A_COLORS.ink,
          }}>
            Paul<br/>Szoldra
          </h1>
          <div style={{ fontFamily: A_FONT_MONO, fontSize: 12, color: A_COLORS.faded, marginTop: 6, letterSpacing: 1 }}>
            /ZOAL-druh/
          </div>
          <p style={{
            fontFamily: A_FONT_SERIF, fontSize: isMobile ? 21 : 24, lineHeight: 1.45, color: A_COLORS.ink,
            marginTop: isMobile ? 24 : 32, maxWidth: 520, fontStyle: 'italic', fontWeight: 400,
          }}>
            National security writer and editor. Former Marine. I cover the military, veterans, and the institutions that fail them both.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: isMobile ? 24 : 32, flexWrap: 'wrap' }}>
            {[
              ['Task & Purpose', 'Editor-in-Chief'],
              ['Duffel Blog', 'Founder'],
              ['Business Insider', 'Editor'],
              ['Tech Insider', 'Correspondent'],
              ['We Are The Mighty', 'Executive Editor'],
            ].map(([o, r]) => (
              <div key={o} style={{
                border: `1px solid ${A_COLORS.ink}`, padding: '7px 12px',
                fontFamily: A_FONT_MONO, fontSize: isMobile ? 9 : 10, letterSpacing: isMobile ? 1 : 1.5, textTransform: 'uppercase',
                background: A_COLORS.paper,
              }}>
                <span style={{ color: A_COLORS.rust }}>{r}</span>
                <span style={{ color: A_COLORS.faded, margin: '0 6px' }}>·</span>
                <span>{o}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Hero portrait — Polaroid treatment */}
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'flex-start', paddingTop: isMobile ? 0 : 10, order: isMobile ? -1 : 0 }}>
          <div style={{
            background: '#fbf9f2', padding: isMobile ? '12px 12px 34px' : '16px 16px 48px', transform: isMobile ? 'rotate(0deg)' : 'rotate(2deg)',
            boxShadow: '0 10px 30px rgba(30,25,15,0.18), 0 2px 6px rgba(30,25,15,0.15)',
            position: 'relative', zIndex: 2,
            width: isMobile ? 'min(100%, 330px)' : 'auto',
          }}>
            <img src="assets/paul-office.jpeg" style={{ width: isMobile ? '100%' : 320, height: isMobile ? 360 : 420, objectFit: 'cover', display: 'block', filter: 'saturate(0.88) contrast(1.02)' }} />
            <div style={{
              position: 'absolute', bottom: 14, left: 0, right: 0, textAlign: 'center',
              fontFamily: '"Caveat", "Kalam", cursive', fontSize: isMobile ? 16 : 18, color: A_COLORS.ink,
            }}>
            </div>
          </div>
          {/* stencil callout */}
          {!isMobile && <div style={{
            position: 'absolute', top: 2, left: -49,
            fontFamily: A_FONT_STENCIL, fontSize: 50, color: A_COLORS.olive,
            opacity: 0.1, letterSpacing: 4, lineHeight: 0.9, transform: 'rotate(-20deg)',
            pointerEvents: 'none',
          }}>DEFENSE<br/>MEDIA</div>}
        </div>
      </div>

      {/* ==== FACTS BAND ====
      <div style={{
        background: A_COLORS.oliveD, color: A_COLORS.paper, padding: `${isMobile ? 24 : 28}px ${pagePadX}px`,
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: `repeat(${factsColumns}, minmax(0, 1fr))`,
          gap: isMobile ? 20 : 36,
          justifyContent: 'center',
          alignItems: 'start',
          maxWidth: 1080,
          margin: '0 auto',
        }}>
          {d.facts.map(([k, v]) => (
            <div key={k} style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: A_FONT_SERIF, fontSize: isMobile ? 40 : 48, fontWeight: 700, letterSpacing: -1, color: '#f5f1e3' }}>{v}</div>
              <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: '#bbb19a', marginTop: 2 }}>{k}</div>
            </div>
          ))}
        </div>
      </div> */}

      {/* ==== BIO / ABOUT ==== */}
      <div id="about" style={{ padding: `${sectionPadY}px ${pagePadX}px`, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.6fr', gap: isMobile ? 32 : 60, borderBottom: `1px solid ${A_COLORS.rule}` }}>
        <div>
          <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 3, color: A_COLORS.rust, textTransform: 'uppercase' }}>§ 01 · About</div>
          <h2 style={{ fontFamily: A_FONT_SERIF, fontSize: isMobile ? 36 : 44, lineHeight: 1, margin: '16px 0 0', fontWeight: 700, color: A_COLORS.ink, letterSpacing: -0.8 }}>
            From the Marine Corps<br/>to the press corps.
          </h2>
          {/* Marine supporting photo */}
          <div style={{
            marginTop: 28, background: '#1d1f17', padding: 4,
            border: `1px solid ${A_COLORS.ink}`, position: 'relative',
          }}>
            <img src="assets/paul-marine.jpg" style={{ width: '100%', height: isMobile ? 220 : 240, objectFit: 'cover', display: 'block', filter: 'sepia(0.15) contrast(1.05)' }} />
            <div style={{
              position: 'absolute', bottom: -20, left: 10, right: 10,
              fontFamily: A_FONT_MONO, fontSize: isMobile ? 8 : 9, letterSpacing: isMobile ? 1 : 2,
              color: '#3d4a2a', textTransform: 'uppercase',
              //textShadow: '0 1px 2px rgba(0,0,0,0.8)',
            }}>
              LCPL SZOLDRA · KORENGAL VALLEY, AFGHANISTAN · c. 2005
            </div>
          </div>
        </div>
        <div style={{ fontFamily: A_FONT_SERIF, fontSize: bodySerifSize, lineHeight: 1.55, color: A_COLORS.ink }}>
          <p style={{ marginTop: 0 }}>
            {!isMobile && <span style={{ float: 'left', fontFamily: A_FONT_SERIF, fontSize: 84, lineHeight: 0.82, fontWeight: 700, marginRight: 10, marginTop: 4, color: A_COLORS.olive }}>P</span>}
            {isMobile ? 'Paul' : 'aul'} Szoldra is a national security reporter and editor who has spent more than a decade covering the military. 
            As Editor in Chief of <em>Task & Purpose</em>, he led a small team to build one of the most-read military publications in the country, reaching more than five million readers a month.
          </p>
          <p>
            Before the bylines, he spent eight years as a Marine infantryman, where he deployed to Afghanistan and the Indo-Pacific, and 
            trained thousands of Marines at the School of Infantry. His reporting has been cited by the Department of Defense, the U.S. Army, 
            and the House Armed Services Committee, and featured in <em>The Wall Street Journal</em>, <em>The Washington Post</em>, <em>MSNBC</em>, and <em>CBS News</em>.
          </p>
          <p>
            In 2012, he founded Duffel Blog — the military's satire publication of record, often called "<em>The Onion</em> for the armed forces" and praised 
            as the "best military satire since Joseph Heller wrote Catch-22."
          </p>
          <div style={{
            marginTop: 28, padding: isMobile ? '16px 18px' : '18px 22px', borderLeft: `3px solid ${A_COLORS.rust}`,
            background: 'rgba(138,58,28,0.05)', fontFamily: A_FONT_MONO, fontSize: isMobile ? 12 : 13,
            letterSpacing: 0.5, color: A_COLORS.faded, lineHeight: 1.6,
          }}>
            <div style={{ color: A_COLORS.rust, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 6 }}>On the record →</div>
            "Paul did a phenomenal job turning <em>Task & Purpose</em> around and into a real mainstay of military news." —Maximilian Uriarte, NYT-bestselling author and creator of <em>Terminal Lance</em>
          </div>
        </div>
      </div>

      {/* ==== SELECTED WORK ==== */}
      <div id="work" style={{ padding: `${sectionPadY}px ${pagePadX}px`, borderBottom: `1px solid ${A_COLORS.rule}` }}>
        <div style={{ display: 'flex', alignItems: isMobile ? 'flex-start' : 'baseline', justifyContent: 'space-between', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 12 : 0, marginBottom: 44 }}>
          <div>
            <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 3, color: A_COLORS.rust, textTransform: 'uppercase' }}>§ 02 · Dispatches</div>
            <h2 style={{ fontFamily: A_FONT_SERIF, fontSize: sectionTitleSize, margin: '14px 0 0', fontWeight: 700, letterSpacing: -1.2 }}>
              Selected work
            </h2>
          </div>
          <div style={{ fontFamily: A_FONT_MONO, fontSize: 11, color: A_COLORS.faded, letterSpacing: 1.5, textTransform: 'uppercase' }}>
            A selection of {d.selectedWork.length} pieces across investigations, features, and analysis.
          </div>
        </div>
        <div>
          {d.selectedWork.map((piece, i) => (
            <a key={i} href={piece.url} target="_blank" rel="noopener"
              onMouseEnter={() => setHovered(i)}
              onMouseLeave={() => setHovered(null)}
              style={{
                display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '60px 120px 1fr 140px',
                gap: isMobile ? 8 : 24, alignItems: 'baseline',
                padding: '22px 0', borderTop: `1px solid ${A_COLORS.rule}`,
                textDecoration: 'none', color: A_COLORS.ink,
                transition: 'background 0.15s, padding 0.15s',
                background: hovered === i ? 'rgba(61,74,42,0.05)' : 'transparent',
                paddingLeft: !isMobile && hovered === i ? 12 : 0,
              }}>
              {isMobile ? (
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 1.5, textTransform: 'uppercase' }}>
                  <div style={{ color: A_COLORS.faded }}>№{String(i + 1).padStart(2, '0')}</div>
                  <div style={{ color: A_COLORS.rust }}>{piece.tag}</div>
                </div>
              ) : (
                <>
                  <div style={{ fontFamily: A_FONT_MONO, fontSize: 12, color: A_COLORS.faded, letterSpacing: 1 }}>
                    №{String(i + 1).padStart(2, '0')}
                  </div>
                  <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: A_COLORS.rust }}>
                    {piece.tag}
                  </div>
                </>
              )}
              <div style={{
                fontFamily: A_FONT_SERIF, fontSize: isMobile ? 20 : 22, lineHeight: 1.3, fontWeight: 500,
                color: hovered === i ? A_COLORS.olive : A_COLORS.ink, transition: 'color 0.15s',
              }}>
                {piece.title}
                {!isMobile && hovered === i && <span style={{ marginLeft: 10, color: A_COLORS.rust }}>↗</span>}
              </div>
              <div style={{ fontFamily: A_FONT_MONO, fontSize: 11, color: A_COLORS.faded, letterSpacing: 0.5, textAlign: isMobile ? 'left' : 'right' }}>
                <div style={{ color: A_COLORS.ink, fontWeight: 600 }}>{piece.outlet}</div>
                <div>{piece.date}</div>
              </div>
            </a>
          ))}
        </div>
      </div>

      {/* ==== OUTLETS ==== */}
      <div id="outlets" style={{ padding: `${sectionPadY}px ${pagePadX}px`, borderBottom: `1px solid ${A_COLORS.rule}` }}>
        <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 3, color: A_COLORS.rust, textTransform: 'uppercase' }}>§ 03 · Stations</div>
        <h2 style={{ fontFamily: A_FONT_SERIF, fontSize: sectionTitleSize, margin: '14px 0 44px', fontWeight: 700, letterSpacing: -1.2 }}>
          Where I've filed from
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: 0 }}>
          {d.outlets.map((o, i) => (
            <div key={o.name} style={{
              padding: '24px 28px', borderTop: `1px solid ${A_COLORS.rule}`,
              borderRight: !isMobile && ((isTablet ? (i + 1) % 2 !== 0 : (i + 1) % 3 !== 0)) ? `1px solid ${A_COLORS.rule}` : 'none',
              borderBottom: `1px solid ${A_COLORS.rule}`,
            }}>
              <div style={{ fontFamily: A_FONT_SERIF, fontSize: 26, fontWeight: 700, letterSpacing: -0.4, color: A_COLORS.ink }}>
                {o.name}
              </div>
              <div style={{ fontFamily: A_FONT_MONO, fontSize: 11, color: A_COLORS.olive, letterSpacing: 1, textTransform: 'uppercase', marginTop: 6 }}>
                {o.role}
              </div>
              <div style={{ fontFamily: A_FONT_MONO, fontSize: 11, color: A_COLORS.faded, marginTop: 2 }}>
                {o.years}
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 48 }}>
          <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 2, color: A_COLORS.faded, textTransform: 'uppercase', marginBottom: 14 }}>
            Work cited / featured in
          </div>
          <div style={{ fontFamily: A_FONT_SERIF, fontSize: isMobile ? 19 : 22, lineHeight: 1.6, color: A_COLORS.ink, columnCount: isMobile ? 1 : 2, columnGap: 48 }}>
            {d.mentions.map((m, i) => (
              <div key={m} style={{ breakInside: 'avoid' }}>
                <span style={{ color: A_COLORS.rust, fontFamily: A_FONT_MONO, fontSize: 12, marginRight: 10 }}>◆</span>
                {m}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* ==== ON AIR / IN PRINT ==== */}
      <div id="appearances" style={{ padding: `${sectionPadY}px ${pagePadX}px`, borderBottom: `1px solid ${A_COLORS.rule}` }}>
        <div style={{ display: 'flex', alignItems: isMobile ? 'flex-start' : 'baseline', justifyContent: 'space-between', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 12 : 0, marginBottom: 36 }}>
          <div>
            <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 3, color: A_COLORS.rust, textTransform: 'uppercase' }}>§ 04 · On air · On screen</div>
            <h2 style={{ fontFamily: A_FONT_SERIF, fontSize: sectionTitleSize, margin: '14px 0 0', fontWeight: 700, letterSpacing: -1.2 }}>
              Media appearances
            </h2>
          </div>
          <div style={{ fontFamily: A_FONT_MONO, fontSize: 11, color: A_COLORS.faded, letterSpacing: 1.5, textTransform: 'uppercase', maxWidth: 320, textAlign: isMobile ? 'left' : 'right', lineHeight: 1.5 }}>
            Documentaries, interviews, and producing credits
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: 24 }}>
          {d.appearances.map((a, i) => (
            <a key={i} href={a.url} target="_blank" rel="noopener" style={{
              textDecoration: 'none', color: 'inherit',
              border: `1px solid ${A_COLORS.ink}`, background: A_COLORS.paper,
              padding: 0, display: 'flex', flexDirection: 'column',
              position: 'relative',
            }}>
              {/* film-strip top bar */}
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                padding: '10px 16px', borderBottom: `1px solid ${A_COLORS.ink}`,
                background: A_COLORS.oliveD, color: A_COLORS.paper,
              }}>
                <span style={{ fontFamily: A_FONT_STENCIL, fontSize: 12, letterSpacing: 3, textTransform: 'uppercase' }}>
                  {a.type}
                </span>
                <span style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 2, color: '#c9bfa5' }}>
                  REEL №{String(i + 1).padStart(2, '0')}
                </span>
              </div>
              <div style={{ padding: '22px 22px 24px' }}>
                <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 2, color: A_COLORS.rust, textTransform: 'uppercase', marginBottom: 8 }}>
                  {a.where}
                </div>
                <div style={{ fontFamily: A_FONT_SERIF, fontSize: isMobile ? 23 : 26, fontWeight: 700, letterSpacing: -0.4, color: A_COLORS.ink, lineHeight: 1.15 }}>
                  {a.title}
                </div>
                <div style={{ fontFamily: A_FONT_MONO, fontSize: 11, letterSpacing: 1, color: A_COLORS.olive, textTransform: 'uppercase', marginTop: 10 }}>
                  {a.role}
                </div>
                <p style={{ fontFamily: A_FONT_SERIF, fontSize: 15, lineHeight: 1.5, color: A_COLORS.faded, margin: '14px 0 0', fontStyle: 'italic' }}>
                  {a.note}
                </p>
                <div style={{ marginTop: 18, fontFamily: A_FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: A_COLORS.rust, textTransform: 'uppercase' }}>
                  Watch ↗
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>

      {/* ==== PRESS / QUOTES ==== */}
      <div id="press" style={{ padding: `${sectionPadY}px ${pagePadX}px`, background: A_COLORS.paperDark, borderBottom: `1px solid ${A_COLORS.rule}` }}>
        <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 3, color: A_COLORS.rust, textTransform: 'uppercase' }}>§ 05 · On the record</div>
        <h2 style={{ fontFamily: A_FONT_SERIF, fontSize: sectionTitleSize, margin: '14px 0 44px', fontWeight: 700, letterSpacing: -1.2 }}>
          Endorsements
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 32 }}>
          {d.quotes.slice(0, 4).map((q, i) => (
            <div key={i} style={{
              padding: isMobile ? '24px 22px' : '28px 32px', background: A_COLORS.paper,
              border: `1px solid ${A_COLORS.ink}`,
              position: 'relative',
            }}>
              <div style={{
                position: 'absolute', top: -14, left: 24,
                background: A_COLORS.paperDark, padding: '0 10px',
                fontFamily: A_FONT_STENCIL, fontSize: 36, color: A_COLORS.olive, lineHeight: 1,
              }}>"</div>
              <div style={{ fontFamily: A_FONT_SERIF, fontSize: isMobile ? 17 : 19, lineHeight: 1.5, fontStyle: 'italic', color: A_COLORS.ink }}>
                {q.text}
              </div>
              <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 24, height: 1, background: A_COLORS.rust }} />
                <div style={{ fontFamily: A_FONT_MONO, fontSize: 11, letterSpacing: 1, textTransform: 'uppercase', lineHeight: 1.5 }}>
                  <span style={{ color: A_COLORS.ink, fontWeight: 600 }}>{q.who}</span>
                  <span style={{ color: A_COLORS.faded, marginLeft: 6 }}>· {q.where}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ==== CONTACT ==== */}
      <div id="contact" style={{ padding: `${isMobile ? 56 : 80}px ${pagePadX}px`, background: A_COLORS.oliveD, color: A_COLORS.paper }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 60, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 3, color: '#c9bfa5', textTransform: 'uppercase' }}>§ 06 · Transmit</div>
            <h2 style={{ fontFamily: A_FONT_SERIF, fontSize: contactTitleSize, margin: '14px 0 0', fontWeight: 700, letterSpacing: -1.6, color: '#f5f1e3', lineHeight: 0.95 }}>
              Got a story?
            </h2>
            <p style={{ fontFamily: A_FONT_SERIF, fontSize: isMobile ? 18 : 20, lineHeight: 1.5, color: '#d4cfa8', marginTop: 20, maxWidth: 420 }}>
              Tips, assignments, bookings, or speaking — the inbox is open.
            </p>
          </div>
          <div>
            {[
              ['E-mail', d.email, `mailto:${d.email}`],
              ['Bluesky', '@paulszoldra.com', d.bluesky],
              ['LinkedIn', '/in/paulszoldra', d.linkedin],
            ].map(([k, v, url]) => (
              <a key={k} href={url} target="_blank" rel="noopener" style={{
                display: 'flex', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'baseline',
                flexDirection: isMobile ? 'column' : 'row',
                gap: isMobile ? 8 : 16,
                padding: '18px 0', borderBottom: `1px solid rgba(245,241,227,0.18)`,
                textDecoration: 'none', color: 'inherit',
              }}>
                <span style={{ fontFamily: A_FONT_MONO, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: '#c9bfa5' }}>{k}</span>
                <span style={{ fontFamily: A_FONT_SERIF, fontSize: isMobile ? 20 : 22, color: '#f5f1e3', wordBreak: 'break-word' }}>{v} <span style={{ color: '#a38b5a' }}>↗</span></span>
              </a>
            ))}
          </div>
        </div>
        <div style={{
          marginTop: 64, paddingTop: 24, borderTop: '1px solid rgba(245,241,227,0.18)',
          display: 'flex', justifyContent: 'space-between', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 10 : 24,
          fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 2, color: '#a39972', textTransform: 'uppercase',
        }}>
          <span>© {new Date().getFullYear()} Paul Szoldra · All rights reserved</span>
          <span>—— END OF DISPATCH ——</span>
          <span>Semper Fidelis</span>
        </div>
      </div>
    </div>
  );
}

window.FieldNotesPortfolio = FieldNotesPortfolio;