/* VisitOasis — "where to spend it." The real North Tulsa flagship: address,
   hours, phone, directions, and what makes Oasis more than a grocery store.
   Includes a user-fillable storefront photo slot. Store details are verified
   public info — confirm hours seasonally. */
function VisitOasis({ lang }) {
  const { Button, Pill } = window.OasisFreshMarketEBTSNAPGuideDesignSystem_23fc30;

  const accepts = [
    { en: 'EBT / SNAP', es: 'EBT / SNAP' },
    { en: 'State WIC', es: 'WIC estatal' },
    { en: 'Tribal WIC', es: 'WIC tribal' },
  ];

  const more = [
    { icon: 'HandHelping', color: 'var(--leaf-600)', soft: 'var(--leaf-100)',
      title: { en: 'Free in-store helpers', es: 'Ayudantes gratis en tienda' },
      d: { en: 'Trained guides who shop the aisles with you, in English or Spanish.', es: 'Guías capacitados que recorren los pasillos contigo, en inglés o español.' } },
    { icon: 'Coins', color: 'var(--gold-500)', soft: 'var(--gold-100)',
      title: { en: 'DUO Bucks rewards', es: 'Recompensas DUO Bucks' },
      d: { en: 'Earn matching dollars on fresh produce every time you shop with EBT.', es: 'Gana dólares iguales en frutas y verduras cada vez que compras con EBT.' } },
    { icon: 'Sprout', color: 'var(--clementine-500)', soft: 'var(--clementine-100)',
      title: { en: 'More than a store', es: 'Más que una tienda' },
      d: { en: 'Built to end a food desert — with community programs and fresh, affordable food.', es: 'Creada para acabar con un desierto alimentario — con programas comunitarios y comida fresca y accesible.' } },
  ];

  const stores = [
    {
      badge: { en: 'Flagship store', es: 'Tienda principal' },
      area: { en: 'North Tulsa', es: 'Norte de Tulsa' },
      addr1: '1725 N Peoria Ave', addr2: 'Tulsa, OK 74106',
      phone: '(918) 935-2092', tel: '+19189352092',
      hours: { en: ['Mon–Sat: 8am – 9pm', 'Sunday: 8am – 8pm'], es: ['Lun–Sáb: 8am – 9pm', 'Domingo: 8am – 8pm'] },
      maps: 'https://www.google.com/maps/dir/?api=1&destination=1725%20N%20Peoria%20Ave%20Tulsa%20OK%2074106',
    },
    {
      badge: { en: 'South location', es: 'Sucursal sur' },
      area: { en: 'South Tulsa', es: 'Sur de Tulsa' },
      addr1: '6207 S Peoria Ave', addr2: 'Tulsa, OK 74105',
      phone: null, tel: null,
      hours: { en: ['Mon–Sat: 8am – 9pm', 'Sunday: 8am – 8pm'], es: ['Lun–Sáb: 8am – 9pm', 'Domingo: 8am – 8pm'] },
      maps: 'https://www.google.com/maps/dir/?api=1&destination=6207%20S%20Peoria%20Ave%20Tulsa%20OK%2074105',
    },
  ];

  const StoreCard = ({ s }) => (
    <div style={{ background: 'linear-gradient(160deg, var(--forest-700), var(--forest-900))', borderRadius: 'var(--radius-xl)', padding: 'var(--space-8)', color: 'var(--cream-50)', position: 'relative', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', height: '100%' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(80% 60% at 100% 0%, rgba(227,161,44,0.18), transparent 55%)' }} />
      <div style={{ position: 'relative' }}>
        <Pill tone="gold">{t(lang, s.badge.en, s.badge.es)}</Pill>
        <h3 style={{ color: 'var(--cream-50)', fontSize: 'var(--fs-h3)', margin: '16px 0 4px' }}>Oasis Fresh Market</h3>
        <div style={{ color: 'var(--text-on-forest-muted)', fontSize: 'var(--fs-small)', marginBottom: 20 }}>{t(lang, s.area.en, s.area.es)}</div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
            <Icon name="MapPin" size={20} stroke="var(--gold-400)" style={{ marginTop: 2, flexShrink: 0 }} />
            <span style={{ fontSize: 'var(--fs-body)' }}>{s.addr1}<br />{s.addr2}</span>
          </div>
          <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
            <Icon name="Clock" size={20} stroke="var(--gold-400)" style={{ marginTop: 2, flexShrink: 0 }} />
            <span style={{ fontSize: 'var(--fs-body)' }}>{t(lang, s.hours.en, s.hours.es).map((h, i) => <React.Fragment key={i}>{i > 0 && <br />}{h}</React.Fragment>)}</span>
          </div>
          {s.phone && (
            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <Icon name="Phone" size={20} stroke="var(--gold-400)" style={{ flexShrink: 0 }} />
              <a href={'tel:' + s.tel} style={{ fontSize: 'var(--fs-body)', color: 'var(--cream-50)', textDecoration: 'none', fontWeight: 700 }}>{s.phone}</a>
            </div>
          )}
        </div>

        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', margin: '20px 0' }}>
          <span style={{ fontSize: 'var(--fs-caption)', color: 'var(--text-on-forest-muted)', alignSelf: 'center', fontWeight: 700 }}>{t(lang, 'We accept:', 'Aceptamos:')}</span>
          {accepts.map((a, i) => (
            <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.1)', border: '1.5px solid rgba(255,255,255,0.18)', fontSize: 'var(--fs-caption)', fontWeight: 700, color: 'var(--cream-50)' }}>
              <Icon name="Check" size={13} stroke="var(--leaf-400)" strokeWidth={3} /> {t(lang, a.en, a.es)}
            </span>
          ))}
        </div>

        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Button as="a" href={s.maps} target="_blank" variant="gold" iconRight={<Icon name="Navigation" size={18} stroke="currentColor" />}>
            {t(lang, 'Get directions', 'Cómo llegar')}
          </Button>
          <Button as="a" href="https://www.oasisfreshmarkets.net/" target="_blank" variant="onForest" iconRight={<Icon name="ExternalLink" size={18} stroke="currentColor" />}>
            {t(lang, 'Visit website', 'Ver sitio web')}
          </Button>
        </div>
      </div>
    </div>
  );

  return (
    <section id="visit" style={{ padding: 'var(--space-20) 0', background: 'var(--cream-50)' }}>
      <div className="oasis-container">
        <SectionHead
          center
          eyebrow={t(lang, 'Where to shop', 'Dónde comprar')}
          title={t(lang, 'Come shop with us', 'Ven a comprar con nosotros')}
          intro={t(lang, 'Oasis Fresh Market is a full grocery store built for the community — fresh food, fair prices, and people ready to help.', 'Oasis Fresh Market es un supermercado completo hecho para la comunidad — comida fresca, precios justos, y gente lista para ayudar.')}
        />

        {/* Storefront photo */}
        <div style={{ width: '100%', marginBottom: 'var(--space-6)', borderRadius: '22px', overflow: 'hidden', boxShadow: 'var(--shadow-md)' }}>
          <img src="/assets/oasis-store.jpg" alt="Oasis Fresh Market storefront" style={{ width: '100%', height: 'auto', display: 'block', objectFit: 'cover', maxHeight: '420px' }} />
        </div>

        {/* Two store locations */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 'var(--space-6)', alignItems: 'stretch', marginBottom: 'var(--space-8)' }}>
          {stores.map((s, i) => <StoreCard key={i} s={s} />)}
        </div>

        {/* What makes Oasis different */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 'var(--space-5)' }}>
          {more.map((m, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="oasis-tip-card" style={{ height: '100%' }}>
                <div style={{ width: 52, height: 52, borderRadius: 'var(--radius-md)', background: m.soft, display: 'grid', placeItems: 'center', marginBottom: 14 }}>
                  <Icon name={m.icon} size={28} stroke={m.color} strokeWidth={2.3} />
                </div>
                <h3 style={{ margin: '0 0 6px', fontSize: 'var(--fs-h4)', color: 'var(--text-strong)' }}>{t(lang, m.title.en, m.title.es)}</h3>
                <p style={{ margin: 0, fontSize: 'var(--fs-body)', color: 'var(--text-body)', lineHeight: 'var(--lh-normal)' }}>{t(lang, m.d.en, m.d.es)}</p>
              </div>
            </Reveal>
          ))}
        </div>

        <p style={{ textAlign: 'center', fontSize: 'var(--fs-caption)', color: 'var(--text-muted)', marginTop: 'var(--space-8)' }}>
          {t(lang, 'Both stores accept EBT, SNAP, and WIC. Hours can change on holidays — call ahead or check the website to be sure.', 'Ambas tiendas aceptan EBT, SNAP y WIC. El horario puede cambiar en días festivos — llama antes o revisa el sitio web para confirmar.')}
        </p>
      </div>
    </section>
  );
}
Object.assign(window, { VisitOasis });