// menove-site-shared.jsx, shared system for the menove.app redesign.
// Locked register: stones, evidence, reported-language, no streaks, no scores.
// Depends on menove-final.jsx (FB, FinalScreen), menove-circle.jsx (fbTint),
// menove-track.jsx (TK_SHAPES, TrackHome), menove-patterns.jsx (PatternsHome).

/* ---------- primitives ---------- */

function SiteWordmark({ color = FB.ink, size = 15 }) {
  return (
    <span style={{ fontFamily: "'Inter', sans-serif", fontWeight: 300, fontSize: size, letterSpacing: '.34em', marginRight: '-.34em', color, whiteSpace: 'nowrap' }}>MENOVĒ</span>
  );
}

/* a static brand stone, light DOM, no animation layers */
function SiteStone({ state = 'steady', w = 120, h = 84, eve, style }) {
  const shapes = {
    bright: '50% 50% 50% 50% / 56% 56% 44% 44%',
    steady: '54% 46% 52% 48% / 58% 56% 44% 42%',
    tender: '66% 34% 56% 44% / 62% 74% 26% 38%',
    heavy: '58% 42% 56% 44% / 70% 66% 34% 30%',
  };
  const c = (eve ? FB.eve : FB.day)[state].main;
  const deep = eve ? 'rgba(40,18,56,.5)' : fbTint(FB.day[state].deep, .42);
  return (
    <div style={{ width: w, height: h, borderRadius: shapes[state], background: c, position: 'relative', overflow: 'hidden', transform: state === 'tender' ? 'rotate(-6deg)' : 'none', ...style }}>
      <div style={{ position: 'absolute', inset: 0, borderRadius: shapes[state], backgroundImage: `radial-gradient(115% 80% at 50% -22%, rgba(255,255,255,.3), transparent 52%), radial-gradient(135% 95% at 50% 122%, ${deep}, transparent 56%)` }}></div>
    </div>
  );
}

/* the four day-shapes, labeled */
function SiteStoneRow({ size = 1, gap = 36, eve }) {
  return (
    <div style={{ display: 'flex', gap, alignItems: 'flex-end' }}>
      {[['bright', 64, 76], ['steady', 86, 62], ['tender', 94, 54], ['heavy', 102, 48]].map(([s, w, h]) => (
        <div key={s} style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
          <SiteStone state={s} w={w * size} h={h * size} eve={eve} />
          <span style={{ fontSize: 11, letterSpacing: '.26em', textTransform: 'uppercase', fontWeight: 700, color: eve ? (FB.eve[s].main) : FB.day[s].deep, fontFamily: FB.sans }}>{s}</span>
        </div>
      ))}
    </div>
  );
}

/* photography, generated imagery when src is set, annotated placeholder otherwise */
function SitePhoto({ label, h = 420, r = 0, src, pos = 'center', style }) {
  return (
    <div style={{
      height: h, borderRadius: r, position: 'relative', overflow: 'hidden',
      background: 'repeating-linear-gradient(45deg, #EFEAF3, #EFEAF3 12px, #E8E1EF 12px, #E8E1EF 24px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', ...style,
    }}>
      {src ? (
        <img src={src} alt={label} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: pos, display: 'block' }} />
      ) : (
        <span style={{ fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 12, color: FB.aub, opacity: .75, background: 'rgba(250,249,246,.85)', padding: '7px 14px', borderRadius: 8 }}>{label}</span>
      )}
    </div>
  );
}

/* a phone running the real app mocks */
function SitePhone({ scale = .56, children, style }) {
  const W = 390 * scale, H = 844 * scale;
  return (
    <div style={{ width: W, height: H, position: 'relative', flex: 'none', ...style }}>
      <div style={{
        width: 390, height: 844, transform: `scale(${scale})`, transformOrigin: 'top left',
        borderRadius: 48, overflow: 'hidden', position: 'absolute', top: 0, left: 0,
        boxShadow: '0 60px 110px -50px rgba(31,14,42,.55), inset 0 0 0 1px rgba(42,37,48,.1)',
      }}>{children}</div>
    </div>
  );
}

function SiteCTA({ children = 'Request beta access', ghost, eve, small }) {
  if (ghost) {
    return <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: FB.sans, fontSize: small ? 13 : 14.5, fontWeight: 700, color: eve ? FB.iris : FB.aub, borderBottom: `1.5px solid ${eve ? fbTint(FB.iris, .5) : fbTint(FB.aub, .35)}`, paddingBottom: 2, whiteSpace: 'nowrap' }}>{children}</span>;
  }
  return (
    <span style={{
      display: 'inline-flex', borderRadius: 999, padding: small ? '12px 26px' : '16px 34px',
      fontFamily: FB.sans, fontSize: small ? 13 : 14.5, fontWeight: 600,
      background: eve ? FB.iris : FB.aub, color: eve ? FB.aub : '#fff',
      boxShadow: eve ? 'none' : '0 18px 36px -18px rgba(40,8,40,.55)', whiteSpace: 'nowrap',
    }}>{children}</span>
  );
}

function SiteChips({ eve, items = ['Private by design', 'Wellness, not medical advice', 'iOS · beta'] }) {
  return (
    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
      {items.map((c) => (
        <span key={c} style={{ fontFamily: FB.sans, fontSize: 11, fontWeight: 700, letterSpacing: '.04em', color: eve ? FB.softEve : FB.soft, boxShadow: `inset 0 0 0 1px ${eve ? FB.lineEve : FB.line}`, borderRadius: 999, padding: '6px 13px', whiteSpace: 'nowrap' }}>{c}</span>
      ))}
    </div>
  );
}

/* ---------- nav / footer / beta ---------- */

function SiteNav({ eve, mobile, pad = 64 }) {
  const ink = eve ? '#fff' : FB.ink;
  const links = ['The approach', 'The app', 'The Circle', 'Resources'];
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: mobile ? '22px 24px' : `28px ${pad}px`, fontFamily: FB.sans, flex: 'none' }}>
      <SiteWordmark color={ink} size={mobile ? 14 : 16} />
      {mobile ? (
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <SiteCTA small>Beta</SiteCTA>
          <svg viewBox="0 0 24 24" fill="none" stroke={ink} strokeWidth="1.8" style={{ width: 22, height: 22 }}><path d="M4 7h16M4 12h16M4 17h16" /></svg>
        </div>
      ) : (
        <div style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
          {links.map((l) => <span key={l} style={{ fontSize: 13.5, fontWeight: 600, color: eve ? FB.bodyEve : FB.body }}>{l}</span>)}
          <SiteCTA small>Request beta access</SiteCTA>
        </div>
      )}
    </div>
  );
}

function SiteBeta({ mobile, eve }) {
  return (
    <div style={{ textAlign: 'center', padding: mobile ? '72px 28px' : '110px 64px', fontFamily: FB.sans }}>
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 26 }}>
        <svg viewBox="0 0 64 64" fill="none" style={{ width: 46 }}>
          <path d="M24.5 21.5 C24.8 18.4 27.9 16.2 32.4 16.3 C36.7 16.4 39.6 18.7 39.9 21.8 C39.6 24.9 36.6 26.9 32.2 26.8 C28 26.7 24.9 24.6 24.5 21.5 Z" fill={eve ? FB.iris : FB.aub} />
          <path d="M19.5 35 C20 30.5 25 27.8 31.6 28 C38.5 28.2 44.1 31 44.5 35.4 C44.1 39.8 38.5 42.4 31.6 42.2 C25 42 19.9 39.4 19.5 35 Z" fill={eve ? FB.iris : FB.aub} />
          <path d="M14 50 C15 44.5 22 41.5 32 41.8 C42 42.1 49.5 45.5 50 51 C49.5 56.5 42 59.5 32 59.4 C22 59.3 14.5 55.5 14 50 Z" fill={eve ? FB.iris : FB.aub} />
        </svg>
      </div>
      <div style={{ fontFamily: FB.display, fontSize: mobile ? 32 : 46, lineHeight: 1.18, color: eve ? '#fff' : FB.ink, maxWidth: 620, margin: '0 auto' }}>The trail starts with one stone.</div>
      <div style={{ fontSize: mobile ? 14.5 : 16, lineHeight: 1.65, color: eve ? FB.bodyEve : FB.body, maxWidth: 440, margin: '18px auto 0' }}>
        The beta is free, and places are limited each month. Leave your email, we'll write when yours opens.
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', gap: 10, marginTop: 30, flexWrap: 'wrap' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', width: mobile ? 200 : 280, borderRadius: 999, padding: '15px 22px', fontSize: 13.5, color: eve ? FB.softEve : FB.soft, background: eve ? 'rgba(255,255,255,.07)' : '#fff', boxShadow: `inset 0 0 0 1px ${eve ? FB.lineEve : FB.line}`, textAlign: 'left' }}>you@example.com</span>
        <SiteCTA eve={eve}>Request beta access</SiteCTA>
      </div>
      <div style={{ fontSize: 11.5, fontWeight: 600, color: eve ? FB.softEve : FB.soft, marginTop: 18 }}>iOS · TestFlight · no spam, ever</div>
    </div>
  );
}

function SiteFooter({ mobile, eve }) {
  const soft = eve ? FB.softEve : FB.soft;
  const cols = [
    ['Product', ['The app', 'Assessment', 'Resources', 'Beta access']],
    ['Company', ['Partners', 'Contact', 'Instagram', 'TikTok']],
    ['Legal', ['Privacy', 'Terms', 'Cookies']],
  ];
  return (
    <div style={{ borderTop: `1px solid ${eve ? FB.lineEve : FB.line}`, padding: mobile ? '44px 28px 40px' : `64px 64px 56px`, fontFamily: FB.sans }}>
      <div style={{ display: 'flex', flexDirection: mobile ? 'column' : 'row', gap: mobile ? 36 : 0, justifyContent: 'space-between' }}>
        <div style={{ maxWidth: 260 }}>
          <SiteWordmark color={eve ? '#fff' : FB.ink} size={14} />
          <div style={{ fontSize: 12.5, lineHeight: 1.6, color: soft, marginTop: 14 }}>A quiet companion for the years of change.</div>
        </div>
        <div style={{ display: 'flex', gap: mobile ? 44 : 80, flexWrap: 'wrap' }}>
          {cols.map(([tt, links]) => (
            <div key={tt}>
              <div style={{ fontSize: 10.5, letterSpacing: '.2em', textTransform: 'uppercase', fontWeight: 700, color: soft, marginBottom: 12 }}>{tt}</div>
              {links.map((l) => <div key={l} style={{ fontSize: 13, fontWeight: 600, color: eve ? FB.bodyEve : FB.body, marginBottom: 9 }}>{l}</div>)}
            </div>
          ))}
        </div>
      </div>
      <div style={{ fontSize: 11.5, color: soft, marginTop: mobile ? 36 : 56, display: 'flex', flexDirection: mobile ? 'column' : 'row', gap: 8, justifyContent: 'space-between' }}>
        <span>© 2026 Menovē · For wellness only. Not medical advice.</span>
        <span>Made with care for women 35–65</span>
      </div>
    </div>
  );
}

/* ---------- the trust block, three promises ---------- */

const SITE_PROMISES = [
  {
    tt: 'Reported, never diagnosed',
    body: 'Every pattern cites its receipts, “you reported less fog on 3 of 4 walking days”, and we never claim cause. Observations, with evidence, in your own words.',
  },
  {
    tt: 'Private by design',
    body: 'End-to-end encrypted, no advertising SDKs, one-tap export and delete. In the Circle, anonymous means anonymous, untraceable, even by us.',
  },
  {
    tt: 'Never scored',
    body: 'No streaks, no grades, no guilt. A missed day is a quiet outline on the trail, it holds your place and says nothing at all.',
  },
];

function SitePromises({ mobile, eve }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: mobile ? 28 : 48, fontFamily: FB.sans }}>
      {SITE_PROMISES.map((p, i) => (
        <div key={p.tt}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
            <span style={{ width: 18, height: 13, borderRadius: TK_SHAPES[i % 4], transform: `rotate(${i % 2 ? -6 : 5}deg)`, background: eve ? FB.iris : FB.aub }}></span>
            <span style={{ fontFamily: FB.display, fontSize: 19, color: eve ? '#fff' : FB.ink }}>{p.tt}</span>
          </div>
          <div style={{ fontSize: 13.5, lineHeight: 1.7, color: eve ? FB.bodyEve : FB.body }}>{p.body}</div>
        </div>
      ))}
    </div>
  );
}

/* ---------- the Mona exchange, as a marketing object ---------- */

function SiteMonaCard({ mobile, eve }) {
  const bubble = (mine) => ({
    fontFamily: FB.sans, fontSize: 14, lineHeight: 1.55, padding: '12px 17px', maxWidth: 320,
    borderRadius: mine ? '18px 18px 5px 18px' : '18px 18px 18px 5px',
    background: mine ? (eve ? FB.iris : FB.aub) : (eve ? 'rgba(255,255,255,.08)' : '#fff'),
    color: mine ? (eve ? FB.aub : '#fff') : (eve ? '#fff' : FB.ink),
    boxShadow: mine ? 'none' : `inset 0 0 0 1px ${eve ? FB.lineEve : FB.line}`,
  });
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
      <div style={bubble(false)}>Morning walk again? That's four this week.</div>
      <div style={{ ...bubble(true), alignSelf: 'flex-end' }}>Couldn't help it. The energy is actually back.</div>
      <div style={bubble(false)}>Each of those mornings started with your smoothie and ended with more energy reported. Keep it up. It's saved to your patterns.</div>
      <div style={{ fontFamily: FB.sans, fontSize: 10.5, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: eve ? FB.softEve : FB.soft, marginTop: 4 }}>Mona · saved to patterns</div>
    </div>
  );
}

Object.assign(window, {
  SiteWordmark, SiteStone, SiteStoneRow, SitePhoto, SitePhone, SiteCTA, SiteChips,
  SiteNav, SiteBeta, SiteFooter, SitePromises, SiteMonaCard, SITE_PROMISES,
});