// "Time back" — emotional banner. Painted in WARM CREAM so it lands as the
// sunrise after Pain's dark "this is eating your week" beat. Two slow
// marquees of life-moment cards drift behind a large centred headline.

const timeBackStyles = {
  wrap: {
    position: 'relative',
    // Transparent — bg + pinstripes painted by the shared parent in app.jsx.
    background: 'transparent',
    color: '#fff',
    // Top padding tuned to match the gap ABOVE the Pain chip cloud:
    // tail margin-bottom (48px) + cloud mask fade-in (~36px) ≈ 84px.
    // Below the cloud we get mask fade-out (~36px) + this padding, so 48px
    // keeps the visual rhythm symmetric on either side of the pills.
    padding: '48px 0 var(--section-y)',
    overflow: 'hidden',
    isolation: 'isolate',
  },
  // warm coral radial — emotional core
  glow: {
    position: 'absolute',
    inset: 0,
    background: 'radial-gradient(ellipse 60% 45% at 50% 48%, rgba(242,107,92,0.22), rgba(242,107,92,0.05) 45%, transparent 72%)',
    pointerEvents: 'none',
    zIndex: 0,
  },
  // weave is now painted on the shared parent in app.jsx — keep empty so refs no-op
  weave: { display: 'none' },
  // parchment grain — warm sepia noise over the indigo, low opacity
  grain: { display: 'none' },

  rowsLayer: {
    position: 'relative',
    zIndex: 1,
    display: 'flex',
    flexDirection: 'column',
    gap: 28,
  },

  rowMaskLeftRight: {
    position: 'relative',
    width: '100%',
    overflow: 'hidden',
    // Fade in/out against the cream gradient
    WebkitMaskImage: 'linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%)',
    maskImage: 'linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%)',
  },
  track: {
    display: 'flex',
    gap: 18,
    width: 'max-content',
    willChange: 'transform',
    paddingInline: 12,
  },

  // Four card tones on parchment indigo:
  //   paper — clean white tile, ink text. The bright "yes" moments.
  //   glass — translucent white-on-indigo, soft secondary chips.
  //   blue  — deeper blue-soft, on-brand business goals.
  //   coral — warm coral tile, the emotional high points (family, vacation).
  card: (rot, tone) => {
    const palette = {
      paper: { bg: '#fff',                          color: 'var(--ink)',       border: '1px solid rgba(255,255,255,0.4)', shadow: '0 20px 36px -22px rgba(0,0,0,0.55)' },
      glass: { bg: 'rgba(255,255,255,0.14)',        color: '#fff',             border: '1px solid rgba(255,255,255,0.28)', shadow: '0 14px 28px -20px rgba(0,0,0,0.45)' },
      blue:  { bg: 'rgba(85,166,229,0.26)',         color: '#FFFFFF',          border: '1px solid rgba(85,166,229,0.55)',  shadow: '0 14px 28px -20px rgba(8,120,216,0.4)' },
      coral: { bg: 'var(--coral)',                  color: '#fff',             border: '1px solid rgba(255,255,255,0.18)', shadow: '0 18px 34px -20px rgba(242,107,92,0.55)' },
    }[tone] || { bg: 'rgba(255,255,255,0.08)', color: '#fff', border: '1px solid rgba(255,255,255,0.18)', shadow: '0 14px 28px -20px rgba(0,0,0,0.45)' };
    return {
      flex: 'none',
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      padding: '12px 18px 12px 14px',
      background: palette.bg,
      color: palette.color,
      border: palette.border,
      borderRadius: 14,
      transform: `rotate(${rot}deg)`,
      boxShadow: palette.shadow,
      backdropFilter: tone === 'glass' ? 'blur(6px)' : 'none',
      WebkitBackdropFilter: tone === 'glass' ? 'blur(6px)' : 'none',
      minWidth: 'fit-content',
      whiteSpace: 'nowrap',
    };
  },
  cardIcon: (tone) => {
    const palette = {
      paper: { bg: 'var(--blue-soft)',        color: 'var(--blue-deep)' },
      glass: { bg: 'rgba(255,255,255,0.14)',  color: '#fff' },
      blue:  { bg: 'rgba(255,255,255,0.18)',  color: '#fff' },
      coral: { bg: 'rgba(255,255,255,0.22)',  color: '#fff' },
    }[tone] || { bg: 'rgba(255,255,255,0.14)', color: '#fff' };
    return {
      width: 28,
      height: 28,
      borderRadius: 8,
      flex: 'none',
      display: 'grid',
      placeItems: 'center',
      background: palette.bg,
      color: palette.color,
      fontFamily: "'Outfit', system-ui, sans-serif",
      fontSize: 13,
      fontWeight: 600,
    };
  },
  cardBody: { display: 'flex', flexDirection: 'column', gap: 2, lineHeight: 1.1 },
  cardLabel: {
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontSize: 16,
    fontWeight: 600,
    letterSpacing: '-0.005em',
  },
  cardMeta: (tone) => {
    const c = {
      paper: 'var(--ink-muted)',
      glass: 'rgba(255,255,255,0.85)',
      blue:  'rgba(255,255,255,0.88)',
      coral: 'rgba(255,255,255,0.92)',
    }[tone] || 'rgba(255,255,255,0.85)';
    return {
      fontFamily: "'Outfit', system-ui, sans-serif",
      fontSize: 11,
      letterSpacing: '0.08em',
      textTransform: 'uppercase',
      color: c,
      fontWeight: 500,
    };
  },

  // Centred headline floats over the marquees
  headlineWrap: {
    position: 'relative',
    zIndex: 2,
    maxWidth: 1100,
    margin: '0 auto',
    padding: '0 32px',
    textAlign: 'center',
    pointerEvents: 'none',
  },
  eyebrow: {
    fontSize: 12,
    color: 'rgba(255,255,255,0.88)',
    letterSpacing: '0.14em',
    textTransform: 'uppercase',
    fontWeight: 500,
    marginBottom: 22,
    display: 'inline-flex',
    alignItems: 'center',
    gap: 10,
    whiteSpace: 'nowrap',
  },
  eyebrowDot: {
    width: 6, height: 6, borderRadius: 999, background: 'var(--coral)',
    boxShadow: '0 0 0 4px rgba(242,107,92,0.22)',
  },
  h2: {
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontSize: 'clamp(40px, 5.4vw, 76px)',
    lineHeight: 1.02,
    letterSpacing: '-0.035em',
    fontWeight: 600,
    color: '#fff',
    textWrap: 'balance',
    margin: '0 auto',
  },
  h2Coral: {
    color: 'var(--coral)',
    fontWeight: 600,
  },
  sub: {
    marginTop: 22,
    fontSize: 17,
    lineHeight: 1.55,
    color: 'rgba(255,255,255,0.92)',
    maxWidth: 620,
    margin: '22px auto 0',
  },
  ctaWrap: {
    marginTop: 40,
    display: 'flex',
    justifyContent: 'center',
    pointerEvents: 'auto',
  },
  ctaBtn: {
    background: 'var(--paper)', color: 'var(--ink)',
    padding: '16px 24px', borderRadius: 12,
    fontSize: 15, fontWeight: 500,
    display: 'inline-flex', alignItems: 'center', gap: 8,
    transition: 'background .2s, color .2s',
    textDecoration: 'none',
  },
};

function TimeBackCard({ icon, label, meta, rot, tone }) {
  return (
    <div style={timeBackStyles.card(rot, tone)}>
      <span style={timeBackStyles.cardIcon(tone)} aria-hidden="true">{icon}</span>
      <span style={timeBackStyles.cardBody}>
        <span style={timeBackStyles.cardLabel}>{label}</span>
        <span style={timeBackStyles.cardMeta(tone)}>{meta}</span>
      </span>
    </div>
  );
}

function TimeBackRow({ items, direction, duration }) {
  // Duplicate so the marquee loops seamlessly.
  const doubled = [...items, ...items];
  const animName = direction === 'left' ? 'bmTimeBackLeft' : 'bmTimeBackRight';
  return (
    <div style={timeBackStyles.rowMaskLeftRight}>
      <div
        style={{
          ...timeBackStyles.track,
          animation: `${animName} ${duration}s linear infinite`,
        }}
      >
        {doubled.map((it, i) => (
          <TimeBackCard key={`${it.label}-${i}`} {...it} />
        ))}
      </div>
    </div>
  );
}

function TimeBack() {
  // top row — drifts left (business + ambition + work that matters)
  const rowTop = [
    { icon: '↑',  label: 'Close more deals',         meta: 'This quarter',     rot: -1.5, tone: 'glass' },
    { icon: '◐',  label: 'Build the new product',    meta: 'Finally shipping', rot: 1,    tone: 'paper' },
    { icon: '◇',  label: 'Hire your next two',       meta: 'On the roadmap',   rot: -0.5, tone: 'blue' },
    { icon: '✶',  label: 'Take the big sales call',  meta: 'Tue · 2:00 PM',    rot: 1.5,  tone: 'paper' },
    { icon: '↗',  label: 'Open a new market',        meta: 'Q3 push',          rot: -1,   tone: 'glass' },
    { icon: '◎',  label: 'Mentor the team',          meta: 'Weekly',           rot: 0.7,  tone: 'paper' },
    { icon: '☼',  label: 'Long lunch with a client', meta: 'Thursday',         rot: -1.2, tone: 'blue' },
    { icon: '◆',  label: 'Strategy offsite',         meta: 'Friday',           rot: 0.6,  tone: 'paper' },
  ];

  // bottom row — drifts right (family + the life you missed)
  const rowBot = [
    { icon: '♡',  label: 'Family dinner',            meta: 'Wed · 6:30 PM',    rot: 1.2,  tone: 'coral' },
    { icon: '◯',  label: "Kids' soccer game",        meta: 'Saturday',         rot: -0.8, tone: 'paper' },
    { icon: '◇',  label: 'Coffee with an old friend', meta: 'Sunday',          rot: 1.5,  tone: 'glass' },
    { icon: '→',  label: 'A real vacation',          meta: 'Two weeks',        rot: -1.2, tone: 'coral' },
    { icon: '↻',  label: 'Workout, every day',       meta: 'Mornings',         rot: 0.9,  tone: 'paper' },
    { icon: '▤',  label: 'Read a whole book',        meta: 'Sundays',          rot: -1,   tone: 'blue' },
    { icon: '◐',  label: 'Date night',               meta: 'Friday',           rot: 1.4,  tone: 'paper' },
    { icon: '☾',  label: 'Sleep in, just once',      meta: 'No alarm',         rot: -0.6, tone: 'glass' },
  ];

  return (
    <section id="time-back" style={timeBackStyles.wrap} className="reveal bm-section">
      <div style={timeBackStyles.weave} />
      <div style={timeBackStyles.grain} aria-hidden="true" />

      {/* HEADLINE LAYER */}
      <div style={timeBackStyles.headlineWrap}>
        <h2 style={timeBackStyles.h2}>
          Think about what you could do with{' '}
          <span style={timeBackStyles.h2Coral}>all that time you got back.</span>
        </h2>
        <p style={timeBackStyles.sub}>
          More clients. A bigger business. Closing the laptop before dinner. The things you'd put back if your week had room for them again.
        </p>
      </div>

      {/* MARQUEE LAYER */}
      <div style={{ ...timeBackStyles.rowsLayer, marginTop: 64 }}>
        <TimeBackRow items={rowTop} direction="left" duration={72} />
        <TimeBackRow items={rowBot} direction="right" duration={84} />
      </div>

      <style>{`
        @keyframes bmTimeBackLeft {
          from { transform: translate3d(0, 0, 0); }
          to   { transform: translate3d(-50%, 0, 0); }
        }
        @keyframes bmTimeBackRight {
          from { transform: translate3d(-50%, 0, 0); }
          to   { transform: translate3d(0, 0, 0); }
        }
        @media (prefers-reduced-motion: reduce) {
          section#time-back [style*="animation"] { animation: none !important; }
        }
        @media (max-width: 720px) {
          section#time-back { padding: 56px 0 56px !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { TimeBack, TimeBackCard, TimeBackRow });