// 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 [inHouse, setInHouse] = React.useState(false);
  const [goHomeTrigger, setGoHomeTrigger] = React.useState(0);
  const houseRef = React.useRef(null);
  const [ww, setWw] = React.useState(() => window.innerWidth);
  const [footerRevealed, setFooterRevealed] = React.useState(false);
  const [anagramRevealed, setAnagramRevealed] = React.useState(false);
  const [darkMode, setDarkMode] = React.useState(() => {
    try { return localStorage.getItem('tc-dark') === '1'; } catch { return false; }
  });


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

  React.useEffect(() => {
    document.body.style.background = darkMode ? '#16130d' : '#FBF7EE';
    return () => { document.body.style.background = ''; };
  }, [darkMode]);

  const toggleDark = () => {
    setDarkMode(d => {
      const next = !d;
      try { localStorage.setItem('tc-dark', next ? '1' : '0'); } catch {}
      return next;
    });
  };

  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';

  // Theme colors
  const ink        = darkMode ? '#f0ebe0' : '#1f1a14';
  const paper      = darkMode ? '#16130d' : '#FBF7EE';
  const paperAlt   = darkMode ? '#1d1a12' : '#fffdf5';
  const muted      = darkMode ? '#8a7860' : '#7a6a55';
  const paragraph  = darkMode ? '#c0aa88' : '#3a3328';
  const yellowCard = darkMode ? '#272010' : '#FFE66B';
  const yellowHL   = darkMode ? 'rgba(255,220,80,.22)' : '#FFE66B';
  const blueCard   = darkMode ? '#0d1e30' : '#9DC3FF';
  const dotColor   = darkMode ? 'rgba(240,235,224,.035)' : 'rgba(31,26,20,.05)';
  const cardBg     = darkMode ? '#1e1b13' : paper;
  const officeIconBg = darkMode ? '#1c1815' : '#F5F2ED';

  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;

  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, ${dotColor} 1px, transparent 0)`,
      backgroundSize: '14px 14px',
      overflowX: 'hidden',
      transition: 'background .25s, color .25s',
    }}>
      {/* 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 ? 10 : 22, fontSize: isMobile ? 12 : 13, fontWeight: 600, alignItems: 'center' }}>
          <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>
          <button
            onClick={toggleDark}
            title={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
            style={{
              background: 'none', border: `1.5px solid ${ink}`, borderRadius: 4,
              cursor: 'pointer', padding: isMobile ? '3px 6px' : '4px 7px',
              color: ink, display: 'flex', alignItems: 'center', flexShrink: 0,
            }}
          >
            {darkMode ? (
              <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
                <circle cx="12" cy="12" r="4" fill="currentColor" stroke="none" />
                <line x1="12" y1="2"    x2="12" y2="5.5"  />
                <line x1="12" y1="18.5" x2="12" y2="22"   />
                <line x1="2"  y1="12"   x2="5.5" y2="12"  />
                <line x1="18.5" y1="12" x2="22"  y2="12"  />
                <line x1="4.93" y1="4.93"  x2="7.17" y2="7.17"  />
                <line x1="16.83" y1="16.83" x2="19.07" y2="19.07" />
                <line x1="19.07" y1="4.93"  x2="16.83" y2="7.17"  />
                <line x1="7.17"  y1="16.83" x2="4.93"  y2="19.07" />
              </svg>
            ) : (
              <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
              </svg>
            )}
          </button>
        </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: muted, 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: yellowHL, 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: paragraph, 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: muted }}>or scroll · it's free</span>
          </div>
          {!isDesktop && (
            <div style={{ marginTop: 16, fontSize: 12, color: muted }}>
              btw — <AnagramReveal size={13} color={ink} accent={A} defaultPhase={1} onChange={next => setAnagramRevealed(next === 0)} />
              {anagramRevealed ? ' ← the name! tap to hide.' : ' is an anagram of a name. tap it.'}
            </div>
          )}
        </div>

        {/* Hero anagram card + guinea pig house — desktop only */}
        {isDesktop && (
          <div style={{ position: 'relative', minHeight: 280 }}>
            <div style={{
              position: 'absolute', left: 0, top: 100, width: 220, padding: '18px 18px 22px',
              background: yellowCard, border: `2px solid ${ink}`, transform: 'rotate(-4deg)',
              boxShadow: `4px 4px 0 ${ink}`, fontSize: 13, lineHeight: 1.45, color: ink,
            }}>
              <div style={{ fontFamily: '"Caveat", "Comic Sans MS", cursive', fontSize: 22, marginBottom: 6, fontWeight: 700 }}>btw —</div>
              <div>
                <AnagramReveal size={16} color={ink} accent={A} defaultPhase={1} onChange={next => setAnagramRevealed(next === 0)} />
                {anagramRevealed ? ' ← that\'s the name! Click to hide.' : ' is an anagram of a name. Click it.'}
              </div>
            </div>
            <div ref={houseRef} style={{ position: 'absolute', left: 270, top: 100, transform: 'rotate(3deg)' }}>
              <JamonHouse size={165} jamonInside={inHouse} onClick={() => setGoHomeTrigger(t => t + 1)} />
            </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: muted, fontWeight: 600 }}>{PROJECTS.length} projects · updated 2026</div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: projectCols, gap: gap, alignItems: 'stretch' }}>
          {PROJECTS.map((p, i) => {
            const cardInner = (
              <Wiggle intensity={1} style={{ display: 'block', height: '100%' }}>
                <div style={{
                  position: 'relative', padding: isMobile ? 14 : 18, boxSizing: 'border-box',
                  background: cardBg, 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%',
                  opacity: 1,
                }}>
                  <div style={{
                    width: isMobile ? 48 : 64, height: isMobile ? 48 : 64,
                    background: p.id === 'officehours' ? officeIconBg : 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} bg={officeIconBg} ink={darkMode ? '#f0ebe0' : '#2A2520'} accent={darkMode ? '#e08060' : '#C4622D'} />
                      : p.emoji}
                  </div>
                  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
                    <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.12em', color: muted, 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: paragraph, flex: 1 }}>{p.tagline}</div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8, fontSize: 12, fontWeight: 700 }}>
                      <span style={{ color: muted }}>{p.year}</span>
                      {!p.soft && !p.noLink && <span style={{ color: A }}>open &raquo;</span>}
                    </div>
                  </div>
                </div>
              </Wiggle>
            );
            return (p.soft || p.noLink)
              ? <div key={p.id} style={{ display: 'block', cursor: 'default' }}>{cardInner}</div>
              : <a key={p.id} href={p.href} target="_blank" rel="noopener" style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>{cardInner}</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: paperAlt, 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: muted, 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: darkMode ? '#141109' : '#FBF7EE', border: ink, cat: A, score: A, ground: darkMode ? '#2a2310' : '#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: blueCard, border: `2px solid ${ink}`,
          boxShadow: `4px 4px 0 ${ink}`,
          transform: isDesktop ? 'rotate(.6deg)' : 'none',
          color: darkMode ? '#c8dff8' : ink,
        }}>
          <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: darkMode ? 'rgba(255,255,255,.08)' : paper, padding: '3px 8px',
                borderRadius: 999, border: `1.5px solid ${darkMode ? 'rgba(200,223,248,.3)' : ink}`, fontWeight: 600,
                color: darkMode ? '#c8dff8' : ink,
              }}>{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 && (
        <JamonRoamer
          width={isMobile ? ww : Math.min(ww, 1280)}
          height={isMobile ? window.innerHeight : 800}
          paused={chatOpen}
          onClick={() => setChatOpen(true)}
          fixedViewport={isMobile}
          onEnterHouse={() => setInHouse(true)}
          onLeaveHouse={() => setInHouse(false)}
          goHomeTrigger={goHomeTrigger}
          houseRef={houseRef}
          containerRef={ref}
        />
      )}

      {/* ── 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: muted, fontWeight: 600,
      }}>
        <span>© 2026 · made by Ms.{' '}
          <span onClick={() => setFooterRevealed(r => !r)} style={{ cursor: 'pointer', color: A }}>
            {footerRevealed ? 'Scarlett' : 'Clatters'}
          </span>
          {' '}· with snacks &amp; jamón 🐹</span>
        <span>techclatters.com</span>
      </div>
    </div>
  );
}

window.HomeConfetti = HomeConfetti;