// About Us screen — separate page with story, team, mini calendar
const { useState: useStateAB, useMemo: useMemoAB } = React;

function AboutScreen({ onNav, accent }) {
  const today = new Date();
  const [viewYear, setViewYear] = useStateAB(today.getFullYear());
  const [viewMonth, setViewMonth] = useStateAB(today.getMonth());

  function gridFor(y, m) {
    const first = new Date(y, m, 1);
    const startDow = first.getDay();
    const daysInMonth = new Date(y, m + 1, 0).getDate();
    const cells = [];
    for (let i = 0; i < startDow; i++) cells.push(null);
    for (let d = 1; d <= daysInMonth; d++) cells.push(d);
    while (cells.length % 7) cells.push(null);
    return cells;
  }

  const cells = useMemoAB(() => gridFor(viewYear, viewMonth), [viewYear, viewMonth]);
  const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  const MONTHS_FULL = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  const DOW = ['S','M','T','W','T','F','S'];

  function shift(d) {
    let m = viewMonth + d, y = viewYear;
    if (m < 0) { m = 11; y--; }
    if (m > 11) { m = 0; y++; }
    setViewMonth(m); setViewYear(y);
  }

  // route days — fake but consistent
  const routeFor = (d) => {
    if (!d) return null;
    const dow = new Date(viewYear, viewMonth, d).getDay();
    if (dow === 0) return null;
    return ['North', 'East', 'South', 'West', 'Loop', 'Loop'][dow - 1];
  };
  const isPast = (d) => {
    if (!d) return true;
    const c = new Date(viewYear, viewMonth, d);
    const t = new Date(today.getFullYear(), today.getMonth(), today.getDate());
    return c < t;
  };

  const ROUTE_COLORS = {
    'North': '#1947E5', 'East': '#15B36A', 'South': accent, 'West': '#E5497A', 'Loop': '#7A4DEA',
  };

  return (
    <div style={{ background: 'var(--blast-paper)', minHeight: '100%', paddingBottom: 100 }}>
      {/* HERO */}
      <div style={{
        background: 'var(--blast-blue)', color: '#fff',
        padding: '70px 22px 32px',
        borderBottomLeftRadius: 36, borderBottomRightRadius: 36,
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', inset: 0, opacity: 0.15,
          backgroundImage: `radial-gradient(circle at 1px 1px, #fff 1px, transparent 0)`,
          backgroundSize: '12px 12px',
        }}/>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 11, color: '#fff',
          letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 8,
          opacity: 0.7, position: 'relative',
        }}>BLAST CO. // ABOUT</div>

        <h1 style={{
          fontFamily: 'var(--font-display)', fontSize: 52, lineHeight: 0.9,
          letterSpacing: '-0.03em', textTransform: 'uppercase',
          margin: 0, position: 'relative',
        }}>
          We started with<br/>
          <span style={{ color: 'var(--blast-ink)' }}>one nasty</span><br/>
          <span style={{ color: '#fff' }}>bin.</span>
        </h1>

        <p style={{
          fontSize: 15, lineHeight: 1.5, marginTop: 18, marginBottom: 0,
          color: 'rgba(255,255,255,0.85)', maxWidth: 320, position: 'relative',
        }}>
          Three friends. A pickup. A pressure washer borrowed from a dad. Saving up for college, one nasty bin at a time.
        </p>
      </div>

      {/* STATS */}
      <div style={{ padding: '24px 22px 0' }}>
        <div style={{
          background: '#fff', border: '1px solid var(--blast-line)',
          borderRadius: 18, padding: '16px 14px', textAlign: 'center',
        }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontSize: 30,
            color: 'var(--blast-blue)', lineHeight: 1,
          }}>4.97</div>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 3, marginTop: 8 }}>
            {[1,2,3,4,5].map(i => <Icon.Star key={i} s={14} c={accent}/>)}
          </div>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 9,
            letterSpacing: '0.08em', textTransform: 'uppercase',
            color: 'var(--blast-mute)', marginTop: 8,
          }}>Star rating</div>
        </div>
      </div>

      {/* THE STORY */}
      <div style={{ padding: '28px 22px 0' }}>
        <SectionLabel>The story</SectionLabel>
        <div style={{ marginTop: 12 }}>
          {[
            ['Grossed out', 'Realized we\'d been hauling around a maggot farm on wheels for years. Bought a $400 pressure washer.'],
            ['Three friends', 'Just the three of us — local kids you can trust on your driveway. Still answer the phone ourselves.'],
          ].map(([t, b], i) => (
            <div key={t} style={{
              display: 'flex', gap: 14, paddingBottom: 14, marginBottom: 14,
              borderBottom: '1px solid var(--blast-line)',
            }}>
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: 22,
                color: 'var(--blast-blue)', minWidth: 36, lineHeight: 1.1,
              }}>0{i + 1}</div>
              <div>
                <div style={{
                  fontFamily: 'var(--font-head)', fontWeight: 700,
                  fontSize: 16, letterSpacing: '-0.01em', marginBottom: 3,
                }}>{t}</div>
                <div style={{ fontSize: 13, color: 'var(--blast-mute)', lineHeight: 1.5 }}>{b}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* TEAM */}
      <div style={{ padding: '8px 22px 0' }}>
        <SectionLabel>The crew</SectionLabel>
        <div style={{ display: 'grid', gap: 8, marginTop: 12 }}>
          {[
            { name: 'Henry B.', role: 'Tech guy', init: 'HB', color: 'var(--blast-blue)', secret: true },
            { name: 'Parker W.', role: 'Power washer', init: 'PW', color: '#15B36A' },
            { name: 'Nick A.', role: 'Scrubber', init: 'NA', color: '#E5497A' },
          ].map(p => (
            <div key={p.name} style={{
              background: '#fff', border: '1px solid var(--blast-line)',
              borderRadius: 18, padding: '12px 14px',
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <div
                onClick={p.secret ? () => {
                  const now = Date.now();
                  window.__henryTaps = (window.__henryTaps || []).filter(t => now - t < 2000);
                  window.__henryTaps.push(now);
                  if (window.__henryTaps.length >= 5) {
                    window.__henryTaps = [];
                    window.location.href = 'crew-portal.html';
                  }
                } : undefined}
                style={{
                  width: 44, height: 44, borderRadius: 50,
                  background: p.color, color: '#fff',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-display)', fontSize: 14,
                  letterSpacing: '0.04em',
                  cursor: p.secret ? 'pointer' : 'default',
                  userSelect: 'none',
                }}>{p.init}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 15,
                  letterSpacing: '-0.01em',
                }}>{p.name}</div>
                <div style={{ fontSize: 12, color: 'var(--blast-mute)', marginTop: 1 }}>{p.role}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* CONTACT */}
      <div style={{ padding: '24px 22px 0' }}>
        <div style={{
          background: 'var(--blast-ink)', color: 'var(--blast-bone)',
          padding: 22, borderRadius: 24, position: 'relative', overflow: 'hidden',
        }}>
          <SectionLabel dark>Get in touch</SectionLabel>
          <a href="tel:+15104215820" style={{
            display: 'block',
            fontFamily: 'var(--font-display)', fontSize: 36, lineHeight: 1,
            margin: '10px 0 6px', letterSpacing: '-0.02em',
            color: '#fff', textDecoration: 'none',
          }}>
            (510)<br/>421-5820
          </a>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 10,
            letterSpacing: '0.08em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.55)', marginTop: 10,
          }}>Tap to call · we answer ourselves</div>
        </div>
      </div>

      {/* CTA */}
      <div style={{ padding: '20px 22px 0' }}>
        <button onClick={() => onNav('book')} className="btn btn-blast primary"
          style={{ background: 'var(--blast-blue)', color: '#fff' }}>
          <Icon.Spray s={20} c="currentColor"/> Book your blast
        </button>
      </div>
    </div>
  );
}

window.AboutScreen = AboutScreen;