// btg/slides.jsx — Placeholder deck

const PALETTES = {
  dark:  window.DECK_CONFIG.palette.dark,
  light: window.DECK_CONFIG.palette.light,
};

function SlidePlaceholderCover({ c, total }) {
  const { tick } = useSlideActive(0);
  const cfg = window.DECK_CONFIG;
  return (
    <SlideFrame c={c} deckBg>
      <CornerLabel c={c} label="01 Cover" />
      <CornerNum c={c} index={1} total={total} />

      <div style={{
        position: 'absolute', left: 96, top: 300,
        ...entry('rise', { tick, duration: 900 }),
      }}>
        <div style={{
          fontFamily: FONT_SANS, fontWeight: 760,
          fontSize: 140, lineHeight: 0.88,
          letterSpacing: '-0.05em', color: c.fg,
        }}>
          {cfg.company}
        </div>
        <div style={{
          marginTop: 12,
          fontFamily: FONT_SANS, fontWeight: 340,
          fontSize: 60, lineHeight: 1.0,
          letterSpacing: '-0.03em',
          color: c.fgMuted, fontStyle: 'italic',
        }}>
          {cfg.projectName}
        </div>
        <div style={{
          marginTop: 32,
          fontFamily: FONT_MONO, fontSize: 14,
          color: c.primary, letterSpacing: '0.18em', textTransform: 'uppercase',
          ...entry('fade', { tick, delay: 400, duration: 600 }),
        }}>
          Case study in preparation.
        </div>
      </div>

      <Sig c={c} />
    </SlideFrame>
  );
}

function SlidePlaceholderTeaser({ c, total }) {
  const { tick } = useSlideActive(1);
  return (
    <SlideFrame c={c}>
      <CornerLabel c={c} label="02 Coming Soon" />
      <CornerNum c={c} index={2} total={total} />

      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexDirection: 'column', gap: 24,
      }}>
        <div style={{
          fontSize: TYPE_SCALE.hero, fontWeight: 400, fontStyle: 'italic',
          color: c.primary, letterSpacing: '-0.04em', textAlign: 'center',
          ...entry('fade-up', { tick, duration: 900 }),
        }}>
          Coming soon.
        </div>
        <div style={{
          fontFamily: FONT_MONO, fontSize: 14,
          color: c.fgMuted, letterSpacing: '0.16em', textTransform: 'uppercase',
          ...entry('fade', { tick, delay: 400, duration: 700 }),
        }}>
          This case study is in preparation.
        </div>
      </div>

      <Sig c={c} />
    </SlideFrame>
  );
}

function SlidePlaceholderCTA({ c, total }) {
  const { tick } = useSlideActive(2);
  const contacts = [
    { k: 'Author',    v: 'Julio Ferracini' },
    { k: 'Portfolio', v: 'julioferracini.com',    href: 'https://julioferracini.com' },
    { k: 'LinkedIn',  v: '/in/julioferracini',    href: 'https://www.linkedin.com/in/julioferracini' },
    { k: 'Email',     v: 'jferracini@gmail.com',  href: 'mailto:jferracini@gmail.com' },
  ];
  return (
    <SlideFrame c={c} deckBg>
      <CornerLabel c={c} label="Thank you" />
      <CornerNum c={c} index={3} total={total} />

      <div style={{ position: 'absolute', left: 96, top: 240 }}>
        <div style={{
          fontSize: TYPE_SCALE.display, fontWeight: 500,
          letterSpacing: '-0.045em', lineHeight: 0.92,
          ...entry('rise', { tick, duration: 900 }),
        }}>
          Get in touch.
        </div>
        <div style={{
          fontSize: TYPE_SCALE.display, fontWeight: 400, fontStyle: 'italic',
          color: c.primary, letterSpacing: '-0.045em', lineHeight: 0.92, marginTop: -16,
          ...entry('rise', { tick, delay: 220, duration: 900 }),
        }}>
          Let's talk.
        </div>
      </div>

      <div style={{
        position: 'absolute', left: 96, right: 96, bottom: 130,
        ...entry('fade-up', { tick, delay: 600, duration: 700 }),
      }}>
        <div style={{ height: 1, background: c.fg, marginBottom: 32 }} />
        <div style={{
          display: 'grid', gridTemplateColumns: '2fr 1.4fr 1.4fr 1.4fr',
          gap: 48, alignItems: 'baseline',
        }}>
          {contacts.map((col) => {
            const valueStyle = {
              fontFamily: FONT_MONO, fontSize: TYPE_SCALE.body - 6,
              color: c.fg, textDecoration: 'none',
              borderBottom: col.href ? `1px solid ${c.primary}` : 'none',
              paddingBottom: col.href ? 6 : 0,
            };
            return (
              <div key={col.k}>
                <div style={{
                  fontFamily: FONT_MONO, fontSize: TYPE_SCALE.micro,
                  color: c.fgDim, letterSpacing: '0.16em', textTransform: 'uppercase',
                  marginBottom: 16,
                }}>{col.k}</div>
                {col.href ? (
                  <a href={col.href}
                    target={col.href.startsWith('mailto:') ? undefined : '_blank'}
                    rel={col.href.startsWith('mailto:') ? undefined : 'noreferrer'}
                    style={valueStyle}>{col.v}</a>
                ) : (
                  <div style={valueStyle}>{col.v}</div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </SlideFrame>
  );
}

Object.assign(window, {
  PALETTES, FONT_SANS, FONT_MONO,
  SlidePlaceholderCover, SlidePlaceholderTeaser, SlidePlaceholderCTA,
});