import { icon, eyebrow, btn, textLink } from '../layout.mjs';

const ventures = [
  ['AI Growth Media Service', 'AG', 'CEO & Board Member', 'AI-focused marketing and growth company working at the intersection of digital visibility, strategy, and performance.', ['AI Search', 'Digital Visibility', 'Growth Strategy']],
  ['READTYCH', 'RT', 'Chief Marketing Officer, Co-Founder & Board Member', 'Education technology company developing a two-screen Digital Book and connected learning platform designed around how students and educators actually work.', ['EdTech', 'Product Strategy', 'Market Development']],
  ['Growth360Partners', 'G3', 'Chief Executive Officer & Founder', 'Full-service digital marketing agency bringing together search, websites, paid media, social, optimization, and growth strategy.', ['Marketing', 'Search', 'Digital Growth']],
  ['Infinitus Texas', 'IT', 'Partner & Strategic Advisor', 'Strategic partnership focused on brand positioning, marketing direction, and creating stronger foundations for scalable growth.', ['Strategy', 'Positioning', 'Growth']],
  ['Skinny Spiritz', 'SS', 'Chief Executive Officer & Board Member', 'Beverage brand where product, positioning, placement, partnerships, and customer attention all have to work together.', ['Spirits', 'Brand Growth', 'Partnerships']],
  ['Techie Marketing', 'TM', 'Chief Web3 Officer, Co-Founder & Advisor', 'Digital marketing and branding company created around the needs of technology and Web3-focused businesses.', ['Web3', 'Branding', 'Digital Strategy']],
  ['AiGrowth360', 'A3', 'Chief Executive Officer & Founder', 'Performance-driven digital marketing company using AI, analytics, and search strategy to find better ways to create measurable growth.', ['AI', 'Analytics', 'Performance Marketing']],
  ['Gangi Apparel', 'GA', 'Strategic Advisor & Partner', 'Apparel brand focused on fashion, identity, positioning, and creating a brand people can recognize beyond the product itself.', ['Apparel', 'Brand Positioning', 'Consumer']],
  ['meSEO', 'me', 'Founder & Strategic Growth Leader', 'Web application built around AI search, SEO, and the changing ways businesses are discovered online.', ['Software', 'AI Search', 'SEO']],
];

const capabilities = [
  'SEO Strategy', 'LLMO / AI Search Visibility', 'GEO / Local Expansion', 'Website Development', 'Website Optimization',
  'Social Media Management', 'Paid Media', 'Brand Development', 'Strategic Partnerships', 'Investor Relations',
  'Venture Growth', 'Business Development', 'Product Development', 'Fashion Brand Building',
];

const industries = [
  'Education', 'Technology', 'AI', 'Digital Marketing', 'Beverage', 'Fashion / Apparel', 'Consumer Brands',
  'Web3', 'Healthcare', 'Business Development', 'Partnerships', 'Investor Relations', 'Software / Web Apps',
];

const half = Math.ceil(capabilities.length / 2);
const row = (items) => items.map((c) => `<span class="cap"><i></i>${c}</span>`).join('');
const marquee = (items, rev) => `<div class="marquee"><div class="marquee-track${rev ? ' rev' : ''}">${row(items)}<span aria-hidden="true" style="display:contents">${row(items)}</span></div></div>`;

export default {
  path: '/portfolio/',
  title: 'Venture Portfolio &amp; Brands | Dylan Mazzei',
  description: 'Explore Dylan Mazzei’s portfolio of companies, brands, partnerships, and operating roles across AI, marketing, technology, education, and more.',
  body: `
<section class="page-hero" aria-labelledby="pf-hero">
  <div class="wrap page-hero-grid">
    <div class="stack anim">
      ${eyebrow('PORTFOLIO')}
      <h1 id="pf-hero" class="h-display-lg">Different Companies. Different Roles. Same Responsibility.</h1>
      <p class="lead">I’ve worked across companies at very different stages, sometimes as founder, sometimes as operator, partner, advisor, or board member.</p>
      <div class="btn-row">${btn('EXPLORE MY CURRENT VENTURES', '#ventures')}${btn('WORK WITH DYLAN', '/consulting/', 'ghost')}</div>
    </div>
    <div class="panel anim" aria-hidden="true">
      <div class="panel-bar"><span class="lights"><i></i><i></i><i></i></span><strong>The title changes. The expectation doesn’t.</strong></div>
      <ol class="steps-panel" style="padding:8px 0">
        <li class="sp-step"><span class="num">1</span><h4>Understand the business.</h4></li>
        <li class="sp-step"><span class="num">2</span><h4>Know where I can make a difference.</h4></li>
        <li class="sp-step"><span class="num">3</span><h4>Then be accountable for what happens next.</h4></li>
      </ol>
    </div>
  </div>
  <p class="sr-only">The title changes. The expectation doesn’t. Understand the business. Know where I can make a difference. Then be accountable for what happens next.</p>
</section>

<section class="section" id="ventures" aria-labelledby="vb">
  <div class="wrap">
    <div class="sec-head reveal">
      <div class="stack-sm">${eyebrow('FOUNDER-LED. OPERATOR-DRIVEN. ALWAYS CLOSE TO THE WORK.')}<h2 id="vb" class="h-display">Ventures &amp; Brands</h2></div>
      <p class="body">Different industries have asked different things of me. That range is part of the point.</p>
    </div>
    <div class="ventures reveal">
      ${ventures
        .map(
          ([name, mono, role, desc, focus]) => `<article class="venture">
        <div class="venture-head"><span class="mono" aria-hidden="true">${mono}</span></div>
        <div class="stack-xs"><h3>${name}</h3><p class="vrole">${role}</p></div>
        <p>${desc}</p>
        <div class="focus"><small>FOCUS:</small><div class="chips">${focus.map((f) => `<span class="tag">${f}</span>`).join('')}</div></div>
      </article>`
        )
        .join('')}
    </div>
    <div class="sec-foot reveal" style="justify-content:flex-end">${textLink('SEE HOW I THINK AS AN OPERATOR', '/about/')}</div>
  </div>
</section>

<section class="section band" aria-labelledby="caps">
  <div class="wrap">
    <div class="sec-head reveal">
      <div class="stack-sm">${eyebrow('CORE CAPABILITIES')}<h2 id="caps" class="h-display">What I Keep Getting Pulled Into.</h2></div>
      <p class="body">Different companies. Different problems. Certain kinds of work keep finding their way back to my desk.</p>
    </div>
  </div>
  <div class="stack-sm reveal">
    ${marquee(capabilities.slice(0, half))}
    ${marquee(capabilities.slice(half), true)}
  </div>
  <div class="wrap">
    <div class="sec-foot reveal" style="border-color:var(--dark-line);margin-top:48px">
      <p style="color:var(--ash)">The operating experience behind these capabilities also shapes my consulting work with founders.</p>
      ${btn('WORK WITH DYLAN', '/consulting/', 'light')}
    </div>
  </div>
</section>

<section class="section" aria-labelledby="ind">
  <div class="wrap">
    <div class="sec-head reveal">
      <div class="stack-sm">${eyebrow('INDUSTRIES &amp; SECTORS')}<h2 id="ind" class="h-display">I Never Saw Much Value in Staying in One Lane.</h2></div>
      <p class="body">Moving between industries keeps me from assuming the last answer will work on the next problem.</p>
    </div>
    <div class="industries reveal">
      ${industries.map((n, i) => `<div class="industry"><span class="index">${String(i + 1).padStart(2, '0')}</span><b>${n}</b></div>`).join('')}
      <a class="industry industry-note" href="/about/"><p>That range has also included businesses that went through successful exits. You can read more about the journey behind the portfolio.</p>${icon('arrow', 'check')}</a>
      
    </div>
  </div>
</section>

<section class="section" aria-labelledby="next">
  <div class="wrap">
    <div class="closing reveal">
      <div class="closing-inner">
        ${eyebrow('WHAT’S NEXT')}
        <h2 id="next" class="h-display-lg">The Portfolio Is Still Moving.</h2>
        <div class="prose">
          <p>Some of these businesses are growing. Others are changing. New ideas are already competing for attention.</p>
          <p>If you want to see what I’m actively operating today, start with my current ventures.</p>
          <p class="body-ink">If you have a business, partnership, or opportunity worth putting on the table, I’m open to the conversation.</p>
        </div>
        <div class="btn-row">${btn('EXPLORE MY VENTURES', '#ventures', 'ghost')}${btn('START A CONVERSATION', '/contact/')}</div>
      </div>
    </div>
  </div>
</section>
`,
};