/* Admission tariffs + the four birthday packages. */
function Prices(props) {
  const { SectionHead, PriceCard } = window.PE;
  const t = props.t;
  return (
    <Section id="prices" alt>
      <SectionHead align="center" kicker={t.prices.kicker} title={t.prices.title} lead={t.prices.lead} />
      <div style={{display:'flex', gap:'var(--gap-grid)', justifyContent:'center', flexWrap:'wrap'}}>
        {window.PE_CONTENT.admission.map(function (a) {
          return (
            <PriceCard key={a.id} duration={a.duration} price={a.price} featured={a.featured}
              badge={a.featured ? t.prices.popular : null}>
              {a.featured ? t.prices.long : t.prices.short}
            </PriceCard>
          );
        })}
      </div>
      <p style={{marginTop:'var(--space-8)', textAlign:'center', font:'var(--type-small)', color:'var(--text-muted)'}}>{t.prices.note}</p>
    </Section>
  );
}

function Birthdays(props) {
  const { SectionHead, PackageCard, Button, Badge, Card } = window.PE;
  const t = props.t;
  const C = window.PE_CONTENT;
  return (
    <Section id="birthdays">
      <SectionHead align="center" kicker={t.bday.kicker} title={t.bday.title} lead={t.bday.lead} />
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:'var(--gap-card)', alignItems:'stretch'}}>
        {C.packages.map(function (p) {
          return (
            <PackageCard key={p.id}
              name={t.packageNames[p.id]}
              tagline={t.packageTaglines[p.id]}
              badge={p.badge ? t.badges[p.badge] : null}
              featured={p.badge === 'best_seller'}
              days={p.days.map(function (d) { return t.days[d]; }).join(' · ')}
              duration={p.duration}
              tiers={p.tiers}
              unitLabel={props.lang === 'ru' ? 'детей' : 'niños'}
              features={p.features.map(function (x) { return t.features[x]; })}
              footer={<Button variant={p.badge === 'best_seller' ? 'primary' : 'secondary'} size="sm" block onClick={function () { props.onBook(p.id); }}>{t.cta.bookParty}</Button>}
            />
          );
        })}
      </div>
      <Card surface="cream" radius="xl" stroke style={{marginTop:'var(--space-10)', display:'flex', gap:'var(--space-8)', flexWrap:'wrap', alignItems:'center', justifyContent:'space-between'}}>
        <div style={{display:'flex', gap:'var(--space-2)', flexWrap:'wrap'}}>
          {t.bday.policy.map(function (x, i) { return <Badge key={i} tone={i === 0 ? 'magenta' : 'navy'} upper={false}>{x}</Badge>; })}
        </div>
        <p style={{margin:0, font:'var(--type-small)', color:'var(--brand-navy)', maxWidth:'52ch'}}>{t.bday.wed}</p>
      </Card>
    </Section>
  );
}

Object.assign(window, { Prices, Birthdays });