// Home — streamlined, message-first landing. Just the core idea of who I am and
// what I believe; all detail (investments, AI thesis, lecture, about) lives on the
// dedicated tabs. Deliberately graphical and spare — no tickers, feeds, or CTAs.

const Home = ({ setRoute }) => {
  const isMobile = useIsMobile();

  const pillars = [
    {
      n: '01',
      t: 'Aligned thought partner',
      d: 'A long-term, strategic partner to management — engaged as an owner, with no fee meter running and no quarter to play to.',
    },
    {
      n: '02',
      t: 'Domain expertise',
      d: 'Years of operating and investing judgment brought to the handful of decisions that decide a company\'s next decade.',
    },
    {
      n: '03',
      t: 'Shared AI capabilities',
      d: 'Building AI tools that assist portfolio companies directly — value delivered as an aligned owner, never billed as a vendor.',
    },
  ];

  return (
    <div>
      {/* HERO */}
      <section style={{ position: 'relative', overflow: 'hidden', padding: isMobile ? '72px 0 56px' : '120px 56px 96px', borderBottom: `1px solid ${tokens.inkLine}` }}>
        {/* subtle graphical motif */}
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.5,
          backgroundImage: `linear-gradient(${tokens.inkLine} 1px, transparent 1px), linear-gradient(90deg, ${tokens.inkLine} 1px, transparent 1px)`,
          backgroundSize: '72px 72px',
          maskImage: 'radial-gradient(ellipse at 70% 30%, black 5%, transparent 60%)',
          WebkitMaskImage: 'radial-gradient(ellipse at 70% 30%, black 5%, transparent 60%)' }} />

        <div style={{ position: 'relative', maxWidth: '1080px' }}>
          <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.2em', color: tokens.inkMute, marginBottom: '32px', textTransform: 'uppercase' }}>
            Daniel Urdaneta · Technology Investor
          </div>
          <h1 style={{ fontSize: isMobile ? '13vw' : '92px', lineHeight: 0.95, letterSpacing: '-0.05em', fontWeight: 400, margin: 0, maxWidth: '15ch' }}>
            Innovation activism<span style={{ color: tokens.ochre }}>.</span>
          </h1>
          <p style={{ fontSize: isMobile ? '20px' : '26px', lineHeight: 1.4, letterSpacing: '-0.02em', color: tokens.inkSoft, maxWidth: '760px', marginTop: '36px' }}>
            I'm a long-time technology investor with deep conviction in the craft of public-market activism. AI is now enabling a step-change in the value an aligned owner can help public companies create.
          </p>
          <div style={{ display: 'flex', gap: '14px', marginTop: '44px', flexWrap: 'wrap' }}>
            <button onClick={() => setRoute('thesis')} style={{ padding: '15px 26px', background: tokens.ink, color: tokens.bg, fontSize: '14px', letterSpacing: '0.01em', borderRadius: '2px', border: 'none', cursor: 'pointer', fontFamily: fontDisplay }}>
              The thesis →
            </button>
            <button onClick={() => setRoute('about')} style={{ padding: '15px 26px', background: 'none', border: `1px solid ${tokens.ink}`, cursor: 'pointer', fontSize: '14px', letterSpacing: '0.01em', color: tokens.ink, fontFamily: fontDisplay }}>
              About me
            </button>
          </div>
        </div>
      </section>

      {/* THREE PILLARS — how the value gets created */}
      <section style={{ padding: isMobile ? '48px 0 8px' : '88px 56px 64px' }}>
        <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.2em', color: tokens.inkMute, marginBottom: isMobile ? '32px' : '56px', textTransform: 'uppercase' }}>
          How I help create value
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? '40px' : '56px' }}>
          {pillars.map((p) => (
            <div key={p.n} style={{ borderTop: `2px solid ${tokens.ink}`, paddingTop: '24px' }}>
              <div style={{ fontFamily: fontMono, fontSize: '12px', letterSpacing: '0.18em', color: tokens.ochre, marginBottom: '20px' }}>{p.n}</div>
              <div style={{ fontSize: isMobile ? '26px' : '30px', letterSpacing: '-0.03em', lineHeight: 1.1, marginBottom: '16px' }}>{p.t}</div>
              <div style={{ fontSize: '16px', lineHeight: 1.6, color: tokens.inkSoft, letterSpacing: '-0.005em' }}>{p.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* CLOSING STATEMENT */}
      <section style={{ padding: isMobile ? '40px 0 72px' : '64px 56px 120px' }}>
        <div style={{ borderTop: `1px solid ${tokens.inkLine}`, paddingTop: isMobile ? '40px' : '64px' }}>
          <p style={{ fontSize: isMobile ? '24px' : '40px', lineHeight: 1.25, letterSpacing: '-0.035em', fontWeight: 400, maxWidth: '20ch', margin: 0 }}>
            Activism, done as a true <span style={{ fontStyle: 'italic', color: tokens.inkSoft }}>partner</span> — not a campaign.
          </p>
          <div style={{ marginTop: '36px', display: 'flex', gap: '28px', flexWrap: 'wrap', fontFamily: fontMono, fontSize: '12px', letterSpacing: '0.06em' }}>
            <span onClick={() => setRoute('thesis')} style={{ cursor: 'pointer', borderBottom: `1px solid ${tokens.ink}`, paddingBottom: '4px' }}>INNOVATION ACTIVISM →</span>
            <span onClick={() => setRoute('investments')} style={{ cursor: 'pointer', borderBottom: `1px solid ${tokens.inkLine}`, paddingBottom: '4px', color: tokens.inkSoft }}>INVESTMENTS →</span>
            <span onClick={() => setRoute('about')} style={{ cursor: 'pointer', borderBottom: `1px solid ${tokens.inkLine}`, paddingBottom: '4px', color: tokens.inkSoft }}>ABOUT ME →</span>
          </div>
        </div>
      </section>
    </div>
  );
};

window.Home = Home;