// CATERING & EVENTS — premium package section between Reviews and How it works.
//
// Booking is intentionally NOT handled here. The Members Club app is the canonical
// booking experience; this section only presents packages and links out to it.
// Destination + enablement live in one place: window.SZ_CONFIG (see config.js).

// Resolve the booking destination once, at render time.
// Returns { href, enabled } — href is always the configured URL (never invented),
// enabled is false until the Members Club route is actually live.
function szCateringBooking() {
  const cfg = (window.SZ_CONFIG || {});
  const url = cfg.CATERING_BOOKING_URL || '';
  const localUrl = cfg.CATERING_BOOKING_URL_LOCAL || '';
  let isLocal = false;
  try {
    const h = window.location.hostname;
    isLocal = h === 'localhost' || h === '127.0.0.1' || h === '[::1]';
  } catch (_) { isLocal = false; }

  // Local QA may point at a locally running Members Club catering route.
  if (isLocal && localUrl) return { href: localUrl, enabled: true };
  return { href: url, enabled: !!(cfg.CATERING_BOOKING_LIVE && url) };
}

// ── WHEN BOOKING IS NOT LIVE, THE BUTTON STILL GOES SOMEWHERE REAL ────────
//
// This used to render an inert "Coming soon" control: focusable, announced,
// and completely useless to a customer who wanted to ask about catering. There
// is now a public, crawlable page for every package that needs no sign-in and
// carries a working inquiry action, so the fallback is a link to that page
// rather than a dead end.
//
// `CATERING_BOOKING_LIVE` is untouched and still false. Nothing here exposes
// the authenticated Members booking route. When Elio flips the flag, the live
// branch below takes over and these CTAs point at the booking flow instead.
function CateringCTA({ label, tone, fallbackHref }) {
  const { href, enabled } = szCateringBooking();
  const destination = enabled ? href : fallbackHref;
  const primary = tone === 'primary';
  const base = {
    width: '100%', minHeight: 48, display: 'inline-flex', alignItems: 'center',
    justifyContent: 'center', gap: 10, padding: '0 20px', textAlign: 'center',
    borderRadius: 'var(--radius-pill)', fontFamily: 'var(--font-head)',
    fontWeight: 800, fontSize: 15, textDecoration: 'none', boxSizing: 'border-box',
    transition: 'background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out)',
  };

  return (
    <a href={destination} className={`sz-catering-cta sz-catering-cta-${primary ? 'primary' : 'ghost'}`} style={{
      ...base, cursor: 'pointer',
      background: primary ? 'var(--primary)' : 'transparent',
      color: primary ? 'var(--on-primary)' : 'var(--text-strong)',
      border: primary ? '1px solid transparent' : '1px solid var(--border-strong)',
      boxShadow: primary ? 'var(--glow-orange-soft)' : 'none',
    }}>{label}</a>
  );
}

function CateringPackage({ pkg }) {
  const featured = !!pkg.badge;
  return (
    <article className="sz-catering-card" style={{
      display: 'flex', flexDirection: 'column', minWidth: 0,
      background: 'rgba(28,23,20,0.50)',
      backdropFilter: 'blur(18px)', WebkitBackdropFilter: 'blur(18px)',
      border: `1px solid ${featured ? 'var(--border-orange)' : 'rgba(251,244,234,0.09)'}`,
      borderRadius: 'var(--radius-xl)', padding: 'var(--space-6)',
      boxShadow: featured
        ? '0 2px 0 rgba(251,244,234,0.05) inset, 0 18px 50px rgba(0,0,0,0.55), var(--glow-orange-soft)'
        : '0 2px 0 rgba(251,244,234,0.04) inset, 0 14px 40px rgba(0,0,0,0.5)',
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ minWidth: 0 }}>
          <h3 style={{ fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: 20, color: 'var(--text-strong)' }}>{pkg.name}</h3>
          <div className="t-meta" style={{ marginTop: 4, color: 'var(--sz-champagne)', letterSpacing: '0.04em' }}>{pkg.guests}</div>
        </div>
        {featured && (
          <span style={{
            flexShrink: 0, fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 11,
            letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase',
            color: 'var(--shoyu-orange)', background: 'rgba(240,96,34,0.12)',
            border: '1px solid var(--border-orange)', borderRadius: 'var(--radius-pill)',
            padding: '5px 11px',
          }}>{pkg.badge}</span>
        )}
      </div>

      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap', marginTop: 'var(--space-5)' }}>
        <span className="t-price" style={{ fontSize: 42, color: 'var(--text-strong)' }}>{pkg.total}</span>
        <span className="t-meta" style={{ fontSize: 13 }}>estimated</span>
      </div>

      {/* flex:1 lets the shorter description absorb the slack, so both cards'
          breakdown blocks and CTAs line up across the pair. */}
      <p className="t-body" style={{ color: 'var(--text-muted)', marginTop: 'var(--space-3)', flex: 1 }}>{pkg.description}</p>

      <div style={{ marginTop: 'var(--space-5)', borderTop: '1px solid var(--border)', paddingTop: 'var(--space-4)' }}>
        <div className="t-meta" style={{ fontSize: 11.5, letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase' }}>What makes up the estimate</div>
        <dl style={{ marginTop: 'var(--space-3)', display: 'grid', gap: 10 }}>
          {pkg.breakdown.map((row) => (
            <div key={row.label} className="sz-catering-row" style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
              <dt className="t-body" style={{ color: 'var(--text-muted)', fontSize: 14, minWidth: 0 }}>{row.label}</dt>
              <dd className="t-body" style={{ margin: 0, color: 'var(--text)', fontSize: 14, fontWeight: 600, whiteSpace: 'nowrap' }}>{row.value}</dd>
            </div>
          ))}
        </dl>
        <div style={{
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12,
          marginTop: 'var(--space-4)', paddingTop: 'var(--space-3)', borderTop: '1px solid var(--border)',
        }}>
          <span style={{ fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: 15, color: 'var(--text-strong)' }}>Total</span>
          <span style={{ fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: 15, color: 'var(--sz-champagne)', whiteSpace: 'nowrap' }}>{pkg.totalLine}</span>
        </div>
      </div>

      <div style={{ marginTop: 'var(--space-6)' }}>
        <CateringCTA label={pkg.cta} tone={featured ? 'primary' : 'ghost'} fallbackHref={pkg.page} />
      </div>
    </article>
  );
}

function Catering() {
  const Icon = window.Icon;
  const packages = [
    {
      name: 'Gathering Package',
      page: '/catering-events/gathering-package/',
      guests: 'For 50 guests',
      total: '₱16,000',
      totalLine: '₱16,000 estimated',
      description: 'A complete starting package for intimate celebrations, office gatherings and private events.',
      cta: 'Request 50-guest package',
      breakdown: [
        { label: 'Food', value: '50 guests × ₱280 = ₱14,000' },
        { label: 'Event service attendant allowance', value: '₱1,000' },
        { label: 'Estimated Metro Manila transportation', value: '₱1,000' },
      ],
    },
    {
      name: 'Celebration Package',
      page: '/catering-events/celebration-package/',
      badge: 'Best value',
      guests: 'For 100 guests',
      total: '₱28,000',
      totalLine: '₱28,000 estimated',
      description: 'Our better-value package for larger celebrations and company events — ₱2,000 less than the same event priced as a custom booking.',
      cta: 'Request 100-guest package',
      // ── ₱28,000 IS AN OFFER, NOT A MULTIPLICATION ──────────────────────
      // This row used to read "100 guests × ₱260 = ₱26,000". There is no ₱260
      // rate: `members/src/domain/catering.ts` charges ₱280 a head from 51 to
      // 100, so the same event priced as a custom booking is ₱30,000. ₱28,000
      // is a published package price the engine holds as a literal and
      // explicitly forbids recomputing — and the ₱2,000 gap is the whole point
      // of the "Best value" badge, which the invented per-guest rate hid.
      //
      // THE PRICE IS UNCHANGED at ₱28,000. Only the description of how it is
      // arrived at has been corrected.
      breakdown: [
        { label: 'Food, attendant and Metro Manila transportation', value: 'All included' },
        { label: 'Same event priced as a custom booking', value: '₱30,000' },
        { label: 'You save', value: '₱2,000' },
      ],
    },
  ];

  const flexible = [
    // ── THE MINIMUM IS THE APPROVED OFFER, AND IT STAYS ───────────────────
    // Owner-confirmed 2026-08-15: catering starts at 50 guests.
    //
    // `CATERING_MIN_GUESTS = 1` in members `src/domain/catering.ts` is OUTDATED
    // and is not authoritative for this. It would accept a twelve-guest booking
    // the business does not sell. The two never disagree about MONEY — for
    // every count actually on offer, 50 to 100, the engine and this page
    // produce the same figure — only about eligibility. Correcting the engine
    // is tracked as a follow-up in `website/tools/catering.mjs` and must land
    // before public Members catering booking is enabled.
    { t: 'Minimum booking', d: '50 guests' },
    // ₱280, NOT ₱260. The engine that actually quotes —
    // `CATERING_FOOD_RATE_CENTAVOS = 28_000`, reimplemented independently in
    // commerce — charges ₱280 a head. There is no ₱260 rate anywhere in it.
    // This line read ₱260 and contradicted the Gathering card above it, which
    // has always said ₱280. Corrected 2026-08-15 with owner approval;
    // `website/tests` now fails if any public surface states a per-guest rate
    // other than the engine's.
    { t: '51–99 guests within Metro Manila', d: '₱280 per guest + ₱1,000 service attendant + ₱1,000 estimated transportation' },
    { t: 'More than 100 guests', d: 'Custom quotation' },
    { t: 'Outside Metro Manila', d: 'Transportation may change, and is confirmed with you based on the venue' },
  ];

  return (
    <section id="catering-events" className="section" aria-labelledby="catering-events-heading" style={{ background: 'transparent' }}>
      <div className="container container-wide">

        <div style={{ textAlign: 'center', marginBottom: 'var(--space-6)' }}>
          <span className="t-eyebrow" style={{ color: 'var(--shoyu-orange)' }}>Catering &amp; Events</span>
          <h2 id="catering-events-heading" className="t-h2" style={{ fontSize: 'var(--text-2xl)', color: 'var(--text-strong)', marginTop: 10 }}>
            Bring Shoyuzuke to your next gathering.
          </h2>
          <p className="t-lead" style={{ color: 'var(--text-muted)', marginTop: 14, maxWidth: 680, marginInline: 'auto' }}>
            Premium Shoyuzuke catering for private celebrations, company gatherings and special events. Packages start at 50 guests, with service assistance and estimated Metro Manila transportation included.
          </p>
          <p className="t-body" style={{ color: 'var(--text-faint)', marginTop: 10, maxWidth: 680, marginInline: 'auto' }}>
            Choose your preferred package and send us your date, time and venue. We’ll review availability and confirm your final menu and quotation before the booking becomes official.
          </p>

          {/* ── THE ROUTE TO THE CANONICAL PAGE, AT EVERY WIDTH ─────────────
              The header nav carries /catering-events/ too, but `.sz-navlinks`
              is display:none below 920px — so on a phone this link is the
              only one in the body of the page. It is a plain <a>, sized like
              body copy rather than a third competing button, so it informs
              without out-shouting the two package CTAs below it. */}
          <p className="t-body" style={{ marginTop: 14 }}>
            <a href="/catering-events/" style={{
              color: 'var(--sz-champagne)', fontFamily: 'var(--font-body)', fontWeight: 600,
              fontSize: 14.5, textDecoration: 'underline', textUnderlineOffset: 4,
            }}>
              See full Catering &amp; Events details &rarr;
            </a>
          </p>
        </div>

        <div className="sz-catering-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'var(--space-5)', alignItems: 'stretch' }}>
          {packages.map((p) => <CateringPackage key={p.name} pkg={p} />)}
        </div>

        <div style={{
          marginTop: 'var(--space-5)', background: 'rgba(28,23,20,0.40)',
          backdropFilter: 'blur(18px)', WebkitBackdropFilter: 'blur(18px)',
          border: '1px solid rgba(251,244,234,0.09)', borderRadius: 'var(--radius-lg)',
          padding: 'var(--space-6)', boxShadow: '0 2px 0 rgba(251,244,234,0.04) inset, 0 12px 34px rgba(0,0,0,0.45)',
        }}>
          <h3 style={{ fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: 17, color: 'var(--text-strong)' }}>Planning something different?</h3>
          <dl className="sz-catering-flex" style={{ marginTop: 'var(--space-4)', display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 'var(--space-4) var(--space-6)' }}>
            {flexible.map((f) => (
              <div key={f.t} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', minWidth: 0 }}>
                <span aria-hidden="true" style={{ marginTop: 7, width: 6, height: 6, flexShrink: 0, borderRadius: 999, background: 'var(--sz-champagne)' }} />
                <div style={{ minWidth: 0 }}>
                  <dt style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 14.5, color: 'var(--text-strong)' }}>{f.t}</dt>
                  <dd className="t-body" style={{ margin: '2px 0 0', color: 'var(--text-muted)', fontSize: 14, overflowWrap: 'anywhere' }}>{f.d}</dd>
                </div>
              </div>
            ))}
          </dl>
        </div>

        <div style={{ marginTop: 'var(--space-5)', display: 'grid', gap: 'var(--space-3)' }}>
          <p className="t-body" style={{ color: 'var(--text-faint)', fontSize: 13.5 }}>
            All displayed prices are estimates. Final pricing depends on venue, transportation, menu requirements and availability.
          </p>
          <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <span aria-hidden="true" style={{ flexShrink: 0, color: 'var(--salmon-300)', marginTop: 1 }}><Icon name="Snowflake" size={16} /></span>
            <p className="t-body" style={{ color: 'var(--text-muted)', fontSize: 13.5 }}>
              Freshly sealed all the way to your event. The seal is for transportation, not storage. Serve and consume immediately.
            </p>
          </div>
        </div>

      </div>
    </section>
  );
}

Object.assign(window, { Catering });