// menove-site-shared2.jsx, additions for directions 4 & 5:
// video placeholder, the cairn, the why-stones story, the stats band, the FAQ.
// Depends on menove-site-shared.jsx.

/* video, real footage when src is set (poster as reduced-motion fallback), annotated placeholder otherwise */
function SiteVideo({ label, h = 780, src, poster, style }) {
  const reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const [blobUrl, setBlobUrl] = React.useState(null);
  React.useEffect(() => {
    if (!src || reduceMotion) return;
    // The static server ignores Range requests, which stalls Chromium's media
    // pipeline on a plain <video src>. Fetch the whole file and play a blob: URL.
    let url = null, cancelled = false;
    const cache = (window.__siteVideoBlobCache = window.__siteVideoBlobCache || {});
    (cache[src] = cache[src] || fetch(src).then(r => r.blob()).then(b => URL.createObjectURL(b)))
      .then(u => { url = u; if (!cancelled) setBlobUrl(u); })
      .catch(() => {});
    return () => { cancelled = true; };
  }, [src, reduceMotion]);
  return (
    <div style={{
      height: h, position: 'relative', overflow: 'hidden',
      background: 'repeating-linear-gradient(45deg, #3A1845, #3A1845 14px, #41204C 14px, #41204C 28px)',
      ...style,
    }}>
      {src && (
        <img src={poster} alt={label} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      )}
      {src && !reduceMotion && blobUrl && (
        <video src={blobUrl} autoPlay muted loop playsInline
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}></video>
      )}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(31,14,42,.18) 0%, rgba(31,14,42,0) 36%, rgba(31,14,42,.62) 100%)' }}></div>
      {!src && (
        <div style={{ position: 'absolute', left: '50%', top: '44%', transform: 'translate(-50%,-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
          <span style={{ width: 64, height: 64, borderRadius: '50%', background: 'rgba(250,249,246,.14)', boxShadow: 'inset 0 0 0 1.5px rgba(250,249,246,.4)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg viewBox="0 0 24 24" fill="rgba(250,249,246,.9)" style={{ width: 20, marginLeft: 3 }}><path d="M7 4l13 8-13 8z" /></svg>
          </span>
          <span style={{ fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 11.5, color: 'rgba(250,249,246,.75)' }}>{label}</span>
        </div>
      )}
    </div>
  );
}

/* the cairn, three stones, stacked */
function SiteCairn({ size = 1, eve }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 * size }}>
      <SiteStone state="bright" w={74 * size} h={52 * size} eve={eve} />
      <SiteStone state="steady" w={116 * size} h={66 * size} eve={eve} />
      <SiteStone state="heavy" w={158 * size} h={74 * size} eve={eve} />
    </div>
  );
}

/* the why, origin story copy, shared verbatim across directions */
const SITE_WHY = {
  eyebrow: 'Why stones?',
  h: 'On unmapped trails, walkers leave cairns.',
  p1: 'For centuries, on paths without maps, the people ahead stacked stones so the people behind would know: someone passed this way. This is the way through.',
  p2: 'Menopause can run four to eight years, and almost no one is handed a map. So each day you check in, you set a stone down, the shape of that day, kept. Not a score. Not a grade. A marker that you passed this way, and a record of what the path did.',
  p3: 'Thirty of them make a trail. The trail makes a report. The report makes the conversation different.',
};

/* the stats band, canon numbers only (sources pinned for verification) */
const SITE_STATS = [
  { n: '3 in 4', l: 'get no clear answers', s: 'of women report leaving appointments without clear answers about their symptoms.' },
  { n: '4–8 yrs', l: 'the transition can run', s: 'long enough for real patterns to form, and far too long to hold in memory.' },
  { n: '12 min', l: 'the average appointment', s: 'better spent pointing at a record than reconstructing a year from recall.' },
];

function SiteStats({ mobile, eve }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: mobile ? 34 : 64, fontFamily: FB.sans }}>
      {SITE_STATS.map((st) => (
        <div key={st.n}>
          <div style={{ fontFamily: FB.display, fontSize: mobile ? 46 : 60, lineHeight: 1, color: eve ? FB.iris : FB.aub }}>{st.n}</div>
          <div style={{ fontSize: 12, letterSpacing: '.18em', textTransform: 'uppercase', fontWeight: 700, color: eve ? '#fff' : FB.ink, marginTop: 12 }}>{st.l}</div>
          <div style={{ fontSize: 13, lineHeight: 1.65, color: eve ? FB.bodyEve : FB.body, marginTop: 8, maxWidth: 300 }}>{st.s}</div>
        </div>
      ))}
    </div>
  );
}

/* the FAQ, rewritten for the new product, first row open */
const SITE_FAQ = [
  {
    q: 'Is Menovē medical advice?',
    a: 'No. Menovē is a wellness companion. It keeps your record and surfaces patterns observable in what you\u2019ve reported, it never diagnoses, treats, or replaces professional care. We built it so the conversation with your care team gets better, not so you\u2019d skip it.',
  },
  { q: 'What exactly is a stone?', a: 'A day, kept. Each check-in takes about ten seconds and gives the day a shape, bright, steady, tender, or heavy, plus whatever signs you mark. Sleep and steps arrive on their own from Health, labeled as such.' },
  { q: 'What happens if I miss days?', a: 'A quiet outline holds the day\u2019s place on your trail. No streaks, nothing breaks, and Mona says nothing at all.' },
  { q: 'How anonymous is the Circle, really?', a: 'Completely. An anonymous post wears a stone instead of your name, no profile link, no trace back to you in the thread. Not even by us.' },
  { q: 'Is there a cost?', a: 'The beta is free. Later, Menovē Plus opens challenges and the patterns room; your daily check-in, your trail, and all safety content stay free, always.' },
  { q: 'When\u2019s Android?', a: 'After the iOS beta has taught us enough. Join the waitlist and we\u2019ll write when it\u2019s close.' },
];

function SiteFAQ({ mobile, open = 0 }) {
  return (
    <div style={{ fontFamily: FB.sans }}>
      {SITE_FAQ.map((f, i) => (
        <div key={f.q} style={{ borderTop: `1px solid ${FB.line}`, padding: mobile ? '18px 0' : '24px 0' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 20 }}>
            <span style={{ fontFamily: FB.display, fontSize: mobile ? 17 : 21, color: FB.ink }}>{f.q}</span>
            <svg viewBox="0 0 24 24" fill="none" stroke={FB.soft} strokeWidth="2" style={{ width: 14, height: 14, flex: 'none', transform: i === open ? 'rotate(45deg)' : 'none' }}><path d="M12 5v14M5 12h14" /></svg>
          </div>
          {i === open ? (
            <p style={{ fontSize: mobile ? 13.5 : 14.5, lineHeight: 1.75, color: FB.body, margin: '12px 0 0', maxWidth: 640 }}>{f.a}</p>
          ) : null}
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { SiteVideo, SiteCairn, SITE_WHY, SITE_STATS, SiteStats, SITE_FAQ, SiteFAQ });