// Ring Facet shared design system
// Loaded by every page via: <script type="text/babel" src="shared/rf.jsx"></script>
// Requires: React, ReactDOM already on window. window.__clerkPk + window.__clerkReady set before this.

const P = {
  paper: '#F5F5F4', card: '#FFFFFF', ink: '#0A0B0D',
  ink90: 'rgba(10,11,13,0.92)', ink60: 'rgba(10,11,13,0.62)',
  ink40: 'rgba(10,11,13,0.40)', ink15: 'rgba(10,11,13,0.13)', ink08: 'rgba(10,11,13,0.08)',
  sans: '"Inter Tight", -apple-system, system-ui, sans-serif',
  mono: '"IBM Plex Mono", ui-monospace, monospace',
};

function PMono({ children, style }) {
  return <span style={{ fontFamily: P.mono, fontSize: 11, letterSpacing: 0.4, ...style }}>{children}</span>;
}

function PBtn({ children, primary, ghost, size = 'md', style, ...rest }) {
  const sz = { sm: { p: '8px 14px', f: 12.5 }, md: { p: '12px 18px', f: 13.5 }, lg: { p: '14px 22px', f: 14 } }[size];
  const base = { display: 'inline-flex', alignItems: 'center', gap: 8, padding: sz.p, fontFamily: P.sans, fontSize: sz.f, fontWeight: 500, letterSpacing: -0.1, cursor: 'pointer', borderRadius: 8, border: 'none', lineHeight: 1 };
  if (primary) return <button {...rest} style={{ ...base, background: P.ink, color: P.paper, ...style }}>{children}</button>;
  if (ghost)   return <button {...rest} style={{ ...base, background: 'transparent', color: P.ink, ...style }}>{children}</button>;
  return <button {...rest} style={{ ...base, background: P.card, color: P.ink, boxShadow: `inset 0 0 0 1px ${P.ink15}`, ...style }}>{children}</button>;
}

function PMark({ size = 22, dark }) {
  const c = dark ? P.paper : P.ink;
  const w = Math.round(size * 304 / 240);
  return (
    <svg width={w} height={size} viewBox="0 0 304 240">
      <path fill={c} d="M39.530842,195.883224C36.282921,204.070221 33.055267,212.265335 29.777617,220.440399C28.366095,223.960999 29.045757,225.700775 33.275211,225.678833C52.764465,225.577698 72.254776,225.588730 91.744118,225.682129C95.094978,225.698181 96.815269,224.374390 98.000458,221.252747C101.066803,213.176376 104.468513,205.227432 107.729820,197.224945C110.773277,189.757004 113.808365,182.285675 117.297928,173.707703C118.714073,176.494339 119.650429,178.038284 120.314888,179.691513C125.708038,193.110168 131.153549,206.509567 136.346298,220.005920C137.947479,224.167526 140.292847,225.811462 144.886337,225.749496C163.206757,225.502304 181.532455,225.661591 199.856171,225.639496C206.337158,225.631683 207.038376,224.560043 204.695038,218.728470C188.017395,177.225220 171.285782,135.743317 154.775085,94.173721C152.939560,89.552376 150.399048,87.871475 145.505280,87.931725C127.684135,88.151108 109.858505,88.028236 92.034637,87.993797C82.956413,87.976257 82.949341,87.934319 79.646797,96.151329C66.379539,129.161438 53.117085,162.173477 39.530842,195.883224M150.042313,79.562851C151.289230,85.620102 155.186401,86.878944 160.972397,86.772118C179.455795,86.430870 197.949585,86.627373 216.439163,86.682152C218.337479,86.687775 220.433792,86.056633 222.825424,88.288170C211.644089,116.259315 200.354523,144.501236 188.814346,173.370056C191.515076,173.542496 193.143402,173.735794 194.771866,173.736832C213.594727,173.748901 232.419342,173.590424 251.239227,173.823013C255.886810,173.880478 258.007050,172.072128 259.642273,167.938004C269.671417,142.582458 279.904572,117.307373 290.143677,92.035423C291.400940,88.932190 291.547638,86.087357 290.266785,82.927879C282.894257,64.741852 275.594391,46.525829 268.393677,28.271135C266.902130,24.489876 264.506378,22.925777 260.447235,22.933540C218.637421,23.013500 176.827347,22.966909 135.017441,23.022621C129.385651,23.030125 128.276535,24.948019 130.384689,30.244200C136.834778,46.448334 143.277420,62.655430 150.042313,79.562851z"/>
    </svg>
  );
}

function PPlaceholder({ label, height = 320, dark, style }) {
  const fg = dark ? 'rgba(245,245,244,0.10)' : 'rgba(10,11,13,0.06)';
  const bg = dark ? P.ink : '#EDEDEB';
  const tx = dark ? 'rgba(245,245,244,0.55)' : P.ink40;
  return (
    <div style={{ height, width: '100%', position: 'relative', background: `repeating-linear-gradient(90deg, ${fg} 0 1px, transparent 1px 18px), ${bg}`, display: 'flex', alignItems: 'center', justifyContent: 'center', ...style }}>
      <span style={{ fontFamily: P.mono, fontSize: 11, letterSpacing: 0.4, color: tx }}>{label}</span>
    </div>
  );
}

function useBreakpoint() {
  const [w, setW] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const h = () => setW(window.innerWidth);
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);
  return { isMobile: w < 768, isTablet: w < 1024 };
}

function useClerkUser() {
  const [user, setUser] = React.useState(window.__clerkUser || null);
  React.useEffect(() => {
    const h = () => setUser(window.__clerkUser || null);
    window.addEventListener('clerkUserChanged', h);
    return () => window.removeEventListener('clerkUserChanged', h);
  }, []);
  return user;
}

function PNav({ active }) {
  const links = [['Pricing','pricing.html'],['Customers','customers.html'],['Docs','docs.html'],['Jewel Shots','jewel-shots.html']];
  const user = useClerkUser();
  const { isMobile } = useBreakpoint();
  const [open, setOpen] = React.useState(false);
  const signIn  = () => window.__clerkReady?.then(c => c.redirectToSignIn({ redirectUrl: window.location.href })).catch(console.error);
  const signUp  = () => window.__clerkReady?.then(c => c.redirectToSignUp({ redirectUrl: window.location.href })).catch(console.error);
  const signOut = () => window.__clerkReady?.then(c => c.signOut()).catch(console.error);
  const demoActive = active === 'Demo';
  return (
    <div style={{ borderBottom: `1px solid ${P.ink15}`, background: P.paper, position: 'sticky', top: 0, zIndex: 10 }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: isMobile ? '12px 16px' : '18px 40px', display: 'flex', alignItems: 'center' }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', flex: isMobile ? 1 : 0, flexShrink: 0 }}>
          <PMark size={28} />
          <span style={{ fontFamily: P.sans, fontWeight: 600, fontSize: 18, letterSpacing: -0.4, color: P.ink, whiteSpace: 'nowrap' }}>Ring Facet</span>
          {!isMobile && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, marginLeft: 8, padding: '3px 8px', background: P.ink08, borderRadius: 4, border: `1px solid ${P.ink15}` }}><span style={{ fontFamily: P.mono, fontSize: 9, fontWeight: 700, letterSpacing: 0.8, padding: '1px 5px', background: P.ink, color: P.paper, borderRadius: 3 }}>NEW</span><span style={{ fontFamily: P.mono, fontSize: 10.5, letterSpacing: 0.2, color: P.ink60 }}>v1.3</span></span>}
        </a>
        {!isMobile && (
          <nav style={{ display: 'flex', flex: 1, justifyContent: 'center', gap: 2, margin: '0 24px', alignItems: 'center' }}>
                {/* Home */}
            <a href="index.html" style={{ fontFamily: P.sans, fontSize: 14, color: active === 'Home' ? P.ink : P.ink60, textDecoration: 'none', fontWeight: active === 'Home' ? 600 : 400, padding: '8px 14px', borderRadius: 8, background: active === 'Home' ? P.ink08 : 'transparent', border: active === 'Home' ? `1px solid ${P.ink15}` : '1px solid transparent' }}>Home</a>
            {/* Demo — label + two-button pill */}
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginLeft: 2, marginRight: 2 }}>
              <span style={{ fontFamily: P.mono, fontSize: 10, letterSpacing: 0.5, color: P.ink40 }}>Demo</span>
              <div style={{ display: 'inline-flex', alignItems: 'center', border: `1px solid ${P.ink15}`, borderRadius: 8, overflow: 'hidden', background: demoActive ? P.ink08 : 'transparent' }}>
                <a href="demo.html" style={{ fontFamily: P.sans, fontSize: 14, fontWeight: 600, color: P.ink, textDecoration: 'none', padding: '8px 13px', whiteSpace: 'nowrap', display: 'block' }}>Ring Builder</a>
                <div style={{ width: 1, height: 18, background: P.ink15, flexShrink: 0 }} />
                <a href="demo.html?product=jewel-shots" style={{ fontFamily: P.sans, fontSize: 14, fontWeight: 600, color: P.ink, textDecoration: 'none', padding: '8px 13px', whiteSpace: 'nowrap', display: 'block' }}>Jewel Shots</a>
              </div>
            </div>
            {links.map(([n, href]) => (
              <a key={n} href={href} style={{ fontFamily: P.sans, fontSize: 14, color: n === active ? P.ink : P.ink60, textDecoration: 'none', fontWeight: n === active ? 600 : 400, padding: '8px 14px', borderRadius: 8, background: n === active ? P.ink08 : 'transparent', border: n === active ? `1px solid ${P.ink15}` : '1px solid transparent' }}>{n}</a>
            ))}
          </nav>
        )}
        {!isMobile && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginLeft: 'auto' }}>
            {user ? (<>
              <a href="account.html" style={{ fontFamily: P.sans, fontSize: 13, color: P.ink60, textDecoration: 'none' }}>{user.firstName || user.emailAddresses?.[0]?.emailAddress?.split('@')[0]}</a>
              <PBtn size="sm" onClick={signOut}>Sign out</PBtn>
            </>) : (<>
              <a href="javascript:void(0)" onClick={signIn} style={{ fontFamily: P.sans, fontSize: 13, color: P.ink60, textDecoration: 'none', cursor: 'pointer', padding: '8px 4px' }}>Sign in</a>
              <PBtn primary size="sm" onClick={signUp}>Start free →</PBtn>
            </>)}
          </div>
        )}
        {isMobile && <button onClick={() => setOpen(o => !o)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '6px 8px', color: P.ink, fontSize: 20, lineHeight: 1 }}>{open ? '✕' : '☰'}</button>}
      </div>
      {isMobile && open && (
        <div style={{ borderTop: `1px solid ${P.ink15}`, background: P.paper, padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 2 }}>
          {/* Home */}
          <a href="index.html" style={{ fontFamily: P.sans, fontSize: 15, color: active === 'Home' ? P.ink : P.ink60, textDecoration: 'none', fontWeight: active === 'Home' ? 500 : 400, padding: '10px 8px', borderRadius: 6, background: active === 'Home' ? P.ink08 : 'transparent' }}>Home</a>
          {/* Demo section */}
          <div style={{ padding: '8px 0 4px' }}>
            <div style={{ fontFamily: P.mono, fontSize: 10, letterSpacing: 0.5, color: P.ink40, padding: '0 8px 6px' }}>Demo</div>
            <div style={{ display: 'flex', border: `1px solid ${P.ink15}`, borderRadius: 8, overflow: 'hidden', background: demoActive ? P.ink08 : 'transparent' }}>
              <a href="demo.html" style={{ fontFamily: P.sans, fontSize: 15, fontWeight: 600, color: P.ink, textDecoration: 'none', padding: '10px 16px', flex: 1 }}>Ring Builder</a>
              <div style={{ width: 1, background: P.ink15, flexShrink: 0 }} />
              <a href="demo.html?product=jewel-shots" style={{ fontFamily: P.sans, fontSize: 15, fontWeight: 600, color: P.ink, textDecoration: 'none', padding: '10px 16px', flex: 1 }}>Jewel Shots</a>
            </div>
          </div>
          {links.map(([n, href]) => (
            <a key={n} href={href} style={{ fontFamily: P.sans, fontSize: 15, color: n === active ? P.ink : P.ink60, textDecoration: 'none', fontWeight: n === active ? 500 : 400, padding: '10px 8px', borderRadius: 6, background: n === active ? P.ink08 : 'transparent' }}>{n}</a>
          ))}
          <div style={{ borderTop: `1px solid ${P.ink08}`, paddingTop: 12, marginTop: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {user ? (<>
              <a href="account.html" style={{ fontFamily: P.sans, fontSize: 14, color: P.ink60, padding: '8px 8px', textDecoration: 'none' }}>{user.firstName || user.emailAddresses?.[0]?.emailAddress?.split('@')[0]}</a>
              <PBtn primary style={{ justifyContent: 'center' }} onClick={signOut}>Sign out</PBtn>
            </>) : (<>
              <a href="javascript:void(0)" onClick={signIn} style={{ fontFamily: P.sans, fontSize: 14, color: P.ink60, textDecoration: 'none', padding: '8px 8px', cursor: 'pointer' }}>Sign in</a>
              <PBtn primary style={{ justifyContent: 'center' }} onClick={signUp}>Start free →</PBtn>
            </>)}
          </div>
        </div>
      )}
    </div>
  );
}

function PFooter() {
  const cols = [
    ['Product',   ['Builder','3D engine','Shopify app','Changelog']],
    ['Solutions', ['Bridal','Fine jewelry','Lab-grown','Multi-store','Headless']],
    ['Resources', ['Docs','Quickstart','Recipes','Status','Support']],
    ['Company',   ['About','Customers','Pricing','Privacy','Contact']],
  ];
  const { isMobile } = useBreakpoint();
  const linkMap = { Privacy: 'privacy.html', About: 'about.html', Customers: 'customers.html', Pricing: 'pricing.html', Docs: 'docs.html' };
  return (
    <footer style={{ background: P.ink, color: P.paper, padding: isMobile ? '40px 16px 24px' : '64px 40px 32px' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : '1.5fr repeat(4, 1fr)', gap: isMobile ? 24 : 40, marginBottom: isMobile ? 32 : 48 }}>
          <div style={{ gridColumn: isMobile ? '1 / -1' : 'auto' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <PMark size={22} dark />
              <span style={{ fontFamily: P.sans, fontWeight: 600, fontSize: 17 }}>Ring Facet</span>
            </div>
            <p style={{ fontFamily: P.sans, fontSize: 13, color: 'rgba(245,245,244,0.6)', lineHeight: 1.6, maxWidth: 280, margin: 0 }}>Configurator infrastructure for jewelry commerce. Shopify-native, headless-ready, production-tested at scale.</p>
            <div style={{ display: 'flex', gap: 8, marginTop: 20 }}>
              {['SOC 2', 'GDPR', '99.95% SLA'].map(b => (
                <span key={b} style={{ fontFamily: P.mono, fontSize: 10.5, padding: '4px 8px', border: '1px solid rgba(245,245,244,0.18)', borderRadius: 4, color: 'rgba(245,245,244,0.7)' }}>{b}</span>
              ))}
            </div>
          </div>
          {cols.map(([title, items]) => (
            <div key={title}>
              <div style={{ fontFamily: P.mono, fontSize: 10.5, color: 'rgba(245,245,244,0.45)', marginBottom: 14, letterSpacing: 0.5 }}>{title.toLowerCase()}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 9 }}>
                {items.map(item => (
                  <li key={item} style={{ fontFamily: P.sans, fontSize: 13, color: 'rgba(245,245,244,0.78)' }}>
                    {linkMap[item] ? <a href={linkMap[item]} style={{ color: 'rgba(245,245,244,0.78)', textDecoration: 'none' }}>{item}</a> : item}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', gap: isMobile ? 8 : 0, paddingTop: 24, borderTop: '1px solid rgba(245,245,244,0.12)' }}>
          <PMono style={{ color: 'rgba(245,245,244,0.45)' }}>© 2026 Ringfacet, Inc. · All builds reserved.</PMono>
          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
            <div style={{ width: 6, height: 6, borderRadius: 3, background: '#22C55E' }} />
            <PMono style={{ color: 'rgba(245,245,244,0.6)' }}>All systems operational</PMono>
          </div>
        </div>
      </div>
    </footer>
  );
}