// Shared primitive components: Section, Label, Terminal frame, etc.

const { useState: uP, useEffect: eP, useRef: rP, useMemo: mP, useCallback: cP } = React;

function Section({ id, eyebrow, title, sub, children, theme, tight = false, style }) {
  const [ref, visible] = useReveal();
  const pad = tight ? theme.density.section * 0.55 : theme.density.section;
  return (
    <section
      id={id}
      ref={ref}
      style={{
        padding: `${pad}px 0 ${pad * 0.6}px`,
        position: "relative",
        opacity: visible ? 1 : 0,
        transform: visible ? "translateY(0)" : "translateY(14px)",
        transition: "opacity 0.8s ease, transform 0.8s cubic-bezier(.2,.8,.2,1)",
        ...style,
      }}
    >
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 32px" }}>
        {(eyebrow || title || sub) && (
          <div style={{ marginBottom: 40 }}>
            {eyebrow && (
              <div style={{
                fontFamily: 'var(--mono)',
                fontSize: 11,
                letterSpacing: '0.18em',
                textTransform: 'uppercase',
                color: theme.accent,
                marginBottom: 14,
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <span style={{ width: 24, height: 1, background: theme.accent, display:'inline-block' }} />
                {eyebrow}
              </div>
            )}
            {title && (
              <h2 style={{
                fontFamily: 'var(--display)',
                fontSize: 'clamp(32px, 4vw, 52px)',
                lineHeight: 1.05,
                letterSpacing: '-0.02em',
                fontWeight: 500,
                margin: 0,
                color: theme.text,
                maxWidth: 900,
                textWrap: 'balance',
              }}>{title}</h2>
            )}
            {sub && (
              <p style={{
                fontFamily: 'var(--body)',
                fontSize: 18,
                lineHeight: 1.55,
                color: theme.textDim,
                margin: '18px 0 0',
                maxWidth: 680,
                textWrap: 'pretty',
              }}>{sub}</p>
            )}
          </div>
        )}
        {children}
      </div>
    </section>
  );
}

function Eyebrow({ children, theme, style }) {
  return (
    <div style={{
      fontFamily: 'var(--mono)',
      fontSize: 11,
      letterSpacing: '0.18em',
      textTransform: 'uppercase',
      color: theme.accent,
      display: 'inline-flex', alignItems: 'center', gap: 8,
      ...style,
    }}>
      <span style={{ width: 18, height: 1, background: theme.accent }} />
      {children}
    </div>
  );
}

function Button({ children, kind = "primary", href, target, rel, onClick, theme, icon, style }) {
  const base = {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 10,
    padding: '12px 18px',
    fontFamily: 'var(--body)',
    fontSize: 15,
    letterSpacing: '0',
    fontWeight: 500,
    borderRadius: 2,
    cursor: 'pointer',
    border: '1px solid transparent',
    transition: 'all 0.18s ease',
    textDecoration: 'none',
    whiteSpace: 'nowrap',
  };
  const variants = {
    primary: {
      background: theme.accent,
      color: '#1a1108',
      boxShadow: `0 0 0 1px ${theme.accent}, 0 8px 24px ${theme.accentSoft}`,
    },
    ghost: {
      background: 'transparent',
      color: theme.text,
      border: `1px solid ${theme.borderStrong}`,
    },
    mono: {
      background: theme.panel,
      color: theme.text,
      border: `1px solid ${theme.border}`,
    },
  };
  const el = href ? 'a' : 'button';
  return React.createElement(el, {
    href, target, rel, onClick,
    style: { ...base, ...variants[kind], ...style },
    onMouseEnter: (e) => {
      if (kind === 'primary') e.currentTarget.style.transform = 'translateY(-1px)';
      else e.currentTarget.style.borderColor = theme.accent;
    },
    onMouseLeave: (e) => {
      if (kind === 'primary') e.currentTarget.style.transform = '';
      else e.currentTarget.style.borderColor = variants[kind].border?.split(' ').pop() || theme.border;
    },
  }, icon, children);
}

function InstallCommand({ theme, cmd = "uv pip install -e \"./sdk[llm]\"", compact = false }) {
  const [copied, copy] = useCopy();
  return (
    <div style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: 14,
      padding: compact ? '10px 14px' : '14px 18px',
      background: theme.scheme === 'dark' ? 'rgba(0,0,0,0.4)' : 'rgba(255,255,255,0.4)',
      border: `1px solid ${theme.border}`,
      borderLeft: `2px solid ${theme.accent}`,
      fontFamily: 'var(--mono)',
      fontSize: compact ? 12 : 13,
      color: theme.text,
    }}>
      <span style={{ color: theme.accent, userSelect: 'none' }}>$</span>
      <span style={{ flex: 1 }}>{cmd}</span>
      <button
        onClick={() => copy(cmd)}
        style={{
          background: 'transparent',
          border: `1px solid ${theme.border}`,
          color: copied ? theme.accent : theme.textDim,
          fontFamily: 'var(--mono)',
          fontSize: 10,
          padding: '4px 8px',
          letterSpacing: '0.1em',
          textTransform: 'uppercase',
          cursor: 'pointer',
          borderRadius: 2,
          transition: 'color 0.18s',
        }}
      >{copied ? '✓ copied' : 'copy'}</button>
    </div>
  );
}

function PixelTile({ size = 8, filled = true, color, bg, glow = false }) {
  return (
    <span style={{
      width: size, height: size,
      background: filled ? color : (bg || 'transparent'),
      display: 'inline-block',
      boxShadow: filled && glow ? `0 0 ${size}px ${color}` : 'none',
      borderRadius: 1,
    }} />
  );
}

// 7-row high pixel font for banner-like hero text
// Each letter: array of rows, each row is a string of '#' (on) or '.' (off)
const PIXEL_FONT = {
  E: [
    "#####",
    "#....",
    "#....",
    "####.",
    "#....",
    "#....",
    "#####",
  ],
  V: [
    "#...#",
    "#...#",
    "#...#",
    "#...#",
    "#...#",
    ".#.#.",
    "..#..",
  ],
  A: [
    "..#..",
    ".#.#.",
    "#...#",
    "#####",
    "#...#",
    "#...#",
    "#...#",
  ],
  L: [
    "#....",
    "#....",
    "#....",
    "#....",
    "#....",
    "#....",
    "#####",
  ],
  Y: [
    "#...#",
    "#...#",
    ".#.#.",
    "..#..",
    "..#..",
    "..#..",
    "..#..",
  ],
  N: [
    "#...#",
    "##..#",
    "##..#",
    "#.#.#",
    "#.##.",
    "#..##",
    "#...#",
  ],
  " ": [
    ".....",
    ".....",
    ".....",
    ".....",
    ".....",
    ".....",
    ".....",
  ],
};

function PixelText({ text, size = 10, gap = 2, color, glow = false, animate = false }) {
  const letters = text.toUpperCase().split("");
  return (
    <div style={{ display: 'flex', gap: size * 2, alignItems: 'flex-start' }}>
      {letters.map((ch, li) => {
        const glyph = PIXEL_FONT[ch] || PIXEL_FONT[" "];
        return (
          <div key={li} style={{ display: 'flex', flexDirection: 'column', gap }}>
            {glyph.map((row, ri) => (
              <div key={ri} style={{ display: 'flex', gap }}>
                {row.split("").map((p, pi) => {
                  const on = p === "#";
                  const delay = animate ? (li * 80 + ri * 30 + pi * 12) : 0;
                  return (
                    <div
                      key={pi}
                      style={{
                        width: size, height: size,
                        background: on ? color : 'transparent',
                        boxShadow: on && glow ? `0 0 ${size * 1.5}px ${color}, inset 0 0 ${size/2}px rgba(255,255,255,0.15)` : 'none',
                        borderRadius: 1,
                        animation: animate && on ? `pixelIn 0.4s ${delay}ms both` : undefined,
                      }}
                    />
                  );
                })}
              </div>
            ))}
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { Section, Eyebrow, Button, InstallCommand, PixelTile, PixelText, PIXEL_FONT });