// landing.jsx — FeedRama marketing site
// All sections live here; main HTML is just a shell.

const { useState: uS, useEffect: uE, useRef: uR, useMemo: uM, useCallback: uCb } = React;

// ============================================================
// THEME
// ============================================================
const ACCENTS = {
  blue:   { mid: 'oklch(0.68 0.17 245)', glow: '64,156,255',   soft: 'rgba(64,156,255,0.22)',  text: 'oklch(0.88 0.1 245)',  bg1: 'oklch(0.4 0.18 260)', bg2: 'oklch(0.38 0.18 220)', bg3: 'oklch(0.35 0.16 200)', bg4: 'oklch(0.38 0.17 290)' },
  orange: { mid: 'oklch(0.7 0.18 45)',   glow: '255,148,72',   soft: 'rgba(255,148,72,0.22)',  text: 'oklch(0.88 0.13 50)',  bg1: 'oklch(0.4 0.18 35)',  bg2: 'oklch(0.38 0.17 60)',  bg3: 'oklch(0.35 0.15 20)',  bg4: 'oklch(0.4 0.17 320)' },
  green:  { mid: 'oklch(0.7 0.17 155)',  glow: '76,217,155',   soft: 'rgba(76,217,155,0.22)',  text: 'oklch(0.88 0.13 155)', bg1: 'oklch(0.4 0.16 165)', bg2: 'oklch(0.38 0.15 200)', bg3: 'oklch(0.35 0.16 130)', bg4: 'oklch(0.38 0.17 250)' },
  purple: { mid: 'oklch(0.68 0.2 295)',  glow: '178,118,255',  soft: 'rgba(178,118,255,0.22)', text: 'oklch(0.88 0.13 295)', bg1: 'oklch(0.4 0.2 290)',  bg2: 'oklch(0.38 0.18 320)', bg3: 'oklch(0.35 0.18 260)', bg4: 'oklch(0.4 0.17 220)' },
};

const buildTheme = (accentKey, dark) => {
  const a = ACCENTS[accentKey] || ACCENTS.blue;
  return {
    dark,
    accent: a.mid,
    accentGlow: a.glow,
    accentSoft: a.soft,
    accentText: a.text,
    bgGrads: a,
    text:     dark ? 'rgba(255,255,255,0.96)' : 'rgba(0,0,0,0.92)',
    textDim:  dark ? 'rgba(255,255,255,0.62)' : 'rgba(60,60,67,0.65)',
    textFaint:dark ? 'rgba(255,255,255,0.4)'  : 'rgba(60,60,67,0.45)',
    sep:      dark ? 'rgba(255,255,255,0.1)'  : 'rgba(60,60,67,0.14)',
    fill1:    dark ? 'rgba(120,120,128,0.28)' : 'rgba(120,120,128,0.16)',
    fill2:    dark ? 'rgba(120,120,128,0.36)' : 'rgba(120,120,128,0.22)',
    bg:       dark ? 'oklch(0.1 0.006 240)'   : 'oklch(0.97 0.004 80)',
    glassClass: dark ? 'glass glass-dark' : 'glass glass-light',
    glassInner: dark ? 'glass-inner-dark' : 'glass-inner-light',
  };
};

// ============================================================
// ICONS — minimal SF-style strokes
// ============================================================
const I = ({ name, size = 18, sw = 2, style }) => {
  const p = {
    sort:       <><path d="M3 6h13"/><path d="M6 12h10"/><path d="M9 18h7"/></>,
    download:   <><path d="M12 4v11"/><path d="M7 10l5 5 5-5"/><path d="M5 20h14"/></>,
    transcribe: <><rect x="4" y="4" width="16" height="16" rx="2.5"/><path d="M8 9h8"/><path d="M8 13h8"/><path d="M8 17h5"/></>,
    sparkle:    <><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M18.4 5.6l-2.8 2.8M8.4 15.6l-2.8 2.8"/></>,
    chevDown:   <><path d="M6 9l6 6 6-6"/></>,
    chevRight:  <><path d="M9 6l6 6-6 6"/></>,
    arrowRight: <><path d="M5 12h14"/><path d="M13 5l7 7-7 7"/></>,
    check:      <><path d="M5 12l5 5 9-11"/></>,
    play:       <><path d="M6 4l14 8-14 8z" fill="currentColor"/></>,
    heart:      <><path d="M12 21s-7-4.5-9.5-9C.8 8.5 3 4.5 7 4.5c2 0 3.5 1 5 3 1.5-2 3-3 5-3 4 0 6.2 4 4.5 7.5C19 16.5 12 21 12 21z" fill="currentColor"/></>,
    grid:       <><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></>,
    calendar:   <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 10h18"/></>,
    bolt:       <><path d="M13 3L4 14h7l-1 7 9-11h-7l1-7z" fill="currentColor"/></>,
    lock:       <><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></>,
    eye:        <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></>,
    chart:      <><path d="M4 19V5"/><path d="M4 19h16"/><path d="M8 15v-4"/><path d="M12 15V8"/><path d="M16 15v-6"/></>,
    instagram:  <><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.1" fill="currentColor"/></>,
    tiktok:     <><path d="M16 4v8.5a4.5 4.5 0 1 1-4.5-4.5"/><path d="M16 4c0 2.5 2 4.5 4.5 4.5"/></>,
    chrome:     <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.5"/><path d="M12 8.5h7.8"/><path d="M9 13.5L4.4 6.5"/><path d="M14.6 13.5l-4.6 7.5"/></>,
    plus:       <><path d="M12 5v14M5 12h14"/></>,
    minus:      <><path d="M5 12h14"/></>,
    twitter:    <><path d="M22 5.8c-.7.3-1.5.5-2.3.6.8-.5 1.4-1.3 1.7-2.2-.7.5-1.6.8-2.5 1A4 4 0 0 0 12 9.2c0 .3 0 .6.1.9-3.3-.2-6.3-1.8-8.3-4.2-.4.6-.6 1.4-.6 2.2 0 1.4.7 2.6 1.8 3.3-.7 0-1.3-.2-1.9-.5v.1c0 2 1.4 3.6 3.2 4-.3.1-.7.2-1 .2-.3 0-.5 0-.8-.1.5 1.6 2 2.7 3.8 2.7-1.4 1.1-3.1 1.7-5 1.7H2C3.8 20.7 5.9 21.4 8.2 21.4c7.6 0 11.8-6.3 11.8-11.8v-.5c.8-.6 1.5-1.3 2-2.1z" fill="currentColor"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style}>
      {p[name] || null}
    </svg>
  );
};

// ============================================================
// LOGO
// ============================================================
// Grid Sort glyph — 3 tiles, 2 tiles, 1 tile (grid collapsing into a sorted list)
const GridSortGlyph = ({ size = 18, color = 'white' }) => {
  // 100x100 viewBox, tile 22.67, gap 2.67, origin 14
  const T = 22.67, G = 2.67, O = 14;
  const cell = (col, row) => ({
    x: O + col * (T + G), y: O + row * (T + G), w: T, h: T,
  });
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
      {[0,1,2].map(c => {
        const { x, y, w, h } = cell(c, 0);
        return <rect key={`r0${c}`} x={x} y={y} width={w} height={h} rx="4" fill={color} opacity="1"/>;
      })}
      {[0,1].map(c => {
        const { x, y, w, h } = cell(c, 1);
        return <rect key={`r1${c}`} x={x} y={y} width={w} height={h} rx="4" fill={color} opacity="0.7"/>;
      })}
      {(() => {
        const { x, y, w, h } = cell(0, 2);
        return <rect x={x} y={y} width={w} height={h} rx="4" fill={color} opacity="0.45"/>;
      })()}
    </svg>
  );
};

const Logo = ({ size = 28, theme, name = 'FeedRama' }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
    <div style={{
      width: size, height: size, borderRadius: size * 0.26,
      background: `linear-gradient(135deg, ${theme.accent}, oklch(0.5 0.2 ${260}))`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: `0 4px 14px -2px rgba(${theme.accentGlow},0.5), inset 0 1px 0 rgba(255,255,255,0.3)`,
    }}>
      <GridSortGlyph size={size * 0.62} color="white"/>
    </div>
    <span style={{
      fontSize: size * 0.62, fontWeight: 700,
      letterSpacing: '-0.025em', color: theme.text,
    }}>{name}</span>
  </div>
);

const Pill = ({ children, theme, accent }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 6,
    padding: '5px 11px 5px 9px', borderRadius: 999,
    background: accent ? theme.accentSoft : theme.fill1,
    border: `0.5px solid ${accent ? `rgba(${theme.accentGlow},0.32)` : theme.sep}`,
    fontSize: 12.5, fontWeight: 600, letterSpacing: '-0.005em',
    color: accent ? theme.accentText : theme.text,
  }}>{children}</span>
);

const CTA = ({ children, theme, primary, onClick, big }) => (
  <button onClick={onClick} style={{
    padding: big ? '14px 22px' : '10px 16px',
    borderRadius: big ? 14 : 12,
    border: 'none', cursor: 'pointer', fontFamily: 'inherit',
    fontSize: big ? 15 : 13.5, fontWeight: 600, letterSpacing: '-0.01em',
    display: 'inline-flex', alignItems: 'center', gap: 7,
    background: primary ? theme.accent : (theme.dark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.06)'),
    color: primary ? 'white' : theme.text,
    boxShadow: primary
      ? `0 8px 24px -6px rgba(${theme.accentGlow},0.55), 0 0 0 0.5px rgba(${theme.accentGlow},0.6), inset 0 1px 0 rgba(255,255,255,0.2)`
      : `0 0 0 0.5px ${theme.sep}, inset 0 1px 0 ${theme.dark ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.6)'}`,
    transition: 'transform 0.15s, box-shadow 0.15s',
  }}
  onMouseEnter={(e)=>{ e.currentTarget.style.transform='translateY(-1px)'; }}
  onMouseLeave={(e)=>{ e.currentTarget.style.transform='translateY(0)'; }}>
    {children}
  </button>
);

// ============================================================
// NAV
// ============================================================
function Nav({ theme, productName, onCTA, ctaLabel, sectionRefs }) {
  const [scrolled, setScrolled] = uS(false);
  uE(() => {
    const f = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', f); return () => window.removeEventListener('scroll', f);
  }, []);
  const scrollTo = (k) => {
    const el = sectionRefs[k]?.current;
    if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });
  };
  return (
    <div style={{
      position: 'fixed', top: 14, left: '50%', transform: 'translateX(-50%)',
      zIndex: 100, width: 'calc(100% - 28px)', maxWidth: 1180,
      transition: 'all 0.25s',
    }}>
      <div className={theme.glassClass} style={{
        borderRadius: 999, padding: '8px 8px 8px 18px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
        boxShadow: scrolled ? '0 12px 40px -10px rgba(0,0,0,0.5)' : '0 4px 20px -6px rgba(0,0,0,0.3)',
      }}>
        <Logo size={24} theme={theme} name={productName}/>
        <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
          {[
            ['features', 'Features'],
            ['pricing', 'Pricing'], ['faq', 'FAQ'],
          ].map(([k, l]) => (
            <button key={k} onClick={() => scrollTo(k)} style={{
              padding: '6px 12px', borderRadius: 999, border: 'none',
              background: 'transparent', color: theme.textDim,
              fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
              transition: 'color 0.15s',
            }}
            onMouseEnter={(e)=>{ e.currentTarget.style.color = theme.text; }}
            onMouseLeave={(e)=>{ e.currentTarget.style.color = theme.textDim; }}>
              {l}
            </button>
          ))}
          <CTA theme={theme} primary onClick={onCTA}>
            {ctaLabel}
            <I name="chrome" size={13} sw={2.2}/>
          </CTA>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ACCENTS, buildTheme, I, Logo, Pill, CTA, Nav });