/* eslint-disable */
/* ─────────────────────────────────────────────
   DISCIPLINES PAGE — Direction B "Geometric Atlas"
   ───────────────────────────────────────────── */

function DisciplinesHero() {
  return (
    <section className="page-hero">
      <div className="page-hero__pattern" aria-hidden="true"/>
      <div className="page-hero__grade" aria-hidden="true"/>
      <div className="page-hero__inner">
        <div className="page-hero__breadcrumb">
          <a href="index.html">Home</a>
          <span>/</span>
          <span style={{color:'rgba(255,255,255,0.55)'}}>Disciplines</span>
        </div>
        <span className="eyebrow page-hero__eyebrow">Our Disciplines</span>
        <h1 className="page-hero__title">
          Five disciplines.<br/>
          <em>Built to last.</em>
        </h1>
        <p className="page-hero__sub">
          Two disciplines active today. Three in our long-term vision. Each one backed by direct operating experience — or built on the conviction that it will be.
        </p>
      </div>
    </section>
  );
}

/* ── Jump-nav ── */
function DisciplinesNav() {
  const links = [
    ['#products',   '01', 'Digital Products'],
    ['#mining',     '02', 'Bitcoin Mining'],
    ['#ai',         '03', 'AI Consultancy'],
    ['#infra',      '04', 'Infrastructure'],
    ['#invest',     '05', 'Investments'],
  ];
  return (
    <div style={{
      background: 'var(--ink-900)',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
      position: 'sticky', top: 0,
      zIndex: 40,
    }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto', padding: '0 40px',
        display: 'flex', gap: 0, overflowX: 'auto',
      }}>
        {links.map(([href, num, label]) => (
          <a key={href} href={href} style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '14px 18px',
            fontFamily: 'var(--font-mono)', fontSize: 11,
            letterSpacing: '0.06em',
            color: 'rgba(255,255,255,0.45)',
            textDecoration: 'none',
            whiteSpace: 'nowrap',
            borderBottom: '2px solid transparent',
            transition: 'color .2s, border-color .2s',
          }}
          onMouseEnter={e => { e.currentTarget.style.color='var(--jade)'; e.currentTarget.style.borderBottomColor='var(--jade)'; }}
          onMouseLeave={e => { e.currentTarget.style.color='rgba(255,255,255,0.45)'; e.currentTarget.style.borderBottomColor='transparent'; }}
          >
            <span style={{color:'rgba(255,255,255,0.25)'}}>{num}</span>
            {label}
          </a>
        ))}
      </div>
    </div>
  );
}

/* ── Active discipline block ── */
function ActiveDiscipline({ id, num, accent, icon, label, title, paras, includes, note, link }) {
  const isCopper = accent === 'copper';
  const accentColor = isCopper ? 'var(--copper)' : 'var(--jade)';
  return (
    <div id={id} className="service-block" style={{scrollMarginTop:80}}>
      <div className="two-col two-col--wide-left">
        {/* Left — copy */}
        <div>
          <div className="service-block__tag">
            <div className="service-block__icon">{icon}</div>
            <span className="eyebrow-num" style={{color: accentColor}}>
              {num} — {label}
            </span>
          </div>
          <h2 className="service-block__title" style={{
            margin: '0 0 20px',
            fontSize: 'clamp(26px,3.2vw,40px)',
            fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1, color: '#fff',
          }}>{title}</h2>
          {paras.map((p, i) => (
            <p key={i} style={{
              color:'rgba(255,255,255,0.6)', fontSize:16, lineHeight:1.65,
              margin: i < paras.length - 1 ? '0 0 16px' : '0',
            }} dangerouslySetInnerHTML={{__html: p}}/>
          ))}
          {link && (
            <a href={link.href} className={'service-block__link' + (isCopper ? ' service-block__link--copper' : '')}>
              {link.label} <span>→</span>
            </a>
          )}
        </div>
        {/* Right — cards */}
        <div style={{display:'flex', flexDirection:'column', gap:12}}>
          <div className="includes-card">
            <h4>What this includes</h4>
            <ul className={'bullet-list' + (isCopper ? ' bullet-list--copper' : '')}>
              {includes.map((item, i) => <li key={i} dangerouslySetInnerHTML={{__html: item}}/>)}
            </ul>
          </div>
          {note && (
            <div className="note-card">
              <p><strong>{note.label}</strong> {note.body}</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ── Future discipline block ── */
function FutureDiscipline({ id, num, icon, label, title, vision }) {
  return (
    <div id={id} className="service-block" style={{scrollMarginTop:80}}>
      <div className="two-col two-col--wide-left">
        <div>
          <div className="service-block__tag">
            <div className="service-block__icon">{icon}</div>
            <span className="eyebrow-num" style={{color:'rgba(255,255,255,0.45)'}}>
              {num} — {label}
            </span>
          </div>
          <h2 className="service-block__title" style={{
            margin: '0 0 20px',
            fontSize: 'clamp(26px,3.2vw,40px)',
            fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1, color: '#fff',
          }}>{title}</h2>
          <p style={{color:'rgba(255,255,255,0.6)', fontSize:16, lineHeight:1.65, margin:0}}>
            {vision}
          </p>
        </div>
        <div/>
      </div>
    </div>
  );
}

function DisciplinesBody() {
  const ACTIVE = [
    {
      id: 'products',
      num: '01',
      accent: 'jade',
      icon: (
        <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="var(--jade)" strokeWidth="1.8">
          <path strokeLinecap="round" strokeLinejoin="round" d="M8 9l-3 3 3 3m8-6 3 3-3 3M14 5l-4 14"/>
        </svg>
      ),
      label: 'Digital Products',
      title: 'Digital products with purpose, built to last.',
      paras: [
        'We design and develop software products — mobile apps, web platforms, and AI-native tools — with a clear focus on user experience, architectural quality, and long-term maintainability.',
        'Today this discipline is home to three live products: <strong style="color:#fff;font-weight:500">Noor</strong>, our bilingual personal AI assistant; <strong style="color:#fff;font-weight:500">Rihla</strong>, an AI-powered travel planner for iOS and Android; and <strong style="color:#fff;font-weight:500">Wakeel</strong>, a private AI CFO for family offices.',
      ],
      includes: [
        'iOS and cross-platform mobile application development',
        'Product strategy, UX design, and user research',
        'AI-native product design and conversational interfaces',
        'Backend services, APIs, and data infrastructure',
        'App Store, Play Store, and web deployment',
        'Ongoing product development and feature iteration',
      ],
      note: {
        label: 'Our products.',
        body: 'See full detail on Noor, Rihla, and Wakeel on the Products page.',
      },
      link: { href:'products.html', label:'Explore our products' },
    },
    {
      id: 'mining',
      num: '02',
      accent: 'copper',
      icon: (
        <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="var(--copper)" strokeWidth="1.8">
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v18M8.5 6.5h5.25a3.25 3.25 0 010 6.5H8.5h5.75a3.25 3.25 0 010 6.5H8.5"/>
        </svg>
      ),
      label: 'Bitcoin Mining',
      title: 'Infrastructure-led Bitcoin mining, managed from the ground up.',
      paras: [
        'We participate in Bitcoin mining as an active operator, not a passive investor. Our fleet includes 220 Bitmain Antminer S19j Pro+ units, representing roughly 26–27 PH/s of nameplate hashrate, with site power approaching the one-megawatt class.',
        'Our primary footprint is a containerised deployment hosted at Green Data City, where we operate our own ASIC fleet. We treat mining as an engineering operation — hardware uptime, thermal efficiency, and cost per terahash are the metrics that matter.',
      ],
      includes: [
        'ASIC hardware operations and performance monitoring',
        'Container and thermal management',
        'Pool management and hashrate optimisation',
        'Fault detection, maintenance scheduling, and component replacement',
        'Power infrastructure oversight',
      ],
      note: {
        label: 'Our approach.',
        body: 'We treat mining as an engineering operation, not a financial speculation.',
      },
      link: { href:'services.html', label:'See Green Data City' },
    },
  ];

  const FUTURE = [
    {
      id: 'ai',
      num: '03',
      icon: (
        <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="rgba(255,255,255,0.3)" strokeWidth="1.8">
          <path strokeLinecap="round" strokeLinejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
        </svg>
      ),
      label: 'AI Consultancy',
      title: 'Applied AI that delivers measurable operational change.',
      vision: 'The value of AI is not in the technology itself — it\'s in identifying where automation, inference, or pattern recognition can reduce friction, improve decisions, or surface insight that would otherwise stay hidden. We apply AI internally across our own products first. When we offer this as a formal discipline, we will arrive with practical knowledge of integration challenges, evaluation methods, and what actually changes behaviour versus what just looks impressive in a demo.',
    },
    {
      id: 'infra',
      num: '04',
      icon: (
        <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="rgba(255,255,255,0.3)" strokeWidth="1.8">
          <path strokeLinecap="round" strokeLinejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0H3"/>
        </svg>
      ),
      label: 'Infrastructure Field Engineering',
      title: 'Physical infrastructure — managed where uptime matters.',
      vision: 'Digital operations depend on physical systems performing reliably in the field. Our grounding in hardware comes first from running our own — ASIC miners, containerised compute, cooling systems. A formal infrastructure engineering practice, extending this operating experience to other organisations, is part of our long-term roadmap.',
    },
    {
      id: 'invest',
      num: '05',
      icon: (
        <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="rgba(255,255,255,0.3)" strokeWidth="1.8">
          <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 19.5h16.5M5 17V8.75L12 4l7 4.75V17M9 17v-5h6v5"/>
        </svg>
      ),
      label: 'Strategic Investments',
      title: 'Capital deployed where we have genuine understanding.',
      vision: 'We invest in technology ventures and digital infrastructure businesses where we can make a real assessment of the technology, the operations, and the risk. Our most visible position today is our own Bitcoin mining capacity at Green Data City. A broader investment practice — backing founders and operators in digital infrastructure and adjacent technology — is a discipline we intend to formalise over time.',
    },
  ];

  return (
    <section className="sec-dark">
      <div className="sec-inner">
        {ACTIVE.map(s => <ActiveDiscipline key={s.id} {...s}/>)}
        {FUTURE.map(s => <FutureDiscipline key={s.id} {...s}/>)}
      </div>
    </section>
  );
}

function DisciplinesPage() {
  return (
    <div className="page-b">
      <NavB active="disciplines"/>
      <DisciplinesHero/>
      <DisciplinesNav/>
      <DisciplinesBody/>
      <CtaB/>
      <FooterB/>
    </div>
  );
}

window.DisciplinesPage = DisciplinesPage;