/* eslint-disable */
/*  ─────────────────────────────────────────────
    DIRECTION B — "GEOMETRIC ATLAS" (revised)
    Changes from v1:
    - Logo replaced with sharp DOM-based <STMLogo/>
    - Hero medallion now has 5 BUSINESS DISCIPLINES orbiting around it,
      counter-rotating, glowing on hover, click → services.html#section
    - Removed coordinates (replaced with neutral tagline)
    ───────────────────────────────────────────── */

const DISCIPLINES = [
  { id: 'software', short: 'Product',  full: 'Digital Product Engineering',         intro: 'Apps and platforms with thoughtful UX, disciplined engineering, and shipping quality.' },
  { id: 'ai',       short: 'AI',       full: 'AI Consultancy & Custom Solutions',   intro: 'Custom AI systems, automation workflows, agent deployments, and intelligent tooling for real problems.' },
  { id: 'it',       short: 'Infra',    full: 'Infrastructure Field Engineering',    intro: 'Field diagnostics, maintenance, and dependable systems support — on site and remotely.' },
  { id: 'mining',   short: 'Mining',   full: 'Bitcoin Mining Operations',           intro: 'Infrastructure-focused Bitcoin mining managed with operational discipline and technical depth.' },
  { id: 'invest',   short: 'Invest',   full: 'Strategic Investments',               intro: 'Strategic stakes where we have depth — including deployed Bitcoin mining capacity at Green Data City.' },
];

function NavB({ active = 'home' }) {
  const links = [
    ['home', 'Home', 'index.html'],
    ['about', 'About', 'about.html'],
    ['services', 'Services', 'services.html'],
    ['projects', 'Projects', 'projects.html'],
    ['contact', 'Contact', 'contact.html'],
  ];
  return (
    <header className="nav-b">
      <div className="nav-b__rail">
        <span className="eyebrow-num">SAWT TECH &amp; MARKETING LLC · STM</span>
        <span className="eyebrow-num" style={{textAlign:'center'}}>— A TECHNOLOGY &amp; INVESTMENT COMPANY —</span>
        <span className="eyebrow-num" style={{textAlign:'right'}}>EST. MMXXVI  ·  OMAN</span>
      </div>
      <div className="nav-b__main">
        <a href="index.html" className="nav-b__brand" aria-label="Sawt Tech & Marketing — Home">
          <STMLogo variant="white" size={28} withWordmark={true}/>
        </a>
        <nav className="nav-b__links">
          {links.map(([k, l, h], i) => (
            <a key={k} href={h} className={active === k ? 'is-active' : ''}>
              <span className="nav-b__num">{String(i+1).padStart(2,'0')}</span>
              <span>{l}</span>
            </a>
          ))}
        </nav>
        <a href="contact.html" className="nav-b__cta">Get in touch <span>→</span></a>
      </div>
    </header>
  );
}

function OrbitingDisciplines() {
  const ORBIT_RADIUS_PCT = 42;
  // active = { d: discipline object, x: screenX, y: screenY, above: bool }
  const [active, setActive] = React.useState(null);

  const handleEnter = React.useCallback((d, e) => {
    const r = e.currentTarget.getBoundingClientRect();
    const cx = r.left + r.width / 2;
    const cy = r.top + r.height / 2;
    // Show tooltip above the pill unless pill is in top third of viewport
    const above = cy > window.innerHeight * 0.35;
    setActive({ d, x: cx, y: above ? r.top : r.bottom, above });
  }, []);

  const handleLeave = React.useCallback(() => setActive(null), []);

  return (
    <>
      <div className="hero-b__orbit">
        <div className="hero-b__orbit-spin">
          {DISCIPLINES.map((d, i) => {
            const angle = (i / DISCIPLINES.length) * Math.PI * 2 - Math.PI / 2;
            const x = 50 + Math.cos(angle) * ORBIT_RADIUS_PCT;
            const y = 50 + Math.sin(angle) * ORBIT_RADIUS_PCT;
            return (
              <a
                key={d.id}
                href={'services.html#' + d.id}
                className="disc-pill"
                style={{ left: x + '%', top: y + '%' }}
                onMouseEnter={(e) => handleEnter(d, e)}
                onMouseLeave={handleLeave}
                onFocus={(e) => handleEnter(d, e)}
                onBlur={handleLeave}
                aria-label={d.full + ' — ' + d.intro}
              >
                {/* outer span: static centering translate */}
                <span className="disc-pill__center">
                  {/* inner span: counter-rotation animation only */}
                  <span className="disc-pill__label">
                    <span className="disc-pill__num">{String(i+1).padStart(2,'0')}</span>
                    {d.short}
                  </span>
                </span>
              </a>
            );
          })}
        </div>
      </div>

      {/* ── Fixed tooltip — rendered outside orbit, stays upright on screen ── */}
      {active && (
        <div
          className={'disc-tip' + (active.above ? '' : ' tip-below')}
          role="tooltip"
          style={{
            position: 'fixed',
            left: active.x,
            top: active.above ? active.y - 14 : active.y + 14,
            transform: active.above
              ? 'translate(-50%, -100%)'
              : 'translate(-50%, 0)',
          }}
        >
          <span className="disc-tip__num eyebrow-num">
            {String(DISCIPLINES.findIndex(d => d.id === active.d.id) + 1).padStart(2,'0')} / 05
          </span>
          <p className="disc-tip__title">{active.d.full}</p>
          <p className="disc-tip__body">{active.d.intro}</p>
          <span className="disc-tip__cta">Explore <span aria-hidden="true">→</span></span>
        </div>
      )}
    </>
  );
}

function HeroB() {
  return (
    <section className="hero-b">
      <div className="hero-b__pattern" aria-hidden="true"/>
      <div className="hero-b__grade" aria-hidden="true"/>

      <div className="hero-b__inner">
        {/* Left column — text */}
        <div className="hero-b__copy">
          <div className="hero-b__tag">
            <span className="hero-b__tag-dot"/>
            <span className="eyebrow">A technology &amp; investment company · Oman</span>
          </div>

          <h1 className="hero-b__title">
            Building &amp; investing<br/>
            in <em>real</em> technology<br/>
            <span className="hero-b__title-accent">from Oman.</span>
          </h1>

          <p className="hero-b__lede">
            STM operates across five disciplines — digital product engineering,
            AI consultancy, infrastructure field engineering, Bitcoin mining,
            and strategic investment. Hover the orbit to learn more →
          </p>

          <div className="hero-b__btns">
            <a href="services.html" className="btn-jade-b">
              Our services <span>→</span>
            </a>
            <a href="about.html" className="btn-ghost-b">
              About us
            </a>
          </div>

          <div className="hero-b__metrics">
            <div>
              <span className="metric-num">05</span>
              <span className="eyebrow">Business lines</span>
            </div>
            <div>
              <span className="metric-num">~27<small> PH/s</small></span>
              <span className="eyebrow">Mining capacity</span>
            </div>
            <div>
              <span className="metric-num">100%</span>
              <span className="eyebrow">Oman-based</span>
            </div>
          </div>
        </div>

        {/* Right column — Omani medallion + orbiting disciplines */}
        <div className="hero-b__viz">
          <div className="hero-b__viz-frame">
            <span className="hero-b__corner hero-b__corner--tl"/>
            <span className="hero-b__corner hero-b__corner--tr"/>
            <span className="hero-b__corner hero-b__corner--bl"/>
            <span className="hero-b__corner hero-b__corner--br"/>

            {/* Two counter-rotating geometric medallions */}
            <div className="hero-b__viz-rotate hero-b__viz-rotate--cw">
              <div className="hero-b__med-outer" dangerouslySetInnerHTML={{ __html: window.OmaniMedallionSVG({stroke: 'rgba(61,217,182,0.55)'}) }}/>
            </div>
            <div className="hero-b__viz-rotate hero-b__viz-rotate--ccw">
              <div className="hero-b__med-inner" dangerouslySetInnerHTML={{ __html: window.OmaniMedallionSVG({stroke: 'rgba(212,145,90,0.32)'}) }}/>
            </div>

            {/* Orbit ring (visual guide) */}
            <div className="hero-b__orbit-ring" aria-hidden="true"/>

            {/* Orbiting disciplines */}
            <OrbitingDisciplines/>

            {/* Center logo medallion */}
            <div className="hero-b__viz-center">
              <span className="hero-b__viz-center-ring"/>
              <STMLogo variant="white" size={26}/>
            </div>

            {/* Frame labels — neutral, no coordinates */}
            <span className="hero-b__viz-label hero-b__viz-label--tl eyebrow-num">FIG. 01</span>
            <span className="hero-b__viz-label hero-b__viz-label--tr eyebrow-num">STM · CORE</span>
            <span className="hero-b__viz-label hero-b__viz-label--bl eyebrow-num">FIVE DISCIPLINES</span>
            <span className="hero-b__viz-label hero-b__viz-label--br eyebrow-num">ONE PLATFORM</span>
          </div>
        </div>
      </div>

      {/* Scroll indicator */}
      <div className="hero-b__scroll">
        <span className="eyebrow-num">SCROLL</span>
        <span className="hero-b__scroll-line"/>
      </div>
    </section>
  );
}

function PillarsB() {
  const pillars = [
    { k: '01', t: 'Digital Product Engineering', d: 'Apps and platforms with thoughtful UX and shipping quality.', href: 'services.html#software', color: 'jade' },
    { k: '02', t: 'AI Consultancy & Custom Solutions', d: 'Custom AI systems, automation, agents, intelligent tooling.', href: 'services.html#ai', color: 'jade' },
    { k: '03', t: 'Infrastructure Field Engineering', d: 'Field diagnostics, maintenance, dependable systems support.', href: 'services.html#it', color: 'copper' },
    { k: '04', t: 'Bitcoin Mining Operations', d: 'Mining managed with operational discipline.', href: 'services.html#mining', color: 'copper' },
    { k: '05', t: 'Strategic Investments', d: 'Where we have conviction and operational depth.', href: 'services.html#invest', color: 'jade' },
  ];
  return (
    <section className="pillars-b">
      <div className="pillars-b__inner">
        <header>
          <span className="eyebrow" style={{color: 'var(--jade)'}}>FIVE BUSINESS LINES · ONE PLATFORM</span>
          <h2>What we do, in five disciplines.</h2>
        </header>
        <div className="pillars-b__grid">
          {pillars.map(p => (
            <a key={p.k} href={p.href} className={'pillar-b pillar-b--' + p.color}>
              <span className="pillar-b__num">{p.k}</span>
              <h3>{p.t}</h3>
              <p>{p.d}</p>
              <span className="pillar-b__arrow">↗</span>
              <div className="pillar-b__corner"/>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function ApproachB() {
  return (
    <section className="approach-b">
      <div className="approach-b__inner">
        {/* Left — copy */}
        <div className="approach-b__copy">
          <span className="eyebrow" style={{color: 'var(--copper)'}}>— Our approach</span>
          <h2>Operator first.<br/><em>Always.</em></h2>
          <p>
            We don't just advise — we build, run, and own. STM runs operations
            ourselves, so our advice comes from real operating experience, not
            theory.
          </p>
          <ul>
            <li><span>01</span><div><strong>Operator mindset.</strong> We work in the systems, not above them.</div></li>
            <li><span>02</span><div><strong>Practical, not theoretical.</strong> Every service is something we actively do.</div></li>
            <li><span>03</span><div><strong>Long-term.</strong> Built for durability, not short-term metrics.</div></li>
          </ul>
          <a href="about.html" className="btn-ghost-b" style={{marginTop: '32px'}}>Read our story</a>
        </div>

        {/* Right — image */}
        <div className="approach-b__media">
          <img src="photos/approach-operator.png" alt="Engineer working hands-on inside server infrastructure"/>
          <div className="approach-b__media-grade"/>
          <div className="approach-b__media-pattern"/>
        </div>
      </div>
    </section>
  );
}

function ProjectsB() {
  return (
    <section className="proj-b">
      <div className="proj-b__inner">
        <header>
          <span className="eyebrow" style={{color: 'var(--jade)'}}>— Selected projects</span>
          <h2>Products &amp; infrastructure we own and operate.</h2>
        </header>
        <div className="proj-b__grid">
          <a href="projects.html#rihla" className="proj-b__card proj-b__card--rihla">
            <div className="proj-b__media">
              <img src="photos/Rihla_banner_2.png" alt="Rihla — AI travel planner app"/>
              <div className="proj-b__media-overlay"/>
            </div>
            <div className="proj-b__body">
              <span className="eyebrow-num">CASE 01 · IOS APP</span>
              <h3>Rihla — AI Travel Planner</h3>
              <p>Bilingual conversational trip planning, built and maintained by STM.</p>
              <div className="proj-b__tags">
                <span>iOS</span><span>AI</span><span>Bilingual</span>
              </div>
            </div>
          </a>
          <a href="projects.html#green-data-city" className="proj-b__card">
            <div className="proj-b__media">
              <img src="photos/GDC_Large.jpeg" alt=""/>
              <div className="proj-b__media-overlay"/>
            </div>
            <div className="proj-b__body">
              <span className="eyebrow-num">CASE 02 · INFRASTRUCTURE</span>
              <h3>Green Data City — Mining</h3>
              <p>~27 PH/s of Antminer S19j Pro+ capacity operated by STM on site.</p>
              <div className="proj-b__tags">
                <span>BTC</span><span>Containerised</span><span>~27 PH/s</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

function CtaB() {
  return (
    <section className="cta-b">
      <div className="cta-b__pattern" aria-hidden="true"/>
      <div className="cta-b__inner">
        <span className="eyebrow" style={{color: 'var(--jade)'}}>— Get in touch</span>
        <h2>Let's build something that lasts.</h2>
        <div className="cta-b__btns">
          <a href="contact.html" className="btn-jade-b">Contact us <span>→</span></a>
          <a href="services.html" className="btn-ghost-b">All services</a>
        </div>
      </div>
    </section>
  );
}

function FooterB() {
  return (
    <footer className="footer-b">
      <div className="footer-b__inner">
        <div className="footer-b__cols">
          <div className="footer-b__brand">
            <STMLogo variant="white" size={32} withWordmark={true}/>
            <p className="footer-b__tag eyebrow-num">TECHNOLOGY · INVESTMENTS · OMAN</p>
          </div>
          <div>
            <p className="footer-b__h eyebrow">Navigation</p>
            <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="services.html">Services</a></li>
              <li><a href="projects.html">Projects</a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
          </div>
          <div>
            <p className="footer-b__h eyebrow">Contact</p>
            <ul>
              <li>201, Alwtyh Street<br/>Bousher 120, Oman</li>
              <li><a href="mailto:hello@sawt.tech">hello@sawt.tech</a></li>
            </ul>
          </div>
          <div>
            <p className="footer-b__h eyebrow">Disciplines</p>
            <ul>
              <li>Product Engineering</li>
              <li>AI Consultancy</li>
              <li>Infrastructure</li>
              <li>Bitcoin Mining</li>
              <li>Strategic Investment</li>
            </ul>
          </div>
        </div>
        <div className="footer-b__base">
          <p>© 2026 Sawt Tech &amp; Marketing LLC.</p>
          <p>Sultanate of Oman</p>
        </div>
      </div>
    </footer>
  );
}

function HomeB() {
  return (
    <div className="page-b">
      <NavB active="home"/>
      <HeroB/>
      <PillarsB/>
      <ApproachB/>
      <ProjectsB/>
      <CtaB/>
      <FooterB/>
    </div>
  );
}

Object.assign(window, { HomeB, NavB, HeroB, PillarsB, ApproachB, ProjectsB, CtaB, FooterB });