/* Print & social poster recreations, built from the design-system components.
   Layout, wording and price structure follow assets/posters/*.png. */

function PosterFrame(props) {
  const { PopitSurface } = window.PE;
  return (
    <PopitSurface veil={props.veil || 'strong'} style={{width:props.width || 620, height:props.height || 820, padding:'34px 30px', display:'flex', flexDirection:'column', gap:18, alignItems:'center', borderRadius:'var(--radius-md)', boxShadow:'var(--shadow-lift)'}}>
      {props.children}
    </PopitSurface>
  );
}

function Lockup() {
  const { Logo, TaglineStrip } = window.PE;
  return (
    <div style={{display:'grid', gap:12, justifyItems:'center'}}>
      <Logo src="../../assets/logo/pop-eat-logo.png" height={92} glow />
      <TaglineStrip style={{transform:'scale(.78)'}} />
    </div>
  );
}

/* Party package poster — the primary format. */
function PartyPoster(props) {
  const { StickerHeading, Rosette, Badge, PriceTag, Card, FeatureRow } = window.PE;
  return (
    <PosterFrame veil="soft">
      <Lockup />
      <StickerHeading mode="lines" size="62px" align="center" lineTones={props.tones}>{props.title}</StickerHeading>
      <div style={{display:'flex', gap:18, alignItems:'center', justifyContent:'center', flexWrap:'wrap'}}>
        <Rosette value={props.hours} label="horas" size={116} />
        <div style={{display:'grid', gap:8, justifyItems:'center'}}>
          <Badge tone="navy" size="md" sticker>{props.days}</Badge>
          <Badge tone="sun" size="md" sticker>{props.time}</Badge>
        </div>
      </div>
      <PriceTag amount={props.price} size="xl" sticker unit={'/ ' + props.kids + ' niños'} />
      <Badge tone={props.pillTone || 'magenta'} size="md" sticker>Está incluido:</Badge>
      <Card surface="cream" radius="xl" stroke padding="18px 22px" style={{width:'100%'}}>
        {props.includes.map(function (x, i, arr) {
          return <FeatureRow key={i} index={i} icon={x[0]} last={i === arr.length - 1}>{x[1]}</FeatureRow>;
        })}
      </Card>
      <div style={{marginTop:'auto', width:'100%'}}>
        <Badge tone={props.pillTone === 'grape' ? 'grape' : 'navy'} size="md" style={{width:'100%', justifyContent:'center', gap:10}} upper={false}>
          <span>Niño extra</span>
          <span style={{color:'var(--brand-sun)', font:'var(--weight-black) var(--text-md)/1 var(--font-display)'}}>{props.extra} €</span>
        </Badge>
      </div>
    </PosterFrame>
  );
}

/* Square social promo — one product, one price. */
function PromoSquare(props) {
  const { StickerHeading, PriceTag, Badge, Button } = window.PE;
  return (
    <PosterFrame veil="ink" width={620} height={620}>
      <Lockup />
      <StickerHeading size="54px" align="center" style={{marginTop:8}}>{props.title}</StickerHeading>
      <PriceTag amount={props.price} size="xl" sticker prefix="desde" />
      <p style={{margin:0, textAlign:'center', font:'var(--weight-bold) var(--text-md)/1.35 var(--font-ui)', color:'var(--white)', textShadow:'0 2px 10px rgba(0,0,0,.45)', maxWidth:'30ch'}}>{props.line}</p>
      <div style={{marginTop:'auto', display:'flex', gap:10, flexWrap:'wrap', justifyContent:'center'}}>
        <Badge tone="cherry" size="md" sticker>Adeje</Badge>
        <Button variant="whatsapp" size="md" href="https://wa.me/34689743874" target="_blank">+34 689 74 38 74</Button>
      </div>
    </PosterFrame>
  );
}

/* Story format — the offer as one vertical stack. */
function StoryPoster(props) {
  const { StickerHeading, PriceCard, Badge, Button } = window.PE;
  return (
    <PosterFrame veil="soft" width={420} height={746}>
      <Lockup />
      <StickerHeading mode="lines" size="46px" align="center">{['Ven a', 'jugar']}</StickerHeading>
      <div style={{display:'grid', gap:14, width:'100%'}}>
        <PriceCard duration="30 min" price="5">Sesión corta.</PriceCard>
        <PriceCard duration="60 min" price="7" featured badge="Lo más popular">Una hora entera.</PriceCard>
      </div>
      <Badge tone="navy" size="md" sticker upper={false}>Lun–Vie 16:00–21:00 · Sáb–Dom 11:00–21:00</Badge>
      <div style={{marginTop:'auto'}}>
        <Button variant="primary" size="lg">Reservar</Button>
      </div>
    </PosterFrame>
  );
}

Object.assign(window, { PosterFrame, Lockup, PartyPoster, PromoSquare, StoryPoster });
