// Bottom nav + Tweaks UI

function BottomNav({ current, onChange, hidden }) {
  const items = [
    { id: 'home',    label: 'Home',    icon: Icon.heart },
    { id: 'letters', label: 'Letters', icon: Icon.envelope },
    { id: 'gallery', label: 'Gallery', icon: Icon.frame },
    { id: 'story',   label: 'Story',   icon: Icon.book },
  ];

  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 40,
      paddingBottom: 30, paddingTop: 10,
      transform: hidden ? 'translateY(110%)' : 'translateY(0)',
      opacity: hidden ? 0 : 1,
      transition: 'transform 0.7s cubic-bezier(.4,.1,.2,1), opacity 0.5s ease',
      pointerEvents: hidden ? 'none' : 'auto',
    }}>
      {/* Paper-fade mask so content ends softly */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: -24, height: 50,
        background: `linear-gradient(to bottom, transparent, ${PAPER_DEEP} 70%)`,
        pointerEvents: 'none',
      }}/>

      {/* Hairline top rule */}
      <div style={{
        position: 'relative', height: 1,
        background: 'rgba(27,36,71,0.15)',
        margin: '0 28px 12px',
      }}/>

      <div style={{
        position: 'relative',
        display: 'flex', justifyContent: 'space-around',
        padding: '0 12px',
      }}>
        {items.map(it => {
          const active = current === it.id || (it.id === 'home' && current === 'letter');
          return (
            <button key={it.id} onClick={() => onChange(it.id)} style={{
              background: 'transparent', border: 'none', cursor: 'pointer',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              padding: '4px 10px',
            }}>
              <div style={{ opacity: active ? 1 : 0.55 }}>
                {it.icon(active ? ROSE : INK, active && it.id === 'home')}
              </div>
              <div style={{
                fontFamily: sans, fontSize: 9, letterSpacing: 2,
                color: active ? ROSE : MUTED, textTransform: 'uppercase',
              }}>{it.label}</div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────
// Tweaks UI
// ─────────────────────────────────────────────
function TweaksUI({ tweaks, setTweak, theme, setTheme }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <TweakRadio
        label="Mode"
        value={theme}
        options={[
          { value: 'dark', label: '🌙 Burgundy' },
          { value: 'light', label: '🌸 Pink' }
        ]}
        onChange={v => setTheme(v)}
      />

      <TweakSection label="Letter" />
      <TweakText
        label="Title"
        value={tweaks.letterTitle}
        onChange={v => setTweak('letterTitle', v)}
      />
      <div className="twk-row">
        <div className="twk-lbl"><span>Body</span></div>
        <textarea
          value={tweaks.letterBody}
          onChange={e => setTweak('letterBody', e.target.value)}
          style={{
            width: '100%', minHeight: 110, padding: 8,
            fontFamily: 'ui-sans-serif, system-ui', fontSize: 11.5, lineHeight: 1.45,
            background: 'rgba(255,255,255,.6)', border: '.5px solid rgba(0,0,0,.1)', borderRadius: 7,
            resize: 'vertical', boxSizing: 'border-box', color: '#29261b',
          }}
        />
      </div>
      <TweakText
        label="Signature"
        value={tweaks.letterSignature}
        onChange={v => setTweak('letterSignature', v)}
      />

      <TweakSection label="Motion" />
      <TweakRadio
        label="Intensity"
        value={tweaks.motionIntensity}
        options={['whisper', 'cinematic', 'rich']}
        onChange={v => setTweak('motionIntensity', v)}
      />
    </TweaksPanel>
  );
}

Object.assign(window, { BottomNav, TweaksUI });