// MLE Holdings — Editorial Futurism full site
// Single-page, scrolls top to bottom: Hero · Ticker · Portfolio · Thesis · Dispatches · Contact

function useIsMobile(breakpoint) {
  const [mobile, setMobile] = React.useState(() => window.innerWidth < breakpoint);
  React.useEffect(() => {
    const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
    const handler = (e) => setMobile(e.matches);
    mq.addEventListener('change', handler);
    setMobile(mq.matches);
    return () => mq.removeEventListener('change', handler);
  }, [breakpoint]);
  return mobile;
}

function Site({ tweaks }) {
  const accent = tweaks.accent;
  const bg = '#0d1512';
  const line = 'rgba(232,245,237,0.12)';
  const line2 = 'rgba(232,245,237,0.06)';
  const dim = 'rgba(232,245,237,0.52)';
  const fg = '#e8f5ed';
  const mob = useIsMobile(768);
  const px = mob ? '20px' : '56px';

  const [time, setTime] = React.useState(() => new Date());
  const [mouse, setMouse] = React.useState({x:0.5, y:0.3});
  React.useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 1000);
    const m = (e) => setMouse({x:e.clientX/window.innerWidth, y:e.clientY/window.innerHeight});
    window.addEventListener('mousemove', m);
    return () => { clearInterval(t); window.removeEventListener('mousemove', m); };
  }, []);

  const ts = time.toISOString().replace('T',' ').slice(0,19) + ' UTC';

  const holdings = [
    {
      no:'I', name:'Trigen', tag:'Land Services · Energy', est:'trigen.land',
      kicker:'Technology-forward land services for energy projects',
      copy:'A land services company supporting energy developers across the lower 48 — lease acquisition, project management, right of way, title examination, GIS mapping, and landowner engagement. Experienced land professionals paired with proprietary AI tooling.',
      stat:'Lower 48', statLabel:'nationwide coverage',
      facts:[['Offices','Carmel · Dallas · Denver · DC'], ['Services','Leasing · ROW · Title · GIS'], ['Sectors','Oil & Gas · Renewables · Geothermal']],
    },
    {
      no:'II', name:'Meridian Resources', tag:'Oil & Gas', est:'Est. 2017',
      kicker:'Overlooked reservoirs, reworked by veterans',
      copy:'An operating company formed by veteran oilfield professionals to acquire, develop, and improve cash flow from overlooked and under-exploited oilfields in the greater Illinois Basin and Michigan Basin.',
      stat:'2017', statLabel:'founded by operators',
      facts:[['Focus','Illinois + Michigan Basin'], ['Strategy','Acquire · Rework · Optimize'], ['Team','Veteran oilfield operators']],
    },
    {
      no:'III', name:'The Yard', tag:'Sports · Community', est:'yardnewburgh.com',
      kicker:'Indoor athletic training facility',
      copy:'An indoor baseball and softball training facility in Newburgh, Indiana. Three state-of-the-art batting cages, pitching mounds, sock nets, open turf, and lessons with dedicated instructors. Membership-based access plus camps, parties, and team bookings.',
      stat:'$29.99', statLabel:'monthly membership',
      facts:[['Location','Newburgh, Indiana'], ['Amenities','3 cages · turf · mounds'], ['Programs','Lessons · camps · parties']],
    },
    {
      no:'IV', name:'Applied Intelligence Studio', tag:'AI · Software', est:'Est. 2026',
      kicker:'In development — stealth',
      copy:'A new application studio incubated inside MLE, building software that routes the output of frontier models into the hands of field operators across our portfolio and beyond.',
      stat:'Q3·26', statLabel:'private beta',
      facts:[['Stage','Stealth'], ['Focus','Applied AI'], ['Model','B2B SaaS']],
    },
  ];

  const dispatches = [
    { n:'№ 07', d:'15 OCT 2025', tag:'Trigen',    t:'Ready for the next geothermal lease sale', sub:'Trigen\'s land team on preparing lessees for upcoming federal geothermal auctions.' },
    { n:'№ 06', d:'02 APR 2026', tag:'The Yard',  t:'The Yard opens in Newburgh, Indiana', sub:'An indoor baseball and softball training facility — three cages, open turf, lessons, and $29.99/month memberships.' },
    { n:'№ 05', d:'22 JUL 2025', tag:'Trigen',    t:'The evolving role of AI in land services', sub:'How proprietary tooling is accelerating title research and landowner engagement at Trigen.' },
    { n:'№ 04', d:'22 AUG 2025', tag:'Trigen',    t:'Why \u201CMoratorium\u201D isn\u2019t always a bad word', sub:'A field-level perspective on what pauses in leasing actually mean for developers and landowners.' },
  ];

  return (
    <div style={{
      background:bg, color:fg, fontFamily:"'Fraunces', 'Instrument Serif', Georgia, serif",
      minHeight:'100vh', overflowX:'hidden', position:'relative',
    }}>

      {/* ambient backgrounds */}
      <div style={{
        position:'fixed', inset:0, pointerEvents:'none', zIndex:0,
        background:`radial-gradient(ellipse 70% 50% at ${mouse.x*100}% ${mouse.y*100}%, ${accent}22, transparent 55%)`,
        transition:'background .4s linear',
      }}/>
      <div style={{
        position:'fixed', inset:0, pointerEvents:'none', zIndex:0, opacity:0.5,
        backgroundImage:'radial-gradient(rgba(255,255,255,0.018) 1px, transparent 1px)',
        backgroundSize:'3px 3px',
      }}/>

      <div style={{position:'relative', zIndex:1}}>

        {/* ============ NAV ============ */}
        <nav style={{
          position:'sticky', top:0, zIndex:30,
          display:'flex', alignItems:'center', padding:mob ? '14px 20px' : '18px 56px', gap:mob ? 12 : 40,
          background:'rgba(13,21,18,0.75)', backdropFilter:'blur(20px)',
          borderBottom:`1px solid ${line}`,
          fontFamily:"'JetBrains Mono', monospace", fontSize:11, letterSpacing:2,
          textTransform:'uppercase',
        }}>
          <a href="#top" style={{display:'flex', alignItems:'center', gap:12, textDecoration:'none', color:fg}}>
            <span style={{
              fontFamily:"'JetBrains Mono', monospace", fontWeight:700, fontSize:15,
              background:accent, color:'#001', padding:'5px 9px', lineHeight:1, letterSpacing:0,
            }}>MLE</span>
            <span style={{
              fontFamily:"'Inter', 'Helvetica Neue', sans-serif", fontSize:17, fontWeight:600,
              letterSpacing:-0.3, textTransform:'none', color:fg,
            }}>Holdings</span>
          </a>
          <div style={{flex:1}}/>
          {!mob && [['Portfolio','#portfolio'],['Thesis','#thesis'],['Dispatches','#dispatches'],['Contact','#contact']].map(([n,h], i) => (
            <a key={n} href={h} style={{color:dim, textDecoration:'none', transition:'color .2s'}}
              onMouseEnter={e=>e.currentTarget.style.color=accent}
              onMouseLeave={e=>e.currentTarget.style.color=dim}
            >
              <span style={{color:'rgba(232,245,237,0.25)', marginRight:6, fontSize:9}}>0{i+1}</span>{n}
            </a>
          ))}
          {!mob && <div style={{width:1, height:18, background:line}}/>}
          <span style={{color:accent}}>●</span>
          <span style={{color:dim, fontSize:10}}>Open to inquiry</span>
        </nav>

        {/* ============ HERO ============ */}
        <section id="top" style={{padding:mob ? '60px 20px 80px' : '120px 56px 140px', position:'relative'}}>
          <div style={{display:'grid', gridTemplateColumns:mob ? '1fr' : '1.3fr 1fr', gap:mob ? 48 : 80, alignItems:'end'}}>
            <div>
              <div style={{
                fontFamily:"'JetBrains Mono', monospace", fontSize:11, color:accent,
                letterSpacing:3, marginBottom:48, display:'flex', alignItems:'center', gap:12,
              }}>
                <span style={{width:24, height:1, background:accent}}/>
                MLE HOLDINGS · OPERATING COMPANIES · NEWBURGH, IN
              </div>
              <h1 style={{
                fontFamily:"'Fraunces', serif",
                fontSize:mob ? 52 : 120, lineHeight:0.9, fontWeight:300, margin:0,
                letterSpacing:mob ? -2 : -4, color:fg,
              }}>
                We build,<br/>
                <span style={{fontStyle:'italic', color:accent, fontWeight:300}}>then hold,</span><br/>
                real things.
              </h1>
              <p style={{
                fontFamily:"'Fraunces', serif", fontSize:22, lineHeight:1.55, maxWidth:560,
                color:dim, marginTop:52, fontWeight:300,
              }}>
                {tweaks.tagline}
              </p>
              <div style={{marginTop:mob ? 32 : 44, display:'flex', flexDirection:mob ? 'column' : 'row', gap:mob ? 12 : 18, alignItems:mob ? 'stretch' : 'center'}}>
                <a href="#portfolio" style={{
                  fontFamily:"'JetBrains Mono', monospace", fontSize:11, letterSpacing:3,
                  background:accent, border:`1px solid ${accent}`, color:'#001',
                  padding:'18px 28px', textDecoration:'none', textTransform:'uppercase', fontWeight:600,
                }}>
                  See the portfolio →
                </a>
                <a href="#thesis" style={{
                  fontFamily:"'JetBrains Mono', monospace", fontSize:11, letterSpacing:3,
                  border:`1px solid ${line}`, color:fg, padding:'18px 28px',
                  textDecoration:'none', textTransform:'uppercase',
                }}>
                  Read the thesis
                </a>
              </div>
            </div>
            <div style={{
              border:`1px solid ${line}`, padding:'36px 32px',
              fontFamily:"'JetBrains Mono', monospace", fontSize:12, color:dim,
              background:'rgba(0,0,0,0.25)', position:'relative',
            }}>
              <div style={{position:'absolute', top:-1, left:-1, width:24, height:24, borderTop:`1px solid ${accent}`, borderLeft:`1px solid ${accent}`}}/>
              <div style={{position:'absolute', bottom:-1, right:-1, width:24, height:24, borderBottom:`1px solid ${accent}`, borderRight:`1px solid ${accent}`}}/>
              <div style={{color:accent, fontSize:10, letterSpacing:2, marginBottom:22, display:'flex', justifyContent:'space-between'}}>
                <span>// STATE OF THE HOLDING</span>
                <span style={{color:dim}}>Q2·26</span>
              </div>
              {[
                ['Active portfolio', '4 companies'],
                ['Sectors', 'Land · Energy · Sport · Software'],
                ['Geography', 'IN · TX · CO · DC'],
                ['Structure', 'Operator-led'],
                ['Horizon', 'Permanent capital'],
                ['Status', <span style={{color:accent}} key="a">Building & holding</span>],
              ].map(([k,v], i) => (
                <div key={i} style={{
                  display:'flex', justifyContent:'space-between', padding:'14px 0',
                  borderBottom: i<5 ? `1px solid ${line2}` : 'none', fontSize:13, color:fg,
                }}>
                  <span style={{color:dim, fontSize:11, letterSpacing:1}}>{k}</span>
                  <span>{v}</span>
                </div>
              ))}
              <div style={{marginTop:22, fontSize:10, color:dim, letterSpacing:1.5, display:'flex', justifyContent:'space-between'}}>
                <span>SYNC {ts}</span>
                <span style={{color:accent}}>● LIVE</span>
              </div>
            </div>
          </div>
        </section>

        {/* ============ MARQUEE ============ */}
        <div style={{
          borderTop:`1px solid ${line}`, borderBottom:`1px solid ${line}`,
          padding:'22px 0', overflow:'hidden', whiteSpace:'nowrap',
          fontFamily:"'Fraunces', serif", fontStyle:'italic', fontSize:mob ? 28 : 62, fontWeight:300,
        }}>
          <div style={{display:'inline-block', animation:'mle-marquee 42s linear infinite'}}>
            {Array(8).fill(0).map((_,i) => (
              <span key={i}>
                Land <span style={{color:accent, fontStyle:'normal'}}>·</span> Energy <span style={{color:accent, fontStyle:'normal'}}>·</span> Community <span style={{color:accent, fontStyle:'normal'}}>·</span> Software <span style={{color:dim, fontStyle:'normal'}}>—&nbsp;</span>
              </span>
            ))}
          </div>
        </div>

        {/* ============ PORTFOLIO ============ */}
        <section id="portfolio" style={{padding:mob ? '60px 20px 20px' : '120px 56px 40px'}}>
          <div style={{display:'flex', alignItems:'baseline', marginBottom:64, gap:20}}>
            <div style={{
              fontFamily:"'JetBrains Mono', monospace", fontSize:11,
              color:accent, letterSpacing:3,
            }}>§ 01 — PORTFOLIO</div>
            <div style={{flex:1, borderBottom:`1px solid ${line}`}}/>
            <div style={{fontFamily:"'JetBrains Mono', monospace", fontSize:11, color:dim}}>{holdings.length.toString().padStart(2,'0')} entities</div>
          </div>

          {holdings.map((h,i)=>(
            <div key={h.no} style={{
              display:'grid', gridTemplateColumns:mob ? '1fr' : '80px 1.1fr 1.2fr 240px',
              gap:mob ? 20 : 40, padding:mob ? '36px 0' : '56px 0',
              borderTop: i===0 ? `1px solid ${line}` : 'none',
              borderBottom:`1px solid ${line}`,
              alignItems:'start',
            }}>
              <div style={{
                fontFamily:"'Fraunces', serif", fontStyle:'italic', fontSize:mob ? 36 : 56,
                color:accent, fontWeight:300, lineHeight:1,
              }}>{h.no}</div>
              <div>
                <div style={{
                  fontFamily:"'JetBrains Mono', monospace", fontSize:10,
                  color:dim, letterSpacing:2, marginBottom:12, textTransform:'uppercase',
                }}>{h.tag} · {h.est}</div>
                <h3 style={{
                  fontFamily:"'Fraunces', serif", fontSize:mob ? 32 : 48, fontWeight:400,
                  margin:0, letterSpacing:-1.5, lineHeight:1.02,
                }}>{h.name}</h3>
                <div style={{color:dim, fontStyle:'italic', fontFamily:"'Fraunces', serif", fontSize:19, marginTop:8}}>
                  {h.kicker}
                </div>
                <div style={{marginTop:22}}>
                  {h.facts.map(([k,v]) => (
                    <div key={k} style={{
                      display:'flex', gap:18, padding:'8px 0',
                      fontFamily:"'JetBrains Mono', monospace", fontSize:11,
                    }}>
                      <span style={{color:dim, width:90, letterSpacing:1}}>{k}</span>
                      <span style={{color:fg}}>{v}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div>
                <p style={{
                  fontFamily:"'Fraunces', serif", fontSize:18, lineHeight:1.6,
                  color:fg, fontWeight:300, margin:0,
                }}>{h.copy}</p>
                <a href="#" style={{
                  display:'inline-block', marginTop:24,
                  fontFamily:"'JetBrains Mono', monospace", fontSize:10, letterSpacing:3,
                  color:accent, textDecoration:'none', borderBottom:`1px solid ${accent}`,
                  paddingBottom:2,
                }}>
                  ENTITY BRIEF →
                </a>
              </div>
              <div style={{textAlign:mob ? 'left' : 'right'}}>
                <div style={{
                  fontFamily:"'Fraunces', serif", fontSize:mob ? 40 : 64, color:accent,
                  fontWeight:300, lineHeight:1, fontVariantNumeric:'tabular-nums',
                  fontStyle:'italic',
                }}>{h.stat}</div>
                <div style={{
                  fontFamily:"'JetBrains Mono', monospace", fontSize:10,
                  color:dim, letterSpacing:2, marginTop:10, textTransform:'uppercase',
                }}>{h.statLabel}</div>
              </div>
            </div>
          ))}
        </section>

        {/* ============ THESIS ============ */}
        <section id="thesis" style={{
          padding:mob ? '60px 20px' : '140px 56px',
          borderTop:`1px solid ${line}`, borderBottom:`1px solid ${line}`,
          background:'rgba(0,0,0,0.22)', position:'relative', marginTop:mob ? 40 : 80,
        }}>
          <div style={{
            fontFamily:"'JetBrains Mono', monospace", fontSize:11, color:accent,
            letterSpacing:3, marginBottom:56,
          }}>§ 02 — THE THESIS</div>
          <div style={{maxWidth:1100}}>
            <p style={{
              fontFamily:"'Fraunces', serif", fontSize:mob ? 26 : 52, lineHeight:1.18,
              fontWeight:300, margin:0, letterSpacing:mob ? -0.5 : -1.2,
            }}>
              MLE starts or acquires companies in industries we actually understand — and then we
              <span style={{color:accent, fontStyle:'italic'}}> stay</span>.
              No funds. No exit clocks. Just operators building durable businesses
              across land, energy, community, and software.
            </p>
            <div style={{
              display:'grid', gridTemplateColumns:mob ? '1fr' : '1fr 1fr 1fr', gap:mob ? 32 : 40, marginTop:mob ? 48 : 88,
            }}>
              {[
                ['Operator-led', 'Every company in the portfolio is run by people who have done the work. Capital sits behind the team; it does not replace it.'],
                ['Permanent capital', 'We are not a fund. There is no clock. We build companies we intend to own for decades — because that is how compounding actually works.'],
                ['Real + digital', 'From batting cages in Newburgh to pumpjacks in the Illinois Basin to AI-assisted land services across the lower 48 — we invest where the physical world meets better tools.'],
              ].map(([k,v]) => (
                <div key={k}>
                  <div style={{
                    fontFamily:"'JetBrains Mono', monospace", fontSize:10, color:accent,
                    letterSpacing:3, marginBottom:14,
                  }}>▸ {k.toUpperCase()}</div>
                  <p style={{fontFamily:"'Fraunces', serif", fontSize:18, lineHeight:1.6, color:dim, fontWeight:300, margin:0}}>
                    {v}
                  </p>
                </div>
              ))}
            </div>
            <div style={{
              marginTop:96, fontFamily:"'JetBrains Mono', monospace", fontSize:11,
              color:dim, letterSpacing:2,
            }}>
              ———— MLE HOLDINGS · NEWBURGH, INDIANA
            </div>
          </div>
        </section>

        {/* ============ DISPATCHES ============ */}
        <section id="dispatches" style={{padding:mob ? '60px 20px' : '120px 56px'}}>
          <div style={{display:'flex', alignItems:'baseline', marginBottom:56, gap:20}}>
            <div style={{fontFamily:"'JetBrains Mono', monospace", fontSize:11, color:accent, letterSpacing:3}}>§ 03 — DISPATCHES</div>
            <div style={{flex:1, borderBottom:`1px solid ${line}`}}/>
            <div style={{fontFamily:"'JetBrains Mono', monospace", fontSize:11, color:dim}}>Recent filings</div>
          </div>
          <div style={{display:'grid', gridTemplateColumns:mob ? '1fr' : '1fr 1fr', gap:0}}>
            {dispatches.map((d,i) => (
              <article key={i} style={{
                padding:mob ? '28px 0' : '40px 40px 40px 0',
                borderBottom: `1px solid ${line}`,
                borderTop: (mob ? i===0 : i<2) ? `1px solid ${line}` : 'none',
                borderRight: (!mob && i%2===0) ? `1px solid ${line}` : 'none',
                paddingLeft: (!mob && i%2===1) ? 40 : 0,
                cursor:'pointer', transition:'background .2s',
              }}
              onMouseEnter={e=>e.currentTarget.style.background='rgba(34,211,238,0.03)'}
              onMouseLeave={e=>e.currentTarget.style.background='transparent'}
              >
                <div style={{display:'flex', justifyContent:'space-between', fontFamily:"'JetBrains Mono', monospace", fontSize:10, color:dim, letterSpacing:2, marginBottom:18}}>
                  <span>{d.n} · {d.tag.toUpperCase()}</span>
                  <span>{d.d}</span>
                </div>
                <h4 style={{fontFamily:"'Fraunces', serif", fontSize:mob ? 24 : 32, fontWeight:400, margin:'0 0 14px', letterSpacing:-0.8, lineHeight:1.1}}>
                  {d.t}
                </h4>
                <p style={{fontFamily:"'Fraunces', serif", fontSize:17, color:dim, fontStyle:'italic', margin:0, fontWeight:300, lineHeight:1.5}}>
                  {d.sub}
                </p>
                <div style={{
                  marginTop:22, fontFamily:"'JetBrains Mono', monospace", fontSize:10,
                  letterSpacing:3, color:accent,
                }}>READ →</div>
              </article>
            ))}
          </div>
        </section>

        {/* ============ CONTACT ============ */}
        <section id="contact" style={{padding:mob ? '60px 20px 40px' : '140px 56px 60px', borderTop:`1px solid ${line}`}}>
          <div style={{display:'grid', gridTemplateColumns:mob ? '1fr' : '1.5fr 1fr', gap:mob ? 40 : 80, alignItems:'end'}}>
            <div>
              <div style={{fontFamily:"'JetBrains Mono', monospace", fontSize:11, color:accent, letterSpacing:3, marginBottom:40}}>§ 04 — CONTACT</div>
              <h2 style={{
                fontFamily:"'Fraunces', serif", fontSize:mob ? 48 : 112, lineHeight:0.95, fontWeight:300,
                margin:0, letterSpacing:mob ? -2 : -4,
              }}>
                Something<br/>
                <span style={{fontStyle:'italic', color:accent}}>worth holding?</span>
              </h2>
              <div style={{marginTop:52, display:'flex', gap:56, fontFamily:"'JetBrains Mono', monospace", fontSize:12, flexWrap:'wrap'}}>
                <div>
                  <div style={{color:dim, fontSize:10, letterSpacing:3, marginBottom:8}}>CORRESPONDENCE</div>
                  <div style={{color:fg, fontSize:16}}>ops@mle-holdings.com</div>
                </div>
                <div>
                  <div style={{color:dim, fontSize:10, letterSpacing:3, marginBottom:8}}>BASED IN</div>
                  <div style={{color:fg, fontSize:16}}>Newburgh, Indiana</div>
                </div>
                <div>
                  <div style={{color:dim, fontSize:10, letterSpacing:3, marginBottom:8}}>HOURS</div>
                  <div style={{color:fg, fontSize:16}}>Central · Mon–Fri</div>
                </div>
              </div>
            </div>
            <div style={{textAlign:mob ? 'left' : 'right'}}>
              <a href="mailto:ops@mle-holdings.com" style={{
                display:'inline-block',
                fontFamily:"'JetBrains Mono', monospace", fontSize:11, letterSpacing:3,
                background:'transparent', border:`1px solid ${accent}`, color:accent,
                padding:'24px 40px', textDecoration:'none', textTransform:'uppercase',
              }}>
                Begin a conversation →
              </a>
            </div>
          </div>
          <div style={{
            marginTop:100, paddingTop:40, borderTop:`1px solid ${line}`,
            display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:20,
            fontFamily:"'JetBrains Mono', monospace", fontSize:10, color:dim, letterSpacing:2,
          }}>
            <span>© MLE HOLDINGS · MMXXVI</span>
            <span>BUILT IN NEWBURGH, INDIANA</span>
            <span>4 COMPANIES · 1 HOLDING</span>
          </div>
        </section>
      </div>

      <style>{`
        @keyframes mle-marquee { from { transform: translateX(0);} to { transform: translateX(-12.5%);} }
        html { scroll-behavior: smooth; }
      `}</style>
    </div>
  );
}

window.Site = Site;
