// Marketing screens — Home, Services, BeforeAfter
// All exported to window.

const { useState, useRef, useEffect } = React;

// ─────────────────────────────────────────────
// Reusable bits
// ─────────────────────────────────────────────
function SectionLabel({ children, dark }) {
  return (
    <div style={{
      fontFamily: 'var(--font-mono)',
      fontSize: 11,
      letterSpacing: '0.12em',
      textTransform: 'uppercase',
      color: dark ? 'rgba(255,255,255,0.5)' : 'var(--blast-mute)',
      display: 'flex', alignItems: 'center', gap: 8,
    }}>
      <span style={{ width: 18, height: 1, background: dark ? 'rgba(255,255,255,0.3)' : 'rgba(7,8,12,0.25)' }} />
      {children}
    </div>
  );
}

function BigHeadline({ children, color = 'var(--blast-bone)', size = 64, lh = 0.9 }) {
  return (
    <h1 style={{
      fontFamily: 'var(--font-display)',
      fontSize: size, lineHeight: lh,
      letterSpacing: '-0.03em',
      color,
      margin: 0,
      textTransform: 'uppercase',
    }}>{children}</h1>
  );
}

// ─────────────────────────────────────────────
// HOME — hero with before/after slider, services preview, social proof
// ─────────────────────────────────────────────
function HomeScreen({ onNav, accent, copy }) {
  const [pos, setPos] = useState(50);
  const slabRef = useRef(null);
  const draggingRef = useRef(false);

  function updateFromClientX(clientX) {
    const el = slabRef.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const x = clientX - rect.left;
    setPos(Math.max(0, Math.min(100, (x / rect.width) * 100)));
  }

  function onPointerDown(e) {
    draggingRef.current = true;
    e.currentTarget.setPointerCapture?.(e.pointerId);
    updateFromClientX(e.clientX);
  }
  function onPointerMove(e) {
    if (!draggingRef.current) return;
    updateFromClientX(e.clientX);
  }
  function onPointerUp(e) {
    draggingRef.current = false;
    e.currentTarget.releasePointerCapture?.(e.pointerId);
  }

  return (
    <div className="home" style={{ background: 'var(--blast-paper)' }}>
      <div className="home-hero-row">
      {/* HERO — black slab, paper bone bg */}
      <div className="home-hero-card" style={{
        background: 'var(--blast-ink)',
        padding: '70px 22px 28px',
        position: 'relative',
        borderBottomLeftRadius: 36, borderBottomRightRadius: 36,
        overflow: 'hidden',
      }}>
        {/* corner mark */}
        <div style={{
          position: 'absolute', top: 64, right: 22,
          fontFamily: 'var(--font-mono)', fontSize: 10,
          color: 'rgba(255,255,255,0.45)', textAlign: 'right',
          lineHeight: 1.4, letterSpacing: '0.08em',
        }}>
          EST. 2019<br/>SVC #4471<br/>★★★★★ 4.97
        </div>

        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 11, color: accent,
          letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 8,
        }}>BLAST CO. // TRASH BIN HYDROBLAST</div>

        <BigHeadline size={62}>
          <span>Your bin</span><br/>
          <span>is a <em style={{ fontStyle: 'normal', color: accent }}>biohazard.</em></span><br/>
          <span style={{ color: 'rgba(255,255,255,0.4)' }}>We fix that.</span>
        </BigHeadline>

        <p style={{
          color: 'rgba(255,255,255,0.65)',
          fontSize: 15, lineHeight: 1.45,
          margin: '20px 0 22px', maxWidth: 320,
        }}>
          {copy.heroSub}
        </p>

        <button className="btn btn-blast"
          onClick={() => onNav('book')}
          style={{ background: '#fff', color: 'var(--blast-ink)' }}>
          <Icon.Spray s={20} c="currentColor"/> Book a blast — from $24
        </button>

        {/* Trusted local kids — inside hero */}
        <div style={{
          marginTop: 28,
          paddingTop: 18,
          borderTop: '1px solid rgba(255,255,255,0.12)',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ display: 'flex' }}>
            {[
              { i: 'HB', c: 'var(--blast-blue)' },
              { i: 'PW', c: '#15B36A' },
              { i: 'NA', c: '#E5497A' },
            ].map((p, idx) => (
              <div key={p.i} style={{
                width: 34, height: 34, borderRadius: 50,
                background: p.c, color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-display)', fontSize: 11,
                letterSpacing: '0.04em',
                border: '2px solid var(--blast-ink)',
                marginLeft: idx === 0 ? 0 : -10,
                position: 'relative', zIndex: 3 - idx,
              }}>{p.i}</div>
            ))}
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 14,
              letterSpacing: '-0.01em', color: '#fff',
            }}>Trusted local kids</div>
            <div style={{
              fontSize: 11, color: 'rgba(255,255,255,0.55)', marginTop: 2,
            }}>Henry, Parker & Nick · saving up for college</div>
          </div>
          <div style={{
            display: 'flex', gap: 6,
          }}>
            {[
              { I: Icon.Shield, l: 'Insured' },
              { I: Icon.Check, l: 'Vetted' },
            ].map(b => (
              <div key={b.l} title={b.l} style={{
                width: 28, height: 28, borderRadius: 50,
                background: 'rgba(255,255,255,0.08)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <b.I s={14} c="#fff"/>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* TRUSTED LOCAL KIDS — credibility band (now in hero, no outer card) */}
      <div style={{ display: 'none' }}>
        <div style={{
          background: '#fff', border: '1px solid var(--blast-line)',
          borderRadius: 22, padding: '18px 18px 16px',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12,
          }}>
            {/* stacked initials */}
            <div style={{ display: 'flex' }}>
              {[
                { i: 'HB', c: 'var(--blast-blue)' },
                { i: 'PW', c: '#15B36A' },
                { i: 'NA', c: '#E5497A' },
              ].map((p, idx) => (
                <div key={p.i} style={{
                  width: 36, height: 36, borderRadius: 50,
                  background: p.c, color: '#fff',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-display)', fontSize: 12,
                  letterSpacing: '0.04em',
                  border: '2px solid #fff',
                  marginLeft: idx === 0 ? 0 : -10,
                  position: 'relative', zIndex: 3 - idx,
                }}>{p.i}</div>
              ))}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 15,
                letterSpacing: '-0.01em',
              }}>Trusted local kids</div>
              <div style={{
                fontSize: 12, color: 'var(--blast-mute)', marginTop: 2,
              }}>Henry, Parker & Nick · saving up for college</div>
            </div>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
            gap: 6, paddingTop: 12,
            borderTop: '1px solid var(--blast-line)',
          }}>
            {[
              { I: Icon.Shield, l: 'Insured' },
              { I: Icon.Check, l: 'Vetted' },
              { I: Icon.Pin, l: 'Local' },
            ].map(b => (
              <div key={b.l} style={{
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              }}>
                <b.I s={18} c="var(--blast-blue)"/>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 9,
                  letterSpacing: '0.08em', textTransform: 'uppercase',
                  color: 'var(--blast-mute)',
                }}>{b.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* BEFORE/AFTER SLAB — uses the actual photos */}
      <div className="home-ba-card" style={{ padding: '28px 22px 8px' }}>
        <SectionLabel>01 / The proof</SectionLabel>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          marginTop: 10, marginBottom: 14,
        }}>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontSize: 30, margin: 0,
            letterSpacing: '-0.02em', textTransform: 'uppercase',
          }}>Drag to clean.</h2>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 11,
            color: 'var(--blast-mute)',
          }}>{Math.round(pos)}% clean</span>
        </div>

        <div
          ref={slabRef}
          onPointerDown={onPointerDown}
          onPointerMove={onPointerMove}
          onPointerUp={onPointerUp}
          onPointerCancel={onPointerUp}
          style={{
            position: 'relative',
            width: '100%',
            height: 380,
            touchAction: 'none',
            userSelect: 'none',
            cursor: 'ew-resize',
            borderRadius: 24,
            overflow: 'hidden',
            cursor: 'ew-resize',
            background: '#0B2A99',
            userSelect: 'none',
            touchAction: 'none',
          }}>
          {/* AFTER (clean) — full layer */}
          <img src="assets/bin-after.png" alt="Clean bin"
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%', objectFit: 'cover',
              pointerEvents: 'none',
            }} />
          {/* BEFORE (dirty) — clipped */}
          <div style={{
            position: 'absolute', inset: 0,
            clipPath: `inset(0 ${100 - pos}% 0 0)`,
          }}>
            <img src="assets/bin-before.png" alt="Dirty bin"
              style={{ width: '100%', height: '100%', objectFit: 'cover', pointerEvents: 'none' }} />
          </div>

          {/* Labels */}
          <div style={{
            position: 'absolute', top: 14, left: 14,
            background: 'rgba(7,8,12,0.7)', color: '#fff',
            padding: '4px 10px', borderRadius: 999,
            fontFamily: 'var(--font-mono)', fontSize: 10,
            letterSpacing: '0.12em', textTransform: 'uppercase',
          }}>BEFORE</div>
          <div style={{
            position: 'absolute', top: 14, right: 14,
            background: accent, color: 'var(--blast-ink)',
            padding: '4px 10px', borderRadius: 999,
            fontFamily: 'var(--font-mono)', fontSize: 10,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            fontWeight: 700,
          }}>AFTER · 11 MIN</div>

          {/* Divider line + handle */}
          <div style={{
            position: 'absolute', top: 0, bottom: 0,
            left: `${pos}%`, width: 3,
            background: '#fff',
            transform: 'translateX(-1.5px)',
            boxShadow: '0 0 16px rgba(0,0,0,0.4)',
            pointerEvents: 'none',
          }}/>
          <div style={{
            position: 'absolute', top: '50%',
            left: `${pos}%`,
            transform: 'translate(-50%, -50%)',
            width: 48, height: 48, borderRadius: 50,
            background: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 4px 18px rgba(0,0,0,0.3)',
            pointerEvents: 'none',
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
              <path d="M9 6l-6 6 6 6M15 6l6 6-6 6" stroke="#07080C" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>

          <span
            role="slider"
            aria-label="Before/After"
            aria-valuemin={0}
            aria-valuemax={100}
            aria-valuenow={Math.round(pos)}
            style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0 0 0 0)' }}
          />
        </div>

        <p style={{
          fontSize: 12, color: 'var(--blast-mute)',
          fontFamily: 'var(--font-mono)', letterSpacing: '0.04em',
          marginTop: 10, lineHeight: 1.5,
        }}>
          Real customer · 64-gal cart · biodegradable soap · zero residue
        </p>
      </div>
      </div>

      {/* SERVICES */}
      <div style={{ padding: '24px 22px 8px' }}>
        <SectionLabel>02 / Services</SectionLabel>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontSize: 30,
          margin: '10px 0 16px',
          letterSpacing: '-0.02em', textTransform: 'uppercase',
        }}>Pick your filth.</h2>

        <div style={{ display: 'grid', gap: 10 }}>
          {SERVICES.map(s => (
            <button
              key={s.id}
              onClick={() => onNav('book', { service: s.id })}
              style={{
                display: 'flex', alignItems: 'center', gap: 14,
                width: '100%', textAlign: 'left',
                background: s.featured ? 'var(--blast-ink)' : '#fff',
                color: s.featured ? 'var(--blast-bone)' : 'var(--blast-ink)',
                border: s.featured ? 'none' : '1px solid var(--blast-line)',
                padding: '16px 18px', borderRadius: 22,
                cursor: 'pointer',
                fontFamily: 'var(--font-ui)',
                position: 'relative', overflow: 'hidden',
              }}>
              <div style={{
                width: 44, height: 44, borderRadius: 14,
                background: s.featured ? accent : 'rgba(25,71,229,0.10)',
                color: s.featured ? 'var(--blast-ink)' : 'var(--blast-blue)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
              }}>
                <s.Ic s={22}/>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontFamily: 'var(--font-head)', fontWeight: 700,
                  fontSize: 16, letterSpacing: '-0.01em',
                  display: 'flex', alignItems: 'center', gap: 6,
                }}>
                  {s.name}
                  {s.featured && <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 9,
                    background: accent, color: 'var(--blast-ink)',
                    padding: '2px 6px', borderRadius: 4,
                    letterSpacing: '0.08em',
                  }}>POPULAR</span>}
                </div>
                <div style={{
                  fontSize: 12,
                  color: s.featured ? 'rgba(255,255,255,0.6)' : 'var(--blast-mute)',
                  marginTop: 2,
                }}>{s.tag}</div>
              </div>
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: 18,
                color: s.featured ? accent : 'var(--blast-blue)',
              }}>${s.from}</div>
            </button>
          ))}
        </div>
      </div>

      {/* TESTIMONIAL */}
      <div style={{ padding: '32px 22px 8px' }}>
        <div style={{
          background: 'var(--blast-blue)',
          color: '#fff',
          padding: 22,
          borderRadius: 24,
          position: 'relative',
          overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: -20, right: -10,
            fontFamily: 'var(--font-display)', fontSize: 160,
            color: 'rgba(255,255,255,0.08)', lineHeight: 1,
          }}>"</div>
          <div style={{ display: 'flex', gap: 2, marginBottom: 10 }}>
            {[1,2,3,4,5].map(i => <Icon.Star key={i} s={14} c={accent}/>)}
          </div>
          <p style={{
            fontFamily: 'var(--font-head)', fontWeight: 600,
            fontSize: 19, lineHeight: 1.3, letterSpacing: '-0.01em',
            margin: '0 0 14px',
          }}>
            “I'd been ignoring the smell for like eight months. Henry's crew showed up Saturday, 12 minutes later both bins looked brand new. My wife thought I'd bought new ones.”
          </p>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10,
            paddingTop: 12,
            borderTop: '1px solid rgba(255,255,255,0.18)',
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 50,
              background: accent, color: 'var(--blast-ink)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--font-display)', fontSize: 12,
              letterSpacing: '0.04em', fontWeight: 700,
            }}>DR</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 13,
                letterSpacing: '-0.01em',
              }}>Dan R.</div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 10,
                letterSpacing: '0.06em', textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.6)', marginTop: 2,
              }}>Rose Ln · Lafayette 94549</div>
            </div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 10,
              letterSpacing: '0.06em', textTransform: 'uppercase',
              color: 'rgba(255,255,255,0.5)',
            }}>3 weeks ago</div>
          </div>
        </div>
      </div>

      {/* COVERAGE STRIP */}
      <div style={{
        padding: '24px 22px 36px',
      }}>
        <div style={{
          background: 'var(--blast-ink)',
          color: 'var(--blast-bone)',
          padding: 22,
          borderRadius: 24,
          position: 'relative',
          overflow: 'hidden',
        }}>
          {/* mini map */}
          <div style={{
            position: 'absolute', inset: 0,
            opacity: 0.18,
            backgroundImage: `
              linear-gradient(${accent} 1px, transparent 1px),
              linear-gradient(90deg, ${accent} 1px, transparent 1px)
            `,
            backgroundSize: '20px 20px',
          }}/>
          <SectionLabel dark>04 / Coverage</SectionLabel>
          <div style={{
            fontFamily: 'var(--font-display)', fontSize: 26,
            margin: '8px 0', letterSpacing: '-0.02em',
            position: 'relative',
          }}>
            <span style={{ color: accent }}>Same-week service.</span>
          </div>
          <button
            onClick={() => onNav('book')}
            style={{
              background: 'transparent',
              border: '1.5px solid rgba(255,255,255,0.3)',
              color: '#fff', borderRadius: 999,
              padding: '10px 16px',
              fontFamily: 'var(--font-mono)', fontSize: 11,
              letterSpacing: '0.08em', textTransform: 'uppercase',
              cursor: 'pointer', position: 'relative',
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
            Check your zip <Icon.Arrow s={14}/>
          </button>
        </div>
      </div>

      {/* FOOTER MARK */}
      <div style={{
        padding: '8px 22px 100px',
        textAlign: 'center',
        fontFamily: 'var(--font-mono)', fontSize: 10,
        letterSpacing: '0.12em', textTransform: 'uppercase',
        color: 'var(--blast-mute)',
      }}>
        BLAST CO. © 2026 · A small fleet, a big mess
      </div>
    </div>
  );
}

const SERVICES = [
          { id: 'bin', name: 'Trash bin hydroblast', tag: '32–96 gal · 11 min · soap + rinse', from: 24, featured: true, Ic: ({s}) => <Icon.Bin s={s}/> },
  { id: 'driveway', name: 'Driveway / concrete', tag: 'Per sq ft estimate', from: 149, route: 'driveway', Ic: ({s}) => <Icon.Drive s={s}/> },
];

window.HomeScreen = HomeScreen;
window.SERVICES = SERVICES;
window.SectionLabel = SectionLabel;