/* global React, LITMUS_DATA, CorridorsDiagram, CorridorSchematic */
const useStateP = React.useState;

function ThesisPage() {
  const [tab, setTab] = useStateP(0);
  const tabs = [
    {
      idx: '01', k: 'Financial Rails',
      h: 'Payments, settlement and money movement — the pipes underneath every transaction.',
      lead: "We back the rails that clear and settle everyday economic activity: wallets, acquiring, issuing, merchant finance, and cross-border money movement.",
      look: [
        ['Market', 'Corridors where digital payments are overtaking cash in the last 24 months.'],
        ['Product', 'Infrastructure-grade reliability — not consumer-brand experiments.'],
        ['Team', 'Operators who have shipped clearing, BIN-sponsorship or acquiring at scale.'],
        ['Unit economics', 'Take rate × volume × retention. We do not finance subsidy-driven growth.'],
      ],
      avoid: ['Pure BNPL plays', 'Consumer super-apps', 'Crypto-native primitives without regulated rails'],
    },
    {
      idx: '02', k: 'Merchant Systems',
      h: 'Software, credit and operating tools for the storefronts moving goods in growth cities.',
      lead: 'SMBs operate between 40% and 70% of formal retail across our corridors. Their stack is fragmented, their margins are thin, and their tools are built for Western volume assumptions.',
      look: [
        ['Market', 'Merchant bases of 50,000+ with clear distribution moats.'],
        ['Product', 'Software that bundles commerce, credit and logistics into one surface.'],
        ['Team', 'Founders with real field distribution experience — not only dashboards.'],
        ['Unit economics', 'Gross margin discipline, not blitz-scale acquisition.'],
      ],
      avoid: ['Marketplace-only with no operating layer', 'International-first consumer brands', 'AI-overlay with no proprietary distribution'],
    },
    {
      idx: '03', k: 'Urban & Consumer Infrastructure',
      h: 'Energy, real estate, mobility and consumer distribution — the physical operating layer.',
      lead: 'Infrastructure for everyday life is being rebuilt across our corridors. We invest where software reshapes the economics of essential systems and where operator relationships let young companies move fast without rebuilding utilities from scratch.',
      look: [
        ['Market', 'Essential services with regulated revenue or long-duration offtake.'],
        ['Product', 'Software or hardware/software systems with clear asset leverage.'],
        ['Team', 'Mixed backgrounds — engineering, utility operations, project finance.'],
        ['Unit economics', 'Project IRR plus software margin. We underwrite both.'],
      ],
      avoid: ['Pure CapEx roll-ups without software leverage', 'Concept-stage climate bets without offtake clarity', 'Hardware-only with no operating partner'],
    },
  ];
  const t = tabs[tab];
  return (
    <main>
      <section className="page-hero" data-screen-label="Thesis · Hero">
        <div className="container">
          <div className="eyebrow">§ Thesis</div>
          <h1>We invest across three layers of the real economy — and we hold the line on all three.</h1>
          <p>LITMUS is a growth-markets operating-infrastructure VC. Not a fintech fund, not a real-assets fund. We look for the connective tissue underneath payments, commerce and essential services in markets where everyday life is being rewired in real time.</p>
        </div>
      </section>

      <section data-screen-label="Thesis · Why">
        <div className="container">
          <div style={{display:'grid', gridTemplateColumns:'1fr 1.4fr', gap:80, marginBottom:80}}>
            <div>
              <div className="eyebrow">§ Why operating infrastructure</div>
              <h2 style={{fontSize:36, fontWeight:400, letterSpacing:'-0.025em', lineHeight:1.1, margin:'14px 0 0'}}>Because growth markets don't need more apps. They need rails.</h2>
            </div>
            <div>
              <p style={{fontSize:18, lineHeight:1.55, margin:0}}>Across Gulf, Africa, Southeast Asia and Latin America, the decisive companies of the next cycle will not be the flashiest consumer brands. They will be the ones quietly running the plumbing: the payment switches, the merchant stacks, the metered grids, the inland logistics, the credit rails.</p>
              <p style={{fontSize:16, color:'var(--muted)', marginTop:20, lineHeight:1.55}}>That is where we concentrate our capital, our time, and our operator network.</p>
            </div>
          </div>

          <div className="thesis-tabs">
            {tabs.map((tb, i) => (
              <button key={i} className={`thesis-tab ${tab===i?'active':''}`} onClick={()=>setTab(i)}>
                <span className="idx">{tb.idx}</span>{tb.k}
              </button>
            ))}
          </div>

          <div className="thesis-panel">
            <div>
              <div className="eyebrow" style={{color:'var(--copper)'}}>Pillar {t.idx}</div>
              <h3>{t.h}</h3>
              <p className="lead">{t.lead}</p>
            </div>
            <div>
              <div className="eyebrow">What we look for</div>
              <ul>
                {t.look.map(([k, v]) => <li key={k}><div className="k">{k}</div><div>{v}</div></li>)}
              </ul>
              <div className="eyebrow" style={{marginTop:40, color:'var(--copper)'}}>We do not invest in</div>
              <div style={{display:'flex', flexWrap:'wrap', gap:8, marginTop:14}}>
                {t.avoid.map(a => <span key={a} style={{padding:'8px 14px', border:'1px solid var(--border)', borderRadius:999, fontSize:13, color:'var(--muted)'}}>— {a}</span>)}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section data-screen-label="Thesis · How">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">§ How our network helps</div>
              <h2>Operator access isn't a deck slide. It's the work.</h2>
            </div>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14}}>
            {[
              {n:'01', t:'Corridor access', d:'Introductions into regulated telcos, utility operators and top-3 retailers across our corridors.'},
              {n:'02', t:'Customer warm-starts', d:'First commercial conversations with our operator-network before your first sales hire.'},
              {n:'03', t:'Capital stack design', d:'Project finance, warehouse lines and LP networks — assembled alongside equity, not after.'},
            ].map(x => (
              <div className="card" key={x.n}>
                <div className="eyebrow" style={{color:'var(--copper)'}}>{x.n}</div>
                <h3 style={{fontSize:22, fontWeight:500, letterSpacing:'-0.02em', margin:'18px 0 12px'}}>{x.t}</h3>
                <p style={{fontSize:14, color:'var(--muted)', margin:0}}>{x.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

function PortfolioPage() {
  const sectors = ['All', 'Financial Rails', 'Merchant Systems', 'Consumer Credit', 'Trust & Community', 'Digital Entertainment'];
  const regions = ['All', 'Gulf', 'MENA', 'Africa', 'East Africa', 'SE Asia', 'Mexico', 'Europe', 'Europe adj.', 'Growth Markets', 'Global'];
  const stages = ['All', 'Series A', 'Series B', 'Series C', 'Series E', 'Growth', 'Scale', 'Public'];
  const [s, setS] = useStateP('All');
  const [r, setR] = useStateP('All');
  const [st, setSt] = useStateP('All');
  const list = LITMUS_DATA.portfolioAll.filter(c =>
    (s==='All' || c.sector===s) &&
    (r==='All' || c.region===r) &&
    (st==='All' || c.stage===st)
  );
  return (
    <main>
      <section className="page-hero" data-screen-label="Portfolio · Hero">
        <div className="container">
          <div className="eyebrow">§ Portfolio · {LITMUS_DATA.portfolioAll.length} companies</div>
          <h1>Companies building the operating layer of growth markets.</h1>
          <p>We back a concentrated set of founders across financial rails, merchant systems, and essential urban infrastructure.</p>
        </div>
      </section>

      <section data-screen-label="Portfolio · Grid">
        <div className="container">
          <div className="filters">
            <div className="filter-group">
              <span className="fl-label">Sector</span>
              {sectors.map(x => <button key={x} className={`chip ${s===x?'active':''}`} onClick={()=>setS(x)}>{x}</button>)}
            </div>
          </div>
          <div className="filters" style={{borderBottom:'none', paddingBottom:0, marginBottom:24}}>
            <div className="filter-group">
              <span className="fl-label">Region</span>
              {regions.map(x => <button key={x} className={`chip ${r===x?'active':''}`} onClick={()=>setR(x)}>{x}</button>)}
            </div>
            <div className="filter-group">
              <span className="fl-label">Stage</span>
              {stages.map(x => <button key={x} className={`chip ${st===x?'active':''}`} onClick={()=>setSt(x)}>{x}</button>)}
            </div>
          </div>
          <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.12em', color:'var(--muted)', textTransform:'uppercase', marginBottom:20}}>
            {list.length} companies · {s !== 'All' ? s : 'All sectors'} · {r !== 'All' ? r : 'All regions'}
          </div>
          <div className="portfolio-grid">
            {list.map(c => (
              <div className="pf-card" key={c.name}>
                <div>
                  <div className="pf-logo">{c.name}</div>
                  <div className="pf-meta"><span>{c.sector}</span><span>{c.region}</span><span>{c.stage}</span></div>
                  <div className="pf-desc">{c.desc}</div>
                </div>
                <div className="pf-arrow">→</div>
              </div>
            ))}
            {list.length === 0 && <div style={{gridColumn:'1/-1', padding:60, textAlign:'center', color:'var(--muted)', fontSize:14}}>No companies match this filter.</div>}
          </div>
        </div>
      </section>
    </main>
  );
}

function MarketsPage() {
  return (
    <main>
      <section className="page-hero" data-screen-label="Markets · Hero">
        <div className="container">
          <div className="eyebrow">§ Markets · Corridors</div>
          <h1>Four growth corridors. One operating mandate.</h1>
          <p>Our deals concentrate where we can underwrite both narrative and infrastructure: Gulf, Africa, Southeast Asia, and Latin America.</p>
        </div>
      </section>

      <section data-screen-label="Markets · Schematic">
        <div className="container">
          <CorridorSchematic/>
        </div>
      </section>

      <section data-screen-label="Markets · Grid">
        <div className="container">
          <div className="markets-grid">
            {LITMUS_DATA.corridors.map(c => (
              <div className="market-card" key={c.id}>
                <div className="mc-id">{c.code}</div>
                <h3>{c.name}</h3>
                <div className="mc-cities">{c.cities.map(x => <span key={x}>{x}</span>)}</div>
                <p style={{color:'var(--muted)', fontSize:15, lineHeight:1.55, margin:0}}>{c.note}</p>
                <div className="mc-stats">
                  {c.stats.map(([v, l], i) => (
                    <div key={i}>
                      <div className="v">{v}</div>
                      <div className="l">{l}</div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

function NetworkPage({ setPage }) {
  const groups = [
    { k: 'Energy & Utilities Infrastructure', t: 'Power, renewables, desalination & roadside mobility.', d: 'Operators powering and moving economies across the Gulf.',
      logos: [
        { n:'ACWA Power', s:'Power · Renewables · Desalination · Green H₂' },
        { n:'ADNOC Distribution', s:'Fuel retail · EV charging · Roadside' },
      ]
    },
    { k: 'Urban Lifestyle & Real Estate', t: 'Malls, hotels, mixed-use & lifestyle real estate.', d: 'Operators of lifestyle infrastructure and urban mixed-use footprints across Gulf and SE Asia.',
      logos: [
        { n:'Majid Al Futtaim', s:'Malls · Hotels · Cinema · Lifestyle' },
        { n:'Frasers Property', s:'Commercial · Industrial · Residential' },
        { n:'Asset World', s:'Hospitality · Retail · Lifestyle RE' },
      ]
    },
    { k: 'Consumer Distribution & Staples', t: 'F&B, packaging, healthcare & modern retail.', d: 'Distribution networks reaching from port to neighborhood shop.',
      logos: [
        { n:'F&N', s:'F&B · Publishing · Distribution' },
        { n:'BJC', s:'Packaging · Healthcare · Modern retail' },
        { n:'ThaiBev', s:'Spirits · Beer · Non-alc · Food' },
      ]
    },
  ];
  return (
    <main>
      <section className="page-hero" data-screen-label="Network · Hero">
        <div className="container">
          <div className="eyebrow">§ Network</div>
          <h1>A network across the systems that move everyday life.</h1>
          <p>Our operator network connects portfolio companies to the incumbents of the real economy — energy, property, distribution and consumer staples.</p>
        </div>
      </section>

      <NetworkResolver/>

      <section data-screen-label="Network · Groups">
        <div className="container">
          {groups.map(g => (
            <div className="net-group" key={g.k}>
              <div>
                <div className="gk">{g.k}</div>
                <h3>{g.t}</h3>
                <p>{g.d}</p>
              </div>
              <div className="net-logos">
                {g.logos.map(l => (
                  <div className="net-logo-cell" key={l.n}>
                    <div>{l.n}</div>
                    <span className="sub">{l.s}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

function NetworkResolver() {
  const pains = [
    { id:'merchants',  l:'Reach 50k+ merchants', sector:'Merchant Systems',  partners:[['Majid Al Futtaim','Malls / Gulf'],['F&N','FMCG / SE Asia'],['BJC','Modern retail / SE Asia']], h:'Merchant access through real estate and distribution.', p:'We open malls, hotels, and FMCG distribution routes to your sales motion. Pilots in two corridors before your first regional hire.' },
    { id:'utility',    l:'Embed into utility billing', sector:'Financial Rails',  partners:[['ACWA Power','Generation / Gulf'],['ADNOC Distribution','Mobility / Gulf']], h:'Settlement and billing inside utility offtake.', p:'A regulated payments rail that plugs into utility BDAs and roadside mobility — we underwrite the rail and the regulated counterparty.' },
    { id:'projfin',    l:'Project finance + Series B', sector:'Urban & Essential',  partners:[['Aran Asset Mgmt.','Asset mgr / Gulf'],['Sovereign Fund II','SWF / co-invest'],['Northridge Re','Reinsurance']], h:'Capital stack assembled in parallel.', p:'Equity, project finance and warehouse lines designed alongside the round, not retro-fitted in quarter four.' },
    { id:'lastmile',   l:'Last-mile in 11 cities', sector:'Merchant Systems',  partners:[['Asset World','Hospitality / SE Asia'],['Frasers Property','Mixed-use / SE Asia'],['ThaiBev','Distribution / SE Asia']], h:'Last-mile rollout through hospitality estates.', p:'A merchant systems company can scale to 11 cities using existing operator-controlled districts as beachheads.' },
  ];
  const [active, setActive] = useStateP(pains[0].id);
  const cur = pains.find(x => x.id === active) || pains[0];
  return (
    <section data-screen-label="Network · Resolver">
      <div className="container">
        <div className="section-head" style={{marginBottom:32}}>
          <div>
            <div className="eyebrow">§ Operator Network · Resolver</div>
            <h2>Tell us your bottleneck. We'll tell you who in our network unlocks it.</h2>
          </div>
        </div>
        <div className="resolver">
          <div className="eyebrow" style={{color:'var(--teal)'}}>What's your bottleneck right now?</div>
          <h3>Pick one — we'll route you to the right corner of our operator network.</h3>
          <div className="resolver-pains">
            {pains.map(p => (
              <div key={p.id} className={`resolver-pain ${active===p.id?'active':''}`} onClick={()=>setActive(p.id)}>
                {p.l}
              </div>
            ))}
          </div>
          <div className="resolver-result">
            <div>
              <div className="eyebrow" style={{color:'var(--copper)'}}>→ {cur.sector}</div>
              <h4>{cur.h}</h4>
              <p>{cur.p}</p>
            </div>
            <div className="partners">
              <div className="eyebrow" style={{color:'var(--copper)', marginBottom:6}}>Operator partners</div>
              {cur.partners.map(([n, s], i) => (
                <div className="partner" key={i}>
                  <span className="pname">{n}</span>
                  <span className="ptag">{s}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function InsightsPage() {
  const [open, setOpen] = useStateP(null);
  const item = open != null ? LITMUS_DATA.insights[open] : null;
  return (
    <main>
      <section className="page-hero" data-screen-label="Insights · Hero">
        <div className="container">
          <div className="eyebrow">§ Insights · Field notes</div>
          <h1>Market maps, operator notes and founder letters — written from the field.</h1>
          <p>We publish what we learn from the corridors. Slow editorial, narrow focus, no hot takes.</p>
        </div>
      </section>

      <section data-screen-label="Insights · List">
        <div className="container">
          <div className="editorial-list">
            {LITMUS_DATA.insights.map((it, i) => (
              <div className="ed-item" key={i} onClick={()=>setOpen(i)}>
                <div className="ed-num">{String(i+1).padStart(2,'0')} · {it.kicker}</div>
                <div className="ed-title">{it.title}</div>
                <div className="ed-meta">{it.meta}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <div className={`drawer-mask ${item?'open':''}`} onClick={()=>setOpen(null)}/>
      <aside className={`drawer ${item?'open':''}`}>
        <div className="drawer-head">
          <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--copper)'}}>
            {item ? `${item.kicker} · ${item.meta}` : 'Field note'}
          </div>
          <button className="drawer-close" onClick={()=>setOpen(null)}>Close ×</button>
        </div>
        <div className="drawer-body">
          {item && (<>
            <div className="eyebrow" style={{color:'var(--copper)'}}>{item.kicker}</div>
            <div className="ed-title" style={{fontFamily:'var(--serif)', fontSize:36, fontWeight:400, letterSpacing:'-0.015em', lineHeight:1.15, margin:'14px 0 22px'}}>{item.title}</div>
            <p>{item.body}</p>
            <p>From the field: this was written between site visits in Lagos, Singapore and México DF — not from a desk. The point of insights is not to predict; it is to map what is already happening on the ground, before the consensus catches up.</p>
            <div className="pull">"Spend the week. The abstractions break, and the real shape of the market shows up."</div>
            <p>We publish a small set of pieces each year — corridor maps, operator notes and founder letters. They are intentionally slow. If you want them in your inbox, write to us.</p>
          </>)}
        </div>
      </aside>
    </main>
  );
}

function TeamPage() {
  return (
    <main>
      <section className="page-hero" data-screen-label="Team · Hero">
        <div className="container">
          <div className="eyebrow">§ Team</div>
          <h1>A small team, deeply networked into operating industries.</h1>
          <p>Six partners and principals across Dubai, Singapore, Lagos and México DF. We carry our own diligence — and our own bags.</p>
        </div>
      </section>

      <section data-screen-label="Team · Grid">
        <div className="container">
          <div className="team-grid">
            {LITMUS_DATA.team.map(p => (
              <div className="team-card" key={p.name}>
                <div className="team-portrait">
                  <div className="pat"/>
                  <div className="ti">{p.i}</div>
                </div>
                <div className="name">{p.name}</div>
                <div className="role">{p.role}</div>
                <p className="bio">{p.bio}</p>
                {p.quote && <div className="quote">"{p.quote}"</div>}
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ThesisPage, PortfolioPage, MarketsPage, NetworkPage, NetworkResolver, InsightsPage, TeamPage });