/* AMARINE — Hospitality (more breathing, italic-forward) */

const HOSPITALITY_MEDIA = {
  concierge: '/assets/media/hospitality/hopitalidad-concierge/hyc-1.jpg',
  foodBeverage: '/assets/media/hospitality/food-beverage/efb-1.jpg',
  impactTravel: '/assets/media/hospitality/impact-travel/it-1.jpg',
};

function HospitalityHero() {
  const t = useT();
  const P = window.AMARINE_PHOTOS;
  return (
    <section className="line-hero" style={{position:'relative', overflow:'hidden'}}>
      <div style={{position:'absolute', inset:0, backgroundImage:`url(${P.concierge})`, backgroundSize:'cover', backgroundPosition:'center', filter:'saturate(0.7) contrast(1.05)', opacity: 0.35}} />
      <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(26,72,83,0.55) 0%, rgba(26,72,83,0.92) 100%)'}} />
      <div className="grid" style={{position:'relative', zIndex: 2}}>
        <div>
          <Reveal>
            <span className="eyebrow on-dark" style={{color:'var(--gold)', letterSpacing:'0.22em'}}>{t('hosp.eyebrow')}</span>
          </Reveal>
          <Reveal as="h1" delay={120}>
            <span className="it">{t('hosp.hero.line1')}</span><br/>
            {t('hosp.hero.line2')} <span className="gold it">{t('hosp.hero.line3')}</span>
          </Reveal>
        </div>
        <Reveal delay={200}>
          <p>{t('hosp.intro')}</p>
          <a className="link-arrow" href="#services">{t('hosp.hero.anchor')} <span>↓</span></a>
        </Reveal>
      </div>
    </section>
  );
}

function HospitalityServices() {
  const t = useT();
  const rows = [
    { id: 'concierge', n: t('hosp.s1.num'), title: t('hosp.s1.title'), desc: t('hosp.s1.desc'), img: HOSPITALITY_MEDIA.concierge, label: t('hosp.services.label.concierge') },
    { id: 'fnb',       n: t('hosp.s2.num'), title: t('hosp.s2.title'), desc: t('hosp.s2.desc'), img: HOSPITALITY_MEDIA.foodBeverage, label: t('hosp.services.label.fnb') },
    { id: 'impact',    n: t('hosp.s3.num'), title: t('hosp.s3.title'), desc: t('hosp.s3.desc'), img: HOSPITALITY_MEDIA.impactTravel, label: t('hosp.services.label.impact') },
  ];
  return (
    <section id="services" className="section gut">
      <div className="s-head" style={{padding: 0, marginBottom: 56}}>
        <div className="label">
          <span className="numeral">— I</span>
          <span className="eyebrow">{t('hosp.services.eyebrow')}</span>
        </div>
        <div>
          <h2>{t('hosp.services.title.part1')} <span className="it">{t('hosp.services.title.part2')}</span></h2>
        </div>
      </div>
      {rows.map((r, i) => (
        <Reveal key={r.id} as="article" id={r.id} className="svc-row" delay={i * 80} style={{}}>
          <span className="num">{r.n}</span>
          <h3>{r.title}</h3>
          <p className="desc">{r.desc}</p>
          <div className="ph" data-label={r.label} style={{backgroundImage:`url(${r.img})`, backgroundPosition: r.id === 'impact' ? 'bottom center' : 'center', aspectRatio:'4/3'}} />
        </Reveal>
      ))}
    </section>
  );
}

function VirtuosoBlock() {
  const t = useT();
  return (
    <section className="virtuoso">
      <Reveal>
        <span className="eyebrow" style={{marginBottom: 24, display:'block'}}>{t('hosp.virtuoso.eyebrow')}</span>
        <blockquote>
          <span className="it">"{t('hosp.virtuoso.quote')}"</span>
        </blockquote>
      </Reveal>
      <Reveal delay={120}>
        <span className="numeral" style={{display:'block', marginBottom: 16}}>{t('hosp.virtuoso.credential')}</span>
        <p className="note">{t('hosp.virtuoso.note')}</p>
        <div style={{paddingTop: 24, borderTop:'1px solid var(--rule)', marginTop: 24, fontFamily:'var(--sans)', fontSize: '0.69rem', letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--mute)'}}>
          {t('hosp.virtuoso.regions')}
        </div>
      </Reveal>
    </section>
  );
}

function WorldCupBlock() {
  const t = useT();
  const P = window.AMARINE_PHOTOS;
  return (
    <section id="wc" className="wc" style={{position:'relative', overflow:'hidden'}}>
      <div style={{position:'absolute', inset:0, backgroundImage:`url(${P.worldCup})`, backgroundSize:'cover', backgroundPosition:'center', opacity:0.18}} />
      <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(15,54,64,0.85) 0%, rgba(15,54,64,0.95) 100%)'}} />
      <div style={{position:'relative', zIndex: 2}}>
      <div className="wc-grid">
        <Reveal>
          <span className="eyebrow on-dark" style={{color:'var(--gold)'}}>{t('hosp.wc.eyebrow')}</span>
        </Reveal>
        <Reveal delay={120}>
          <h2 style={{fontFamily:'var(--serif)', fontSize:'clamp(48px, 5.4vw, 80px)', fontWeight:400, lineHeight:1.02, margin:'8px 0 24px', letterSpacing:'-0.01em'}}>
            <span style={{fontStyle:'italic'}}>{t('hosp.wc.title.part1')}</span> <span style={{color:'var(--gold)', fontStyle:'italic'}}>{t('hosp.wc.title.part2')}</span>
          </h2>
          <p style={{color:'rgba(250,250,247,0.78)', maxWidth:'52ch', fontSize: 18}}>{t('hosp.wc.desc')}</p>
        </Reveal>
      </div>
      <div className="stats">
        <Reveal className="stat">
          <div className="n">{t('hosp.wc.stat1.n')}</div>
          <div className="l">{t('hosp.wc.stat1.l')}</div>
        </Reveal>
        <Reveal className="stat" delay={100}>
          <div className="n">{t('hosp.wc.stat2.n')}</div>
          <div className="l">{t('hosp.wc.stat2.l')}</div>
        </Reveal>
        <Reveal className="stat" delay={200}>
          <div className="n infinity">{t('hosp.wc.stat3.n')}</div>
          <div className="l">{t('hosp.wc.stat3.l')}</div>
        </Reveal>
      </div>
      </div>
    </section>
  );
}

function HospitalityCTA() {
  const t = useT();
  const lp = window.AMARINE_I18N.pathFor;
  return (
    <section className="closing-cta">
      <Reveal>
        <span className="eyebrow on-dark">— V</span>
        <h2>{t('hosp.cta.title')}</h2>
        <p>{t('hosp.cta.desc')}</p>
        <a className="btn btn-secondary" href={lp('/contact', { search: 'line=hospitality' })}>
          {t('hosp.cta.btn')} <span className="arrow">→</span>
        </a>
      </Reveal>
    </section>
  );
}

function HospitalityPage() {
  return (
    <>
      <Header active="hospitality" onDark={true} />
      <main>
        <HospitalityHero />
        <HospitalityServices />
        <HospitalityCTA />
      </main>
      <Footer />
    </>
  );
}

// Expose to window for router
window.AMARINE_PAGES = window.AMARINE_PAGES || {};
window.AMARINE_PAGES.HospitalityPage = HospitalityPage;