// menove-final.jsx, the locked Menovē brand applied to the home screen.
// Plum #700665 (voice) × Aubergine #451B4F (room) × Iris #BCABF1 (light).
// Day stones: aubergine tonal ramp · Evening stones: iris ramp.
// Type: Marcellus display · Albert Sans text · Inter Thin wordmark.
// Exports: FinalScreen, FB

const FB = {
  plum: '#700665', aub: '#451B4F', iris: '#BCABF1',
  paper: '#FAF9F6', ink: '#2A2530', soft: '#8B8591', body: '#564F5E', line: 'rgba(42,37,48,.10)',
  lineEve: 'rgba(255,255,255,.14)', softEve: 'rgba(255,255,255,.55)', bodyEve: 'rgba(255,255,255,.78)',
  display: "'Marcellus', serif",
  sans: "'Albert Sans', sans-serif",
  day: {
    bright: { main: '#C3A5C9', deep: '#7E5189', wash: '#F7F2F8' },
    steady: { main: '#986EA2', deep: '#6B3F77', wash: '#F6EFF7' },
    tender: { main: '#73477D', deep: '#542C60', wash: '#F5EEF6' },
    heavy:  { main: '#3F2B51', deep: '#3F2B51', wash: '#F2EDF4' },
  },
  eve: {
    bright: { main: '#D3CAF5' },
    steady: { main: '#BCABF1' },
    tender: { main: '#9E88DA' },
    heavy:  { main: '#7E65BB' },
  },
};

const FB_COPY = {
  day: {
    bright: { read: <span>Your clearest day this week, <b>sleep reached seven hours</b>. Enjoy it.</span>, action: 'Reflect on today' },
    steady: { read: <span>Quieter than last week, <b>you reported less fog on the days you walked</b>.</span>, action: 'Reflect on today' },
    tender: { read: <span>A wobblier afternoon, <b>the flashes returned around three</b>. Be soft tonight.</span>, action: 'Reflect on today' },
    heavy:  { read: <span>Today asked a lot of you. <b>Nothing to fix tonight</b>, rest is the plan.</span>, action: 'Close the day gently' },
  },
  eve: {
    bright: { read: <span>Seven hours of sleep, a clear head all day. <b>Set this one down gently.</b></span>, action: 'Close the day' },
    steady: { read: <span>A good walk, a quiet afternoon. <b>Nothing to fix tonight.</b></span>, action: 'Close the day' },
    tender: { read: <span>The flashes came at three and passed. <b>You met them softly.</b></span>, action: 'Close the day' },
    heavy:  { read: <span>Today asked a lot. It's set down now, <b>rest is the plan</b>.</span>, action: 'Close the day gently' },
  },
};

const FB_SHAPES = {
  bright: { w: 108, h: 128, br: '50% 50% 50% 50% / 56% 56% 44% 44%', tilt: 0,  shW: 80,  ampF: 1.2 },
  steady: { w: 138, h: 100, br: '54% 46% 52% 48% / 58% 56% 44% 42%', tilt: 0,  shW: 104, ampF: 1.0 },
  tender: { w: 152, h: 88,  br: '66% 34% 56% 44% / 62% 74% 26% 38%', tilt: -7, shW: 112, ampF: .8 },
  heavy:  { w: 166, h: 78,  br: '58% 42% 56% 44% / 70% 66% 34% 30%', tilt: 0,  shW: 122, ampF: .55 },
};

const FB_LAYERS = [
  { rot: 0,    amp: 2.6,  rDur: 13.0, rDel: -2.0, dDur: 17.0, dDel: -4.1, dx: 2,  dy: -1, scale: 1.000, alpha: .46 },
  { rot: 7.2,  amp: -3.4, rDur: 10.7, rDel: -5.2, dDur: 14.3, dDel: -9.8, dx: -3, dy: 2,  scale: 1.042, alpha: .32 },
  { rot: -5.7, amp: 3.0,  rDur: 11.9, rDel: -8.1, dDur: 15.7, dDel: -2.6, dx: 2,  dy: 2,  scale: 1.024, alpha: .36 },
  { rot: 12.3, amp: -2.2, rDur: 9.3,  rDel: -3.7, dDur: 13.1, dDel: -7.3, dx: -2, dy: -2, scale: 1.072, alpha: .26 },
  { rot: -9.9, amp: 2.9,  rDur: 8.6,  rDel: -6.4, dDur: 16.1, dDel: -1.9, dx: 3,  dy: 1,  scale: 1.054, alpha: .28 },
];

const fbAlpha = (hex, a) => {
  const n = parseInt(hex.slice(1), 16);
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
};

function FBStone({ state, mode }) {
  const s = FB_SHAPES[state];
  const eve = mode === 'eve';
  const c = (eve ? FB.eve : FB.day)[state].main;
  const shade = eve ? 'rgba(40, 18, 56, .5)' : fbAlpha(FB.day[state].deep, .42);
  const glow = eve ? 'rgba(255,255,255,.22)' : 'rgba(255,255,255,.28)';
  return (
    <div style={{ position: 'relative', width: s.w, height: s.h, transform: `rotate(${s.tilt}deg)` }}>
      {FB_LAYERS.map((L, i) => (
        <div key={i} className="st2-drift" style={{
          position: 'absolute', inset: 0,
          '--dx': `${L.dx}px`, '--dy': `${L.dy}px`,
          animationDuration: `${L.dDur}s`, animationDelay: `${L.dDel}s`,
        }}>
          <div className="st2-sway" style={{
            position: 'absolute', inset: 0, borderRadius: s.br,
            background: fbAlpha(c, L.alpha),
            mixBlendMode: eve ? 'normal' : 'multiply',
            '--r0': `${L.rot}deg`, '--rA': `${L.amp * s.ampF}deg`, '--s': L.scale,
            animationDuration: `${L.rDur}s`, animationDelay: `${L.rDel}s`,
          }}></div>
        </div>
      ))}
      {/* form shading on the core silhouette, light falls from above, weight gathers below */}
      <div style={{
        position: 'absolute', inset: 0, borderRadius: s.br, pointerEvents: 'none',
        backgroundImage: `radial-gradient(115% 80% at 50% -22%, ${glow}, transparent 52%), radial-gradient(135% 95% at 50% 122%, ${shade}, transparent 56%)`,
      }}></div>
    </div>
  );
}

function FBEyebrow({ children, color }) {
  return <div style={{ fontSize: 10.5, letterSpacing: '.24em', textTransform: 'uppercase', fontWeight: 700, color, fontFamily: FB.sans }}>{children}</div>;
}

function FBArc({ state, mode, voice }) {
  const eve = mode === 'eve';
  const voiceColor = FB.aub; // day action: aubergine (locked)
  const stc = eve ? FB.eve[state].main : FB.day[state].main;
  const deep = eve ? FB.eve[state].main : FB.day[state].deep;
  const line = eve ? FB.lineEve : FB.line;
  const soft = eve ? FB.softEve : FB.soft;
  const doneBg = eve ? FB.iris : FB.ink;
  const doneFg = eve ? FB.aub : '#fff';
  const steps = eve
    ? [{ label: 'Check in', done: true }, { label: 'Boost', done: true }, { label: 'Reflect', done: true }, { label: 'Insights', current: true }]
    : [{ label: 'Check in', done: true }, { label: 'Boost', done: true }, { label: 'Reflect', current: true }, { label: 'Insights' }];
  return (
    <div style={{ padding: '0 34px', textAlign: 'center' }}>
      <div style={{ position: 'relative', marginBottom: 10 }}>
        <div style={{ position: 'absolute', top: 7, left: '12.5%', right: '12.5%', height: 1, background: line }}></div>
        <div style={{ display: 'flex' }}>
          {steps.map((sp) => (
            <div key={sp.label} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, position: 'relative' }}>
              {sp.done ? (
                <span style={{ width: 15, height: 15, borderRadius: '50%', background: doneBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg viewBox="0 0 24 24" fill="none" stroke={doneFg} strokeWidth="3.4" style={{ width: 8, height: 8 }}><path d="M5 12l5 5L20 6" /></svg>
                </span>
              ) : sp.current ? (
                <span style={{ width: 15, height: 15, borderRadius: '50%', background: stc, boxShadow: `0 0 0 4.5px ${fbAlpha(stc, .22)}` }}></span>
              ) : (
                <span style={{ width: 15, height: 15, borderRadius: '50%', background: 'transparent', boxShadow: `inset 0 0 0 1.5px ${line}` }}></span>
              )}
              <span style={{ fontFamily: FB.sans, fontSize: 9, letterSpacing: '.14em', textTransform: 'uppercase', fontWeight: 700, color: sp.current ? deep : soft, opacity: sp.done || sp.current ? 1 : .55 }}>{sp.label}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{
        display: 'inline-flex', borderRadius: 999, padding: '13px 26px', fontFamily: FB.sans, fontSize: 13.5, fontWeight: 600,
        background: eve ? FB.iris : voiceColor, color: eve ? FB.aub : '#fff',
        boxShadow: eve ? 'none' : '0 14px 28px -16px rgba(40,8,40,.5)',
      }}>{FB_COPY[mode][state].action}</div>
    </div>
  );
}

function FBTonight({ state, mode }) {
  const eve = mode === 'eve';
  const line = eve ? FB.lineEve : FB.line;
  const soft = eve ? FB.softEve : FB.soft;
  const ink = eve ? '#fff' : FB.ink;
  const rows = state === 'heavy'
    ? [{ done: false, tt: 'Rest counts as care', rsn: 'No tasks tonight' }, { done: false, tt: 'Magnesium, after dinner', rsn: 'If it feels easy' }]
    : eve
      ? [{ done: true, tt: 'A gentle walk', rsn: 'Done · 4:10 PM' }, { done: true, tt: 'Magnesium, after dinner', rsn: 'Done · 8:20 PM' }, { done: false, tt: 'Screens off by 8', rsn: 'Goal · tonight' }]
      : [{ done: true, tt: 'A gentle walk', rsn: 'Less fog reported · 3 of 4 walks' }, { done: false, tt: 'Magnesium, after dinner', rsn: 'Trying · day 6 of 10' }, { done: false, tt: 'Screens off by 8', rsn: 'Goal · 4 of 6 evenings' }];
  return (
    <div style={{ padding: '0 26px', fontFamily: FB.sans }}>
      <FBEyebrow color={soft}>Boosts</FBEyebrow>
      <div style={{ marginTop: 10 }}>
        {rows.map((r, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '9px 0', borderTop: `1px solid ${line}` }}>
            <span style={{
              width: 20, height: 16, flex: 'none',
              borderRadius: i % 2 ? '66% 34% 56% 44% / 62% 74% 26% 38%' : '54% 46% 52% 48% / 58% 56% 44% 42%',
              transform: `rotate(${i % 2 ? 8 : -6}deg)`,
              background: r.done ? (eve ? FB.iris : FB.ink) : 'transparent',
              boxShadow: r.done ? 'none' : `inset 0 0 0 1.5px ${soft}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              {r.done ? <svg viewBox="0 0 24 24" fill="none" stroke={eve ? FB.aub : '#fff'} strokeWidth="3" style={{ width: 10, height: 10, transform: `rotate(${i % 2 ? -8 : 6}deg)` }}><path d="M5 12l5 5L20 6" /></svg> : null}
            </span>
            <div style={{ flex: 1, fontSize: 13.5, fontWeight: 600, color: r.done ? soft : ink, textDecoration: r.done ? 'line-through' : 'none', textDecorationColor: eve ? 'rgba(255,255,255,.3)' : 'rgba(0,0,0,.22)' }}>{r.tt}</div>
            <div style={{ fontSize: 10.5, fontWeight: 600, color: soft, textAlign: 'right', flex: 'none' }}>{r.rsn}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function FBMonaBar({ mode, voice }) {
  const eve = mode === 'eve';
  const micColor = FB.aub; // day mic: aubergine (locked)
  return (
    <div style={{ padding: '10px 18px 6px', fontFamily: FB.sans }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10, borderRadius: 999, padding: '8px 8px 8px 18px',
        background: eve ? 'rgba(255,255,255,.07)' : '#fff',
        boxShadow: eve ? `inset 0 0 0 1px ${FB.lineEve}` : `inset 0 0 0 1px ${FB.line}, 0 12px 28px -22px rgba(35,20,45,.45)`,
      }}>
        <div style={{ flex: 1, fontSize: 13, color: eve ? FB.softEve : FB.soft }}>Tell Mona about your day…</div>
        <div style={{ width: 34, height: 34, borderRadius: '50%', background: eve ? FB.iris : micColor, display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
          <svg viewBox="0 0 24 24" fill="none" stroke={eve ? FB.aub : '#fff'} strokeWidth="1.9" style={{ width: 15, height: 15 }}><rect x="9" y="3" width="6" height="11" rx="3" /><path d="M5 11a7 7 0 0 0 14 0M12 18v3" /></svg>
        </div>
      </div>
    </div>
  );
}

function FBNav({ mode }) {
  const eve = mode === 'eve';
  const on = eve ? FB.iris : FB.aub; // day nav highlight: aubergine (locked)
  const off = eve ? 'rgba(255,255,255,.42)' : FB.soft;
  const items = [
    { l: 'Today', on: true, d: <path d="M3 11l9-8 9 8M5 10v10h14V10" /> },
    { l: 'Track', d: <path d="M4 19V5M4 19h16M8 16l4-5 3 3 5-7" /> },
    { l: 'Patterns', d: <g><circle cx="6.5" cy="16.5" r="2" /><circle cx="12" cy="7.5" r="2" /><circle cx="17.5" cy="13.5" r="2" /><path d="M7.6 14.8l3.3-5.4M13.6 8.9l2.7 3.1" /></g> },
    { l: 'Circle', d: <g><circle cx="9" cy="8" r="3" /><path d="M3 20c0-3 3-5 6-5s6 2 6 5" /></g> },
  ];
  return (
    <div style={{ display: 'flex', justifyContent: 'space-around', padding: '4px 12px 18px', fontFamily: FB.sans }}>
      {items.map((it) => (
        <div key={it.l} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, fontSize: 9.5, fontWeight: 700, width: 56, color: it.on ? on : off }}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" style={{ width: 20, height: 20 }}>{it.d}</svg>
          {it.l}
        </div>
      ))}
    </div>
  );
}

function FinalScreen({ state, mode, voice }) {
  const eve = mode === 'eve';
  const st = (eve ? FB.eve : FB.day)[state];
  const s = FB_SHAPES[state];
  const ink = eve ? '#fff' : FB.ink;
  const soft = eve ? FB.softEve : FB.soft;
  const line = eve ? FB.lineEve : FB.line;
  const stateColor = eve ? st.main : FB.day[state].deep;
  return (
    <div data-screen-label={`Final · ${mode} · ${state}`} style={{
      width: '100%', height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden',
      background: eve ? FB.aub : FB.paper, color: ink, fontFamily: FB.sans, position: 'relative',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '16px 26px 0', fontSize: 12.5, fontWeight: 600 }}>
        <span>9:41</span><span>5G · 76</span>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 22px 0' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap' }}>
          Tue, Jun 9
          <svg viewBox="0 0 24 24" fill="none" stroke={soft} strokeWidth="2.4" style={{ width: 11, height: 11 }}><path d="M6 9l6 6 6-6" /></svg>
        </span>
        <span style={{
          width: 34, height: 34, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 11, fontWeight: 700, letterSpacing: '.04em',
          background: eve ? 'rgba(255,255,255,.1)' : '#fff', color: ink,
          boxShadow: `inset 0 0 0 1px ${line}`,
        }}>AD</span>
      </div>
      <div style={{ padding: '12px 26px 0' }}>
        <div style={{ fontFamily: FB.display, fontSize: 22, fontWeight: 400, letterSpacing: '.005em' }}>{eve ? 'Good evening, Aujéna' : 'Good afternoon, Aujéna'}</div>
        <div style={{ fontSize: 12, fontWeight: 500, marginTop: 4, color: soft }}>{eve ? 'Day 12 is set down' : 'Day 12 with Mona'}</div>
        <div style={{ fontStyle: 'italic', fontSize: 13, lineHeight: 1.55, marginTop: 4, color: eve ? FB.bodyEve : FB.body, maxWidth: 280 }}>“Noticing is its own kind of strength.”</div>
      </div>
      <div style={{ flex: 1, minHeight: 12 }} />
      <div data-share-card style={{ position: 'relative' }}>
        <div style={{ textAlign: 'center' }}>
          <FBEyebrow color={soft}>{eve ? 'The shape of today, set down' : 'The shape of today'}</FBEyebrow>
        </div>
        <span style={{ position: 'absolute', right: 26, top: -3, color: soft }} aria-label="Share today's stone">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" style={{ width: 16, height: 16 }}><path d="M12 3v12M8 6.5L12 3l4 3.5" /><path d="M5 12v7a1.5 1.5 0 0 0 1.5 1.5h11A1.5 1.5 0 0 0 19 19v-7" /></svg>
        </span>
        <div style={{ textAlign: 'center' }}>
          <div style={{ height: 140, position: 'relative', marginTop: 8 }}>
            <div style={{ position: 'absolute', left: '50%', top: '46%', transform: 'translate(-50%, -50%)' }}>
              <FBStone state={state} mode={mode} />
            </div>
            <div style={{
              position: 'absolute', left: '50%', bottom: 0, transform: 'translateX(-50%)',
              width: s.shW, height: 12, borderRadius: '50%',
              background: eve ? '#1F0E2A' : FB.day[state].deep,
              opacity: eve ? .45 : .14, filter: 'blur(12px)',
            }}></div>
          </div>
          <div style={{ width: 180, height: 1, background: line, margin: '8px auto 0' }}></div>
          <div style={{ fontSize: 12, letterSpacing: '.3em', textTransform: 'uppercase', fontWeight: 700, color: stateColor, marginTop: 10 }}>{state}</div>
        </div>
        <div style={{ height: 14 }} />
        <div style={{ padding: '0 30px', textAlign: 'center' }}>
          <div style={{ fontSize: 14.5, lineHeight: 1.62, color: eve ? FB.bodyEve : FB.body, maxWidth: 290, margin: '0 auto' }}>{FB_COPY[mode][state].read}</div>
        </div>
      </div>
      <div style={{ textAlign: 'center', marginTop: 8 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 600, color: soft }}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" style={{ width: 12, height: 12 }}><circle cx="12" cy="12" r="9" /><path d="M12 8v5M12 16.5v.5" /></svg>
          Why Mona thinks this
        </span>
      </div>
      <div style={{ height: 36, flexShrink: 0 }} />
      <FBArc state={state} mode={mode} voice={voice} />
      <div style={{ textAlign: 'center', marginTop: 6 }}>
        <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.06em', color: soft }}>18 stones to your first report</span>
      </div>
      <div style={{ flex: 1.2, minHeight: 14 }} />
      <FBTonight state={state} mode={mode} />
      <div style={{ height: 6 }} />
      <FBMonaBar mode={mode} voice={voice} />
      <FBNav mode={mode} voice={voice} />
    </div>
  );
}

// the shareable stone card, the region from "The shape of today" through the insight,
// composed for export/social with the wordmark as sign-off
function ShareCard({ state, mode }) {
  const eve = mode === 'eve';
  const st = (eve ? FB.eve : FB.day)[state];
  const s = FB_SHAPES[state];
  const soft = eve ? FB.softEve : FB.soft;
  const line = eve ? FB.lineEve : FB.line;
  const stateColor = eve ? st.main : FB.day[state].deep;
  return (
    <div style={{
      width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center',
      background: eve ? FB.aub : FB.paper, color: eve ? '#fff' : FB.ink, fontFamily: FB.sans,
      padding: '34px 30px 26px', boxSizing: 'border-box', textAlign: 'center',
    }}>
      <FBEyebrow color={soft}>{eve ? 'The shape of today, set down' : 'The shape of today'}</FBEyebrow>
      <div style={{ height: 168, position: 'relative', marginTop: 10 }}>
        <div style={{ position: 'absolute', left: '50%', top: '46%', transform: 'translate(-50%, -50%)' }}>
          <FBStone state={state} mode={mode} />
        </div>
        <div style={{
          position: 'absolute', left: '50%', bottom: 0, transform: 'translateX(-50%)',
          width: s.shW, height: 12, borderRadius: '50%',
          background: eve ? '#1F0E2A' : FB.day[state].deep,
          opacity: eve ? .45 : .14, filter: 'blur(12px)',
        }}></div>
      </div>
      <div style={{ width: 180, height: 1, background: line, margin: '10px auto 0' }}></div>
      <div style={{ fontSize: 12, letterSpacing: '.3em', textTransform: 'uppercase', fontWeight: 700, color: stateColor, marginTop: 16 }}>{state}</div>
      <div style={{ fontSize: 14, lineHeight: 1.6, color: eve ? FB.bodyEve : FB.body, maxWidth: 280, margin: '14px auto 0' }}>{FB_COPY[mode][state].read}</div>
      <div style={{ marginTop: 'auto', paddingTop: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10 }}>
        <span style={{ fontFamily: "'Inter', sans-serif", fontWeight: 300, fontSize: 10.5, letterSpacing: '.34em', marginRight: '-.34em', color: eve ? FB.iris : FB.plum }}>MENOVĒ</span>
      </div>
    </div>
  );
}

Object.assign(window, { FB, FinalScreen, ShareCard, FBStone, FB_SHAPES, FBEyebrow });