/* Shared bits: the Tweaks-driven theme defaults + helper UI */

const REMAC_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#7CDFFF",
  "fontPair": "sf",
  "heroHeadline": "Your Mac.\nIn your pocket.",
  "heroSub": "ReMac brings the entire macOS surface — terminals, files, screen, keyboard — to a single, fluid iPhone app.",
  "density": "comfortable",
  "mode": "dark"
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  sf:    { display: '"SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif',
           text:    '"SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif',
           mono:    '"SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace' },
  geist: { display: '"Geist", -apple-system, system-ui, sans-serif',
           text:    '"Geist", -apple-system, system-ui, sans-serif',
           mono:    '"Geist Mono", ui-monospace, Menlo, monospace' },
  serif: { display: '"Instrument Serif", "Tiempos Headline", Georgia, serif',
           text:    '"SF Pro Text", -apple-system, system-ui, sans-serif',
           mono:    '"JetBrains Mono", ui-monospace, monospace' },
};

const MODES = {
  dark: {
    bg: '#0E0E10',
    bgSoft: '#16161A',
    surface: '#1C1C20',
    surfaceHi: '#26262B',
    fg: '#F5F5F7',
    fgMuted: '#9A9AA0',
    fgDim: '#5A5A60',
    border: 'rgba(255,255,255,0.09)',
    borderStrong: 'rgba(255,255,255,0.16)',
  },
  light: {
    bg: '#FBFBFD',
    bgSoft: '#F5F5F7',
    surface: '#FFFFFF',
    surfaceHi: '#F2F2F4',
    fg: '#1D1D1F',
    fgMuted: '#6E6E73',
    fgDim: '#AEAEB2',
    border: 'rgba(0,0,0,0.08)',
    borderStrong: 'rgba(0,0,0,0.14)',
  },
};

function useRemacTheme() {
  const ctx = React.useContext(window.RemacThemeContext);
  if (ctx) return ctx;
  // Fallback when used outside provider — own its own state.
  const [t, setTweak] = useTweaks(REMAC_DEFAULTS);
  const fonts = FONT_PAIRS[t.fontPair] || FONT_PAIRS.sf;
  const mode = MODES[t.mode] || MODES.dark;
  const pad = t.density === 'compact' ? 0.78 : t.density === 'spacious' ? 1.18 : 1.0;
  return { t, setTweak, fonts, mode, pad };
}

window.RemacThemeContext = React.createContext(null);

function RemacThemeProvider({ children }) {
  const [t, setTweak] = useTweaks(REMAC_DEFAULTS);
  const fonts = FONT_PAIRS[t.fontPair] || FONT_PAIRS.sf;
  const mode = MODES[t.mode] || MODES.dark;
  const pad = t.density === 'compact' ? 0.78 : t.density === 'spacious' ? 1.18 : 1.0;
  const value = React.useMemo(() => ({ t, setTweak, fonts, mode, pad }), [t, setTweak]);
  return <window.RemacThemeContext.Provider value={value}>{children}</window.RemacThemeContext.Provider>;
}

window.useRemacTheme = useRemacTheme;
window.RemacThemeProvider = RemacThemeProvider;
window.REMAC_DEFAULTS = REMAC_DEFAULTS;
window.FONT_PAIRS = FONT_PAIRS;
window.MODES = MODES;

/* ---------- shared mini components ---------- */

function AppIcon({ size = 64, accent = '#7CDFFF', radius = 0.225, variant = 'dark' }) {
  const r = size * radius;
  return (
    <div style={{
      width: size, height: size, borderRadius: r,
      overflow: 'hidden',
      boxShadow: `0 ${size*0.04}px ${size*0.18}px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06)`,
      background: '#000',
    }}>
      <img src="assets/app-icon.png" alt="ReMac"
           style={{width: '100%', height: '100%', display: 'block', objectFit: 'cover'}} />
    </div>
  );
}

function DownloadBadge({ accent, mode, compact = false }) {
  return (
    <a href="#download" style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      padding: compact ? '10px 18px' : '14px 22px',
      borderRadius: 999,
      background: mode.fg, color: mode.bg,
      textDecoration: 'none',
      fontWeight: 600, fontSize: compact ? 14 : 15,
      letterSpacing: '-0.01em',
      transition: 'transform .2s ease',
    }}>
      <svg width="18" height="22" viewBox="0 0 18 22" fill="none">
        <path d="M14.94 16.79c-.71 1.04-1.45 2.07-2.61 2.09-1.14.02-1.5-.67-2.8-.67-1.3 0-1.7.65-2.78.69-1.12.04-1.97-1.12-2.69-2.16C1.6 14.6.49 10.84 1.99 8.3c.74-1.27 2.08-2.07 3.52-2.09 1.1-.02 2.14.74 2.81.74.67 0 1.93-.91 3.26-.78.55.02 2.1.22 3.1 1.69-.08.05-1.85 1.08-1.83 3.22.02 2.56 2.24 3.41 2.27 3.42-.02.06-.36 1.21-1.18 2.39zM10.4 3.21c.62-.74 1.03-1.78.92-2.81-.88.04-1.95.59-2.59 1.33-.57.66-1.07 1.71-.94 2.72.99.08 1.99-.5 2.61-1.24z" fill="currentColor"/>
      </svg>
      <span>Download for Mac</span>
    </a>
  );
}

function GhostBtn({ children, mode, accent }) {
  return (
    <a href="#features" style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '14px 22px', borderRadius: 999,
      border: `1px solid ${mode.borderStrong}`,
      color: mode.fg, textDecoration: 'none',
      fontWeight: 500, fontSize: 15, letterSpacing: '-0.01em',
    }}>
      {children}
      <span style={{color: accent}}>→</span>
    </a>
  );
}

/* Phone frame mock that holds an image-slot */
function PhoneMock({ width = 280, slotId = 'phone-1', label = 'Drop a screenshot', mode, accent }) {
  const h = width * 2.06;
  return (
    <div style={{
      width, height: h,
      borderRadius: width * 0.16,
      background: '#0A0A0A',
      padding: width * 0.025,
      boxShadow: `0 40px 80px rgba(0,0,0,.55), 0 8px 22px rgba(0,0,0,.5), inset 0 0 0 1.5px ${mode.borderStrong}`,
      position: 'relative',
    }}>
      <div style={{
        width: '100%', height: '100%',
        borderRadius: width * 0.14,
        overflow: 'hidden',
        background: '#000',
        position: 'relative',
      }}>
        <image-slot
          id={slotId}
          shape="rect"
          radius={String(width * 0.14)}
          placeholder={label}
          style={{ width: '100%', height: '100%', display: 'block' }}
        ></image-slot>
        {/* Dynamic island */}
        <div style={{
          position: 'absolute', top: width * 0.04, left: '50%',
          transform: 'translateX(-50%)',
          width: width * 0.34, height: width * 0.1,
          borderRadius: 999, background: '#000', zIndex: 5,
        }}/>
      </div>
    </div>
  );
}

/* Striped placeholder used inside phone screens if user hasn't dropped image */
function StripedScreen({ label, accent }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: `repeating-linear-gradient(135deg, #111 0 14px, #0a0a0a 14px 28px)`,
      color: '#666',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: '"SF Mono", ui-monospace, monospace',
      fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase',
    }}>
      {label}
    </div>
  );
}

window.AppIcon = AppIcon;
window.DownloadBadge = DownloadBadge;
window.GhostBtn = GhostBtn;
window.PhoneMock = PhoneMock;
window.StripedScreen = StripedScreen;