// mv-home.jsx — homepage sections below the hero.
// The manifesto (editorial cream), the signal strip (navy, four columns),
// the sector preview (two-by-two), and the closing declaration.
// Content synthesized from the ModVedi website framework.

if (typeof document !== 'undefined' && !document.getElementById('mv-home-styles')) {
  const s = document.createElement('style');
  s.id = 'mv-home-styles';
  s.textContent = `
    .mv-mani p{margin:0 0 30px;text-wrap:pretty}
    .mv-mani p:last-child{margin-bottom:0}
    .mv-signal{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
    .mv-signal .col{padding:0 40px;border-left:1px solid ${MV.hair}}
    .mv-signal .col:first-child{padding-left:0;border-left:0}
    .mv-signal .rule{width:34px;height:2px;background:${MV.gold};margin-bottom:24px}
    .mv-signal .n{font-family:${MV.serif};font-size:46px;font-weight:500;color:${MV.cream};line-height:0.95;letter-spacing:-0.01em}
    .mv-signal .l{margin-top:16px;color:${MV.creamDim};font-size:13.5px;line-height:1.55}
    .mv-secgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px}
    .mv-seccard{position:relative;display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
      border:1px solid ${MV.hair};border-radius:8px;background:${MV.navy};min-height:280px;
      transition:transform .35s cubic-bezier(.32,.72,0,1),box-shadow .35s ease,border-color .35s ease}
    .mv-seccard:hover{transform:translateY(-5px);border-color:rgba(200,164,93,0.5);box-shadow:0 30px 70px rgba(4,15,26,0.45)}
    .mv-seccard .body{position:relative;z-index:1;padding:40px 40px 34px;display:flex;flex-direction:column;height:100%}
    .mv-seccard .idx{font-family:${MV.sans};font-size:11px;font-weight:600;letter-spacing:.2em;color:${MV.gold};margin-bottom:auto}
    .mv-seccard h3{font-family:${MV.serif};font-size:30px;font-weight:600;line-height:1.06;color:${MV.cream};margin:60px 0 0;letter-spacing:-0.01em}
    .mv-seccard p{margin:14px 0 0;color:${MV.creamDim};font-size:14px;line-height:1.62;max-width:440px}
    .mv-seccard .go{display:inline-flex;align-items:center;gap:8px;margin-top:26px;color:${MV.gold};
      font-family:${MV.sans};font-size:12px;font-weight:600;letter-spacing:.04em;transition:gap .2s ease}
    .mv-seccard:hover .go{gap:13px}
    .mv-seccard .focus{position:absolute;top:36px;right:36px;z-index:1;font-family:${MV.sans};font-size:10px;
      font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:${MV.navyDeep};
      background:${MV.gold};padding:5px 10px;border-radius:2px}
    .mv-seccard.research{background:${MV.navyDeep}}
    .mv-seccard.research .focus{background:transparent;color:${MV.creamFaint};border:1px solid ${MV.hair}}
    @media (max-width:860px){.mv-signal{grid-template-columns:1fr 1fr;gap:40px 0}.mv-secgrid{grid-template-columns:1fr}}
  `;
  document.head.appendChild(s);
}

// ── The manifesto — editorial, cream ─────────────────────────
function HomeManifesto() {
  return (
    <section id="manifesto" className="mv-root" style={{ background: MV.cream, overflow: 'visible', padding: '104px 80px 108px' }}>
      <div className="mv-reveal" style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 72,
        alignItems: 'start', maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ borderTop: `2px solid ${MV.navy}`, paddingTop: 20, position: 'sticky', top: 40 }}>
          <span style={{ color: MV.navy, fontSize: 12.5, fontWeight: 600, letterSpacing: '.16em', textTransform: 'uppercase' }}>The Manifesto</span>
        </div>
        <div className="mv-mani">
          <p className="mv-serif" style={{ color: MV.navy, fontWeight: 500, fontSize: 31, lineHeight: 1.26, letterSpacing: '-0.006em', maxWidth: 780 }}>
            The industries that build, power, and maintain the physical world represent more than $30 trillion
            in global output, and remain among the least digitized on earth.
          </p>
          <div style={{ marginTop: 38, maxWidth: 660, color: MV.slate, fontSize: 16.5, lineHeight: 1.72 }}>
            <p>The software that finally replaces their clipboards, spreadsheets, and phone calls doesn’t just
              improve a business; it <em style={{ fontStyle: 'italic' }}>becomes</em> the business. Mission-critical,
              deeply embedded, extraordinarily durable.</p>
            <p>ModVedi exists because the firms that invest in this software rarely understand the industries it
              serves, and the operators who understand those industries rarely think like investors.</p>
            <p className="mv-serif" style={{ fontSize: 25, lineHeight: 1.3, color: MV.navy, fontWeight: 500, margin: '34px 0 0' }}>
              We are the bridge.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Signal strip — navy, four columns ────────────────────────
function HomeSignal() {
  const cols = [
    { n: '4', l: 'Sectors: Construction & Engineering, Multi-Site Operations, Industrial & Manufacturing, Infrastructure & Utilities' },
    { n: '20+', l: 'Acquisitions across asset-intensive industries' },
    { n: 'Engineer-Led', l: 'From Federal Aviation Administration infrastructure to full profit-and-loss ownership', small: true },
    { n: 'Control', l: 'We acquire, partner, and build, never flip', small: true },
  ];
  return (
    <section className="mv-root" style={{ background: MV.navyDeep, overflow: 'hidden', padding: '74px 80px 78px', position: 'relative' }}>
      <div className="mv-reveal" style={{ maxWidth: 1320, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <div className="mv-signal">
          {cols.map((c) => (
            <div key={c.l} className="col">
              <div className="rule" />
              <div className="n" style={{ fontSize: c.small ? 26 : 46, fontFamily: c.small ? MV.sans : MV.serif,
                fontWeight: c.small ? 600 : 500, letterSpacing: c.small ? '-0.005em' : '-0.01em' }}>{c.n}</div>
              <div className="l">{c.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Sector preview — two-by-two ──────────────────────────────
function HomeSectors() {
  const cards = [
    { idx: '01', t: 'Construction & Engineering', d: 'The software that runs jobsites, coordinates trades, and manages the complexity of physical construction.', focus: 'Fund I' },
    { idx: '02', t: 'Multi-Site Operations', d: 'The digital nervous system managing point-of-sale, inventory, maintenance, and compliance across hundreds of locations.', focus: 'Fund I' },
    { idx: '03', t: 'Industrial & Manufacturing', d: 'The intelligence layer that optimizes factory floors, manages quality, and drives operational efficiency.', research: true },
    { idx: '04', t: 'Infrastructure & Utilities', d: 'The systems that manage asset lifecycles, regulatory compliance, and field operations for critical infrastructure.', research: true },
  ];
  return (
    <section className="mv-root" style={{ background: MV.navy, overflow: 'visible', padding: '100px 80px 108px' }}>
      <div className="mv-reveal" style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24 }}>
          <div>
            <div style={{ color: MV.gold, fontSize: 11, fontWeight: 600, letterSpacing: '.22em', textTransform: 'uppercase', marginBottom: 18 }}>Where We Invest</div>
            <h2 className="mv-serif" style={{ margin: 0, color: MV.cream, fontWeight: 600, fontSize: 'clamp(34px,3.4vw,50px)', lineHeight: 1.04, letterSpacing: '-0.015em', maxWidth: 720 }}>
              Four interlocking sectors. One pattern.
            </h2>
          </div>
          <a className="mv-textlink" href="ModVedi - Sectors.html">Explore the sectors <MVArrow /></a>
        </div>
        <div className="mv-secgrid">
          {cards.map((c) => (
            <a key={c.idx} href="ModVedi - Sectors.html" className={'mv-seccard' + (c.research ? ' research' : '')}>
              <span className="focus">{c.research ? 'Research' : c.focus}</span>
              <div className="body">
                <span className="idx">{c.idx}</span>
                <h3>{c.t}</h3>
                <p>{c.d}</p>
                <span className="go">Explore sector <MVArrow /></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Closing declaration ──────────────────────────────────────
function HomeClosing() {
  return (
    <section className="mv-root" style={{ background: MV.cream, overflow: 'visible', padding: '110px 80px 116px' }}>
      <div className="mv-reveal" style={{ maxWidth: 1080, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ color: MV.gold, fontSize: 11, fontWeight: 600, letterSpacing: '.22em', textTransform: 'uppercase', marginBottom: 30 }}>See clearly. Build systematically. Compound relentlessly.</div>
        <p className="mv-serif" style={{ margin: 0, color: MV.navy, fontWeight: 500, fontSize: 'clamp(28px,3.2vw,44px)', lineHeight: 1.18, letterSpacing: '-0.012em', textWrap: 'balance' }}>
          “The next generation of great software platforms won’t be built in Silicon Valley for Silicon Valley.
          They’ll be built for the superintendent, the plant manager, the station owner, by people who’ve
          stood in those roles.”
        </p>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 28, marginTop: 46 }}>
          <a className="mv-btn mv-btn-cream" href="ModVedi - Thesis.html">Read our thesis</a>
          <a className="mv-textlink" href="ModVedi - Contact.html">Get in touch <MVArrow /></a>
        </div>
      </div>
    </section>
  );
}

function HomeSections() {
  useReveal();
  return (
    <div style={{ width: '100%' }}>
      <HomeManifesto />
    </div>
  );
}

Object.assign(window, { HomeManifesto, HomeSignal, HomeSectors, HomeClosing, HomeSections });