// About Me (background + experience + lecture) + Innovation Activism pages

// ── Inline documents for one experience (firm). Lazy: only fetches when the
// section is expanded. Mirrors the Investments doc-embed pattern, keyed by the
// employer (warburg | valueact | reinvent | finchbay).
const ExperienceDocs = ({ employer, accent }) => {
  const isMobile = useIsMobile();
  const [docs, setDocs] = React.useState(null);
  const [err, setErr] = React.useState('');

  React.useEffect(() => {
    let cancelled = false;
    const client = window._supabaseClient;
    if (!client) { setDocs([]); return; }
    (async () => {
      const { data, error } = await client
        .from('experience_documents')
        .select('name, url, doc_type, sort_order')
        .eq('employer', employer)
        .order('sort_order', { ascending: true });
      if (cancelled) return;
      if (error) { setErr(error.message || 'Could not load documents'); setDocs([]); }
      else setDocs(data || []);
    })();
    return () => { cancelled = true; };
  }, [employer]);

  if (docs === null) {
    return <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.1em', color: tokens.inkMute }}>Loading documents…</div>;
  }
  if (docs.length === 0) {
    return (
      <div style={{ border: `1px dashed ${tokens.inkLine}`, borderRadius: '6px', padding: '24px', fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.06em', color: tokens.inkMute, lineHeight: 1.7 }}>
        {err ? `COULDN'T LOAD — ${err.toUpperCase()}` : 'NO DOCUMENTS YET'}
        <div style={{ marginTop: '8px', textTransform: 'none', letterSpacing: 0 }}>
          Upload a file to <code>experience-docs/{employer}/</code> and add a row in <code>experience_documents</code> to embed it here.
        </div>
      </div>
    );
  }
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '28px' }}>
      {docs.map((d, i) => {
        const type = (d.doc_type || (/\.pdf($|\?)/i.test(d.url) ? 'pdf' : /\.(png|jpe?g|gif|webp|svg)($|\?)/i.test(d.url) ? 'image' : 'link')).toLowerCase();
        return (
          <figure key={i} style={{ margin: 0 }}>
            <figcaption style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '10px', gap: '16px' }}>
              <span style={{ fontSize: '15px', letterSpacing: '-0.01em', fontWeight: 500 }}>
                <span style={{ fontFamily: fontMono, fontSize: '11px', color: tokens.inkMute, marginRight: '10px' }}>{String(i + 1).padStart(2, '0')}</span>
                {d.name}
              </span>
              <a href={d.url} target="_blank" rel="noopener noreferrer" style={{ fontFamily: fontMono, fontSize: '10px', letterSpacing: '0.08em', color: accent, whiteSpace: 'nowrap', borderBottom: `1px solid ${tokens.inkLine}`, paddingBottom: '2px' }}>OPEN ↗</a>
            </figcaption>
            {type === 'pdf' && (
              <iframe src={`${d.url}#view=FitH`} title={d.name} style={{ width: '100%', height: isMobile ? '70vh' : '720px', border: `1px solid ${tokens.inkLine}`, borderRadius: '4px', background: tokens.paper, display: 'block' }} />
            )}
            {type === 'image' && (
              <img src={d.url} alt={d.name} style={{ width: '100%', border: `1px solid ${tokens.inkLine}`, borderRadius: '4px', display: 'block' }} />
            )}
            {type === 'link' && (
              <a href={d.url} target="_blank" rel="noopener noreferrer" style={{ display: 'inline-block', padding: '12px 18px', border: `1px solid ${tokens.ink}`, fontSize: '13px', fontFamily: fontDisplay, color: tokens.ink }}>Open document ↗</a>
            )}
          </figure>
        );
      })}
    </div>
  );
};

// One expandable firm in My Background. Click the header to reveal a short
// description, any firm-specific extras, and the embedded documents.
const ExperienceItem = ({ exp, index }) => {
  const isMobile = useIsMobile();
  const [open, setOpen] = React.useState(false);
  const accent = exp.color || tokens.ink;
  return (
    <div style={{ borderBottom: `1px solid ${tokens.inkLine}` }}>
      <button onClick={() => setOpen((v) => !v)} style={{ width: '100%', background: open ? tokens.bgAlt : 'none', border: 'none', cursor: 'pointer', textAlign: 'left', padding: isMobile ? '24px 18px' : '28px 24px', display: 'grid', gridTemplateColumns: isMobile ? '46px 1fr 28px' : '56px 1fr auto 28px', alignItems: 'center', gap: isMobile ? '16px' : '24px', borderLeft: `3px solid ${open ? accent : 'transparent'}` }}>
        <Logo domain={exp.domain} ticker={exp.short} color={accent} size={isMobile ? 40 : 50} />
        <div>
          <div style={{ fontSize: isMobile ? '22px' : '26px', letterSpacing: '-0.025em', lineHeight: 1.1 }}>{exp.name}</div>
          <div style={{ fontFamily: fontMono, fontSize: '11px', color: tokens.inkMute, letterSpacing: '0.08em', marginTop: '6px', textTransform: 'uppercase' }}>{exp.role}</div>
        </div>
        {!isMobile && (
          <div style={{ fontFamily: fontMono, fontSize: '11px', color: tokens.inkMute, letterSpacing: '0.1em', textTransform: 'uppercase', textAlign: 'right' }}>{exp.kind}</div>
        )}
        <div style={{ fontFamily: fontMono, fontSize: '18px', color: accent, textAlign: 'center', transform: open ? 'rotate(45deg)' : 'none', transition: 'transform 0.2s ease' }}>+</div>
      </button>

      {open && (
        <div style={{ padding: isMobile ? '4px 18px 36px' : '8px 24px 44px 83px' }}>
          <p style={{ fontSize: '17px', lineHeight: 1.6, color: tokens.inkSoft, letterSpacing: '-0.005em', maxWidth: '760px', marginTop: 0 }}>{exp.blurb}</p>

          {exp.holdings && (
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginBottom: '8px' }}>
              {exp.holdings.map((h) => (
                <span key={h} style={{ fontFamily: fontMono, fontSize: '10px', letterSpacing: '0.08em', color: tokens.inkMute, border: `1px solid ${tokens.inkLine}`, borderRadius: '999px', padding: '5px 12px', textTransform: 'uppercase' }}>{h}</span>
              ))}
            </div>
          )}

          {exp.pillars && (
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: '20px', margin: '28px 0 8px' }}>
              {exp.pillars.map((p, i) => (
                <div key={i} style={{ borderTop: `2px solid ${accent}`, paddingTop: '14px' }}>
                  <div style={{ fontFamily: fontMono, fontSize: '10px', letterSpacing: '0.14em', color: tokens.inkMute, marginBottom: '8px' }}>{String(i + 1).padStart(2, '0')}</div>
                  <div style={{ fontSize: '18px', letterSpacing: '-0.015em', marginBottom: '8px', lineHeight: 1.15 }}>{p.t}</div>
                  <div style={{ fontSize: '14px', lineHeight: 1.55, color: tokens.inkSoft }}>{p.d}</div>
                </div>
              ))}
            </div>
          )}

          <div style={{ marginTop: '32px' }}>
            <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.18em', color: tokens.inkMute, borderTop: `1px solid ${tokens.ink}`, paddingTop: '16px', marginBottom: '24px' }}>DOCUMENTS & PRESENTATIONS</div>
            <ExperienceDocs employer={exp.key} accent={accent} />
          </div>
        </div>
      )}
    </div>
  );
};

// Small visual "note" card for the School & Life subsection.
const LifeNote = ({ kicker, headline, note, accent, tags }) => (
  <div style={{ border: `1px solid ${tokens.inkLine}`, borderTop: `3px solid ${accent}`, borderRadius: '4px', background: tokens.paper, padding: '24px', display: 'flex', flexDirection: 'column', gap: '12px', minHeight: '170px' }}>
    <div style={{ fontFamily: fontMono, fontSize: '10px', letterSpacing: '0.18em', color: tokens.inkMute, textTransform: 'uppercase' }}>{kicker}</div>
    <div style={{ fontSize: '21px', letterSpacing: '-0.02em', lineHeight: 1.12 }}>{headline}</div>
    <div style={{ fontSize: '14px', lineHeight: 1.55, color: tokens.inkSoft, letterSpacing: '-0.005em', marginTop: 'auto' }}>{note}</div>
    {tags && (
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
        {tags.map((t) => (
          <span key={t} style={{ fontFamily: fontMono, fontSize: '9px', letterSpacing: '0.1em', color: accent, border: `1px solid ${accent}`, borderRadius: '999px', padding: '3px 9px', textTransform: 'uppercase' }}>{t}</span>
        ))}
      </div>
    )}
  </div>
);

const About = ({ focus }) => {
  const ideasRef = React.useRef(null);
  const E = window.employers || {};

  // Firms, in the order I worked at them — each expands to docs + extras.
  const experiences = [
    {
      key: 'warburg', name: 'Warburg Pincus', short: 'WP', domain: 'warburgpincus.com',
      color: (E.warburg || {}).color || '#0A2540', role: 'Private Equity', kind: 'Private Equity',
      blurb: 'Private-equity investing in software and tech-enabled services, working alongside management as an owner rather than a financier. Value came from operational improvement and strategic clarity — among the businesses I worked with were MercuryGate, BlueGrace Logistics, and Dude Solutions.',
      holdings: ['MercuryGate', 'BlueGrace Logistics', 'Dude Solutions'],
    },
    {
      key: 'valueact', name: 'ValueAct Capital', short: 'VA', domain: 'valueact.com',
      color: (E.valueact || {}).color || '#1A4FB5', role: 'Public Equities · Activism', kind: 'Public Activism',
      blurb: 'Constructive, behind-the-scenes activism in large- and mid-cap companies. This is where I learned the craft that defines how I invest today: earning a board\'s trust, doing the primary work, and catalyzing change without public confrontation. Engagements spanned Citigroup, Morgan Stanley, Alliance Data Systems, and Royal Vopak.',
      holdings: ['Citigroup', 'Morgan Stanley', 'Alliance Data Systems', 'Royal Vopak'],
    },
    {
      key: 'reinvent', name: 'Reinvent Capital', short: 'RC', domain: 'reinventcapital.com',
      color: (E.reinvent || {}).color || '#C9622E', role: 'Venture · Growth', kind: 'Venture',
      blurb: 'Venture and growth investing in category-defining technology companies — a front-row view of how technology re-prices incumbents and creates the dispersion I now look to help public companies navigate. Investments included Joby Aviation and Aurora (both now public), SpaceX, Oscar, Matterport, and others.',
      holdings: ['Joby', 'Aurora', 'SpaceX', 'Oscar', 'Matterport', 'Nimble.ai', 'Raya'],
    },
    {
      key: 'finchbay', name: 'Finch Bay Capital', short: 'FB', domain: 'finchbaycapital.com',
      color: (E.finchbay || {}).color || '#1F6F5C', role: 'Investment Manager · Current', kind: 'Activist Fund',
      blurb: 'I invest today as an Investment Manager at Finch Bay Capital, a London-based, fundamentally-hedged activist creating durable improvements in mid-cap companies. We call it proactive ownership: returns generated through deep fundamental work and genuine partnership with management, with investment-level hedges that isolate our returns to where we actually have an edge.',
      pillars: [
        { t: 'Identify mispricings', d: 'Smaller, overlooked, or structurally idiosyncratic companies — recent spin-offs, businesses mid-transformation — where price and intrinsic value have come apart.' },
        { t: 'Act as owners', d: 'Drive lasting improvements by partnering with open-minded management behind the scenes — using reputation, network, and patience rather than public spats.' },
        { t: 'Hedge fundamentally', d: 'Isolate returns from selection and activism by hedging out the macro, sector, and FX variables where we hold no edge.' },
      ],
    },
  ];

  // Deep-link from the Home "featured lecture" card / old #lecture route.
  React.useEffect(() => {
    if (focus === 'ideas' && ideasRef.current) {
      const t = setTimeout(() => ideasRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' }), 250);
      return () => clearTimeout(t);
    }
  }, [focus]);

  return (
    <div>
      {/* HERO */}
      <section style={{ padding: '80px 56px 72px', borderBottom: `1px solid ${tokens.inkLine}`, display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: '64px' }}>
        <div>
          <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.18em', color: tokens.inkMute, marginBottom: '24px' }}>01 · ABOUT ME</div>
          <h1 style={{ fontSize: '88px', lineHeight: 0.92, letterSpacing: '-0.05em', fontWeight: 400, margin: 0, marginBottom: '32px' }}>
            Daniel<br/>Urdaneta.
          </h1>
          <p style={{ fontSize: '22px', lineHeight: 1.45, letterSpacing: '-0.015em', color: tokens.inkSoft, maxWidth: '720px' }}>
            I'm an investor who has spent his career as an owner of businesses — across private equity, public-market activism, and venture. I invest today at Finch Bay Capital, where we partner with the management teams of mid-cap companies to catalyze durable improvements.
          </p>
          <p style={{ fontSize: '17px', lineHeight: 1.6, letterSpacing: '-0.005em', color: tokens.inkSoft, maxWidth: '680px', marginTop: '24px' }}>
            The thread across all of it is the same: returns come from doing real work and being a genuine partner to management — not from capital or a louder voice. The pages below trace where that conviction came from, and a lecture where I try to articulate it.
          </p>
          <div style={{ display: 'flex', gap: '16px', marginTop: '40px', flexWrap: 'wrap' }}>
            <a href="https://www.linkedin.com/in/daniel-urdaneta-992a2510/" target="_blank" rel="noopener noreferrer" style={{ padding: '14px 22px', background: tokens.ink, color: tokens.bg, fontSize: '13px', letterSpacing: '0.01em', borderRadius: '2px', textDecoration: 'none', fontFamily: fontDisplay, display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5 1.78 1.78 0 016.5 8.25zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93a1.5 1.5 0 00-1.62 1.5V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/></svg>
              Connect on LinkedIn
            </a>
            <a href="mailto:daniel@urdaneta.io" style={{ padding: '14px 22px', border: `1px solid ${tokens.ink}`, fontSize: '13px', letterSpacing: '0.01em', textDecoration: 'none', color: tokens.ink, fontFamily: fontDisplay }}>
              daniel@urdaneta.io
            </a>
          </div>
        </div>
        <div>
          <Placeholder label="Portrait · 4:5" ratio="4/5" />
          <div style={{ fontFamily: fontMono, fontSize: '10px', letterSpacing: '0.16em', color: tokens.inkMute, marginTop: '12px' }}>
            DROP IN AT site/portrait.jpg
          </div>
        </div>
      </section>

      {/* MY BACKGROUND */}
      <section style={{ padding: '80px 56px 40px' }}>
        <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.18em', color: tokens.inkMute, marginBottom: '16px' }}>02 · MY BACKGROUND</div>
        <h2 style={{ fontSize: '44px', letterSpacing: '-0.035em', fontWeight: 400, margin: 0, lineHeight: 1.05, maxWidth: '820px' }}>
          Where the conviction came from.
        </h2>
      </section>

      {/* — School & Life */}
      <section style={{ padding: '8px 56px 56px' }}>
        <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.16em', color: tokens.inkMute, marginBottom: '24px', borderBottom: `1px solid ${tokens.inkLine}`, paddingBottom: '14px' }}>SCHOOL & LIFE</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '20px' }}>
          <LifeNote kicker="Origins" accent="#C9622E" headline="First-generation American" note="My family is from Venezuela; I'm the first generation born in the United States." tags={['Venezuela']} />
          <LifeNote kicker="Hometown" accent="#1A4FB5" headline="Raised in Philadelphia" note="Grew up in Philadelphia — the city I'd later return to for university." tags={['Philadelphia']} />
          <LifeNote kicker="Education" accent="#1F6F5C" headline="Penn — the Huntsman Program" note="Studied business and international studies at the University of Pennsylvania's Huntsman Program, including a year living in Brazil." tags={['UPenn', 'Lived in Brazil']} />
          <LifeNote kicker="First job" accent="#0A2540" headline="Morgan Stanley" note="Began my career in investment banking at Morgan Stanley — the first seat in a path that became investing." tags={['Investment Banking']} />
        </div>
      </section>

      {/* — Experience (expandable firms) */}
      <section style={{ padding: '8px 56px 80px' }}>
        <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.16em', color: tokens.inkMute, marginBottom: '4px', borderBottom: `1px solid ${tokens.inkLine}`, paddingBottom: '14px' }}>EXPERIENCE · TAP TO EXPAND FOR DOCUMENTS</div>
        <div style={{ borderTop: `1px solid ${tokens.ink}` }}>
          {experiences.map((exp, i) => (
            <ExperienceItem key={exp.key} exp={exp} index={i} />
          ))}
        </div>
      </section>

      {/* MY IDEAS — the lecture */}
      <section ref={ideasRef} style={{ padding: '80px 56px 40px', borderTop: `1px solid ${tokens.inkLine}`, background: tokens.bgAlt }}>
        <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.18em', color: tokens.inkMute, marginBottom: '24px' }}>03 · MY IDEAS</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: '64px', alignItems: 'flex-end' }}>
          <h2 style={{ fontSize: '60px', lineHeight: 0.94, letterSpacing: '-0.04em', fontWeight: 400, margin: 0 }}>
            The Business of <span style={{ fontStyle: 'italic', color: tokens.inkSoft, fontWeight: 300 }}>Shareholder Activism</span>.
          </h2>
          <div>
            <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.16em', color: tokens.inkMute, marginBottom: '16px' }}>WHARTON MBA · 2026</div>
            <p style={{ fontSize: '16px', lineHeight: 1.55, color: tokens.inkSoft, margin: 0 }}>
              A lecture given to the Wharton Shareholder Activism MBA course. The argument: activism is in the middle of the same evolution private equity went through twenty years ago — from capital as the differentiator to operational and domain expertise as the differentiator.
            </p>
          </div>
        </div>
      </section>

      <section style={{ padding: '40px 56px 80px', background: tokens.bgAlt }}>
        <div style={{ aspectRatio: '16/9', background: '#000', position: 'relative' }}>
          <iframe
            src="https://player.vimeo.com/video/1187373736?title=0&byline=0&portrait=0"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
            allow="autoplay; fullscreen; picture-in-picture"
            allowFullScreen
            title="Daniel Urdaneta — Wharton Lecture"
          ></iframe>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '32px', marginTop: '32px', borderTop: `1px solid ${tokens.ink}`, paddingTop: '24px' }}>
          {[['Runtime','47:22'],['Recorded','March 2026'],['Audience','Wharton MBA · 2nd year'],['Course','FNCE-7960 · Shareholder Activism']].map(([k,v]) => (
            <div key={k}>
              <div style={{ fontFamily: fontMono, fontSize: '10px', letterSpacing: '0.16em', color: tokens.inkMute, marginBottom: '6px' }}>{k.toUpperCase()}</div>
              <div style={{ fontSize: '17px', letterSpacing: '-0.01em' }}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      <Section label="Key arguments" title="Five ideas from the lecture.">
        <div style={{ display: 'flex', flexDirection: 'column', gap: '40px', maxWidth: '1100px' }}>
          {[
            ['01', 'Activism is on the same arc PE walked twenty years ago.',
              'In the early 2000s, private equity differentiated on capital. By 2015, capital was a commodity and the winning firms were the ones with sector specialists, operating partners, and proprietary playbooks for value creation. Public-markets activism is in the early phase of the same shift — the next decade of returns will go to investors who bring real domain expertise, not louder letters.'],
            ['02', 'Constructive beats confrontational on a long-enough horizon.',
              'The headline-grabbing proxy fights win the news cycle and lose the engagement. The activists generating the best risk-adjusted returns over the last decade have been the ones management invited in — usually because the work was already done before the first letter went out.'],
            ['03', 'The board is the leverage point, not the strategy.',
              'CEOs follow the constraints set by their boards. Modernizing the boardroom — composition, committee structure, time allocation — is the highest-ROI activist move available, and the one most under-utilized by the industry.'],
            ['04', 'Patient capital is the rarest input in public markets.',
              'A multi-year capex commitment is intellectually obvious and structurally near-impossible. The activist who can credibly hold for the cycle, and shield management from the quarterly print, has a structural edge that capital alone cannot replicate.'],
            ['05', 'AI changes who can play the activist role.',
              'The next generation of constructive activists will be people who have shipped product, run an AI-native P&L, or sat on the operating side of the transition. The traditional financier-only profile will struggle to add value to the conversations that matter.'],
          ].map(([n,t,d]) => (
            <div key={n} style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: '24px', borderTop: `1px solid ${tokens.inkLine}`, paddingTop: '24px', alignItems: 'baseline' }}>
              <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.18em', color: tokens.inkMute }}>{n}</div>
              <div>
                <div style={{ fontSize: '24px', letterSpacing: '-0.02em', marginBottom: '12px', lineHeight: 1.2 }}>{t}</div>
                <div style={{ fontSize: '15px', lineHeight: 1.6, color: tokens.inkSoft, letterSpacing: '-0.005em', maxWidth: '820px' }}>{d}</div>
              </div>
            </div>
          ))}
        </div>
      </Section>

      {/* ON X */}
      <Section label="On X" title="Latest posts." style={{ background: tokens.bgAlt }}>
        <AboutXFeed />
      </Section>
    </div>
  );
};

// Standalone component so the effect runs once on mount and loads cleanly.
// Falls back to a direct profile link if X blocks embeds in the visitor's region.
const AboutXFeed = () => {
  const ref = React.useRef(null);
  const timerRef = React.useRef(null);
  const [failed, setFailed] = React.useState(false);

  React.useEffect(() => {
    const container = ref.current;
    if (!container) return;

    container.innerHTML = '';
    const a = document.createElement('a');
    a.className = 'twitter-timeline';
    a.setAttribute('data-height', '600');
    a.setAttribute('data-theme', 'light');
    a.setAttribute('data-chrome', 'noheader nofooter noborders transparent');
    a.href = 'https://twitter.com/DUrdaneta';
    a.textContent = 'Posts by DUrdaneta';
    container.appendChild(a);

    timerRef.current = setTimeout(() => {
      if (container && !container.querySelector('iframe')) setFailed(true);
    }, 7000);

    const doLoad = () => {
      if (window.twttr && window.twttr.widgets) window.twttr.widgets.load(container);
    };

    if (window.twttr && window.twttr.widgets) {
      doLoad();
    } else if (!document.getElementById('x-widgets-js')) {
      const s = document.createElement('script');
      s.id = 'x-widgets-js';
      s.src = 'https://platform.x.com/widgets.js';
      s.async = true;
      s.charset = 'utf-8';
      s.onload = doLoad;
      document.body.appendChild(s);
    } else {
      document.getElementById('x-widgets-js').addEventListener('load', doLoad, { once: true });
    }

    return () => {
      clearTimeout(timerRef.current);
      if (container) container.innerHTML = '';
    };
  }, []);

  return (
    <div>
      <div ref={ref} style={{ minHeight: failed ? '0' : '200px' }} />
      {failed && (
        <div>
          <div style={{ fontSize: '13px', color: tokens.inkSoft, marginBottom: '12px', lineHeight: 1.5 }}>
            X embed unavailable in your region.
          </div>
          <a href="https://x.com/DUrdaneta" target="_blank" rel="noopener noreferrer"
            style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.1em', color: tokens.ink, textDecoration: 'none', borderBottom: `1px solid ${tokens.inkLine}`, paddingBottom: '4px' }}>
            @DURDANETA ON X ↗
          </a>
        </div>
      )}
    </div>
  );
};

const Thesis = () => (
  <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' }}>INNOVATION ACTIVISM</div>
      <h1 style={{ fontSize: '92px', lineHeight: 0.92, letterSpacing: '-0.05em', fontWeight: 400, margin: 0, marginBottom: '32px', maxWidth: '1100px' }}>
        Innovation activism — <span style={{ fontStyle: 'italic', fontWeight: 300, color: tokens.inkSoft }}>constructive ownership</span> for the technology transition.
      </h1>
      <p style={{ fontSize: '22px', lineHeight: 1.5, letterSpacing: '-0.015em', color: tokens.inkSoft, maxWidth: '860px' }}>
        Innovation activism is how I describe my forward-looking work: partnering with the management teams of technology and tech-adjacent companies to make the long-term decisions the AI transition demands — as an aligned owner, not a consultant. AI is forcing every incumbent into a strategic decision they aren't structured to make. Three structural reasons patient, aligned ownership is enough to help:
      </p>
    </section>

    <Section label="The structural gap" title="Why long-term aligned ownership matters.">
      <div style={{ display: 'flex', flexDirection: 'column', gap: '64px', maxWidth: '1100px' }}>
        {[
          ['01', 'Being a CEO is lonely.',
           'The seat at the top of a public company has very few honest interlocutors. Every consultant has a fee meter. Every banker has a deal in mind. Every direct report has a career to manage. A patient, aligned owner — one who has done the primary work and isn\'t selling anything — is the rarest voice in that room. Used well, the seat is the highest-leverage governance asset a company has.'],
          ['02', 'Information flows in large organizations are imperfect.',
           'Bad news travels up the org slowly and politely. By the time a problem reaches the board, it has been re-framed three times — once by the line manager, once by the function head, once by the CFO\'s deck. An outside owner with primary research, customer access, and no career risk can see what the org is too polite to say. The activist\'s real job is often translation, not confrontation.'],
          ['03', 'Public-market structure punishes long-term decisions.',
           'Quarterly earnings cycles, sell-side consensus models, and peer-index TSR comp all push management toward the print four months from now. The right AI investment is rarely the one that pays back inside that window. Capital that can credibly commit to the cycle — and tell the market to look past the print — is the rarest asset in public markets, and the most valuable to a CEO who needs cover to do something hard.'],
        ].map(([n,t,d]) => (
          <div key={n} style={{ borderTop: `1px solid ${tokens.ink}`, paddingTop: '24px' }}>
            <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.18em', color: tokens.inkMute, marginBottom: '16px' }}>{n}</div>
            <div style={{ fontSize: '36px', letterSpacing: '-0.03em', marginBottom: '20px', lineHeight: 1.12, maxWidth: '900px', fontWeight: 400 }}>{t}</div>
            <div style={{ fontSize: '17px', lineHeight: 1.6, color: tokens.inkSoft, letterSpacing: '-0.005em', maxWidth: '820px' }}>{d}</div>
          </div>
        ))}
      </div>
    </Section>

    <Section label="The AI cut" title="What this means for incumbents specifically." style={{ background: tokens.bgAlt }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '40px' }}>
        {[
          ['Cost of inaction is asymmetric', 'A wrong AI bet is a five-year drag. A missed AI bet is terminal. Boards are pricing the first risk and ignoring the second — because they have never had to plan for terminal risk before in their tenure.'],
          ['Comp is mis-aligned for the moment', 'Most incumbent CEOs are paid on TSR vs. peer index. That metric punishes the multi-year capex bet that gets the company through the transition. Re-basing comp is the cheapest, highest-leverage governance move available.'],
          ['Boards built for the last decade', 'Most public-company boards have zero directors who have shipped an AI-native product or run an AI-led P&L. That is the single most fixable issue, and it is rarely on the proxy.'],
          ['Capex framing is wrong', 'AI capex is being modeled like 2014 cloud capex. It is closer to 1995 fiber capex — the asset is the network, the data, and the workflow lock-in, not the hardware. The companies that frame it correctly will out-spend the ones that don\'t, and out-earn them inside a decade.'],
        ].map(([t, d]) => (
          <div key={t} style={{ borderTop: `1px solid ${tokens.ink}`, paddingTop: '20px' }}>
            <div style={{ fontSize: '24px', letterSpacing: '-0.02em', marginBottom: '12px', lineHeight: 1.15 }}>{t}</div>
            <div style={{ fontSize: '15px', lineHeight: 1.6, color: tokens.inkSoft, letterSpacing: '-0.005em' }}>{d}</div>
          </div>
        ))}
      </div>
    </Section>
  </div>
);

window.About = About;
window.Thesis = Thesis;
