// src/components.jsx
// Shared primitives used by both V1 and V2.

const { useState, useEffect, useRef } = React;

// ── Logo ───────────────────────────────────────────────────────────────────
// Speech-bubble "M" mark + stacked "Prompt Mode" wordmark, matching the
// brand. Wordmark recolored for dark background: PROMPT in off-white,
// MODE in brand yellow.
function Logo({ size = 32, showWordmark = true }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
      <img
        src="assets/logo-icon.png"
        alt=""
        width={size}
        height={size * (711 / 681)}
        style={{ display: 'block', flexShrink: 0 }}
      />
      {showWordmark && (
        <span style={{
          display: 'inline-flex', flexDirection: 'column',
          fontFamily: 'Space Grotesk, sans-serif',
          fontWeight: 700,
          fontSize: size * 0.50,
          lineHeight: 0.95,
          letterSpacing: '0.02em',
          textTransform: 'uppercase',
        }}>
          <span style={{ color: '#f3f6f2' }}>Prompt</span>
          <span style={{ color: '#ffde59' }}>Mode</span>
        </span>
      )}
    </span>
  );
}

// ── Nav ────────────────────────────────────────────────────────────────────
function Nav({ page, onNavigate, style = 'default' }) {
  // style: 'default' (V1, restrained) | 'terminal' (V2, monospaced)
  const items = [
    { id: 'home', label: 'The Challenge' },
    { id: 'about', label: 'About' },
    { id: 'kit', label: 'Newsletter', terminal: 'Newsletter' },
  ];
  const isTerminal = style === 'terminal';
  return (
    <nav
      data-screen-label={`Nav · ${style}`}
      style={{
        position: 'sticky', top: 0, zIndex: 100,
        background: 'rgba(21,29,31,0.78)',
        backdropFilter: 'blur(14px) saturate(140%)',
        WebkitBackdropFilter: 'blur(14px) saturate(140%)',
        borderBottom: '0.5px solid rgba(255,255,255,0.08)',
      }}
    >
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        padding: '14px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 24,
      }}>
        <button
          onClick={() => onNavigate('home')}
          style={{ background: 'none', border: 0, padding: 0, cursor: 'pointer' }}
          aria-label="promptmode.io home"
        >
          <Logo size={32} />
        </button>

        <div style={{
          display: 'flex', alignItems: 'center', gap: isTerminal ? 0 : 28,
          fontFamily: isTerminal ? 'DM Mono, monospace' : 'Space Grotesk, sans-serif',
          fontSize: isTerminal ? 12 : 14,
          letterSpacing: isTerminal ? '0.04em' : '-0.005em',
          textTransform: isTerminal ? 'uppercase' : 'none',
        }}>
          {items.map((it, i) => {
            const active = page === it.id;
            return (
              <React.Fragment key={it.id}>
                {isTerminal && i > 0 && (
                  <span style={{ color: 'rgba(243,246,242,0.20)', padding: '0 14px' }}>·</span>
                )}
                <button
                  onClick={() => onNavigate(it.id)}
                  style={{
                    background: 'none', border: 0, padding: isTerminal ? '4px 0' : '4px 0',
                    color: active ? '#f3f6f2' : 'rgba(243,246,242,0.65)',
                    fontWeight: isTerminal ? 500 : (active ? 600 : 400),
                    cursor: 'pointer', position: 'relative',
                    fontFamily: 'inherit', fontSize: 'inherit',
                    letterSpacing: 'inherit', textTransform: 'inherit',
                    whiteSpace: 'nowrap',
                    flexShrink: 0,
                  }}
                >
                  {isTerminal ? `[ ${it.label} ]`.replace('[ ', active ? '› ' : '  ') : it.label}
                  {active && !isTerminal && (
                    <span style={{
                      position: 'absolute', left: 0, right: 0, bottom: -18, height: 1,
                      background: '#04a8ea',
                    }} />
                  )}
                </button>
              </React.Fragment>
            );
          })}
          <button
            onClick={() => onNavigate('kit')}
            className="btn-yellow"
            style={{ marginLeft: 8, padding: '8px 16px', fontSize: 13, whiteSpace: 'nowrap', flexShrink: 0 }}
          >Free Starter Kit</button>
        </div>
      </div>
    </nav>
  );
}

// ── Footer ─────────────────────────────────────────────────────────────────
function Footer({ style = 'default', onNavigate }) {
  const isTerminal = style === 'terminal';
  return (
    <footer style={{
      borderTop: '0.5px solid rgba(255,255,255,0.08)',
      marginTop: 80,
      padding: '48px 32px 60px',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
        gap: 32, flexWrap: 'wrap',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Logo size={32} />
          <div style={{
            fontFamily: 'DM Mono, monospace', fontSize: 11,
            color: 'rgba(243,246,242,0.40)', letterSpacing: '0.04em',
            maxWidth: 320, lineHeight: 1.6,
          }}>
            Life in Prompt Mode — an honest experiment in AI income.
            @lifeinpromptmode
          </div>
        </div>

        <div style={{
          fontFamily: 'DM Mono, monospace', fontSize: 11,
          letterSpacing: '0.08em', textTransform: 'uppercase',
          color: 'rgba(243,246,242,0.40)',
          display: 'flex', gap: 22, flexWrap: 'wrap',
        }}>
          <span>© 2026 BY MR ATOM LLC</span>
          <span style={{ opacity: 0.4 }}>·</span>
          <a href="#" onClick={(e)=>{e.preventDefault(); onNavigate && onNavigate('disclaimer');}}
             style={{ color: 'rgba(243,246,242,0.65)' }}>Disclaimer</a>
          <a href="#" onClick={(e)=>e.preventDefault()} style={{ color: 'rgba(243,246,242,0.65)' }}>Privacy</a>
          <a href="#" onClick={(e)=>e.preventDefault()} style={{ color: 'rgba(243,246,242,0.65)' }}>Terms</a>
        </div>
      </div>
    </footer>
  );
}

// ── Placeholder media ──────────────────────────────────────────────────────
function Placeholder({ label, ratio = '16/9', minH, style = {} }) {
  return (
    <div className="ph" style={{
      aspectRatio: ratio,
      minHeight: minH,
      width: '100%',
      ...style,
    }}>
      <span>{label}</span>
    </div>
  );
}

// ── EmailForm — static visual, doesn't submit ──────────────────────────────
function EmailForm({ style = 'default', cta = 'Send Me the Free Starter Kit →' }) {
  const isTerminal = style === 'terminal';
  const inputBg = isTerminal ? 'rgba(0,0,0,0.35)' : 'rgba(255,255,255,0.05)';
  const inputBorder = isTerminal ? '1px solid rgba(4,168,234,0.35)' : '1px solid rgba(255,255,255,0.15)';
  return (
    <form onSubmit={(e) => e.preventDefault()} style={{ width: '100%' }}>
      <div style={{
        display: 'flex', gap: 10, flexWrap: 'wrap',
      }}>
        <input
          type="email"
          placeholder={isTerminal ? '_ enter email' : 'your@email.com'}
          style={{
            flex: '1 1 260px',
            background: inputBg,
            border: inputBorder,
            borderRadius: 6,
            padding: '13px 16px',
            color: '#f3f6f2',
            fontFamily: isTerminal ? 'DM Mono, monospace' : 'Space Grotesk, sans-serif',
            fontSize: 15,
            outline: 'none',
          }}
          onFocus={(e) => { e.target.style.borderColor = '#04a8ea'; }}
          onBlur={(e) => { e.target.style.borderColor = isTerminal ? 'rgba(4,168,234,0.35)' : 'rgba(255,255,255,0.15)'; }}
        />
        <button type="submit" className="btn-yellow">{cta}</button>
      </div>
      <div style={{
        marginTop: 12,
        fontFamily: 'DM Mono, monospace', fontSize: 10,
        letterSpacing: '0.06em', color: 'rgba(243,246,242,0.30)',
      }}>
        No spam. Unsubscribe anytime. Educational purposes only.
      </div>
    </form>
  );
}

// ── Eyebrow ────────────────────────────────────────────────────────────────
function Eyebrow({ children, dot = false, style = {} }) {
  return (
    <div className="eyebrow" style={{
      display: 'inline-flex', alignItems: 'center', gap: 8, ...style,
    }}>
      {dot && <span className="live-dot" />}
      {children}
    </div>
  );
}

// ── Disclaimer line (inline, above footer when earnings discussed) ─────────
function InlineDisclaimer() {
  return (
    <div style={{
      marginTop: 64,
      padding: '20px 0 0',
      borderTop: '0.5px solid rgba(255,255,255,0.06)',
      fontFamily: 'DM Mono, monospace',
      fontSize: 10,
      letterSpacing: '0.04em',
      color: 'rgba(243,246,242,0.30)',
      lineHeight: 1.6,
      maxWidth: 720,
    }}>
      Educational purposes only. Results vary. Not financial advice.
      Full disclaimer at promptmode.io/disclaimer.
    </div>
  );
}

Object.assign(window, {
  Logo, Nav, Footer, Placeholder, EmailForm, Eyebrow, InlineDisclaimer,
});