// home1-confetti.jsx — Direction 1: Confetti Paper
// Cream paper, scattered confetti, rotated cards, hand-drawn vibe.
// The "default" interpretation of the chosen color mood.

function HomeConfetti({ density = 'regular', mascotOn = true, fontStack, accent }) {
  const ref = React.useRef(null);
  const [chatOpen, setChatOpen] = React.useState(false);
  const [ww, setWw] = React.useState(() => window.innerWidth);

  React.useEffect(() => {
    const onResize = () => setWw(window.innerWidth);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const isMobile = ww < 600;
  const isTablet = ww >= 600 && ww < 1024;
  const isDesktop = ww >= 1024;

  const PALETTE = ['#FF7A6B', '#FFE66B', '#7BB87A', '#9DC3FF', '#C9A2E6'];
  const A = accent || '#FF7A6B';
  const ink = '#1f1a14';
  const paper = '#FBF7EE';

  const gap = isMobile ? 12 : density === 'compact' ? 14 : density === 'spacious' ? 28 : 20;
  const padX = isMobile ? 16 : isTablet ? 28 : density === 'compact' ? 40 : density === 'spacious' ? 72 : 56;
  const h1Size = isMobile ? 36 : isTablet ? 54 : 76;

  // FeedTheKitty fills its container width minus card padding
  const kittyW = isMobile
    ? Math.max(200, ww - padX * 2 - 36)
    : isTablet
    ? Math.max(300, Math.min(500, ww - padX * 2 - 36))
    : 500;
  const kittyH = isMobile ? 110 : 150;

  const projectCols = isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)';
  const heroCols = isDesktop ? '1.4fr 1fr' : '1fr';
  const playCols = isDesktop ? '1.1fr 1fr' : '1fr';

  return (
    <div ref={ref} style={{
      position: 'relative', width: '100%', minHeight: '100%',
      background: paper, fontFamily: fontStack, color: ink,
      backgroundImage: `radial-gradient(circle at 1px 1px, rgba(31,26,20,.05) 1px, transparent 0)`,
      backgroundSize: '14px 14px',
      overflowX: 'hidden',
    }}>
      {/* Confetti dots contained in their own clipping layer */}
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', zIndex: 0 }}>
        <ConfettiDots density={1} palette={PALETTE} />
      </div>
      {!isMobile && <CursorTrail containerRef={ref} kind="confetti" colors={PALETTE} />}

      {/* ── Top bar ── */}
      <div style={{
        position: 'relative', zIndex: 2,
        padding: `${isMobile ? 14 : 28}px ${padX}px 0`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: isMobile ? 32 : 40, height: isMobile ? 32 : 40,
            background: A, borderRadius: 8, transform: 'rotate(-6deg)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: `2px 2px 0 ${ink}`, border: `2px solid ${ink}`,
          }}>
            <span style={{ fontSize: isMobile ? 17 : 22, transform: 'rotate(6deg)' }}>✦</span>
          </div>
          <div style={{ fontWeight: 800, fontSize: isMobile ? 15 : 18, letterSpacing: '-.01em' }}>
            tech<span style={{ color: A }}>clatters</span>
          </div>
        </div>
        <div style={{ display: 'flex', gap: isMobile ? 12 : 22, fontSize: isMobile ? 12 : 13, fontWeight: 600 }}>
          <a style={{ color: ink, textDecoration: 'none' }} href="#projects">projects</a>
          {!isMobile && <a style={{ color: ink, textDecoration: 'none' }} href="#about">about</a>}
          {!isMobile && <a style={{ color: ink, textDecoration: 'none' }} href="#play">play</a>}
          <a style={{ color: ink, textDecoration: 'none' }} href={`mailto:${ABOUT.email}`}>say hi</a>
        </div>
      </div>

      {/* ── Hero ── */}
      <div style={{
        position: 'relative', zIndex: 2,
        padding: `${gap + (isMobile ? 14 : 18)}px ${padX}px 0`,
        display: 'grid', gridTemplateColumns: heroCols, gap: gap * 2,
      }}>
        <div>
          <div style={{ fontSize: isMobile ? 11 : 13, fontWeight: 700, letterSpacing: '.18em', color: '#7a6a55', textTransform: 'uppercase', marginBottom: 10 }}>
            ◆ Made with snacks &amp; curiosity
          </div>
          <h1 style={{
            fontSize: h1Size, lineHeight: 0.96, margin: 0, fontWeight: 900,
            letterSpacing: '-.03em', textWrap: 'balance',
          }}>
            A small <span style={{ color: A, fontStyle: 'italic' }}>workshop</span><br />
            of half-useful<br />
            <span style={{ position: 'relative', display: 'inline-block' }}>
              <span style={{ position: 'absolute', inset: '60% -6px 6% -6px', background: '#FFE66B', zIndex: -1, transform: 'rotate(-1deg)' }}></span>
              software things
            </span>.
          </h1>
          <p style={{ fontSize: isMobile ? 14 : 17, lineHeight: 1.5, marginTop: isMobile ? 16 : 22, maxWidth: 460, color: '#3a3328', margin: `${isMobile ? 16 : 22}px 0 0` }}>
            Hi — this is where my web apps, browser extensions, games, and other technical curiosities live. Most of them are tiny. A couple of them are useful. None of them are corporate.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: isMobile ? 16 : 22, alignItems: 'center', flexWrap: 'wrap' }}>
            <a href="#projects" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              background: ink, color: paper,
              padding: isMobile ? '11px 16px' : '14px 22px',
              borderRadius: 4, fontWeight: 800,
              fontSize: isMobile ? 12 : 14, textDecoration: 'none', letterSpacing: '.04em',
              boxShadow: `4px 4px 0 ${A}`, border: `2px solid ${ink}`,
            }}>SEE THE THINGS &nbsp;»</a>
            <span style={{ fontSize: 13, color: '#7a6a55' }}>or scroll · it's free</span>
          </div>
          {/* Anagram note inline on mobile / tablet */}
          {!isDesktop && (
            <div style={{ marginTop: 16, fontSize: 12, color: '#7a6a55' }}>
              btw — "Clatters" is an anagram of <AnagramReveal size={13} color={ink} accent={A} />. tap it.
            </div>
          )}
        </div>

        {/* Hero anagram card — desktop only */}
        {isDesktop && (
          <div style={{ position: 'relative', minHeight: 260 }}>
            <div style={{
              position: 'absolute', left: 0, top: 100, width: 220, padding: '18px 18px 22px',
              background: '#FFE66B', border: `2px solid ${ink}`, transform: 'rotate(-4deg)',
              boxShadow: `4px 4px 0 ${ink}`, fontSize: 13, lineHeight: 1.45,
            }}>
              <div style={{ fontFamily: '"Caveat", "Comic Sans MS", cursive', fontSize: 22, marginBottom: 6, fontWeight: 700 }}>btw —</div>
              <div>"Clatters" is an anagram of <AnagramReveal size={16} color={ink} accent={A} />. Click it.</div>
            </div>
          </div>
        )}
      </div>

      {/* ── Projects ── */}
      <div id="projects" style={{ position: 'relative', zIndex: 2, padding: `${gap + 28}px ${padX}px 0` }}>
        <div style={{
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          marginBottom: gap, flexWrap: 'wrap', gap: 6,
        }}>
          <h2 style={{ fontSize: isMobile ? 22 : 28, fontWeight: 900, margin: 0, letterSpacing: '-.02em' }}>
            The things <span style={{ fontStyle: 'italic', color: A }}>(below)</span>
          </h2>
          <div style={{ fontSize: 12, color: '#7a6a55', fontWeight: 600 }}>{PROJECTS.length} projects · updated 2026</div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: projectCols, gap: gap, alignItems: 'stretch' }}>
          {PROJECTS.map((p, i) => (
            <a key={p.id} href={p.href} target="_blank" rel="noopener"
              style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
              <Wiggle intensity={1} style={{ display: 'block', height: '100%' }}>
                <div style={{
                  position: 'relative', padding: isMobile ? 14 : 18, boxSizing: 'border-box',
                  background: paper, border: `2px solid ${ink}`,
                  boxShadow: `4px 4px 0 ${ink}`,
                  transform: isDesktop ? `rotate(${[-1.5, 1, -0.5][i % 3]}deg)` : 'none',
                  display: 'flex',
                  flexDirection: isMobile ? 'row' : 'column',
                  alignItems: isMobile ? 'center' : 'stretch',
                  gap: isMobile ? 12 : 0,
                  minHeight: isDesktop ? 220 : 'auto',
                  height: '100%',
                }}>
                  <div style={{
                    width: isMobile ? 48 : 64, height: isMobile ? 48 : 64,
                    background: p.id === 'officehours' ? '#F5F2ED' : p.color,
                    border: `2px solid ${ink}`, borderRadius: 4,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: isMobile ? 22 : 32, flexShrink: 0,
                    marginBottom: isMobile ? 0 : 12, overflow: 'hidden',
                  }}>
                    {p.id === 'officehours' ? <OfficeHoursClock size={isMobile ? 44 : 60} radius={2} /> : p.emoji}
                  </div>
                  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
                    <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.12em', color: '#7a6a55', textTransform: 'uppercase' }}>{p.kind}</div>
                    <div style={{ fontSize: isMobile ? 16 : 20, fontWeight: 900, margin: '4px 0 5px', letterSpacing: '-.01em' }}>{p.name}</div>
                    <div style={{ fontSize: 13, lineHeight: 1.4, color: '#3a3328', flex: 1 }}>{p.tagline}</div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8, fontSize: 12, fontWeight: 700 }}>
                      <span style={{ color: '#7a6a55' }}>{p.year}</span>
                      <span style={{ color: A }}>open &raquo;</span>
                    </div>
                  </div>
                </div>
              </Wiggle>
            </a>
          ))}
        </div>
      </div>

      {/* ── Play + About ── */}
      <div id="play" style={{
        position: 'relative', zIndex: 2,
        padding: `${gap + 22}px ${padX}px ${gap + 14}px`,
        display: 'grid', gridTemplateColumns: playCols, gap: gap,
      }}>
        {/* Feed the kitty */}
        <div style={{
          position: 'relative', padding: isMobile ? 14 : 18,
          background: '#fffdf5', border: `2px solid ${ink}`,
          boxShadow: `4px 4px 0 ${ink}`,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.12em', color: '#7a6a55', textTransform: 'uppercase' }}>While you're here ·</div>
              <div style={{ fontSize: isMobile ? 18 : 22, fontWeight: 900 }}>feed the kitty.</div>
            </div>
            {!isMobile && (
              <div style={{ fontSize: 15, fontWeight: 700, color: A, maxWidth: 200, textAlign: 'right', lineHeight: 1.3 }}>
                click the falling treats!
              </div>
            )}
          </div>
          <FeedTheKitty
            width={kittyW}
            height={kittyH}
            palette={{ bg: '#FBF7EE', border: ink, cat: A, score: A, ground: '#FFE66B' }}
          />
          {isMobile && (
            <div style={{ marginTop: 6, fontSize: 12, fontWeight: 700, color: A, textAlign: 'right' }}>
              tap the falling treats!
            </div>
          )}
        </div>

        {/* About */}
        <div id="about" style={{
          padding: isMobile ? 14 : 18,
          background: '#9DC3FF', border: `2px solid ${ink}`,
          boxShadow: `4px 4px 0 ${ink}`,
          transform: isDesktop ? 'rotate(.6deg)' : 'none',
        }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', marginBottom: 8 }}>About the workshop</div>
          <p style={{ fontSize: 14, lineHeight: 1.5, margin: '0 0 12px' }}>{ABOUT.oneLine}</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 14 }}>
            {ABOUT.likes.map((l) => (
              <span key={l} style={{
                fontSize: 11, background: paper, padding: '3px 8px',
                borderRadius: 999, border: `1.5px solid ${ink}`, fontWeight: 600,
              }}>{l}</span>
            ))}
          </div>
          <a href={`mailto:${ABOUT.email}`} style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            background: ink, color: paper, padding: '8px 14px', borderRadius: 4,
            fontWeight: 700, fontSize: 12, textDecoration: 'none',
            wordBreak: 'break-all',
          }}>✉ {ABOUT.email}</a>
        </div>
      </div>

      {/* Jamon */}
      <JamonFloatingTrigger open={chatOpen} onClick={() => setChatOpen((o) => !o)} />
      <JamonChat open={chatOpen} onClose={() => setChatOpen(false)} accent={A} />
      {mascotOn && !isMobile && (
        <JamonRoamer
          width={Math.max(900, ww)}
          height={800}
          paused={chatOpen}
          onClick={() => setChatOpen(true)}
        />
      )}

      {/* ── Footer ── */}
      <div style={{
        position: 'relative', zIndex: 2,
        padding: `8px ${padX}px ${isMobile ? 80 : 18}px`,
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 4,
        fontSize: 11, color: '#7a6a55', fontWeight: 600,
      }}>
        <span>© 2026 · made by <span style={{ color: ink }}>Scarlett</span> · with snacks &amp; jamón 🐹</span>
        <span>techclatters.com</span>
      </div>
    </div>
  );
}

window.HomeConfetti = HomeConfetti;