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

function ProjectsHero() {
  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)'}}>Projects</span>
        </div>
        <span className="eyebrow page-hero__eyebrow">Our Projects</span>
        <h1 className="page-hero__title">
          Products &amp; infrastructure<br/>
          we <em>own</em> and operate.
        </h1>
        <p className="page-hero__sub">
          Not case studies from client work — these are products and deployments STM runs day to day.
        </p>
      </div>
    </section>
  );
}

/* ── Rihla Screen Showcase ── */
function RihlaCarousel() {
  const SCREENS = [
    {
      src: 'photos/rihla-screen-1.gif',
      num: '01',
      label: 'Trip overview',
      desc: 'Full itinerary with day-by-day planning, an interactive map, and the AI Studio to refine any part of your trip.',
    },
    {
      src: 'photos/rihla-screen-2.gif',
      num: '02',
      label: 'Discover',
      desc: 'Browse curated and community-submitted trips by category, destination, or vibe. Search with smart filters.',
    },
    {
      src: 'photos/rihla-screen-3.gif',
      num: '03',
      label: 'Trip detail',
      desc: 'Full trip story with highlights, tags, and a one-tap Remix button to build your own version of any trip.',
    },
  ];

  const [active, setActive] = React.useState(0);

  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '260px 1fr',
      gap: 56,
      alignItems: 'center',
    }}>
      {/* Left — featured phone */}
      <div style={{ position: 'relative' }}>
        {/* Glow behind phone */}
        <div style={{
          position: 'absolute', inset: '-24px',
          background: 'radial-gradient(ellipse at 50% 60%, rgba(61,217,182,0.14) 0%, transparent 70%)',
          pointerEvents: 'none',
        }}/>
        <div style={{
          borderRadius: 28,
          overflow: 'hidden',
          boxShadow: '0 40px 100px -24px rgba(0,0,0,0.75), 0 0 0 1px rgba(61,217,182,0.18)',
          background: '#07101e',
          position: 'relative',
        }}>
          {SCREENS.map((s, i) => (
            <div
              key={i}
              style={{
                display: i === active ? 'block' : 'none',
              }}
            >
              <img
                src={s.src}
                alt={s.label}
                style={{ width: '100%', display: 'block' }}
                loading="lazy"
              />
            </div>
          ))}
        </div>
      </div>

      {/* Right — screen list */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <span className="eyebrow" style={{ color:'rgba(255,255,255,0.3)', display:'block', marginBottom:20 }}>
          App previews · 3 screens
        </span>

        {SCREENS.map((s, i) => {
          const isActive = i === active;
          return (
            <button
              key={i}
              onClick={() => setActive(i)}
              style={{
                all: 'unset',
                display: 'flex',
                alignItems: 'flex-start',
                gap: 20,
                padding: '22px 24px',
                borderRadius: 14,
                cursor: 'pointer',
                background: isActive ? 'rgba(61,217,182,0.06)' : 'transparent',
                borderLeft: isActive ? '2px solid var(--jade)' : '2px solid transparent',
                transition: 'background 0.2s, border-color 0.2s',
              }}
            >
              {/* Number */}
              <span style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 12,
                color: isActive ? 'var(--jade)' : 'rgba(255,255,255,0.2)',
                lineHeight: 1,
                paddingTop: 3,
                flexShrink: 0,
                transition: 'color 0.2s',
              }}>{s.num}</span>

              {/* Text */}
              <div style={{ textAlign: 'left' }}>
                <p style={{
                  margin: '0 0 6px',
                  fontSize: 17,
                  fontWeight: 500,
                  letterSpacing: '-0.01em',
                  color: isActive ? '#fff' : 'rgba(255,255,255,0.45)',
                  transition: 'color 0.2s',
                }}>{s.label}</p>
                <p style={{
                  margin: 0,
                  fontSize: 13.5,
                  lineHeight: 1.55,
                  color: isActive ? 'rgba(255,255,255,0.55)' : 'rgba(255,255,255,0.25)',
                  transition: 'color 0.2s',
                }}>{s.desc}</p>
              </div>

              {/* Active arrow */}
              {isActive && (
                <span style={{
                  marginLeft: 'auto',
                  color: 'var(--jade)',
                  fontSize: 14,
                  flexShrink: 0,
                  paddingTop: 2,
                  opacity: 0.7,
                }}>→</span>
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
}

function RihlaSection() {

  return (
    <section id="rihla" style={{scrollMarginTop:80}} className="sec-dark">
      <div className="sec-inner">
        <div className="project-block">

          {/* Header */}
          <div className="project-header">
            <div>
              <div style={{display:'flex', gap:8, marginBottom:20, flexWrap:'wrap'}}>
                <span className="project-badge project-badge--blue">iOS App</span>
                <span className="project-badge project-badge--jade">Active · Live</span>
              </div>
              <h2 className="project-title">
                Rihla
                <small>AI Travel Planner — رحلة</small>
              </h2>
              <p className="project-desc">
                Rihla is an AI-powered travel planning application for iOS. It helps users create, discover, and refine trips through an intelligent, conversational interface designed for modern travellers. The app is bilingual — supporting both English and Arabic — and is built and maintained by STM.
              </p>
              <div className="project-tags">
                {['iOS', 'AI-powered', 'English & Arabic', 'Travel tech', 'Consumer product'].map(t => (
                  <span key={t} className="project-tag">{t}</span>
                ))}
              </div>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:12}}>
              <div className="includes-card">
                <h4>Key capabilities</h4>
                <ul className="bullet-list">
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>AI trip creation</strong> — users describe what they want and the app builds a structured itinerary</li>
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>Trip discovery</strong> — curated and user-submitted trips browsable by category, destination, and vibe</li>
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>Collaborative planning</strong> — join and co-edit trips with other travellers</li>
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>My Trips management</strong> — personal itinerary hub with offline access</li>
                </ul>
              </div>
              <div className="note-card">
                <p>
                  <strong>Product website.</strong>{' '}
                  More information at{' '}
                  <a href="https://rihla-app.com" target="_blank" rel="noopener noreferrer" style={{color:'var(--jade)'}}>rihla-app.com</a>.
                  Development and product inquiries:{' '}
                  <a href="mailto:admin@rihla-app.com" style={{color:'var(--jade)'}}>admin@rihla-app.com</a>
                </p>
              </div>
            </div>
          </div>

          {/* GIF previews — 3D cylinder carousel */}
          <div>
            <span className="eyebrow" style={{color:'rgba(255,255,255,0.3)', display:'block', marginBottom:32}}>App previews</span>
            <RihlaCarousel/>
          </div>

        </div>
      </div>
    </section>
  );
}

function GreenDataCitySection() {
  const photos = [
    { src:'photos/IMG-20230719-WA0163.jpg',         label:'CONTAINER INSTALLATION', caption:'Modular mining unit crane-lifted into position at the Green Data City site' },
    { src:'photos/PHOTO-2023-08-15-08-53-02 1.jpg', label:'MINING CONTAINER',       caption:'STM-branded modular mining container at the Green Data City site' },
    { src:'photos/mining-interior-racks.png',        label:'ASIC INTERIOR',          caption:'Bitmain Antminer S19j Pro+ units installed inside the containerised mining environment' },
    { src:'photos/mining-cooling-yard.png',          label:'COOLING INFRASTRUCTURE', caption:'External cooling and container infrastructure supporting the mining operation' },
  ];

  return (
    <section id="green-data-city" style={{scrollMarginTop:80}} className="sec-ink">
      <div className="sec-inner">
        <div className="project-block" style={{borderTop:0, paddingTop:0}}>

          {/* Header */}
          <div className="project-header">
            <div>
              <div style={{display:'flex', gap:8, marginBottom:20, flexWrap:'wrap'}}>
                <span className="project-badge project-badge--copper">Infrastructure</span>
                <span className="project-badge project-badge--jade">Active · STM-operated</span>
              </div>
              <h2 className="project-title">Green Data City</h2>
              <p className="project-desc">
                Green Data City is a digital infrastructure and colocation environment focused on modular Bitcoin mining. STM is a client on the site: we have invested in and operate our own containerised mining deployment within Green Data City, alongside other operators.
              </p>
              <p style={{fontSize:16, color:'rgba(255,255,255,0.55)', lineHeight:1.65, marginTop:16}}>
                This is not a passive investment. The operation includes 220 Bitmain Antminer S19j Pro+ units — roughly 26–27 PH/s of nameplate hashrate — with power demand in the one-megawatt class once mining load, cooling, and supporting infrastructure are included. STM is involved in hardware selection, site setup, operational monitoring, and maintenance.
              </p>
              <div className="project-tags">
                {['Bitcoin mining', 'Modular containers', 'ASIC infrastructure', '~26–27 PH/s', 'STM-operated'].map(t => (
                  <span key={t} className="project-tag">{t}</span>
                ))}
              </div>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:12}}>
              <div className="includes-card">
                <h4>Our operational role</h4>
                <ul className="bullet-list bullet-list--copper">
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>Site & infrastructure management</strong> — containerised mining units installed and maintained on-site</li>
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>Hardware operations</strong> — ASIC miner deployment, performance monitoring, fault response</li>
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>Thermal & power management</strong> — cooling systems and power infrastructure oversight</li>
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>Deployment economics</strong> — we own and manage our mining capacity and equipment on site</li>
                </ul>
              </div>
              <div className="note-card">
                <p><strong>Infrastructure partnerships.</strong> Organisations interested in digital infrastructure partnerships, mining co-location, or related investment discussions are welcome to reach out via our contact page.</p>
              </div>
            </div>
          </div>

          {/* Photos */}
          <div>
            <span className="eyebrow" style={{color:'rgba(255,255,255,0.3)', display:'block', marginBottom:20}}>Infrastructure photos</span>
            <div className="photo-grid">
              {photos.map((p, i) => (
                <div key={i} className="photo-card">
                  <img src={p.src} alt={p.caption}/>
                  <div className="photo-card__caption">
                    <span className="eyebrow-num">{p.label}</span>
                    <p>{p.caption}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}

function ProjectsPage() {
  return (
    <div className="page-b">
      <NavB active="projects"/>
      <ProjectsHero/>
      <RihlaSection/>
      <GreenDataCitySection/>
      <CtaB/>
      <FooterB/>
    </div>
  );
}

window.ProjectsPage = ProjectsPage;