// Ideas (combined Writing + Press) + Stock Thoughts + Contact

// The body of the Ideas content (featured thesis + essays + Twitter + press),
// without a page hero — reused inside the Investments page's Ideas section.
const IdeasBody = () => {
  const myEssays = [
    { d: '04.22.26', t: 'A Management Compensation Framework for the AI Transition', r: '14 MIN', tag: 'ESSAY', x: 'Re-basing CEO comp for the AI transition. The peer-index TSR metric punishes the very investments that get you through.', metrics: '142 likes · 38 reposts' },
    { d: '04.08.26', t: 'How to Encourage Long-Term vs. Short-Term Thinking', r: '9 MIN', tag: 'ESSAY', x: 'Three-year horizons fund three-month thinking. The fix isn\'t more targets — it\'s fewer, weighted to outcomes that don\'t print until year four.', metrics: '208 likes · 51 reposts' },
    { d: '03.30.26', t: 'The Business of a Hedge Fund', r: '22 MIN', tag: 'ESSAY', x: 'A long-form on what hedge funds are for, what they\'re bad at, and why the industry\'s structural incentives have drifted from its founding logic.', metrics: '410 likes · 88 reposts' },
  ];

  const externalRefs = [
    ['04.18.26', 'Bloomberg', 'On the constructive activist case for incumbents in the AI transition', 'INTERVIEW'],
    ['03.04.26', 'Wharton Magazine', 'Featured in the Spring issue on practitioner-academic crossover', 'PROFILE'],
    ['02.20.26', 'Capital Allocators Podcast', 'Episode 412 — Patient capital in a quarterly world', 'PODCAST'],
    ['01.10.26', 'The Information', 'Quoted on the governance gap at AI-transitioning incumbents', 'QUOTE'],
    ['11.04.25', 'Institutional Investor', 'Top 10 emerging activists to watch in 2026', 'LIST'],
    ['09.12.25', 'Brent Beshore — Permanent Equity essays', 'Reference reading on long-duration ownership', 'REFERENCE'],
    ['07.30.25', 'Modest Proposal — quarterly letters', 'On the structural disadvantages of quarterly capital', 'REFERENCE'],
    ['05.18.25', 'Marc Rubinstein — Net Interest', 'Reference reading on financial-services activism', 'REFERENCE'],
  ];

  return (
    <React.Fragment>
      {/* FEATURED LEAD POST */}
      <section style={{ padding: '0 56px', borderBottom: `1px solid ${tokens.inkLine}` }}>
        <div style={{ background: tokens.ink, color: tokens.bg, padding: '64px 56px', position: 'relative', overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: '64px', alignItems: 'flex-start' }}>
            <div>
              <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.18em', color: tokens.ochre, marginBottom: '24px' }}>● FEATURED THESIS · 04.28.26</div>
              <h2 style={{ fontSize: '60px', lineHeight: 0.95, letterSpacing: '-0.04em', fontWeight: 400, margin: 0, marginBottom: '32px', maxWidth: '900px' }}>
                Activism is becoming what private equity became — <span style={{ fontStyle: 'italic', fontWeight: 300, color: 'rgba(244,241,234,0.55)' }}>a domain-expertise business</span>.
              </h2>
              <p style={{ fontSize: '19px', lineHeight: 1.5, letterSpacing: '-0.01em', color: 'rgba(244,241,234,0.85)', maxWidth: '780px', marginBottom: '24px' }}>
                Twenty years ago, private equity differentiated on capital. By 2015, capital was a commodity — the winning firms were the ones with sector specialists, operating partners, and playbooks for actually inflecting the operations of a business. Public-markets activism is now in the early innings of the same evolution.
              </p>
              <p style={{ fontSize: '17px', lineHeight: 1.6, color: 'rgba(244,241,234,0.7)', maxWidth: '780px', marginBottom: '24px' }}>
                The next decade of activist returns will not go to investors who write louder letters. It will go to those who bring real, useful domain expertise into the boardroom — and who are aligned and patient enough to deploy it across a full cycle.
              </p>
              <p style={{ fontSize: '17px', lineHeight: 1.6, color: 'rgba(244,241,234,0.7)', maxWidth: '780px' }}>
                The interesting part: alignment and patience alone are sufficient to have impact, for three structural reasons. <strong style={{ color: tokens.bg, fontWeight: 500 }}>(1)</strong> Being a CEO is lonely — there are very few honest voices in the room without a fee meter running. <strong style={{ color: tokens.bg, fontWeight: 500 }}>(2)</strong> Information flows in large organizations are imperfect — bad news gets re-framed three times before it reaches the board. <strong style={{ color: tokens.bg, fontWeight: 500 }}>(3)</strong> Public-market structure — quarterly cycles, peer-index comp, sell-side consensus — actively punishes the long-term decisions the AI transition demands. An aligned, patient owner is the rarest and most useful input a public-company CEO has access to.
              </p>
              <div style={{ display: 'flex', gap: '24px', marginTop: '40px', fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.06em', color: 'rgba(244,241,234,0.5)' }}>
                <span>ESSAY · 18 MIN READ</span>
                <span>UPDATED WEEKLY</span>
                <span style={{ color: tokens.ochre }}>READ FULL THESIS →</span>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', borderLeft: '1px solid rgba(244,241,234,0.15)', paddingLeft: '32px' }}>
              <div style={{ fontFamily: fontMono, fontSize: '10px', letterSpacing: '0.18em', color: 'rgba(244,241,234,0.5)', marginBottom: '8px' }}>THE PARALLEL</div>
              {[
                ['2005', 'PE: capital is the differentiator'],
                ['2015', 'PE: operating partners + sector depth'],
                ['2025', 'Activism: capital + a louder letter'],
                ['2035', 'Activism: domain expertise + alignment'],
              ].map(([y, t], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: '12px', padding: '14px 0', borderTop: '1px solid rgba(244,241,234,0.12)', alignItems: 'baseline' }}>
                  <div style={{ fontFamily: fontMono, fontSize: '12px', color: i === 3 ? tokens.ochre : 'rgba(244,241,234,0.5)', letterSpacing: '0.06em' }}>{y}</div>
                  <div style={{ fontSize: '14px', color: i === 3 ? tokens.bg : 'rgba(244,241,234,0.75)', lineHeight: 1.4, letterSpacing: '-0.005em', fontWeight: i === 3 ? 500 : 400 }}>{t}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ position: 'absolute', inset: 0, opacity: 0.05, backgroundImage: 'repeating-linear-gradient(45deg, #fff 0 1px, transparent 1px 24px)', pointerEvents: 'none' }}></div>
        </div>
      </section>

      {/* MY THINKING */}
      <section style={{ padding: '80px 56px', display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: '64px', borderBottom: `1px solid ${tokens.inkLine}` }}>
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: `1px solid ${tokens.ink}`, paddingTop: '16px', marginBottom: '24px' }}>
            <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.18em' }}>MY THINKING — ESSAYS</div>
            <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.06em', color: tokens.inkMute }}>UPDATED WEEKLY</div>
          </div>
          {myEssays.map((p, i) => (
            <article key={i} style={{ padding: '28px 0', borderBottom: `1px solid ${tokens.inkLine}`, cursor: 'pointer' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.12em', color: tokens.inkMute, marginBottom: '14px' }}>
                <span>{p.d}</span>
                <span>{p.tag} · {p.r}</span>
              </div>
              <h3 style={{ fontSize: '28px', letterSpacing: '-0.025em', lineHeight: 1.15, fontWeight: 400, margin: 0, marginBottom: '12px' }}>{p.t}</h3>
              <p style={{ fontSize: '15px', color: tokens.inkSoft, lineHeight: 1.55, margin: 0, marginBottom: '16px', maxWidth: '640px' }}>{p.x}</p>
              <div style={{ fontFamily: fontMono, fontSize: '11px', color: tokens.inkSoft, letterSpacing: '0.06em', display: 'flex', gap: '24px' }}>
                <span>READ →</span>
                <span style={{ color: tokens.inkMute }}>{p.metrics}</span>
              </div>
            </article>
          ))}
        </div>

        <aside>
          <div style={{ position: 'sticky', top: '90px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: `1px solid ${tokens.ink}`, paddingTop: '16px', marginBottom: '20px' }}>
              <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.18em' }}>TWITTER · @DURDANETA</div>
              <a href="https://twitter.com/DUrdaneta" target="_blank" rel="noopener noreferrer" style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.06em', color: tokens.ink, textDecoration: 'none' }}>FOLLOW ↗</a>
            </div>
            {[
              { t: '2h', body: 'The most underpriced asset in public markets right now is patient capital. Three-year horizons fund three-month thinking. We\'re running the experiment in reverse.', stats: '↻ 38   ♥ 142' },
              { t: '1d', body: 'A reminder for activist watchers: a public letter is the documentation of work that\'s already been done. If it\'s the opening move, you\'ve already lost the engagement.', stats: '↻ 51   ♥ 208' },
              { t: '3d', body: 'Spent the morning re-reading the 2003 Buffett shareholder letter. The bit on incentive comp is the most under-quoted paragraph in modern finance.', stats: '↻ 22   ♥ 94' },
              { t: '1w', body: 'AI capex is being modeled like 2014 cloud capex. It\'s closer to 1995 fiber capex. The asset is the network effect, not the hardware.', stats: '↻ 88   ♥ 410' },
            ].map((tw, i) => (
              <div key={i} style={{ background: tokens.paper, border: `1px solid ${tokens.inkLine}`, padding: '18px', marginBottom: '12px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px', fontFamily: fontMono, fontSize: '11px', color: tokens.inkMute }}>
                  <span style={{ color: tokens.ink, fontFamily: fontDisplay, fontSize: '13px', fontWeight: 500 }}>Daniel Urdaneta <span style={{ color: tokens.inkMute, fontWeight: 400 }}>@DUrdaneta</span></span>
                  <span>{tw.t}</span>
                </div>
                <div style={{ fontSize: '14px', lineHeight: 1.5, marginBottom: '12px' }}>{tw.body}</div>
                <div style={{ fontFamily: fontMono, fontSize: '11px', color: tokens.inkMute, display: 'flex', justifyContent: 'space-between' }}>
                  <span>{tw.stats}</span>
                  <span>↗</span>
                </div>
              </div>
            ))}
            <div style={{ fontFamily: fontMono, fontSize: '10px', letterSpacing: '0.16em', color: tokens.inkMute, marginTop: '12px', textAlign: 'center' }}>
              ◇ EMBEDDED TIMELINE · LIVE
            </div>
          </div>
        </aside>
      </section>

      {/* EXTERNAL REFERENCES & PRESS */}
      <Section label="External" title="Press, references, and reading." sub="Where I've been quoted, interviewed, or written about — and the outside thinking that has informed mine." style={{ background: tokens.bgAlt }}>
        <div style={{ borderTop: `1px solid ${tokens.ink}` }}>
          {externalRefs.map((row, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '120px 220px 1fr 140px 60px', gap: '24px', padding: '24px 0', borderBottom: `1px solid ${tokens.inkLine}`, alignItems: 'center', cursor: 'pointer' }}>
              <div style={{ fontFamily: fontMono, fontSize: '12px', color: tokens.inkMute, letterSpacing: '0.06em' }}>{row[0]}</div>
              <div style={{ fontSize: '17px', letterSpacing: '-0.01em' }}>{row[1]}</div>
              <div style={{ fontSize: '15px', color: tokens.inkSoft, letterSpacing: '-0.005em' }}>{row[2]}</div>
              <div style={{ fontFamily: fontMono, fontSize: '10px', color: tokens.inkMute, letterSpacing: '0.16em' }}>{row[3]}</div>
              <div style={{ textAlign: 'right', fontFamily: fontMono, fontSize: '14px', color: tokens.ink }}>↗</div>
            </div>
          ))}
        </div>
      </Section>
    </React.Fragment>
  );
};

// NOTE: The old combined-content "Ideas" page now lives inside the Investments
// page (via <IdeasBody/>), and the #ideas route belongs to the new media shelf
// in page-ideas.jsx. IdeasBody is still exported below for Investments to use.

const StockThoughts = () => {
  const writeups = [
    { ticker: 'PAYO', name: 'Payoneer', px: '$8.42', ch: '+2.14%', up: true, mcap: '$3.1B', shape: 'volatile-up', color: '#FF5500', accent: '#FF8855',
      title: 'The float is the asset.', sub: 'A re-rating thesis on customer-funds monetization and operating-model leverage.', date: '04.18.26', pages: 14 },
    { ticker: 'ASMDEE', name: 'Asmodee', px: '€42.10', ch: '+0.87%', up: true, mcap: '€1.8B', shape: 'recovery', color: '#7A2D8E', accent: '#A85EBD',
      title: 'The most under-monetized IP catalog in entertainment.', sub: 'Backlog economics, digital licensing, and a governance reset.', date: '04.02.26', pages: 9 },
    { ticker: 'IIIV', name: 'i3 Verticals', px: '$31.04', ch: '−0.42%', up: false, mcap: '$1.0B', shape: 'breakout', color: '#0E7C3A', accent: '#34A763',
      title: 'Post-divestiture, what remains is the franchise.', sub: 'Healthcare and Education unit economics surface.', date: '03.20.26', pages: 6 },
  ];

  return (
    <div>
      <section style={{ padding: '80px 56px', borderBottom: `1px solid ${tokens.inkLine}` }}>
        <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.18em', color: tokens.inkMute, marginBottom: '24px' }}>06 · STOCK THOUGHTS</div>
        <h1 style={{ fontSize: '88px', lineHeight: 0.92, letterSpacing: '-0.05em', fontWeight: 400, margin: 0, marginBottom: '32px' }}>
          Stock thoughts.
        </h1>
        <p style={{ fontSize: '22px', lineHeight: 1.45, letterSpacing: '-0.015em', color: tokens.inkSoft, maxWidth: '780px' }}>
          Long-form write-ups on the names I'm working on — and the ones I'm watching. Each piece is a snapshot, not a recommendation.
        </p>
      </section>

      <section style={{ padding: '0 56px' }}>
        {writeups.map((w, i) => (
          <article key={i} style={{ padding: '64px 0', borderBottom: `1px solid ${tokens.inkLine}`, display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: '56px', alignItems: 'start' }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '20px' }}>
                <div style={{ width: '32px', height: '32px', background: w.color, borderRadius: '4px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontFamily: fontMono, fontSize: '11px' }}>{w.ticker.slice(0,2)}</div>
                <div style={{ fontFamily: fontMono, fontSize: '12px', letterSpacing: '0.1em' }}>{w.ticker} · {w.name.toUpperCase()}</div>
              </div>
              <h2 style={{ fontSize: '36px', letterSpacing: '-0.03em', lineHeight: 1.1, fontWeight: 400, margin: 0, marginBottom: '16px' }}>{w.title}</h2>
              <p style={{ fontSize: '17px', color: tokens.inkSoft, lineHeight: 1.5, letterSpacing: '-0.005em', marginBottom: '24px' }}>{w.sub}</p>
              <div style={{ display: 'flex', gap: '32px', fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.06em', color: tokens.inkMute }}>
                <span>PUBLISHED {w.date}</span>
                <span>{w.pages} PAGES</span>
                <span>MCAP {w.mcap}</span>
              </div>
              <button style={{ marginTop: '32px', padding: '12px 18px', background: tokens.ink, color: tokens.bg, border: 'none', cursor: 'pointer', fontSize: '13px', letterSpacing: '0.01em', fontFamily: fontDisplay }}>
                Read write-up →
              </button>
            </div>
            <div>
              <StockChart shape={w.shape} ticker={w.ticker} px={w.px} pxChange={w.ch} color={w.color} accent={w.accent} height={260} />
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '0', marginTop: '12px', border: `1px solid ${tokens.inkLine}`, background: tokens.paper }}>
                {[['P/E (FY1)','12.4'],['EV/EBITDA','8.1'],['FCF Yield','9.2%'],['Net cash','$320M']].map(([k,v]) => (
                  <div key={k} style={{ padding: '14px 16px', borderRight: `1px solid ${tokens.inkLine}` }}>
                    <div style={{ fontFamily: fontMono, fontSize: '9px', letterSpacing: '0.16em', color: tokens.inkMute, marginBottom: '4px' }}>{k.toUpperCase()}</div>
                    <div style={{ fontFamily: fontDisplay, fontSize: '17px', letterSpacing: '-0.02em' }}>{v}</div>
                  </div>
                ))}
              </div>
              <div style={{ fontFamily: fontMono, fontSize: '10px', letterSpacing: '0.16em', color: tokens.inkMute, marginTop: '8px' }}>◇ STYLIZED · LIVE WIDGET ON DEPLOYMENT</div>
            </div>
          </article>
        ))}
      </section>
    </div>
  );
};

const Contact = () => (
  <div>
    <section style={{ padding: '120px 56px', borderBottom: `1px solid ${tokens.inkLine}`, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: '80px' }}>
      <div>
        <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.18em', color: tokens.inkMute, marginBottom: '24px' }}>07 · CONTACT</div>
        <h1 style={{ fontSize: '88px', lineHeight: 0.92, letterSpacing: '-0.05em', fontWeight: 400, margin: 0, marginBottom: '32px' }}>
          Get in touch.
        </h1>
        <p style={{ fontSize: '22px', lineHeight: 1.45, letterSpacing: '-0.015em', color: tokens.inkSoft, maxWidth: '640px', marginBottom: '40px' }}>
          For inbound ideas, press inquiries, speaking engagements, or just to say hello. The best engagements have started this way.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', maxWidth: '600px' }}>
          <input placeholder="Name" style={{ padding: '14px 16px', border: `1px solid ${tokens.inkLine}`, background: tokens.paper, fontSize: '14px', fontFamily: fontDisplay, letterSpacing: '-0.005em' }} />
          <input placeholder="Email" style={{ padding: '14px 16px', border: `1px solid ${tokens.inkLine}`, background: tokens.paper, fontSize: '14px', fontFamily: fontDisplay, letterSpacing: '-0.005em' }} />
          <input placeholder="Subject" style={{ gridColumn: 'span 2', padding: '14px 16px', border: `1px solid ${tokens.inkLine}`, background: tokens.paper, fontSize: '14px', fontFamily: fontDisplay, letterSpacing: '-0.005em' }} />
          <textarea placeholder="Message" rows="5" style={{ gridColumn: 'span 2', padding: '14px 16px', border: `1px solid ${tokens.inkLine}`, background: tokens.paper, fontSize: '14px', fontFamily: fontDisplay, letterSpacing: '-0.005em', resize: 'vertical' }}></textarea>
          <button style={{ gridColumn: 'span 2', padding: '14px 22px', background: tokens.ink, color: tokens.bg, border: 'none', cursor: 'pointer', fontSize: '13px', letterSpacing: '0.01em', fontFamily: fontDisplay, justifySelf: 'start' }}>
            Send →
          </button>
        </div>
      </div>
      <div>
        <div style={{ borderTop: `1px solid ${tokens.ink}`, paddingTop: '20px' }}>
          <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.18em', color: tokens.inkMute, marginBottom: '12px' }}>DIRECT</div>
          <a href="mailto:daniel@urdaneta.io" style={{ fontSize: '20px', letterSpacing: '-0.02em', color: tokens.ink, textDecoration: 'none', borderBottom: `1px solid ${tokens.inkLine}`, paddingBottom: '4px' }}>daniel@urdaneta.io</a>
        </div>
        <div style={{ borderTop: `1px solid ${tokens.inkLine}`, paddingTop: '20px', marginTop: '40px' }}>
          <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.18em', color: tokens.inkMute, marginBottom: '12px' }}>ELSEWHERE</div>
          <a href="https://www.linkedin.com/in/daniel-urdaneta-992a2510/" target="_blank" rel="noopener noreferrer" style={{ display: 'block', fontSize: '17px', padding: '6px 0', color: tokens.ink, textDecoration: 'none' }}>LinkedIn ↗</a>
          <a href="https://twitter.com/DUrdaneta" target="_blank" rel="noopener noreferrer" style={{ display: 'block', fontSize: '17px', padding: '6px 0', color: tokens.ink, textDecoration: 'none' }}>Twitter / X ↗</a>
          <a href="https://vimeo.com/1187373736" target="_blank" rel="noopener noreferrer" style={{ display: 'block', fontSize: '17px', padding: '6px 0', color: tokens.ink, textDecoration: 'none' }}>Vimeo ↗</a>
        </div>
      </div>
    </section>
  </div>
);

window.IdeasBody = IdeasBody;
window.StockThoughts = StockThoughts;
window.Contact = Contact;