// Solutions page — 4 architecture solution patterns
const { useState, useEffect } = React;

const SolutionModal = ({ sol, onClose }) => {
  useEffect(() => {
    const onKey = (e) => e.key === 'Escape' && onClose();
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {document.removeEventListener('keydown', onKey);document.body.style.overflow = '';};
  }, [onClose]);
  return (
    <div
      style={{
        position: 'fixed', inset: 0, zIndex: 200,
        background: 'rgba(10,31,92,.45)',
        backdropFilter: 'blur(8px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 24,
        animation: 'panelIn .25s ease both'
      }}
      onClick={onClose}>
      
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          background: '#fff', borderRadius: 22, maxWidth: 760, width: '100%', maxHeight: '88vh',
          overflow: 'auto', padding: 44, position: 'relative', border: '1px solid var(--line)'
        }}>
        
        <button onClick={onClose} aria-label="Close" style={{ position: 'absolute', top: 20, right: 20, width: 36, height: 36, borderRadius: '50%', background: 'var(--bg-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <I.close />
        </button>
        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 12, letterSpacing: '.14em', color: 'var(--accent)', marginBottom: 12 }}>SOLUTION ARCHITECTURE</div>
        <h3 style={{ fontSize: 36, marginBottom: 16 }}>{sol.title}</h3>
        <p style={{ fontSize: 17, marginBottom: 28 }}>{sol.desc}</p>
        <div className="sol-tags" style={{ marginBottom: 28 }}>
          {sol.tags.map((t) => <span key={t} className="tag">{t}</span>)}
        </div>
        <h4 style={{ marginBottom: 14, color: 'var(--ink)' }}>What's included</h4>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 24px', marginBottom: 28 }}>
          {sol.bullets.map((b) =>
          <div key={b} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14.5 }}>
              <span style={{ display: 'inline-flex', width: 22, height: 22, alignItems: 'center', justifyContent: 'center', borderRadius: '50%', background: 'var(--accent-soft)', color: 'var(--accent)' }}><I.check /></span>
              {b}
            </div>
          )}
        </div>
        <div style={{ display: 'flex', gap: 12 }}>
          <a href="contact.html" className="btn btn-accent">Request a brief <I.arrow /></a>
          <button className="btn btn-ghost" onClick={onClose}>Close</button>
        </div>
      </div>
    </div>);

};

const FeaturedArchitecture = () =>
<section className="section featured-arch-section">
    <div className="wrap">
      <a href="architecture.html" className="featured-arch reveal" aria-label="View NVIDIA GPU Compute Network Reference Architecture">
        <div className="featured-arch__head">
          <div className="featured-arch__eyebrow">
            <span className="featured-arch__badge">Featured</span>
            <span className="featured-arch__meta">Reference Architecture / 00</span>
          </div>
          <h2 className="featured-arch__title">
            NVIDIA GPU Compute Network <span className="accent">Reference Architecture</span>
          </h2>
          <p className="featured-arch__desc">A blueprint for high-performance GPU compute fabrics, compute, storage, and management plane for production AI workloads at scale.


        </p>
        </div>
        <div className="featured-arch__foot">
          <div className="featured-arch__tags">
            <span className="tag">NVIDIA</span>
            <span className="tag">GPU Compute</span>
            <span className="tag">Network Fabric</span>
            <span className="tag">Reference Design</span>
          </div>
          <span className="featured-arch__cta">
            View architecture <I.arrow />
          </span>
        </div>
      </a>
    </div>
  </section>;


const SolutionsGrid = () => {
  const [open, setOpen] = useState(null);
  return (
    <section className="section">
      <div className="wrap">
        <div className="solutions-rows">
          {SOLUTIONS.map((s, i) => {
          if (s.href) {
            return (
              <a
                key={s.num}
                href={s.href}
                className={`sol-row reveal d${i % 4 + 1}`}
                style={{ textDecoration: 'none', color: 'inherit' }}>
                <div className="sol-row-main">
                  <h3>{s.title}</h3>
                  <p className="desc">{s.desc}</p>
                  <div className="sol-tags">
                    {s.tags.map((t) => <span key={t} className="tag">{t}</span>)}
                  </div>
                </div>
                <div className="sol-row-side">
                  <ul className="sol-bullets">
                    {s.bullets.slice(0, 4).map((b) => <li key={b}>{b}</li>)}
                  </ul>
                  <span className="sol-cta">View architecture <I.arrow /></span>
                </div>
              </a>
            );
          }
          return (
          <article
            key={s.num}
            className={`sol-row reveal d${i % 4 + 1}`}
            onClick={() => setOpen(s)}
            role="button"
            tabIndex={0}
            onKeyDown={(e) => {if (e.key === 'Enter' || e.key === ' ') {e.preventDefault();setOpen(s);}}}>
            
              <div className="sol-row-main">
                <h3>{s.title}</h3>
                <p className="desc">{s.desc}</p>
                <div className="sol-tags">
                  {s.tags.map((t) => <span key={t} className="tag">{t}</span>)}
                </div>
              </div>
              <div className="sol-row-side">
                <ul className="sol-bullets">
                  {s.bullets.slice(0, 4).map((b) => <li key={b}>{b}</li>)}
                </ul>
                <span className="sol-cta">View architecture <I.arrow /></span>
              </div>
            </article>
          );
          })}
        </div>
      </div>
      {open && <SolutionModal sol={open} onClose={() => setOpen(null)} />}
    </section>);

};

function SolutionsApp() {
  useReveal();
  return (
    <>
      <Nav />
      <main>
        <PageHero
          eyebrow="Solutions"
          crumbs={[{ label: 'Home', href: 'index.html' }, { label: 'Solutions' }]}
          title={<>Reference architectures, <span className="accent">designed to deploy.</span></>}
          sub="From platform design through operating model, controls, and continuous improvement."
          image="assets/solutions-hero-bg.png" />
        
        <SolutionsGrid />
        <CTABanner
          title="Need an architecture review for your environment?"
          sub="Send us a brief on your current state and we'll come back with a reference architecture mapped to your priorities."
          primary="Request a brief"
          primaryHref="contact.html"
          secondary="Success stories"
          secondaryHref="success-stories.html" />
        
      </main>
      <Footer />
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<SolutionsApp />);