// Leviyet Digital — paid media, search, content and lifecycle.
// Growth that compounds, run in weekly loops with Studio creative and Labs tooling.

const Digital = () => {
  const offers = [
    { n: '01', t: 'Paid Social & Search', d: 'Meta, Google, TikTok, YouTube. Structured for learning first, scale second. Creative tested in small batches before a dollar of real budget moves.', meta: ['engagement', 'monthly'] },
    { n: '02', t: 'SEO & Content Engines', d: 'Search-led content that compounds. Built as a system with Labs, written in the brand\'s voice, published on a schedule your team can keep.', meta: ['engagement', 'monthly'] },
    { n: '03', t: 'Email & Lifecycle', d: 'Welcome, replenish, win-back, subscription save. The flows that make a DTC brand profitable after the first order.', meta: ['setup', '3–5 weeks'] },
    { n: '04', t: 'Creative for Performance', d: 'Ad creative and landing pages made with the Studio, so the ads look like the brand and the brand converts. Refreshed before fatigue, not after.', meta: ['cadence', 'weekly'] },
    { n: '05', t: 'Analytics & Attribution', d: 'One dashboard, honest numbers. Blended CAC, payback, contribution margin. Reporting that writes itself, built in the lab.', meta: ['setup', '2 weeks'] },
    { n: '06', t: 'Launch Campaigns', d: 'Pre-launch list building, launch week, the 90 days after. Planned with the Studio from the first brand sketch, not bolted on at the end.', meta: ['timeline', '12 weeks'] },
  ];

  const css = `
    .dg-loop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(26,22,18,0.12); border: 1px solid rgba(26,22,18,0.12); border-radius: 18px; overflow: hidden; }
    .dg-loop div { background: #f4efe6; padding: 32px 28px; min-height: 220px; display: flex; flex-direction: column; }
    .dg-loop div:nth-child(even) { background: #ede5d6; }
    .dg-loop span { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; color: #c8542a; }
    .dg-loop b { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 40px; letter-spacing: -0.02em; margin: 18px 0 10px; line-height: 1; }
    .dg-loop p { margin: auto 0 0; font-size: 14px; line-height: 1.6; color: #4a3f33; }
    .dg-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
    .dg-band div { border-top: 1px solid rgba(26,22,18,0.12); padding-top: 24px; }
    .dg-band b { display: block; font-family: 'Instrument Serif', serif; font-size: 56px; line-height: 1; letter-spacing: -0.03em; font-weight: 400; color: #c8542a; margin-bottom: 10px; }
    .dg-band b small { font-size: 28px; font-style: italic; }
    .dg-band p { margin: 0; font-size: 14px; line-height: 1.6; color: #4a3f33; max-width: 300px; }
    @media (max-width: 1024px) { .dg-loop { grid-template-columns: repeat(2, 1fr); } .dg-band { grid-template-columns: 1fr; } }
    @media (max-width: 720px) { .dg-loop { grid-template-columns: 1fr; } .dg-loop div { min-height: auto; padding: 24px 20px; } .dg-loop b { font-size: 32px; } .dg-band b { font-size: 44px; } }
  `;

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

      <section className="we-page-hero">
        <div className="we-shead"><div className="we-shead-line"></div>Leviyet Digital</div>
        <div className="un-hero-row">
          <div>
            <h1 className="we-page-h1">Growth that <em>compounds.</em></h1>
            <p className="we-page-sub">The performance practice inside Leviyet. Paid media, search, content and lifecycle for brands that already have something worth selling, run in weekly loops with the Studio's creative and the Lab's tooling.</p>
          </div>
          <div className="un-side">
            <div><b>Toronto</b> · 43.6532° N, 79.3832° W</div>
            <div><b>Plan → ship → read → cut.</b> Every week.</div>
            <div>Your ad accounts, your data, <b>your access.</b></div>
            <div>Creative is the lever. <b>Made next door.</b></div>
            <div>No retainer for the sake of a retainer.</div>
          </div>
        </div>
      </section>

      <section className="we-section">
        <div className="we-shead"><div className="we-shead-line"></div>What we run</div>
        <h2 className="we-stitle">Six levers. <em>Pulled in the right order.</em></h2>
        <window.UnitOffers items={offers} />
      </section>

      <section className="we-section" style={{paddingTop: 0}}>
        <div className="we-shead"><div className="we-shead-line"></div>The weekly loop</div>
        <h2 className="we-stitle">We run media the way the lab <em>runs software.</em></h2>
        <div className="dg-loop">
          <div><span>— MON</span><b>Plan</b><p>Last week's numbers on the table. Three bets for this week, each with a kill condition written down.</p></div>
          <div><span>— TUE · WED</span><b>Ship</b><p>New creative, new audiences, new pages. Small batches. Nothing that takes a month to learn from.</p></div>
          <div><span>— THU</span><b>Read</b><p>Blended CAC, payback, contribution margin. One dashboard, no vanity metrics, no spin.</p></div>
          <div><span>— FRI</span><b>Cut</b><p>Kill what lost. Double what won. Write it down so the playbook gets smarter every week.</p></div>
        </div>
      </section>

      <section className="we-section" style={{paddingTop: 0}}>
        <div className="we-shead"><div className="we-shead-line"></div>What good looks like</div>
        <h2 className="we-stitle">Three numbers we manage to. <em>Everything else is noise.</em></h2>
        <div className="dg-band">
          <div><b>CAC<small> blended</small></b><p>What it really costs to win a customer, across every channel, including the ones that don't get credit.</p></div>
          <div><b>Payback</b><p>How many days until a customer has paid for their own acquisition. Shorter is freedom.</p></div>
          <div><b>Margin<small> contribution</small></b><p>What's left after product, shipping and media. The number the business actually lives on.</p></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">Media doesn't fix a brand. <em>It amplifies one.</em></h2>
        <window.UnitPrinciples items={[
          { k: 'creative is the lever', t: 'The ad is the targeting now.', d: 'Platforms find the audience. Our job is to give them something worth finding. That\'s why Digital sits next to the Studio.' },
          { k: 'your accounts', t: 'We never hold your data hostage.', d: 'Ad accounts, pixels, analytics and lists are opened in your name from day one. Leave whenever you like and take everything with you.' },
          { k: 'honest numbers', t: 'Blended, not channel-flattered.', d: 'Every platform claims the same sale. We report the number you\'d see on your bank statement.' },
        ]} />
      </section>

      <section className="we-section" style={{paddingTop: 0}}>
        <div className="un-cross">
          <div>
            <h3>Digital × the house: <em>the last mile of a brand.</em></h3>
            <p>Studio makes the thing people want. Labs builds where they buy it. Digital brings them to the door and back again. Same people, one weekly meeting.</p>
          </div>
          <ul>
            <li><span>01</span>Creative and landing pages from the Studio</li>
            <li><span>02</span>Reporting, content engines and lead qualification from the Lab</li>
            <li><span>03</span>Our own products in Ventures run on this loop too</li>
            <li><span>04</span><a href="/studio">Studio →</a>&nbsp; <a href="/labs">Labs →</a>&nbsp; <a href="/ventures">Ventures →</a></li>
          </ul>
        </div>
      </section>

      <window.UnitCTA h={'Have something <em>worth selling?</em>'} p="Bring your numbers. 30 minutes, no deck. We'll tell you which lever to pull first, and whether media is even the answer yet." btn="Talk to Digital →" />
      <window.WeFooter />
    </>
  );
};

window.Digital = Digital;