/* 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: 'noor',    short: 'Noor',    full: 'Noor — Personal AI Assistant',   intro: 'Bilingual EN/AR personal AI. Email, calendar, research, WhatsApp and more. Live at noor.sawt.tech' },
  { id: 'rihla',   short: 'Rihla',   full: 'Rihla — AI Trip Planner',        intro: 'Conversational AI trip planning app. Live on iOS and Android.' },
  { id: 'wakeel',  short: 'Wakeel',  full: 'Wakeel — Family AI CFO',         intro: 'Private AI CFO for the family office. Morning briefings, live portfolio, Sharia-aware counsel. Live at cfo.sawt.tech' },
  { id: 'mining',  short: 'Mining',  full: 'Bitcoin Mining — Green Data City', intro: 'Infrastructure-focused Bitcoin mining managed with operational discipline. ~27 PH/s on site.' },
];

function NavB({ active = 'home' }) {
  const links = [
    ['home', 'Home', 'index.html'],
    ['about', 'About', 'about.html'],
    ['disciplines', 'Disciplines', 'disciplines.html'],
    ['products', 'Products', 'products.html'],
    ['services', 'Services', 'services.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>
        <div style={{display:'flex', alignItems:'center', gap:10}}>
          <a href="https://app.sawt.tech/login" className="nav-b__cta" style={{fontSize:13, padding:'8px 14px', borderColor:'rgba(255,255,255,0.22)', color:'rgba(255,255,255,0.6)'}}>Client Login</a>
          <a href="contact.html" className="nav-b__cta">Get in touch <span>→</span></a>
        </div>
      </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={'disciplines.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')} / 04
          </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">
            We build AI products from Oman for the world — with the Gulf at the centre.
            Hover the orbit to explore what we've built →
          </p>

          <div style={{marginBottom:'1.25rem', padding:'0.75rem 1rem', background:'rgba(61,217,182,0.08)', borderLeft:'3px solid #3DD9B6', borderRadius:'4px'}}>
            <p style={{margin:0, fontSize:'0.95rem', color:'#3DD9B6', fontWeight:600}}>Noor by Sawt Tech</p>
            <p style={{margin:'0.2rem 0 0', fontSize:'0.85rem', color:'rgba(255,255,255,0.7)'}}>Our personal AI assistant — available at <a href="https://app.sawt.tech" style={{color:'#3DD9B6'}}>app.sawt.tech</a></p>
          </div>

          <div className="hero-b__btns">
            <a href="projects.html" className="btn-jade-b">
              Our products <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">03</span>
              <span className="eyebrow">AI products</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">AI · MINING</span>
            <span className="hero-b__viz-label hero-b__viz-label--br eyebrow-num">GLOBAL REACH</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: 'Noor — Personal AI Assistant', d: 'Bilingual EN/AR AI. Email, calendar, research, WhatsApp. Live at noor.sawt.tech', href: 'https://noor.sawt.tech', color: 'jade' },
    { k: '02', t: 'Rihla — AI Trip Planner', d: 'Conversational AI trip planning on iOS and Android.', href: 'products.html#rihla', color: 'jade' },
    { k: '03', t: 'Wakeel — Family AI CFO', d: 'Private AI CFO for the family office. Live at cfo.sawt.tech', href: 'https://cfo.sawt.tech', color: 'jade' },
    { k: '04', t: 'Bitcoin Mining — Green Data City', d: '~27 PH/s of mining capacity operated on site in Oman.', href: 'services.html', color: 'copper' },
  ];
  return (
    <section className="pillars-b">
      <div className="pillars-b__inner">
        <header>
          <span className="eyebrow" style={{color: 'var(--jade)'}}>PRODUCTS &amp; SERVICES · SAWT TECH</span>
          <h2>Three AI products. One infrastructure service.</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 NoorBannerSVG() {
  return (
    <svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg" style={{width:'100%',height:'100%',display:'block'}}>
      <rect width="800" height="450" fill="#0b1426"/>
      <rect x="400" width="400" height="450" fill="#070d18"/>
      <line x1="400" y1="0" x2="400" y2="450" stroke="rgba(61,217,182,0.2)" strokeWidth="1"/>
      <text x="200" y="168" fontFamily="Georgia,serif" fontSize="52" fill="#faf7f1" fontWeight="400" textAnchor="middle">Noor</text>
      <text x="200" y="200" fontFamily="monospace" fontSize="10" fill="#3dd9b6" textAnchor="middle" letterSpacing="3">PERSONAL AI ASSISTANT</text>
      <text x="200" y="248" fontFamily="Georgia,serif" fontSize="15" fill="rgba(250,247,241,0.5)" textAnchor="middle" fontStyle="italic">"She reads your emails,</text>
      <text x="200" y="268" fontFamily="Georgia,serif" fontSize="15" fill="rgba(250,247,241,0.5)" textAnchor="middle" fontStyle="italic">plans your day, finds your flights."</text>
      <rect x="130" y="306" width="140" height="34" rx="17" fill="none" stroke="rgba(61,217,182,0.4)" strokeWidth="1"/>
      <text x="200" y="328" fontFamily="monospace" fontSize="11" fill="#3dd9b6" textAnchor="middle">Meet Noor →</text>
      <text x="600" y="158" fontFamily="serif" fontSize="52" fill="#faf7f1" textAnchor="middle">نور</text>
      <text x="600" y="192" fontFamily="monospace" fontSize="10" fill="#3dd9b6" textAnchor="middle" letterSpacing="2">مساعدتكَ الشخصية</text>
      <text x="600" y="248" fontFamily="serif" fontSize="14" fill="rgba(250,247,241,0.5)" textAnchor="middle">"تقرأ بريدكَ، تُنظّم يومك،</text>
      <text x="600" y="270" fontFamily="serif" fontSize="14" fill="rgba(250,247,241,0.5)" textAnchor="middle">تبحث عن رحلاتكَ."</text>
      <rect x="528" y="306" width="144" height="34" rx="17" fill="rgba(61,217,182,0.1)" stroke="rgba(61,217,182,0.3)" strokeWidth="1"/>
      <text x="600" y="328" fontFamily="serif" fontSize="13" fill="#3dd9b6" textAnchor="middle">تعرّف على نور ←</text>
      <circle cx="400" cy="400" r="2" fill="rgba(61,217,182,0.4)"/>
      <text x="400" y="430" fontFamily="monospace" fontSize="9" fill="rgba(61,217,182,0.3)" textAnchor="middle" letterSpacing="2">noor.sawt.tech</text>
    </svg>
  );
}

function WakeelBannerSVG() {
  return (
    <svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg" style={{width:'100%',height:'100%',display:'block'}}>
      <rect width="800" height="450" fill="#0d0f1a"/>
      <rect x="400" width="400" height="450" fill="#090b14"/>
      <line x1="400" y1="0" x2="400" y2="450" stroke="rgba(212,145,90,0.2)" strokeWidth="1"/>
      {/* EN side */}
      <text x="200" y="168" fontFamily="Georgia,serif" fontSize="52" fill="#faf7f1" fontWeight="400" textAnchor="middle">Wakeel</text>
      <text x="200" y="200" fontFamily="monospace" fontSize="10" fill="#d4915a" textAnchor="middle" letterSpacing="3">FAMILY AI CFO</text>
      <text x="200" y="248" fontFamily="Georgia,serif" fontSize="15" fill="rgba(250,247,241,0.5)" textAnchor="middle" fontStyle="italic">"Your wealth, made intelligent."</text>
      <rect x="130" y="290" width="140" height="34" rx="17" fill="none" stroke="rgba(212,145,90,0.4)" strokeWidth="1"/>
      <text x="200" y="312" fontFamily="monospace" fontSize="11" fill="#d4915a" textAnchor="middle">Meet Wakeel →</text>
      {/* AR side */}
      <text x="600" y="158" fontFamily="serif" fontSize="52" fill="#faf7f1" textAnchor="middle">وكيل</text>
      <text x="600" y="192" fontFamily="monospace" fontSize="10" fill="#d4915a" textAnchor="middle" letterSpacing="2">مستشارك المالي الذكي</text>
      <text x="600" y="248" fontFamily="serif" fontSize="14" fill="rgba(250,247,241,0.5)" textAnchor="middle">"ثروتكَ، بذكاء حقيقي."</text>
      <rect x="528" y="290" width="144" height="34" rx="17" fill="rgba(212,145,90,0.1)" stroke="rgba(212,145,90,0.3)" strokeWidth="1"/>
      <text x="600" y="312" fontFamily="serif" fontSize="13" fill="#d4915a" textAnchor="middle">تعرّف على وكيل ←</text>
      {/* Bottom */}
      <circle cx="400" cy="400" r="2" fill="rgba(212,145,90,0.4)"/>
      <text x="400" y="430" fontFamily="monospace" fontSize="9" fill="rgba(212,145,90,0.3)" textAnchor="middle" letterSpacing="2">cfo.sawt.tech</text>
    </svg>
  );
}

function ProjectsB() {
  const BADGE_LIVE = (
    <span style={{fontSize:'10px', fontWeight:600, letterSpacing:'0.12em', color:'#16a34a', background:'rgba(22,163,74,0.12)', border:'1px solid rgba(22,163,74,0.3)', borderRadius:'999px', padding:'2px 10px'}}>LIVE</span>
  );
  const BADGE_BETA = (
    <span style={{fontSize:'10px', fontWeight:600, letterSpacing:'0.12em', color:'rgba(212,145,90,0.9)', background:'rgba(212,145,90,0.1)', border:'1px solid rgba(212,145,90,0.3)', borderRadius:'999px', padding:'2px 10px'}}>PRIVATE BETA</span>
  );

  return (
    <section className="proj-b">
      <div className="proj-b__inner">

        <header>
          <span className="eyebrow" style={{color: 'var(--jade)'}}>— Products</span>
          <h2>Three AI products. Built in Oman.</h2>
        </header>
        <div className="proj-b__grid" style={{marginBottom: '64px'}}>

          {/* Noor */}
          <a href="https://noor.sawt.tech" target="_blank" rel="noopener noreferrer" className="proj-b__card">
            <div className="proj-b__media">
              <NoorBannerSVG/>
              <div className="proj-b__media-overlay"/>
            </div>
            <div className="proj-b__body">
              <div style={{display:'flex', alignItems:'center', gap:'10px', flexWrap:'wrap'}}>
                <span className="eyebrow-num">PRODUCT 01 · AI ASSISTANT</span>
                {BADGE_LIVE}
              </div>
              <h3>Noor — Personal AI Assistant</h3>
              <p>Your bilingual AI for email, calendar, research, and more. Web and Microsoft Marketplace.</p>
              <div className="proj-b__tags">
                <span>EN / AR</span><span>Web PWA</span><span>Microsoft</span>
              </div>
            </div>
          </a>

          {/* Rihla */}
          <a href="https://rihla-app.com" target="_blank" rel="noopener noreferrer" 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">
              <div style={{display:'flex', alignItems:'center', gap:'10px', flexWrap:'wrap'}}>
                <span className="eyebrow-num">PRODUCT 02 · AI TRIP PLANNER</span>
                {BADGE_LIVE}
              </div>
              <h3>Rihla — AI Trip Planner</h3>
              <p>Conversational AI trip planning, bilingual. iOS and Android.</p>
              <div className="proj-b__tags">
                <span>iOS</span><span>Android</span><span>EN / AR</span>
              </div>
            </div>
          </a>

          {/* Wakeel */}
          <a href="https://cfo.sawt.tech" target="_blank" rel="noopener noreferrer" className="proj-b__card">
            <div className="proj-b__media">
              <WakeelBannerSVG/>
              <div className="proj-b__media-overlay"/>
            </div>
            <div className="proj-b__body">
              <div style={{display:'flex', alignItems:'center', gap:'10px', flexWrap:'wrap'}}>
                <span className="eyebrow-num">PRODUCT 03 · FAMILY AI CFO</span>
                {BADGE_BETA}
              </div>
              <h3>Wakeel — Family AI CFO</h3>
              <p>Live portfolio intelligence and morning briefings from Claude. For the family office.</p>
              <div className="proj-b__tags">
                <span>Finance</span><span>Sharia-aware</span><span>Claude AI</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="disciplines.html" className="btn-ghost-b">Our disciplines</a>
        </div>
      </div>
    </section>
  );
}

function AgentPromoB() {
  const features = [
    'Reads & summarizes your emails',
    'Manages your calendar and meetings',
    'Answers questions and handles research — 24/7',
  ];
  return (
    <section className="cta-b" style={{
      background: 'linear-gradient(to bottom, rgba(61,217,182,0.06) 0%, var(--ink-950) 55%)',
      borderTop: '1px solid rgba(61,217,182,0.2)',
      paddingTop: 100,
      paddingBottom: 100,
    }}>
      <div className="cta-b__pattern" aria-hidden="true"/>
      <div className="cta-b__inner">
        <span className="eyebrow" style={{color: 'var(--jade)'}}>— Noor by Sawt Tech · Personal AI</span>
        <h2>Noor by Sawt Tech —<br/>Your Personal AI Assistant</h2>
        <p style={{margin: '0 0 36px', fontSize: 18, color: 'rgba(255,255,255,0.6)', lineHeight: 1.65}}>
          Powered by Claude AI, built for busy professionals in Oman and the Gulf
        </p>
        <ul style={{
          listStyle: 'none',
          padding: 0,
          margin: '0 auto 40px',
          display: 'flex',
          flexDirection: 'column',
          gap: 14,
          textAlign: 'left',
          maxWidth: 460,
        }}>
          {features.map((f, i) => (
            <li key={i} style={{display: 'flex', alignItems: 'flex-start', gap: 12, fontSize: 15, color: 'rgba(255,255,255,0.75)'}}>
              <span style={{
                flexShrink: 0,
                width: 20, height: 20,
                borderRadius: '50%',
                background: 'rgba(61,217,182,0.12)',
                border: '1px solid rgba(61,217,182,0.4)',
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'var(--jade)',
                fontSize: 11,
                marginTop: 1,
              }}>✓</span>
              {f}
            </li>
          ))}
        </ul>
        {/* Pricing cards */}
        <div style={{
          display: 'flex',
          gap: 16,
          justifyContent: 'center',
          flexWrap: 'wrap',
          margin: '0 auto 40px',
          maxWidth: 560,
        }}>
          {/* Light plan */}
          <div style={{
            flex: '1 1 200px',
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.12)',
            borderRadius: 16,
            padding: '24px 20px',
            textAlign: 'left',
          }}>
            <p style={{margin:'0 0 4px', fontSize:12, letterSpacing:'0.1em', color:'rgba(255,255,255,0.45)', fontWeight:600}}>LIGHT</p>
            <p style={{margin:'0 0 12px', fontSize:30, fontWeight:700, color:'#fff', lineHeight:1}}>
              $49<span style={{fontSize:14, fontWeight:400, color:'rgba(255,255,255,0.45)'}}>/mo</span>
            </p>
            <p style={{margin:0, fontSize:13, color:'rgba(255,255,255,0.5)', lineHeight:1.5}}>200 messages/month · All core features</p>
          </div>
          {/* Premium plan */}
          <div style={{
            flex: '1 1 200px',
            background: 'rgba(61,217,182,0.07)',
            border: '1px solid rgba(61,217,182,0.35)',
            borderRadius: 16,
            padding: '24px 20px',
            textAlign: 'left',
            position: 'relative',
          }}>
            <span style={{
              position:'absolute', top:-10, left:16,
              background:'var(--jade)', color:'#070d18',
              fontSize:10, fontWeight:700, letterSpacing:'0.08em',
              padding:'3px 10px', borderRadius:999,
            }}>POPULAR</span>
            <p style={{margin:'0 0 4px', fontSize:12, letterSpacing:'0.1em', color:'rgba(61,217,182,0.7)', fontWeight:600}}>PREMIUM</p>
            <p style={{margin:'0 0 12px', fontSize:30, fontWeight:700, color:'#fff', lineHeight:1}}>
              $69<span style={{fontSize:14, fontWeight:400, color:'rgba(255,255,255,0.45)'}}>/mo</span>
            </p>
            <p style={{margin:0, fontSize:13, color:'rgba(255,255,255,0.5)', lineHeight:1.5}}>400 messages/month · Priority + extras</p>
          </div>
        </div>

        <div className="cta-b__btns">
          <a href="https://app.sawt.tech" className="btn-jade-b">Start Free Trial <span>→</span></a>
        </div>
        <p className="eyebrow-num" style={{marginTop: 18, color: 'rgba(255,255,255,0.35)', letterSpacing: '0.08em'}}>
          10 free messages · No credit card required
        </p>
        {/* Tap Payments badge */}
        <div style={{
          display:'flex', alignItems:'center', justifyContent:'center',
          gap:8, marginTop:24,
          color:'rgba(255,255,255,0.35)', fontSize:12,
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style={{opacity:0.5}}>
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="rgba(255,255,255,0.6)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          <span>Payments secured by <strong style={{color:'rgba(255,255,255,0.5)'}}>Tap Payments</strong></span>
        </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="disciplines.html">Disciplines</a></li>
              <li><a href="products.html">Products</a></li>
              <li><a href="services.html">Services</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">Products</p>
            <ul>
              <li><a href="https://noor.sawt.tech" target="_blank" rel="noopener noreferrer">Noor — AI Assistant</a></li>
              <li><a href="products.html#rihla">Rihla — Trip Planner</a></li>
              <li><a href="https://cfo.sawt.tech" target="_blank" rel="noopener noreferrer">Wakeel — Family CFO</a></li>
              <li style={{color:'var(--copper)', paddingTop:'8px', fontFamily:'var(--font-mono)', fontSize:'10px', letterSpacing:'0.12em'}}>SERVICES</li>
              <li><a href="services.html">Bitcoin Mining</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-b__base">
          <p>© 2026–2027 Sawt Tech &amp; Marketing LLC. · Sultanate of Oman</p>
          <p style={{display:'flex', gap:12, flexWrap:'wrap', justifyContent:'center'}}>
            <a href="/privacy" style={{color:'rgba(255,255,255,0.35)', textDecoration:'none', fontSize:'12px'}}>Privacy Policy</a>
            <a href="/terms" style={{color:'rgba(255,255,255,0.35)', textDecoration:'none', fontSize:'12px'}}>Terms of Service</a>
            <a href="https://app.sawt.tech/refund" style={{color:'rgba(255,255,255,0.35)', textDecoration:'none', fontSize:'12px'}}>Refund Policy</a>
          </p>
        </div>
      </div>
    </footer>
  );
}

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

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