// search-notes.jsx — Search + Field Notes (blog-ish) + Menu drawer

function SearchScreen({ onOpenProduct, onClose }) {
  const [q, setQ] = React.useState('');
  const inputRef = React.useRef(null);

  React.useEffect(() => { setTimeout(() => inputRef.current?.focus(), 50); }, []);

  const matches = q.trim()
    ? FF_PRODUCTS.filter(p =>
        p.name.toLowerCase().includes(q.toLowerCase()) ||
        p.category.toLowerCase().includes(q.toLowerCase()) ||
        p.sku.toLowerCase().includes(q.toLowerCase()))
    : [];

  const trending = ['drop-in trigger', 'AR-15 BCG', 'safety selector', 'stainless springs'];
  const recent = ['Apex 3.5lb', 'Tungsten BCG'];

  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 70, background: 'var(--ff-bg)', display: 'flex', flexDirection: 'column',
      animation: 'ff-fade-in 200ms' }}>
      <div style={{ paddingTop: 'var(--safe-top)', borderBottom: '1px solid var(--ff-border)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px' }}>
          <div style={{
            flex: 1, display: 'flex', alignItems: 'center', gap: 10,
            background: 'var(--ff-surface)', border: '1px solid var(--ff-border-strong)', borderRadius: 4,
            padding: '0 12px', height: 44,
          }}>
            <IconSearch size={16} color="var(--ff-text-2)"/>
            <input ref={inputRef} value={q} onChange={(e) => setQ(e.target.value)}
              placeholder="Search products, SKU, category…"
              style={{ flex: 1, background: 'none', border: 'none', outline: 'none',
                color: 'var(--ff-text)', fontSize: 15, fontFamily: 'var(--ff-body)' }}/>
            {q && <button onClick={() => setQ('')} style={{ background: 'none', border: 'none', color: 'var(--ff-text-3)',
              cursor: 'pointer', padding: 4 }}><IconClose size={14}/></button>}
          </div>
          <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--ff-text)',
            fontSize: 14, cursor: 'pointer', padding: '8px 4px' }}>Cancel</button>
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto' }}>
        {!q.trim() ? (
          <>
            <div style={{ padding: '20px 16px 8px' }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>RECENT</div>
              {recent.map(r => (
                <button key={r} onClick={() => setQ(r)}
                  style={{ width: '100%', textAlign: 'left', padding: '14px 4px', minHeight: 48,
                    background: 'none', border: 'none', borderBottom: '1px solid var(--ff-border)',
                    color: 'var(--ff-text)', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12 }}>
                  <IconClock size={14} color="var(--ff-text-3)"/>
                  <span style={{ fontSize: 14 }}>{r}</span>
                </button>
              ))}
            </div>
            <div style={{ padding: '24px 16px 8px' }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>TRENDING</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {trending.map(t => (
                  <button key={t} onClick={() => setQ(t)} className="tap"
                    style={{ padding: '10px 14px', minHeight: 40, borderRadius: 999,
                      border: '1px solid var(--ff-border)', background: 'var(--ff-surface)',
                      color: 'var(--ff-text)', fontSize: 13, cursor: 'pointer' }}>{t}</button>
                ))}
              </div>
            </div>
            <div style={{ padding: '24px 16px 8px' }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>POPULAR</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {FF_PRODUCTS.slice(0, 3).map(p => (
                  <SearchResultRow key={p.id} p={p} onOpen={onOpenProduct}/>
                ))}
              </div>
            </div>
          </>
        ) : matches.length === 0 ? (
          <div style={{ padding: '64px 24px', textAlign: 'center' }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ff-text-3)', letterSpacing: '0.14em', marginBottom: 12 }}>
              NO MATCHES
            </div>
            <p style={{ color: 'var(--ff-text-2)', fontSize: 14 }}>Try a category or SKU prefix.</p>
          </div>
        ) : (
          <div style={{ padding: '16px' }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ff-text-3)', letterSpacing: '0.14em', marginBottom: 12 }}>
              {matches.length} RESULT{matches.length === 1 ? '' : 'S'}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {matches.map(p => <SearchResultRow key={p.id} p={p} onOpen={onOpenProduct}/>)}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function SearchResultRow({ p, onOpen }) {
  return (
    <button onClick={() => onOpen(p.id)}
      style={{ display: 'flex', gap: 12, alignItems: 'center', width: '100%',
        padding: '8px', background: 'var(--ff-surface)', border: '1px solid var(--ff-border)', borderRadius: 4,
        cursor: 'pointer', textAlign: 'left', minHeight: 72 }}>
      <div style={{ width: 56, height: 56, background: '#0c0c0c', border: '1px solid var(--ff-border)',
        borderRadius: 4, overflow: 'hidden', flexShrink: 0 }}>
        <ProductVisual id={p.id}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--ff-text-3)', letterSpacing: '0.1em' }}>{p.sku}</div>
        <div style={{ fontSize: 14, color: 'var(--ff-text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {p.name}
        </div>
        <div style={{ fontSize: 12, color: 'var(--ff-text-2)' }}>{p.category}</div>
      </div>
      <span className="mono" style={{ fontSize: 14, fontWeight: 600 }}>{fmtPrice(p.price)}</span>
    </button>
  );
}

// ─────────────────── Field Notes (mini blog/articles) ───────────────────
// FF_NOTES is defined in data.jsx and shared via window. Use that.

function FieldNotesScreen() {
  return (
    <div>
      <section style={{ padding: '32px 16px 16px' }}>
        <div className="eyebrow" style={{ marginBottom: 6 }}>FIELD NOTES</div>
        <h1 className="display" style={{ fontSize: 32, margin: 0, fontWeight: 700, letterSpacing: '-0.025em' }}>
          From the bench.
        </h1>
        <p style={{ marginTop: 10, color: 'var(--ff-text-2)', fontSize: 15, lineHeight: 1.55, maxWidth: 360 }}>
          Install guides, build philosophy, and lessons from our shop floor. Written by the people who turn the parts.
        </p>
      </section>

      {/* featured */}
      <section style={{ padding: '4px 16px 0' }}>
        <div style={{
          position: 'relative', borderRadius: 6, overflow: 'hidden',
          border: '1px solid var(--ff-border)',
          background: 'linear-gradient(135deg, #0e0e0e 0%, #1a1a1a 100%)',
          aspectRatio: '4/5',
        }}>
          {/* art */}
          <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
            <defs>
              <radialGradient id="featGlow" cx="0.5" cy="0.6" r="0.7">
                <stop offset="0" stopColor="#c8410d" stopOpacity="0.18"/>
                <stop offset="1" stopColor="#c8410d" stopOpacity="0"/>
              </radialGradient>
              <pattern id="featGrid" width="40" height="40" patternUnits="userSpaceOnUse">
                <path d="M40 0H0v40" fill="none" stroke="#1c1c1c" strokeWidth="1"/>
              </pattern>
            </defs>
            <rect width="400" height="500" fill="#0c0c0c"/>
            <rect width="400" height="500" fill="url(#featGrid)"/>
            <rect width="400" height="500" fill="url(#featGlow)"/>
            {/* abstract trigger silhouette */}
            <g transform="translate(200 280)" stroke="#c8410d" strokeWidth="1.4" fill="none" opacity="0.85">
              <path d="M-90 -20 L60 -20 L80 -10 L80 20 L60 30 L20 30 L10 50 L-30 60 L-50 50 L-50 30 L-90 20 Z"/>
              <circle cx="-20" cy="-20" r="14"/>
              <circle cx="-20" cy="-20" r="3" fill="#c8410d"/>
            </g>
            <text x="20" y="40" fill="#7a7a7a" fontFamily="ui-monospace, monospace" fontSize="10" letterSpacing="2">FN-014 · INSTALL</text>
            <text x="20" y="60" fill="#7a7a7a" fontFamily="ui-monospace, monospace" fontSize="10" letterSpacing="2">06 MIN READ</text>
          </svg>
          <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: 20,
            background: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%)' }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--ff-orange)', letterSpacing: '0.16em', marginBottom: 8 }}>
              FEATURED · INSTALL
            </div>
            <h2 className="display" style={{ margin: 0, fontSize: 22, fontWeight: 600, lineHeight: 1.2, color: '#fff' }}>
              How to install a drop-in AR-15 trigger in 8 minutes
            </h2>
            <div style={{ marginTop: 8, fontSize: 12, color: 'var(--ff-text-3)' }}>
              JAN 14 · 6 MIN · By Mark T., Lead Gunsmith
            </div>
          </div>
        </div>
      </section>

      {/* list */}
      <section style={{ padding: '24px 16px 0' }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>RECENT</div>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {FF_NOTES.map((n, i) => (
            <div key={n.id} style={{
              display: 'flex', gap: 14, padding: '18px 0',
              borderTop: i === 0 ? '1px solid var(--ff-border)' : 'none',
              borderBottom: '1px solid var(--ff-border)',
            }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 6 }}>
                  <span className="mono" style={{ fontSize: 9, color: 'var(--ff-orange)', letterSpacing: '0.14em',
                    border: '1px solid var(--ff-orange)', padding: '2px 5px', borderRadius: 2 }}>{(n.kicker || n.tag || '').toUpperCase()}</span>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--ff-text-3)', letterSpacing: '0.1em' }}>
                    {(n.date || '').toUpperCase()} · {n.read || (n.mins ? `${n.mins} MIN` : '')}
                  </span>
                </div>
                <h3 style={{ margin: 0, fontFamily: 'var(--ff-display)', fontSize: 16.5, fontWeight: 600,
                  color: 'var(--ff-text)', lineHeight: 1.3, letterSpacing: '-0.01em' }}>
                  {n.title}
                </h3>
              </div>
              <div style={{
                width: 64, height: 64, flexShrink: 0,
                background: '#0c0c0c', border: '1px solid var(--ff-border)', borderRadius: 4,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--ff-mono)', fontSize: 9, color: 'var(--ff-text-3)', letterSpacing: '0.12em',
              }}>FN-{String(14 - i).padStart(3, '0')}</div>
            </div>
          ))}
        </div>
      </section>

      {/* newsletter */}
      <section style={{ padding: '32px 16px 0' }}>
        <div style={{
          padding: 24, background: 'var(--ff-surface)', border: '1px solid var(--ff-border)',
          borderRadius: 6, position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', top: 12, right: 12,
            fontFamily: 'var(--ff-mono)', fontSize: 9, color: 'var(--ff-text-3)', letterSpacing: '0.12em' }}>
            NEWSLETTER · MONTHLY
          </div>
          <h3 className="display" style={{ margin: 0, fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em' }}>
            Get our build guides in your inbox.
          </h3>
          <p style={{ margin: '8px 0 16px', fontSize: 14, color: 'var(--ff-text-2)' }}>
            One email a month. New parts, install videos, no spam.
          </p>
          <div style={{ display: 'flex', gap: 8 }}>
            <input placeholder="you@example.com" type="email"
              style={{ flex: 1, height: 48, padding: '0 14px', background: 'var(--ff-bg)',
                border: '1px solid var(--ff-border)', borderRadius: 4, color: 'var(--ff-text)', outline: 'none',
                fontFamily: 'var(--ff-body)', fontSize: 14 }}/>
            <button className="btn btn-primary tap" style={{ height: 48, padding: '0 18px' }}>Join</button>
          </div>
        </div>
      </section>

      <div style={{ height: 'calc(120px + var(--safe-bottom))' }}/>
    </div>
  );
}

// ─────────────────── Menu drawer (alt minimal — unused; canonical lives in shell.jsx) ───────────────────
function MenuDrawerAlt({ open, onClose, onNav }) {
  if (!open) return null;
  const links = [
    { id: 'home', label: 'Home' },
    { id: 'shop', label: 'Shop all' },
    { id: 'shop', label: 'Trigger Kits' },
    { id: 'shop', label: 'Safeties & Selectors' },
    { id: 'shop', label: 'Components' },
    { id: 'shop', label: 'Accessories' },
    { id: 'notes', label: 'Field Notes' },
  ];
  const account = [
    { label: 'Sign in' },
    { label: 'Track an order' },
    { label: 'Wishlist' },
    { label: 'Compliance & FFL' },
    { label: 'Contact us' },
  ];

  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 80 }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.6)',
        backdropFilter: 'blur(4px)', animation: 'ff-fade-in 220ms' }}/>
      <div style={{
        position: 'absolute', top: 0, right: 0, bottom: 0,
        width: '85%', maxWidth: 340,
        background: 'var(--ff-bg)', borderLeft: '1px solid var(--ff-border)',
        animation: 'ff-slide-in-right 280ms var(--ff-ease-out)',
        display: 'flex', flexDirection: 'column',
        paddingTop: 'var(--safe-top)', paddingBottom: 'var(--safe-bottom)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '14px 18px', borderBottom: '1px solid var(--ff-border)' }}>
          <FlowFireMark/>
          <button onClick={onClose} className="tap" style={{ background: 'none', border: 'none',
            color: 'var(--ff-text)', padding: 8, marginRight: -8, cursor: 'pointer' }}>
            <IconClose size={20}/>
          </button>
        </div>
        <div style={{ flex: 1, overflowY: 'auto' }}>
          <div style={{ padding: '20px 18px 8px' }}>
            <div className="eyebrow" style={{ marginBottom: 8 }}>SHOP</div>
            {links.map((l, i) => (
              <button key={i} onClick={() => { onNav(l.id); onClose(); }}
                style={{ width: '100%', textAlign: 'left', padding: '16px 0',
                  background: 'none', border: 'none', borderBottom: '1px solid var(--ff-border)',
                  color: 'var(--ff-text)', fontSize: 17, fontFamily: 'var(--ff-display)', fontWeight: 500,
                  cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span>{l.label}</span>
                <IconChevronRight size={16} color="var(--ff-text-3)"/>
              </button>
            ))}
          </div>
          <div style={{ padding: '24px 18px 8px' }}>
            <div className="eyebrow" style={{ marginBottom: 8 }}>ACCOUNT</div>
            {account.map((a, i) => (
              <button key={i}
                style={{ width: '100%', textAlign: 'left', padding: '14px 0',
                  background: 'none', border: 'none', borderBottom: '1px solid var(--ff-border)',
                  color: 'var(--ff-text-2)', fontSize: 14, cursor: 'pointer' }}>
                {a.label}
              </button>
            ))}
          </div>
          <div style={{ padding: '24px 18px' }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--ff-text-3)', letterSpacing: '0.14em', marginBottom: 8 }}>
              FF-LOC · TX
            </div>
            <p style={{ margin: 0, fontSize: 12, color: 'var(--ff-text-3)', lineHeight: 1.5 }}>
              FlowFire Manufacturing · Austin, TX. © 2026. Lifetime warranty on all FlowFire-branded parts.
            </p>
          </div>
        </div>
      </div>
      <style>{`@keyframes ff-slide-in-right { from { transform: translateX(100%) } to { transform: translateX(0) } }`}</style>
    </div>
  );
}

Object.assign(window, { SearchScreen, FieldNotesScreen });