// Shared De Scène coming-soon surface for the home page and subpages.
const DS = window.DeScNeDesignSystem_83f082;

const DE_SCENE_PAGES = {
  home: {
    pills: ['Binnenkort', 'Seizoen 01', 'Amsterdam'],
    first: 'We scène je',
    accent: 'snel.',
    intro:
      'De Scène staat in de startblokken. Gesprekken over nachtleven, clubcultuur en de mensen achter de dansvloer — de eerste aflevering komt eraan.',
  },
  afleveringen: {
    pills: ['De Scène', 'Afleveringen', 'Binnenkort'],
    first: 'Afleveringen',
    accent: 'binnenkort.',
    intro:
      'De eerste gesprekken over nachtleven, clubcultuur en de mensen achter de dansvloer komen eraan. Hier vind je straks alle afleveringen van De Scène.',
  },
  formats: {
    pills: ['De Scène', 'Formats', 'Binnenkort'],
    first: 'Formats',
    accent: 'binnenkort.',
    intro:
      'Hier verschijnen straks de terugkerende formats van De Scène: verhalen, vragen en inzichten uit het nachtleven en de clubcultuur.',
  },
  over: {
    pills: ['De Scène', 'Over', 'Amsterdam'],
    first: 'Over',
    accent: 'De Scène.',
    intro:
      'De Scène is een podcast van Dawn de Jong en Luc Boomgaart. Gesprekken over nachtleven, clubcultuur en de mensen achter de dansvloer.',
  },
};

function ComingSoon() {
  const [sent, setSent] = React.useState(false);
  const [email, setEmail] = React.useState('');
  const page =
    DE_SCENE_PAGES[document.body.dataset.deScenePage] || DE_SCENE_PAGES.home;

  return (
    <main
      id="top"
      className="grain"
      style={{
        position: 'relative',
        overflow: 'hidden',
        minHeight: 'calc(100vh - 94px)',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <div
        style={{
          position: 'absolute',
          inset: 0,
          backgroundImage: 'url(/de-scene/assets/de-scene-banner.png)',
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          opacity: 0.34,
        }}
      />
      <div
        style={{
          position: 'absolute',
          inset: 0,
          background:
            'radial-gradient(120% 90% at 50% 30%, rgba(12,11,10,0.55), rgba(5,5,5,0.96))',
        }}
      />

      <div
        style={{
          position: 'relative',
          zIndex: 3,
          flex: 1,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          textAlign: 'center',
          maxWidth: 980,
          margin: '0 auto',
          padding: '80px 40px',
        }}
      >
        <a href="#top" style={{ textDecoration: 'none' }}>
          <DS.Logo size={30} />
        </a>

        <div style={{ marginTop: 40 }}>
          <DS.PillDivider items={page.pills} />
        </div>

        <h1
          style={{
            margin: '30px 0 0',
            fontFamily: 'var(--font-display)',
            fontWeight: 500,
            textTransform: 'uppercase',
            fontSize: 'clamp(52px, 11vw, 132px)',
            lineHeight: 0.9,
            letterSpacing: '0.02em',
            color: 'var(--cream-200)',
          }}
        >
          {page.first}
          <br />
          <span style={{ color: 'var(--red-500)' }}>{page.accent}</span>
        </h1>

        <p
          style={{
            margin: '30px auto 0',
            fontFamily: 'var(--font-serif)',
            fontSize: 'clamp(18px, 2.1vw, 23px)',
            lineHeight: 1.5,
            color: 'var(--cream-300)',
            maxWidth: '46ch',
          }}
        >
          {page.intro}
        </p>

        <div
          style={{
            marginTop: 48,
            width: 'min(460px, 100%)',
            textAlign: 'left',
          }}
        >
          <DS.Kicker>Als eerste luisteren?</DS.Kicker>
          {sent ? (
            <p
              style={{
                margin: '18px 0 0',
                fontFamily: 'var(--font-serif)',
                fontSize: 18,
                color: 'var(--cream-200)',
              }}
            >
              Top — we spreken je snel.{' '}
              <span style={{ color: 'var(--red-500)' }}>·</span> Houd je inbox
              in de gaten.
            </p>
          ) : (
            <form
              onSubmit={(event) => {
                event.preventDefault();
                if (email.trim()) setSent(true);
              }}
              style={{
                marginTop: 16,
                display: 'flex',
                gap: 12,
                alignItems: 'flex-end',
              }}
            >
              <DS.Input
                label="E-mail"
                placeholder="jij@voorbeeld.nl"
                type="email"
                value={email}
                onChange={(event) => setEmail(event.target.value)}
                style={{ flex: 1 }}
              />
              <DS.Button variant="primary" size="md" type="submit">
                Hou me op de hoogte
              </DS.Button>
            </form>
          )}
          <p
            style={{
              margin: '14px 0 0',
              fontFamily: 'var(--font-sans)',
              fontSize: 11,
              letterSpacing: '0.14em',
              textTransform: 'uppercase',
              color: 'var(--cream-500)',
            }}
          >
            Door Dawn de Jong &amp; Luc Boomgaart
          </p>
        </div>
      </div>
    </main>
  );
}