/* global React */
// Lower-page sections: industries, reliability, engagement, footer.

const { useMemo: useMemoB } = React;

// =============================================================
// 07 — Industries
// =============================================================
function Industries() {
  const items = [
    {
      n: '/01',
      title: 'Restaurants & Hospitality',
      lede: 'Menu systems, online ordering, brand identity. Engineered so the restaurant runs and reads as one piece.',
      points: ['Digital & print menus', 'Online ordering', 'Reservations', 'Visual identity'],
      link: { label: 'Menu Collection', sub: 'Multiple formats · demo', href: '#' },
      cls: 'i1',
      slotId: 'industry-restaurants',
      slotLabel: 'Plated dish / table',
      slotSrc: 'img/food.webp',
      linkHref: 'https://eth3r.studio/food-photography',
    },
    {
      n: '/02',
      title: 'Fitness & Gyms',
      lede: 'Studio sites, class and membership systems, and brand identity that looks right in print, on the web, and on the gym wall.',
      points: ['Studio sites', 'Class & membership funnels', 'Lead capture', 'Visual identity'],
      link: { label: 'Gym Studio Demo', sub: 'Studio site · demo', href: '#' },
      cls: 'i2',
      slotId: 'industry-fitness',
      slotLabel: 'Gym interior / athlete',
      slotSrc: 'img/gym.webp',
      linkHref: 'https://eth3r.ai/tnt/v1/',
    },
    {
      n: '/03',
      title: 'Apparel & Retail',
      lede: 'Shopify and custom e-commerce, built so adding products and B2B accounts doesn\u2019t break the store.',
      points: ['Shopify builds', 'B2B / wholesale', 'Product systems', 'Visual identity'],
      link: { label: 'Apparel Storefront', sub: 'Shopify wholesale demo', href: '#' },
      cls: 'i3',
      slotId: 'industry-apparel',
      slotLabel: 'Product flatlay',
      slotSrc: 'img/cloth.webp',
      linkHref: '/apparel/',
    },
    {
      n: '/04',
      title: 'Operational Automation',
      lede: 'Inventory operating systems. Internal tooling. Control planes. The software that runs the business behind the counter.',
      points: ['Inventory OS', 'Internal tooling', 'Event automation', 'Control planes'],
      link: { label: 'CORTEX Portal', sub: 'Control plane · demo', href: '#' },
      cls: 'i4',
      slotId: 'industry-automation',
      slotLabel: 'Dashboard screenshot',
      slotSrc: 'img/inv2.webp',
      fit: 'contain',
      linkHref: '/stockroom/',
      /* label is "CORTEX Portal" but the live demo lives at /stockroom/ —
         the inventory operating system. Update if/when CORTEX gets its own
         public-facing demo URL. */
    },
  ];

  return (
    <section id="industries" data-screen-label="07 Industries">
      <div className="wrap">
        <SectionTag>// What we build</SectionTag>
        <div className="systems-header" style={{ marginTop: 24 }}>
          <h2>Built for four kinds of business.<br/><em className="serif-italic" style={{ color: 'var(--t1)' }}>Same craft. Different rooms.</em></h2>
          <p style={{ fontSize: 16, color: 'var(--ink-soft)', maxWidth: '40ch' }}>
            Not one-off websites. Complete systems, with proof. Every one already shipped.
          </p>
        </div>

        <div className="industries-grid">
          {items.map((it, idx) => (
            <article key={it.n} className={`industry-card ${it.cls}`}>
              <div className="image-area">
                <image-slot
                  id={it.slotId}
                  src={it.slotSrc}
                  placeholder={it.slotLabel}
                  shape="rect"
                  fit={it.fit || 'cover'}
                ></image-slot>
                <div className="color-block">
                  <div className="tess">
                    {Array.from({ length: 36 }, (_, i) => {
                      // Stained-glass-style mosaic: each tile picks a jewel
                      // tone (or transparent grout) deterministically.
                      const v = (Math.sin((i + idx * 11) * 8.7) + 1) / 2;
                      const w = (Math.sin((i + idx * 11) * 3.1) + 1) / 2;
                      if (v < 0.18) return <i key={i} style={{ background: 'transparent' }} />;
                      const palette = ['var(--t1)', 'var(--t2)', 'var(--t3)', 'var(--t4)', 'var(--t5)'];
                      const lt =     ['var(--t1-lt)', 'var(--t2-lt)', 'var(--t3-lt)', 'var(--t4-lt)', 'var(--t5-lt)'];
                      const pick = Math.floor(w * palette.length) % palette.length;
                      const color = v < 0.55 ? palette[pick] : lt[pick];
                      return <i key={i} style={{ background: color }} />;
                    })}
                  </div>
                  <div style={{
                    position: 'absolute',
                    left: 16, top: 16,
                    fontFamily: 'var(--mono)',
                    fontSize: 10,
                    letterSpacing: '0.18em',
                    textTransform: 'uppercase',
                    color: 'color-mix(in oklab, white 80%, transparent)',
                  }}>
                    {it.n}
                  </div>
                </div>
              </div>

              <div className="body">
                <h3>{it.title}</h3>
                <p>{it.lede}</p>
                <ul>{it.points.map(p => <li key={p}>{p}</li>)}</ul>
                <a
                  href={it.linkHref || it.link.href}
                  className="demo-link"
                  {...(it.linkHref && it.linkHref.startsWith('http') ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
                >
                  <span>{it.link.label}</span>
                  <span style={{ opacity: 0.6 }}>· {it.link.sub}</span>
                  <span style={{ marginLeft: 'auto' }}>↗</span>
                </a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============================================================
// 08 — Reliability
// =============================================================
function Reliability() {
  const cells = [
    { h: 'Built for years, not months', p: 'Every system is shipped to live for years. No throwaway templates.' },
    { h: 'Documented from day one', p: 'Clear structure, clear naming, clear runbook. The next person can read it.' },
    { h: 'One person owns it', p: 'Architecture, build, ship, operate. Same operator throughout. No handoffs.' },
    { h: 'Designed around the work', p: 'Built to fit how the business actually runs, not how the framework prefers.' },
  ];
  return (
    <section id="reliability" data-screen-label="08 Reliability">
      <div className="wrap">
        <SectionTag>// Reliability</SectionTag>
        <div className="systems-header" style={{ marginTop: 24 }}>
          <h2>Built like infrastructure.</h2>
          <p style={{ fontSize: 16, color: 'var(--ink-soft)', maxWidth: '38ch' }}>
            Not throwaway projects. The systems we ship are designed to outlast the next framework cycle.
          </p>
        </div>

        <div className="reliability-grid">
          {cells.map((c, i) => (
            <div key={i} className="reliability-cell">
              <div className="icon-tile" />
              <h3>{c.h}</h3>
              <p>{c.p}</p>
              <div style={{
                position: 'absolute',
                right: 14, top: 14,
                fontFamily: 'var(--mono)',
                fontSize: 10,
                color: 'var(--ink-mute)',
                letterSpacing: '0.14em',
              }}>
                ▰ 0{i + 1}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============================================================
// 09 — Engagement (CTA)
// =============================================================
function Engagement() {
  // build a small mosaic plate beneath the CTA
  const plate = useMemoB(() => {
    const arr = [];
    const colors = ['var(--t1)', 'var(--t2)', 'var(--t3)', 'var(--t4)', 'var(--t5)', 'transparent'];
    for (let i = 0; i < 60; i++) {
      const v = (Math.sin(i * 11.7) + 1) / 2;
      arr.push(colors[Math.floor(v * colors.length)]);
    }
    return arr;
  }, []);

  return (
    <section id="contact" className="engagement" data-screen-label="09 Engagement">
      <div className="wrap">
        <SectionTag>// Engagement</SectionTag>
        <h2 style={{ marginTop: 24 }}>
          Cut a <em className="serif-italic">tile.</em>
        </h2>
        <p>
          Tell me what needs building. I'll tell you what it costs and when it ships.
        </p>
        <div className="cta-row">
          <button className="cta" onClick={() => {
            navigator.clipboard?.writeText('Project brief · eth3r Systems\n\nWhat we need built:\n\nTimeline:\n\nBudget range:\n\nContact:\n');
          }}>
            ⎘ Copy project brief
          </button>
          <a className="cta secondary" href="mailto:alhassan97@gmail.com?subject=eth3r%20Systems%20%E2%80%94%20project%20inquiry">
            alhassan97@gmail.com
          </a>
        </div>

        <div className="engagement-mosaic" aria-hidden="true">
          {plate.map((c, i) => <i key={i} style={{ background: c }} />)}
        </div>
      </div>
    </section>
  );
}

// =============================================================
// Footer
// =============================================================
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontWeight: 600 }}>
          <span className="nav-brand"><span className="stamp"></span></span>
          eth3r Systems LLC
        </div>
        <div className="links">
          <a href="#systems">Systems</a>
          <a href="#industries">Industries</a>
          <a href="#approach">Approach</a>
          <a href="#methodology">Methodology</a>
          <a href="#contact">Contact</a>
        </div>
      </div>
      <div className="footer-base">
        <span>© 2026 ETH3R Systems LLC</span>
        <span>Engineering Modern Digital Infrastructure</span>
        <span>v3.1 · since 2024</span>
      </div>
    </footer>
  );
}

window.Industries = Industries;
window.Reliability = Reliability;
window.Engagement = Engagement;
window.Footer = Footer;