// Leviyet Ventures — products we design, build and operate ourselves,
// plus co-builds with operators. Products are described, not named.

const Ventures = () => {
  const products = [
    { n: '01', sector: 'B2B · Industrial', status: 'In market', t: 'A customer portal for a manufacturer\'s trade buyers.', d: 'Orders, reorders, credit and account history in one place, replacing phone calls and PDFs. Designed by the Studio, built by the Lab, grown by Digital.', mark: 'portal' },
    { n: '02', sector: 'Professional services', status: 'In market', t: 'An intake and lead-qualification platform for firms that live on referrals.', d: 'Captures, scores and routes new matters before a partner ever opens the file. Runs on the same agents we build for clients.', mark: 'intake' },
    { n: '03', sector: 'Operations software', status: 'Private beta', t: 'A third product, in private beta with a handful of operators.', d: 'Details when it ships. It exists because we kept building the same internal tool for three different clients.', mark: 'beta' },
  ];

  const css = `
    .vn-list { display: flex; flex-direction: column; gap: 1px; background: rgba(26,22,18,0.12); border-top: 1px solid rgba(26,22,18,0.12); border-bottom: 1px solid rgba(26,22,18,0.12); }
    .vn-item { background: #f4efe6; display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; padding: 56px 0; align-items: center; }
    .vn-item:nth-child(even) .vn-vis { order: 2; }
    .vn-vis { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #1a1612; }
    .vn-vis svg { width: 100%; height: 100%; display: block; }
    .vn-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #c8542a; display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
    .vn-meta span:not(:first-child) { color: #6b5d4d; }
    .vn-meta .vn-status { color: #1a1612; background: #ede5d6; padding: 3px 10px; border-radius: 999px; }
    .vn-item h3 { font-family: 'Instrument Serif', serif; font-size: 42px; line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 18px; font-weight: 400; }
    .vn-item p { font-size: 15px; line-height: 1.65; color: #4a3f33; margin: 0; max-width: 540px; }
    .vn-note { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #6b5d4d; margin-top: 28px; letter-spacing: 0.04em; }
    .vn-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(26,22,18,0.12); border: 1px solid rgba(26,22,18,0.12); border-radius: 18px; overflow: hidden; }
    .vn-way { background: #f4efe6; padding: 36px 30px 40px; min-height: 300px; display: flex; flex-direction: column; }
    .vn-way:nth-child(2) { background: #1a1612; color: #f4efe6; }
    .vn-way span { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; color: #c8542a; margin-bottom: 40px; }
    .vn-way:nth-child(2) span { color: #e8a77f; }
    .vn-way h3 { font-family: 'Instrument Serif', serif; font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 12px; font-weight: 400; }
    .vn-way p { font-size: 14px; line-height: 1.6; color: #4a3f33; margin: 0; }
    .vn-way:nth-child(2) p { color: rgba(244,239,230,0.7); }
    .vn-way i { margin-top: auto; padding-top: 24px; font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6b5d4d; }
    .vn-way:nth-child(2) i { color: rgba(244,239,230,0.5); }
    @media (max-width: 1024px) {
      .vn-item { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; } .vn-item:nth-child(even) .vn-vis { order: 0; }
      .vn-item h3 { font-size: 34px; }
      .vn-ways { grid-template-columns: 1fr; } .vn-way { min-height: auto; }
    }
    @media (max-width: 720px) { .vn-item h3 { font-size: 28px; } .vn-way { padding: 28px 22px 32px; } .vn-way h3 { font-size: 28px; } }
  `;

  return (
    <>
      <window.WeNav active="ventures" />
      <window.WeSEO page="ventures" />
      <style>{window.UNIT_CSS}{css}</style>

      <section className="we-page-hero">
        <div className="we-shead"><div className="we-shead-line"></div>Leviyet Ventures</div>
        <div className="un-hero-row">
          <div>
            <h1 className="we-page-h1">We build <em>our own things.</em></h1>
            <p className="we-page-sub">Products we design, build and operate ourselves. They keep the house honest: every playbook we sell has run on our own money first. And sometimes we build alongside operators who have the problem and not the team.</p>
          </div>
          <div className="un-side">
            <div><b>Miami</b> · 25.7617° N, 80.1918° W</div>
            <div><b>Three products.</b> Two in market, one in beta.</div>
            <div>Built by the same people who build for clients</div>
            <div>Co-builds: cash, equity, or <b>a mix.</b></div>
            <div>Names and demos <b>on request.</b></div>
          </div>
        </div>
      </section>

      <section className="we-section">
        <div className="we-shead"><div className="we-shead-line"></div>In the portfolio</div>
        <h2 className="we-stitle">Three products. <em>Zero slide decks.</em></h2>
        <div className="vn-list">
          {products.map(p => (
            <article className="vn-item" key={p.n}>
              <div className="vn-vis"><window.VentureMark kind={p.mark} /></div>
              <div>
                <div className="vn-meta"><span>— {p.n}</span><span>{p.sector}</span><span className="vn-status">{p.status}</span></div>
                <h3>{p.t}</h3>
                <p>{p.d}</p>
              </div>
            </article>
          ))}
        </div>
        <div className="vn-note">// Product names, demos and numbers are shared on request. We'd rather show you than list them.</div>
      </section>

      <section className="we-section" style={{paddingTop: 0}}>
        <div className="we-shead"><div className="we-shead-line"></div>How ventures work</div>
        <h2 className="we-stitle">Three ways <em>a product gets built here.</em></h2>
        <div className="vn-ways">
          <div className="vn-way"><span>— 01</span><h3>We build it ourselves.</h3><p>A problem we've seen three times inside client work becomes a product. We fund it, build it, run it, and use it as the proving ground for everything the house sells.</p><i>// own capital · own roadmap</i></div>
          <div className="vn-way"><span>— 02</span><h3>We co-build with an operator.</h3><p>You have the market, the customers and the problem. We bring the Studio, the Lab and Digital. Structured as cash, equity, or a mix, agreed before the first sketch.</p><i>// cash + equity · shared upside</i></div>
          <div className="vn-way"><span>— 03</span><h3>We spin it out.</h3><p>When a product outgrows the house, it gets its own name, its own team and its own door. We keep a seat at the table and the playbook stays in the family.</p><i>// own brand · own team</i></div>
        </div>
      </section>

      <section className="we-section" style={{paddingTop: 0}}>
        <div className="we-shead"><div className="we-shead-line"></div>// what we believe</div>
        <h2 className="we-stitle">An agency that ships its own products <em>is a different kind of agency.</em></h2>
        <window.UnitPrinciples items={[
          { k: 'skin in the game', t: 'We feel our own mistakes first.', d: 'Churn, CAC, support load, broken onboarding. We live with them on our products before we advise anyone on theirs.' },
          { k: 'the playbook stays current', t: 'Methods get tested every week.', d: 'Our products run the same weekly loop as client work. If a tactic stops working, we find out on our own dashboard.' },
          { k: 'compounding', t: 'Every product makes the house better.', d: 'Components, agents and design systems built for Ventures get reused for clients. You get the benefit without the R&D bill.' },
        ]} />
      </section>

      <window.UnitCTA h={'Have a product <em>in you?</em>'} p="Operators with a real problem and real customers: tell us about it. 30 minutes, no deck. We'll say whether it's a build, a co-build, or not yet." btn="Talk to Ventures →" />
      <window.WeFooter />
    </>
  );
};

const VentureMark = ({ kind }) => {
  const ink = '#1a1612', terra = '#c8542a', peach = '#e8a77f', cream = '#f4efe6';
  if (kind === 'portal') return (
    <svg viewBox="0 0 400 300">
      <rect width="400" height="300" fill={ink} />
      <rect x="60" y="50" width="280" height="200" rx="10" fill="none" stroke={cream} strokeWidth="1.5" opacity="0.6" />
      <rect x="60" y="50" width="280" height="30" rx="10" fill={cream} opacity="0.12" />
      <rect x="80" y="100" width="90" height="12" rx="6" fill={cream} opacity="0.8" />
      <rect x="80" y="125" width="150" height="8" rx="4" fill={cream} opacity="0.35" />
      <rect x="80" y="145" width="120" height="8" rx="4" fill={cream} opacity="0.35" />
      <rect x="80" y="190" width="110" height="34" rx="17" fill={terra} />
      <circle cx="290" cy="150" r="34" fill={peach} />
      <text x="24" y="282" fontFamily="JetBrains Mono, monospace" fontSize="10" fill={cream} letterSpacing="2" opacity="0.7">ORDERS · CREDIT · REORDERS</text>
    </svg>
  );
  if (kind === 'intake') return (
    <svg viewBox="0 0 400 300">
      <rect width="400" height="300" fill={ink} />
      {[0,1,2,3,4].map(i => <circle key={i} cx={70 + i * 20} cy={90 + (i % 2) * 110} r="10" fill={cream} opacity={0.35 + i * 0.1} />)}
      <path d="M170 150 L250 150" stroke={cream} strokeWidth="1.5" opacity="0.6" strokeDasharray="4 5" />
      <path d="M250 150 L300 90 M250 150 L300 210" stroke={cream} strokeWidth="1.5" opacity="0.6" />
      <circle cx="320" cy="90" r="24" fill={terra} />
      <circle cx="320" cy="210" r="24" fill="none" stroke={cream} strokeWidth="1.5" opacity="0.5" />
      <rect x="150" y="120" width="60" height="60" rx="30" fill={peach} />
      <text x="24" y="282" fontFamily="JetBrains Mono, monospace" fontSize="10" fill={cream} letterSpacing="2" opacity="0.7">CAPTURE · SCORE · ROUTE</text>
    </svg>
  );
  return (
    <svg viewBox="0 0 400 300">
      <rect width="400" height="300" fill={ink} />
      <circle cx="200" cy="150" r="90" fill="none" stroke={cream} strokeWidth="1.5" opacity="0.35" strokeDasharray="6 8" />
      <circle cx="200" cy="150" r="54" fill="none" stroke={cream} strokeWidth="1.5" opacity="0.5" />
      <circle cx="200" cy="150" r="20" fill={terra} />
      <circle cx="290" cy="150" r="7" fill={peach} />
      <text x="24" y="282" fontFamily="JetBrains Mono, monospace" fontSize="10" fill={cream} letterSpacing="2" opacity="0.7">PRIVATE BETA · DETAILS WHEN IT SHIPS</text>
    </svg>
  );
};

window.Ventures = Ventures;
window.VentureMark = VentureMark;