/* Hero, About, Services — the top of popeat.es. */
function Section(props) {
  return (
    <section id={props.id} style={Object.assign({
      padding: 'var(--section-y) 0',
      background: props.alt ? 'var(--gradient-page)' : 'var(--surface-page)'
    }, props.style)}>
      <div style={{maxWidth:'var(--container)', margin:'0 auto', padding:'0 var(--space-6)'}}>{props.children}</div>
    </section>
  );
}

function Hero(props) {
  const { PopitSurface, Button, Badge, Logo } = window.PE;
  const t = props.t;
  return (
    <PopitSurface veil="soft" as="section" style={{padding:'var(--space-20) 0 var(--space-16)'}}>
      <div style={{maxWidth:'var(--container)', margin:'0 auto', padding:'0 var(--space-6)', textAlign:'center', display:'grid', gap:'var(--space-6)', justifyItems:'center'}}>
        <Logo src="../../assets/logo/pop-eat-logo.png" height={150} glow />
        <p style={{margin:0, font:'var(--type-lead)', color:'var(--brand-navy)', maxWidth:'46ch', fontWeight:'var(--weight-bold)'}}>{t.hero.tagline}</p>
        <div style={{display:'flex', gap:'var(--space-3)', flexWrap:'wrap', justifyContent:'center'}}>
          <Button variant="primary" size="lg" onClick={props.onBook}>{t.cta.book}</Button>
          <Button variant="whatsapp" size="lg" href={window.PE_CONTENT.business.whatsapp} target="_blank" icon={<WaGlyph />}>{t.cta.whatsapp}</Button>
        </div>
        <div style={{display:'flex', gap:'var(--space-2)', flexWrap:'wrap', justifyContent:'center'}}>
          <Badge tone="white" sticker>{t.hero.b1}</Badge>
          <Badge tone="sun" sticker>4.9 ★ {t.hero.b2}</Badge>
          <Badge tone="white" sticker>{t.hero.b3}</Badge>
        </div>
      </div>
    </PopitSurface>
  );
}

function WaGlyph() {
  return (
    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
      <path fill="currentColor" d="M20.52 3.48A11.86 11.86 0 0 0 12 0C5.37 0 0 5.37 0 12c0 2.11.55 4.18 1.6 6L0 24l6.18-1.62A11.94 11.94 0 0 0 12 24c6.63 0 12-5.37 12-12 0-3.2-1.25-6.21-3.48-8.52ZM12 21.82a9.83 9.83 0 0 1-5.02-1.37l-.36-.21-3.67.96.98-3.57-.24-.37A9.84 9.84 0 1 1 21.82 12 9.82 9.82 0 0 1 12 21.82Z" />
    </svg>
  );
}

function About(props) {
  const { SectionHead, Checklist, PopitGrid, StatCard } = window.PE;
  const t = props.t;
  return (
    <Section id="about" alt>
      <div style={{display:'grid', gridTemplateColumns:'1.05fr .95fr', gap:'var(--space-16)', alignItems:'center'}}>
        <div>
          <SectionHead kicker={t.about.kicker} title={t.about.title} />
          <p style={{font:'var(--type-body)', color:'var(--text-muted)'}}>{t.about.p1}</p>
          <p style={{font:'var(--type-body)', color:'var(--text-muted)'}}>{t.about.p2}</p>
          <Checklist items={t.about.li} />
        </div>
        <div style={{display:'grid', gap:'var(--space-6)', justifyItems:'center'}}>
          <PopitGrid cols={5} rows={5} dot={46} tray />
          <div style={{display:'flex', gap:'var(--space-3)', flexWrap:'wrap', justifyContent:'center'}}>
            {t.about.stats.map(function (s, i) { return <StatCard key={i} value={s.v} label={s.l} align="center" tone={i === 1 ? 'navy' : 'magenta'} />; })}
          </div>
        </div>
      </div>
    </Section>
  );
}

function Services(props) {
  const { SectionHead, ServiceCard } = window.PE;
  const t = props.t;
  return (
    <Section id="services">
      <SectionHead align="center" kicker={t.services.kicker} title={t.services.title} lead={t.services.lead} />
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:'var(--gap-card)'}}>
        {t.services.items.map(function (s, i) {
          return <ServiceCard key={i} index={i} icon={s.icon} title={s.t}>{s.d}</ServiceCard>;
        })}
      </div>
    </Section>
  );
}

Object.assign(window, { Section, Hero, About, Services, WaGlyph });