/* MyOcto v2 — composed on the Newo/TechNexus design system.
   Sections use the system's tx-* vocabulary (marketing.css/vertical.css) and
   compose the bundle's parameterizable components (VerticalProof, VerticalStory).
   The interactive phone demos + octopus + i18n are the proven vanilla modules. */

const { useEffect } = React;
const DS = window.NewoDesignSystem_6b200c || window;

/* ───────────────────────── nav ───────────────────────── */
function Nav() {
  return (
    <header className="tx-nav" data-screen-label="Nav">
      <a href="#top" className="tx-brand">
        <span className="mo-mark" data-mark-mount></span>
        <strong>My<em>Octo</em></strong>
      </a>
      <nav className="tx-nav__links">
        <a href="#idea" data-i18n>The MyOcto idea</a>
        <a href="#how" data-i18n>How it works</a>
        <a href="#demos" data-i18n>Touch the product</a>
        <a href="#arms" data-i18n>The arms</a>
        <a href="#pilot" data-i18n>First pilot</a>
      </nav>
      <div className="mo-lang" id="langSwitch" role="group" aria-label="Language">
        <button className="mo-lang__btn" data-lang="en" aria-pressed="true">EN</button>
        <button className="mo-lang__btn" data-lang="ne" aria-pressed="false">ने</button>
        <button className="mo-lang__btn" data-lang="ro" aria-pressed="false">RO</button>
      </div>
      <div className="tx-nav__cta">
        <a href="#demos" className="tx-btn tx-btn--primary" style={{ height: 44, padding: '0 22px', fontSize: 13 }} data-i18n>Try the preview</a>
      </div>
    </header>
  );
}

/* ───────────────────────── hero ───────────────────────── */
function HeroV2() {
  return (
    <section className="tx-hero" id="top" data-screen-label="01 Hero">
      <div className="tx-mast">
        <div className="tx-mast__L">
          <span>Vol. 01</span><span>No. 01</span>
          <em data-i18n>A platform, not a middleman</em>
        </div>
        <div className="tx-mast__R"><span>Kathmandu → the world · 2026</span></div>
      </div>
      <div className="tx-hero__grid">
        <div className="tx-hero__main">
          <span className="tx-eyebrow" data-i18n>One platform, many arms</span>
          <h1 className="tx-hero__h" data-i18n>
            <span>Whatever you need done —</span>
            <span><em>find the person</em> who does it.</span>
          </h1>
        </div>
        <aside className="tx-hero__side">
          <span className="tx-hero__side-kicker" data-i18n>First pilot</span>
          <p><strong>Getting Around</strong> launches in Kathmandu with a first cohort of independent, licensed drivers — discovery and direct contact, nothing in between.</p>
          <span className="tx-hero__side-meta">From the field notes · Kathmandu</span>
        </aside>
      </div>
      <p className="tx-hero__sub" data-i18n>MyOcto connects you with trusted independent professionals — for the things you need done two or three times a week, or whenever life gets busy. You keep your people. They keep their business. We just bring you together.</p>
      <div className="tx-hero__cta">
        <a href="#demos" className="tx-btn tx-btn--primary" data-i18n>Touch the live preview</a>
        <a href="#how" className="tx-btn tx-btn--secondary" data-i18n>See how it works</a>
        <span className="tx-hero__cta-meta">No install. <em>No sign-up.</em></span>
      </div>
      <div className="tx-hero__strip">
        {[
          ['i.', '0%', 'Commission. Money never moves through us.', 'v2-c-signal'],
          ['ii.', '100%', 'Yours — customers, reputation, earnings.', 'v2-c-success'],
          ['iii.', <React.Fragment><em>8</em> arms</React.Fragment>, 'One trusted core. New services are new arms.', 'v2-c-terra'],
          ['iv.', '1 link', 'To start. No app store between you and help.', 'v2-c-amber']
        ].map(([r, num, lbl, c], i) => (
          <div key={i} className="tx-hero__stat">
            <span className="tx-hero__stat-roman">{r}</span>
            <div className={`num ${c}`}>{num}</div>
            <div className="lbl">{lbl}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ───────────────────────── idea + octopus ───────────────────────── */
function Idea() {
  return (
    <section className="tx-section" id="idea" data-screen-label="02 The idea">
      <div className="v2-idea">
        <div>
          <span className="tx-eyebrow" data-i18n>The MyOcto idea</span>
          <h2 className="tx-h2" style={{ margin: '18px 0 22px' }} data-i18n>
            <span>We connect you —</span>
            <span><em>then we step back.</em></span>
          </h2>
          <p className="tx-sub" style={{ margin: 0 }} data-i18n>MyOcto is a discovery platform and a set of business tools. You tell us what you need. We show you trusted providers nearby. You pick one. We hand you their direct contact — and from that moment, it's your relationship, not ours. No fee on what you pay. No platform standing between you.</p>
        </div>
        <div className="v2-hero-art">
          <div data-octo data-octo-live="0,2,5,7"></div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────── how a connection sounds (vx-script) ─────────────────── */
function ConnectionScript() {
  const lines = [
    { who: 'caller', label: 'You', text: 'I need my grocery run done Thursday afternoon.' },
    { who: 'nexus', label: 'MyOcto', text: 'Three trusted people near you do grocery runs. Lena — 4.9, 214 runs, sets her own price. Want to see her profile?' },
    { who: 'caller', label: 'You', text: 'She looks great. I\u2019ll take her.' },
    { who: 'nexus', label: 'MyOcto', text: 'Here\u2019s Lena\u2019s direct number. <em>From here it\u2019s between you two</em> — we don\u2019t touch the money, ever.' }
  ];
  return (
    <section className="tx-section tx-section--cream" data-screen-label="03 How it sounds">
      <div className="tx-section__head">
        <span className="tx-eyebrow" data-i18n>A connection, end to end</span>
        <h2 className="tx-h2" data-i18n>
          <span>Thirty seconds,</span>
          <span>then it's <em>yours.</em></span>
        </h2>
        <p className="tx-sub">This is the whole product. We make the introduction — the relationship, the work and the money are between you and your provider.</p>
      </div>
      <div className="vx-script">
        {lines.map((l, i) => (
          <div key={i} className={`vx-script__turn vx-script__turn--${l.who}`}>
            <span className="vx-script__who">{l.label}</span>
            <p dangerouslySetInnerHTML={{ __html: l.text }}></p>
          </div>
        ))}
      </div>
      <p className="vx-script__foot" data-i18n>MyOcto introduced you — and then got out of the way.</p>
    </section>
  );
}

/* ───────────────────────── how it works ───────────────────────── */
function HowItWorks() {
  const steps = [
    ['01.', 'Tell us what you need', 'A quick tap or a sentence. That\u2019s the whole ask.'],
    ['02.', 'See who\u2019s available', 'A short list of trusted providers near you — with ratings and their own prices.'],
    ['03.', 'Choose your person', 'You pick. Always your choice — never an assignment.'],
    ['04.', 'Connect directly', 'You get their contact and arrange it together. MyOcto\u2019s part is done.']
  ];
  return (
    <section className="tx-section" id="how" data-screen-label="04 How it works">
      <div className="tx-section__head">
        <span className="tx-eyebrow" data-i18n>How it works</span>
        <h2 className="tx-h2" data-i18n>
          <span>Four steps. Then it's between</span>
          <span><em>you and your provider.</em></span>
        </h2>
      </div>
      <div className="tx-flow">
        {steps.map(([n, t, d]) => (
          <div key={n} className="tx-flow__step">
            <span className="tx-flow__num">{n}</span>
            <h3 data-i18n>{t}</h3>
            <p data-i18n>{d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ───────────────────────── demos ───────────────────────── */
function Demos() {
  return (
    <section className="tx-section tx-section--cream" id="demos" data-screen-label="05 Live preview">
      <div className="v2-demos-head">
        <span className="tx-eyebrow" data-i18n>Touch the product</span>
        <h2 className="tx-h2" style={{ margin: '18px 0 18px' }}><span data-i18n>Two sides of the same platform.</span></h2>
        <p className="tx-sub" data-i18n>No install, no sign-up. Tap through the customer experience — then flip to what a provider gets. Everything here is sample data.</p>
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 8 }}>
        <div className="mo-sideswitch" role="group" aria-label="Choose a side">
          <button className="mo-sideswitch__btn" data-side="customer" aria-pressed="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="8" r="4"/><path d="M5 21v-1a7 7 0 0 1 14 0v1"/></svg>
            <span className="mo-sideswitch__t" data-i18n>I'm a customer</span>
          </button>
          <button className="mo-sideswitch__btn" data-side="provider" aria-pressed="false">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M3 9h18l-1.5 11H4.5L3 9zM8 9V6a4 4 0 0 1 8 0v3"/></svg>
            <span className="mo-sideswitch__t" data-i18n>I'm a provider</span>
          </button>
        </div>
      </div>
      <div className="mo-phone-stage">
        <div className="mo-phone-side is-active" data-side-panel="customer">
          <div className="mo-phone"><div className="mo-phone__screen" id="custScreen"><div className="mo-phone__notch"></div></div></div>
          <div className="mo-phone-cap">
            <div className="mo-phone-cap__t" data-i18n>The customer preview</div>
            <div className="mo-phone-cap__s" data-i18n>Need → discover → choose → connect. It ends at the handoff, on purpose.</div>
            <button className="mo-restart" data-restart="customer">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7L3 8m0-5v5h5"/></svg>
              <span className="mo-restart__t" data-i18n>Start over</span>
            </button>
          </div>
        </div>
        <div className="mo-phone-side" data-side-panel="provider">
          <div className="mo-phone"><div className="mo-phone__screen" id="provScreen"><div className="mo-phone__notch"></div></div></div>
          <div className="mo-phone-cap">
            <div className="mo-phone-cap__t" data-i18n>The provider tools</div>
            <div className="mo-phone-cap__s" data-i18n>Everything a pro gets for a flat membership — and keeps when they leave.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────────────────────── the arms ───────────────────────── */
function Arms() {
  const arms = [
    [<React.Fragment>Concierge &amp; <em>Personal Assistant</em></React.Fragment>, 'Your part-time right hand: scheduling, waiting in line, organizing, getting things handled.', 'The right hand', 'v2-tag--signal'],
    [<React.Fragment>Home <em>Services</em></React.Fragment>, 'Cleaning, repairs, handiwork, beauty-at-home, and more.', 'Live', 'v2-tag--success'],
    [<React.Fragment>Errands &amp; <em>Shopping</em></React.Fragment>, 'Grocery runs, pickups and drop-offs, \u201cgo get this for me.\u201d', 'Live', 'v2-tag--success'],
    [<React.Fragment>Courier &amp; <em>Delivery</em></React.Fragment>, 'Same-day document and package runs between businesses and people.', 'Live', 'v2-tag--success'],
    [<React.Fragment>Getting <em>Around</em></React.Fragment>, 'Independent, licensed drivers near you — their rate, your direct contact. Not a fleet: no dispatch, no set fare, no payment through us.', 'First pilot', 'v2-tag--terra'],
    [<React.Fragment>Businesses &amp; <em>Merchants</em></React.Fragment>, 'Shops and local businesses list themselves and connect with customers and couriers directly.', 'Business tier', 'v2-tag--amber']
  ];
  return (
    <section className="tx-section" id="arms" data-screen-label="06 The arms">
      <div className="tx-section__head">
        <span className="tx-eyebrow" data-i18n>The arms</span>
        <h2 className="tx-h2" data-i18n>
          <span>One platform. Many ways</span>
          <span><em>to get things done.</em></span>
        </h2>
        <p className="tx-sub" data-i18n>Each service is an arm — running on its own, connected to the same trusted core. Home help, errands, couriers, getting around, local businesses. New services are just new arms.</p>
      </div>
      <div className="tx-agents">
        {arms.map(([t, d, tag, tagC], i) => (
          <article key={i} className="tx-agent v2-reveal">
            <span className="tx-agent__num">{String(i + 1).padStart(2, '0')}.</span>
            <span className={`v2-tag ${tagC}`}>{tag}</span>
            <h3 className="tx-agent__h">{t}</h3>
            <p className="tx-agent__d" data-i18n>{d}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ───────────────────────── pilot ───────────────────────── */
function Pilot() {
  return (
    <section className="tx-section tx-section--cream" id="pilot" data-screen-label="07 First pilot">
      <div className="v2-pilot">
        <div>
          <span className="tx-eyebrow">First pilot · Kathmandu, Nepal</span>
          <h2 className="tx-h2" style={{ margin: '18px 0 22px' }} data-i18n>
            <span>The model is already</span>
            <span><em>in the water.</em></span>
          </h2>
          <p className="tx-sub" style={{ margin: 0 }}>Our <strong>Getting Around</strong> arm is built, and it launches as our first live pilot in Kathmandu — a first cohort of independent, licensed drivers running their own businesses on MyOcto. A real market, real providers, proving that discovery-and-direct-contact works.</p>
        </div>
        <div className="v2-pilot__facts">
          <div className="v2-pilot__fact"><b data-i18n>A first cohort</b><span data-i18n>independent, licensed drivers — starting small, scaling as it earns trust.</span></div>
          <div className="v2-pilot__fact"><b data-i18n>Built &amp; ready</b><span data-i18n>a working product, not a concept slide.</span></div>
          <div className="v2-pilot__fact"><b><em>Zero</em></b><span data-i18n>commission — every driver keeps 100% from day one.</span></div>
        </div>
      </div>
      <p className="mo-tiny" style={{ marginTop: 18 }} data-i18n>Our first pilot market. The drivers are independent and licensed — we don't dispatch them, set their fare, or take payment. Same model as every arm: discover, contact directly, done.</p>
    </section>
  );
}

/* ───────────────────────── compare ───────────────────────── */
function Compare() {
  const old = [
    'You pay the app, plus a fee on top',
    '25\u201340% commission taken from every job',
    'The app owns the customers',
    'Reputation locked inside their platform',
    'The app assigns and decides',
    'Download, sign up, wait'
  ];
  const mo = [
    [<React.Fragment><strong>You pay your provider directly</strong> — we never touch it</React.Fragment>],
    [<React.Fragment><strong>Zero commission.</strong> Flat membership, keep 100%</React.Fragment>],
    [<React.Fragment><strong>The provider owns their customers</strong> — and keeps them</React.Fragment>],
    [<React.Fragment><strong>Reputation travels</strong> with the provider</React.Fragment>],
    [<React.Fragment><strong>You choose, every time</strong> — never an assignment</React.Fragment>],
    [<React.Fragment><strong>Open a link. Done.</strong></React.Fragment>]
  ];
  return (
    <section className="tx-section" data-screen-label="08 Why different">
      <div className="tx-section__head">
        <span className="tx-eyebrow" data-i18n>Why it's different</span>
        <h2 className="tx-h2" data-i18n>
          <span>Same convenience.</span>
          <span><em>Completely different deal.</em></span>
        </h2>
      </div>
      <div className="v2-compare">
        <div className="v2-compare__col">
          <span className="v2-compare__k" data-i18n>Old platforms</span>
          <ul>{old.map((t, i) => <li key={i}><span className="v2-compare__dash">–</span>{t}</li>)}</ul>
        </div>
        <div className="v2-compare__col v2-compare__col--mo">
          <span className="v2-compare__k">My<em style={{ fontStyle: 'italic' }}>Octo</em></span>
          <ul>{mo.map(([t], i) => <li key={i}><span className="v2-compare__tick">✓</span><span>{t}</span></li>)}</ul>
        </div>
      </div>
    </section>
  );
}

/* ───────────────────────── proof + story (DS components) ───────────────────────── */
function ProofStory() {
  const VerticalProof = DS.VerticalProof || window.VerticalProof;
  const VerticalStory = DS.VerticalStory || window.VerticalStory;
  const v = {
    proof: [
      { k: 'Commission', v: '<em>0%</em>', l: 'Forever. Money never moves through MyOcto.' },
      { k: 'You keep', v: '100%', l: 'Earnings, customers, reputation — all the provider\u2019s.' },
      { k: 'The model', v: 'Flat', l: 'A predictable membership. A low daily tier for businesses.' }
    ],
    story: {
      tag: 'From the first cohort',
      quote: '"On the other apps I drove for a logo and they kept a third. On MyOcto the customers are <em>mine</em> — they call me back directly. I set the price. I keep all of it."',
      init: 'KS',
      nm: 'Kiran S.',
      tt: 'Independent licensed driver · Kathmandu pilot (illustrative)'
    }
  };
  return (
    <React.Fragment>
      <VerticalProof v={v} />
      <div className="v2-band-blush"><VerticalStory v={v} /></div>
    </React.Fragment>
  );
}

/* ───────────────────────── close + footer ───────────────────────── */
function Close() {
  return (
    <section className="tx-section tx-section--ink" data-screen-label="09 Close">
      <div className="tx-section__head tx-section__head--center" style={{ marginBottom: 36 }}>
        <span className="tx-eyebrow">myocto.app</span>
        <h2 className="tx-h2" data-i18n>
          <span>Open the door.</span>
          <span><em>Meet your people.</em></span>
        </h2>
        <p className="tx-sub" data-i18n>No app to install. No fees on your money. Just trusted help, when you need it.</p>
      </div>
      <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
        <a href="#demos" className="tx-btn tx-btn--primary" style={{ background: 'var(--tn-paper)', color: 'var(--tn-ink)' }} data-side-jump="customer" data-i18n>Try the customer preview</a>
        <a href="#demos" className="tx-btn tx-btn--secondary" data-side-jump="provider" data-i18n>See the provider tools</a>
      </div>
    </section>
  );
}

function FooterV2() {
  return (
    <footer className="v2-foot" data-screen-label="Footer">
      <div className="v2-foot__in">
        <div className="v2-foot__top">
          <a href="#top" className="tx-brand">
            <span className="mo-mark" data-mark-mount></span>
            <strong style={{ color: 'var(--tn-paper)' }}>My<em>Octo</em></strong>
          </a>
          <span data-i18n>A digital technology platform.</span>
        </div>
        <hr />
        <div className="v2-foot__meta">
          <span data-i18n>myocto.app · A platform, not a middleman.</span>
          <span data-i18n>Private preview · sample data throughout.</span>
        </div>
      </div>
    </footer>
  );
}

/* ───────────────────────── site ───────────────────────── */
function Site() {
  useEffect(() => {
    // brand marks (octopus glyph)
    if (window.MoOcto) {
      document.querySelectorAll('[data-mark-mount]').forEach(el => { el.innerHTML = window.MoOcto.mark(); });
      window.MoOcto.mount();
    }
    // boot the interactive phone demos now that their mounts exist
    if (window.MoDemos) window.MoDemos.boot();
    // apply saved language to the freshly-rendered tree (demos re-render too)
    if (window.MoI18n) window.MoI18n.apply(window.MoI18n.current);
    // scroll-reveal: transform-only rise (capture-safe; opacity never gated)
    var els = Array.prototype.slice.call(document.querySelectorAll('.v2-reveal, .tx-section__head, .tx-flow__step, .v2-compare__col, .v2-pilot__fact, .vx-script__turn'));
    function chk() {
      var vh = window.innerHeight || 800;
      els.forEach(function (el) {
        if (el.dataset.revealed) return;
        var r = el.getBoundingClientRect();
        if (r.top < vh * 0.92 && r.bottom > -40) { el.dataset.revealed = '1'; el.style.transform = 'none'; }
      });
    }
    els.forEach(function (el) { el.classList.add('v2-rv'); });
    window.addEventListener('scroll', chk, { passive: true });
    window.addEventListener('resize', chk, { passive: true });
    chk(); setTimeout(chk, 350); setTimeout(chk, 900);
    setTimeout(function () { els.forEach(function (el) { el.style.transform = 'none'; }); }, 2600);
  }, []);
  return (
    <React.Fragment>
      <Nav />
      <main>
        <HeroV2 />
        <Idea />
        <ConnectionScript />
        <HowItWorks />
        <Demos />
        <ProofStory />
        <Arms />
        <Pilot />
        <Compare />
        <Close />
      </main>
      <FooterV2 />
    </React.Fragment>
  );
}

/* gate + mount */
(function () {
  var CREDS = { user: 'myocto', pass: 'ninebrains' };
  function unlock() {
    var g = document.getElementById('gate');
    if (g) g.classList.add('is-hidden');
    document.body.classList.remove('mo-locked');
  }
  window.moUnlock = function () { try { sessionStorage.setItem('mo_auth', '1'); } catch (e) {} unlock(); };
  function initGate() {
    var authed = false;
    try { authed = sessionStorage.getItem('mo_auth') === '1'; } catch (e) {}
    if (authed) { unlock(); return; }
    var form = document.getElementById('gateForm');
    if (!form) return;
    form.addEventListener('submit', function (e) {
      e.preventDefault();
      var u = document.getElementById('gu').value.trim().toLowerCase();
      var p = document.getElementById('gp').value;
      if (u === CREDS.user && p === CREDS.pass) { window.moUnlock(); }
      else {
        document.getElementById('gateErr').textContent = 'That doesn\u2019t match. Check with the MyOcto team for access.';
        document.getElementById('gp').value = '';
      }
    });
  }
  initGate();
  ReactDOM.createRoot(document.getElementById('root')).render(<Site />);
})();