/* global React */
// All page sections except hero. Mixed-media collage layouts.

const { useMemo: useMemoS, useState: useStateS, useEffect: useEffectS } = React;

// =============================================================
// Shared atoms
// =============================================================
function SectionTag({ children }) {
  return <div className="section-tag">{children}</div>;
}

function TesseraStrip({ palette = ['t1', 't2', 't3', 't4', 't5'], count = 40, seed = 0 }) {
  const cells = useMemoS(() => {
    const arr = [];
    for (let i = 0; i < count; i++) {
      const r = Math.sin((i + seed) * 17.3) * 10000;
      const v = r - Math.floor(r);
      let cls;
      if (v < 0.55) cls = 'bg-ground-3';
      else if (v < 0.7) cls = `bg-${palette[i % palette.length]}`;
      else if (v < 0.82) cls = `bg-${palette[(i + 1) % palette.length]}`;
      else if (v < 0.92) cls = `bg-${palette[(i + 2) % palette.length]}`;
      else cls = `bg-${palette[(i + 3) % palette.length]}`;
      arr.push(cls);
    }
    return arr;
  }, [count, seed, palette]);
  return (
    <div className="tessera-strip" aria-hidden="true">
      {cells.map((c, i) => <i key={i} className={c} />)}
    </div>
  );
}

function TesseraDeco({ rows = 3, cols = 5, palette = ['t1', 't2', 't3', 't4'], cell = 12, gap = 3, seed = 0, className = '' }) {
  const cells = useMemoS(() => {
    const arr = [];
    for (let i = 0; i < rows * cols; i++) {
      const v = (Math.sin((i + seed) * 12.9) + 1) / 2;
      if (v < 0.35) arr.push(null);
      else arr.push(palette[Math.floor(v * palette.length) % palette.length]);
    }
    return arr;
  }, [rows, cols, palette, seed]);
  return (
    <div
      className={`tessera-deco ${className}`}
      style={{
        display: 'grid',
        gridTemplateColumns: `repeat(${cols}, ${cell}px)`,
        gridAutoRows: `${cell}px`,
        gap: `${gap}px`,
      }}
      aria-hidden="true"
    >
      {cells.map((c, i) => (
        <i key={i} className={c ? `bg-${c}` : ''} style={{ display: 'block' }} />
      ))}
    </div>
  );
}

// =============================================================
// 02 — Descent (manifesto)
// =============================================================
function Descent() {
  return (
    <section id="manifesto" data-screen-label="02 Manifesto">
      <div className="wrap">
        <div className="section-header" style={{ marginBottom: 80 }}>
          <div>
            <SectionTag>02 — pattern</SectionTag>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ink-mute)', marginTop: 8, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
              the manifesto
            </div>
          </div>
          <h2>
            Most tools ship parts.<br/><em className="serif-italic" style={{ color: 'var(--t1)' }}>eth3r</em> ships the whole.
          </h2>
        </div>

        <div className="descent">
          <div className="descent-text">
            <p>
              For years every agency we met sold one piece at a time. One site. One photoshoot. One quick fix. Then the next vendor, the next handoff, the next mismatch.
            </p>
            <p>
              The interesting work happens when a business has <em>many</em> pieces and someone has to make them line up. Photography next to platform next to inventory next to brand. Every piece cut to fit. Every piece set by hand.
            </p>
            <p>
              eth3r is built for that work. A mosaic, not a monolith. Each tile chosen on purpose. Each one belongs to the whole.
            </p>
          </div>

          <div className="descent-collage">
            <div className="panel panel-1">
              <image-slot
                id="manifesto-photo-1"
                src="img/mosaic.webp"
                placeholder="Atmospheric photo / lab moment"
                shape="rect"
              ></image-slot>
            </div>
            <div className="panel panel-2"></div>
            <div className="panel panel-3">
              <image-slot
                id="manifesto-photo-3"
                src="img/dish.webp"
                placeholder="Portrait / object"
                shape="rect"
              ></image-slot>
            </div>
            <div className="panel panel-4"></div>
            <div className="stamp">
              <span className="stamp-text">eth3r<br/>v3.1<br/>since 2024</span>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 80 }}>
          <TesseraStrip count={60} seed={1} />
        </div>
      </div>
    </section>
  );
}

// =============================================================
// 03 — Identity
// =============================================================
function Identity() {
  return (
    <section id="identity" className="identity" data-screen-label="03 Identity">
      <div className="wrap">
        <SectionTag>// Identity</SectionTag>

        <div className="identity-grid" style={{ marginTop: 32 }}>
          <div className="identity-text">
            <h2 className="pull">
              Digital infrastructure for businesses that need it to <em>actually work.</em>
            </h2>
            <p>
              ETH3R Systems builds the software that keeps daily operations running cleanly,
              the brand that earns customer trust, and the platforms that scale without breaking.
            </p>
            <p>
              Photography. Platforms. Automation. Tooling. Not four vendors. One operator drawing the map. One operator cutting every tile. One operator setting them in place.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 28 }}>
              {['Operational Systems', 'Digital Platforms', 'Commercial Media', 'Brand Infrastructure'].map((t, i) => (
                <span
                  key={t}
                  className="mono"
                  style={{
                    fontSize: 11,
                    letterSpacing: '0.08em',
                    textTransform: 'uppercase',
                    padding: '6px 10px',
                    background: ['var(--t1)', 'var(--t2)', 'var(--t3)', 'var(--t4)'][i],
                    color: i === 2 ? 'var(--ink)' : 'var(--ground)',
                  }}
                >
                  {t}
                </span>
              ))}
            </div>
          </div>

          <div className="identity-photo">
            {/* layered photo collage with tessera frame */}
            <div style={{
              position: 'absolute',
              inset: '6% 10% 14% 4%',
              background: 'var(--t5)',
              transform: 'rotate(-1.5deg)',
              boxShadow: '0 20px 40px -16px color-mix(in oklab, var(--ink) 30%, transparent)',
            }}>
              <image-slot
                id="identity-portrait"
                src="img/camera.webp"
                placeholder="Portrait / operator / studio"
                shape="rect"
              ></image-slot>
            </div>
            <div style={{
              position: 'absolute',
              right: 0, bottom: 0,
              width: '54%', height: '36%',
              background: 'var(--t2)',
              transform: 'rotate(2deg)',
              boxShadow: '0 16px 32px -16px color-mix(in oklab, var(--ink) 30%, transparent)',
            }}>
              <image-slot
                id="identity-detail"
                src="img/chair.webp"
                placeholder="Detail / texture"
                shape="rect"
              ></image-slot>
            </div>
            <div style={{
              position: 'absolute',
              right: '14%',
              top: '4%',
              padding: '12px 14px',
              background: 'var(--ground)',
              border: '1px solid color-mix(in oklab, var(--ink) 20%, transparent)',
              fontFamily: 'var(--mono)',
              fontSize: 10,
              letterSpacing: '0.12em',
              textTransform: 'uppercase',
              transform: 'rotate(4deg)',
              boxShadow: '0 8px 20px -10px color-mix(in oklab, var(--ink) 30%, transparent)',
            }}>
              Studio · Atlanta GA
            </div>
            <TesseraDeco rows={4} cols={4} cell={10} gap={3} seed={3}
              className="" />
          </div>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// 04 — Systems (bento)
// =============================================================
function Systems() {
  return (
    <section id="systems" data-screen-label="04 Systems">
      <div className="wrap">
        <SectionTag>// Systems</SectionTag>
        <div className="systems-header" style={{ marginTop: 24 }}>
          <h2>
            Four systems.<br/>
            <em className="serif-italic">One mosaic.</em>
          </h2>
          <p style={{ fontSize: 16, color: 'var(--ink-soft)', maxWidth: '40ch' }}>
            Most agencies sell these as four separate projects. We don't.
            They're one piece, because that's how a business actually uses them.
          </p>
        </div>

        <div className="systems-grid">
          <div className="system-card s1">
            <div className="num">/01 · Operational</div>
            <div>
              <h3>Operational Systems</h3>
              <p style={{ fontSize: 14, opacity: 0.85, margin: '12px 0 22px', maxWidth: '36ch' }}>
                The software that keeps daily work moving. Inventory, dashboards, internal tools.
              </p>
              <ul>
                <li>Inventory systems</li>
                <li>Workflow platforms</li>
                <li>Operator dashboards</li>
                <li>Internal tools</li>
              </ul>
            </div>
            <TesseraDeco rows={3} cols={4} cell={10} gap={3} seed={11}
              palette={['t3', 't5', 't2']} className="tr" />
          </div>

          <div className="system-card s2">
            <div className="num" style={{ color: 'var(--ink-mute)' }}>/02 · Digital</div>
            <div>
              <h3>Digital Platforms</h3>
              <p style={{ fontSize: 14, color: 'var(--ink-soft)', margin: '12px 0 22px', maxWidth: '32ch' }}>
                Customer-facing systems that don't fall over.
              </p>
              <ul style={{ color: 'var(--ink-soft)' }}>
                <li>Business websites</li>
                <li>Restaurant platforms</li>
                <li>Client portals</li>
                <li>Customer flows</li>
              </ul>
            </div>
            <TesseraDeco rows={3} cols={4} cell={10} gap={3} seed={12}
              palette={['t1', 't4', 't3']} className="tr" />
          </div>

          <div className="system-card s3">
            <div className="num">/03 · Commercial</div>
            <div>
              <h3>Commercial Media</h3>
              <p style={{ fontSize: 14, opacity: 0.8, margin: '12px 0 22px', maxWidth: '32ch' }}>
                Photography and visual assets that match the brand.
              </p>
              <ul>
                <li>Restaurant photography</li>
                <li>Graduation portraits</li>
                <li>Branded media assets</li>
                <li>Marketing visuals</li>
              </ul>
            </div>
            <TesseraDeco rows={3} cols={4} cell={10} gap={3} seed={13}
              palette={['t1', 't3', 't5']} className="tr" />
          </div>

          <div className="system-card s4">
            <div className="num">/04 · Brand</div>
            <div>
              <h3>Brand Infrastructure</h3>
              <p style={{ fontSize: 14, opacity: 0.8, margin: '12px 0 22px', maxWidth: '36ch' }}>
                One brand. Every surface. Menu, web, signage, voice. Cut from the same cloth.
              </p>
              <ul>
                <li>Menu systems</li>
                <li>Brand presentation</li>
                <li>Visual identity</li>
                <li>Customer experience</li>
              </ul>
            </div>
            <TesseraDeco rows={3} cols={4} cell={10} gap={3} seed={14}
              palette={['t2', 't4', 't5']} className="tr" />
          </div>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// 05 — Approach (4 steps)
// =============================================================
function Approach() {
  const steps = [
    { n: 1, t: 'Architect', d: 'Map what the system has to do. Decide the structure before any code.' },
    { n: 2, t: 'Engineer', d: 'Build it with production tooling. Documented, maintainable, no surprises.' },
    { n: 3, t: 'Deploy', d: 'Ship to production. Verified, monitored, observable from day one.' },
    { n: 4, t: 'Operate', d: 'Keep it running. Scale it. Treat it as infrastructure, not a project.' },
  ];
  return (
    <section id="approach" data-screen-label="05 Approach">
      <div className="wrap">
        <SectionTag>// Approach</SectionTag>
        <div className="systems-header" style={{ marginTop: 24 }}>
          <h2>From requirement to running system. <em className="serif-italic">Four tiles, set in order.</em></h2>
          <p style={{ fontSize: 16, color: 'var(--ink-soft)', maxWidth: '38ch' }}>
            No mystery process. No four-month discovery phase. Architect, build, ship, operate.
          </p>
        </div>

        <div className="approach-steps">
          {steps.map((s, i) => (
            <div className="approach-step" key={s.n}>
              <div className="num-plate">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <div className="step-deco" />
              <div style={{
                position: 'absolute',
                left: 28, bottom: 22,
                fontFamily: 'var(--mono)',
                fontSize: 10,
                letterSpacing: '0.16em',
                textTransform: 'uppercase',
                color: 'var(--ink-mute)',
              }}>
                phase 0{s.n}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============================================================
// 06 — Methodology
// =============================================================
function Methodology() {
  return (
    <section id="methodology" data-screen-label="06 Methodology">
      <div className="wrap">
        <SectionTag>// Methodology</SectionTag>
        <div className="systems-header" style={{ marginTop: 24 }}>
          <h2>Try the controls. <em className="serif-italic">That's how we build.</em></h2>
          <p style={{ fontSize: 16, color: 'var(--ink-soft)', maxWidth: '40ch' }}>
            This site is a working demo. Switch palettes. Drag the density slider. The system adapts.
            Every project we ship works the same way.
          </p>
        </div>

        <div className="method-grid">
          <div className="method-card">
            <div className="num">01</div>
            <h3>How to use this site</h3>
            <p style={{ fontSize: 14, color: 'var(--ink-soft)' }}>Two controls. That's it.</p>
            <ul>
              <li><strong>Palette switcher.</strong> Four palettes via Tweaks (bottom-right).</li>
              <li><strong>Density slider.</strong> Max for the full show, low for a quiet read.</li>
            </ul>
            <div className="tip">
              Open Tweaks. Switch to <em>Midnight Tessera</em>. Drop density to low. Same tiles, different room.
            </div>
          </div>

          <div className="method-card">
            <div className="num">02</div>
            <h3>What we build</h3>
            <p style={{ fontSize: 14, color: 'var(--ink-soft)' }}>Systems that have to actually run a business:</p>
            <ul>
              <li>Inventory, POS extensions, internal tools, control planes.</li>
              <li>Websites, menu systems, e-commerce, membership flows.</li>
              <li>Identity systems and product photography. One brand, every surface.</li>
              <li>AI agents that handle operational decisions, not chat.</li>
            </ul>
          </div>

          <div className="method-card">
            <div className="num">03</div>
            <h3>Why it's different</h3>
            <p style={{ fontSize: 14, color: 'var(--ink-soft)' }}>Built like infrastructure, not like a campaign:</p>
            <ul>
              <li><strong>You get the knobs.</strong> Defaults are not destiny.</li>
              <li><strong>Every change is logged.</strong> Every change can be undone.</li>
              <li><strong>Built to last.</strong> Not a template you'll replace in eighteen months.</li>
              <li><strong>One operator.</strong> No handoffs. The architect builds it.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Descent = Descent;
window.Identity = Identity;
window.Systems = Systems;
window.Approach = Approach;
window.Methodology = Methodology;
window.SectionTag = SectionTag;
window.TesseraStrip = TesseraStrip;
window.TesseraDeco = TesseraDeco;