/* landing.jsx — Página principal */

// Renderiza texto que puede contener <em>…</em> (mantiene la cursiva
// de copys como "una pequeña <em>pâtisserie</em> de Lyon" sin innerHTML).
const renderRich = (str) => {
  if (typeof str !== 'string' || str.indexOf('<em>') < 0) return str;
  const out = [];
  let rest = str;
  let key = 0;
  while (true) {
    const a = rest.indexOf('<em>');
    if (a < 0) { if (rest) out.push(rest); break; }
    if (a > 0) out.push(rest.slice(0, a));
    const b = rest.indexOf('</em>', a + 4);
    if (b < 0) { out.push(rest.slice(a)); break; }
    out.push(<em key={'em' + key++}>{rest.slice(a + 4, b)}</em>);
    rest = rest.slice(b + 5);
  }
  return out;
};

const Hero = ({ variant = 'full', setRoute }) => {
  const heroSrc = window.SC('hero.image') || (window.SHOWCASE && window.SHOWCASE.hero) || 'images/hero.jpg';
  const title = window.SC('hero.title', 'Más que comer, ven a vivir la experiencia');
  const ctaPrimary = window.SC('hero.ctaPrimary', 'Ver la carta');
  const ctaSecondary = window.SC('hero.ctaSecondary', 'Reservar una mesa');
  const reservaMsg = window.SC('meta.reservationMsg', 'Hola, quisiera reservar una mesa en Alexandra Castro Pastelería. ¿Disponibilidad?');

  // Full-bleed: option 0 from questions
  if (variant === 'full') {
    return (
      <section className="hero hero--full">
        <div className="hero__media">
          <img src={heroSrc}
               alt="Alexandra Castro Pastelería"
               onError={(e) => { if (e.target.src.indexOf('hero.jpg') < 0) e.target.src = 'images/hero.jpg'; }} />
        </div>
        <div className="hero__overlay" style={{ backgroundSize: "contain" }} />
        <div className="hero__content">
          <div className="hero__logo" aria-label="Alexandra Castro">
            <Logo size="clamp(120px, 18vw, 260px)" />
          </div>
          <div className="hero__ornament"><span></span></div>
          <p className="hero__title">{title}</p>
          <p className="hero__sub">
            {window.SC('hero.subtitle', 'Nuestra pasión es crear momentos dulces que perduren en tu memoria. Cada ingrediente es seleccionado con el corazón. · Barranquilla')}
          </p>
          <div className="hero__ctas">
            <button className="btn btn--lg" onClick={() => setRoute('menu')}>{ctaPrimary}</button>
            <button className="btn btn--outline btn--lg" onClick={() => window.open(window.waLink(reservaMsg), '_blank')}>{ctaSecondary}</button>
          </div>
        </div>
      </section>);

  }
  // Split editorial — option 2 from questions (image block + side text)
  return (
    <section className="hero hero--split">
      <div className="container">
        <div className="hero__text">
          <div className="eyebrow eyebrow--ink" style={{ marginBottom: 24 }}>Pastelería francesa · Barranquilla</div>
          <div className="hero__logo" aria-label="Alexandra Castro">
            <Logo size="clamp(96px, 14vw, 200px)" />
          </div>
          <div className="hero__ornament"><span style={{ background: 'var(--gold)' }}></span></div>
          <p className="hero__title">{title}</p>
          <p className="hero__sub">
            {window.SC('hero.subtitle', 'Nuestra pasión es crear momentos dulces que perduren en tu memoria. Cada ingrediente es seleccionado con el corazón. · Barranquilla')}
          </p>
          <div className="hero__ctas">
            <button className="btn btn--lg" onClick={() => setRoute('menu')}>{ctaPrimary}</button>
            <button className="btn btn--outline btn--lg" onClick={() => window.open(window.waLink(reservaMsg), '_blank')}>{ctaSecondary}</button>
          </div>
        </div>
        <div className="hero__media-img">
          <img src={heroSrc}
               alt="Alexandra Castro Pastelería"
               onError={(e) => { if (e.target.src.indexOf('hero.jpg') < 0) e.target.src = 'images/hero.jpg'; }} />
        </div>
      </div>
    </section>);

};

// ── Tres especialidades ────────────────────────────────────────────
const Specialties = ({ setRoute }) => {
  const cards = window.SC('specialties.cards', []);
  return (
    <section className="section section--alt">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{window.SC('specialties.eyebrow', 'El oficio de la pastelería')}</span>
          <h2 className="display display-2">{window.SC('specialties.title', 'Tres firmas que nos definen')}</h2>
          <p className="lede">{window.SC('specialties.lede', 'Cada pieza nace en nuestro horno, antes del amanecer, con la misma mantequilla francesa que usaba Alexandra cuando empezó.')}</p>
        </div>
        <div className="specialties">
          {(Array.isArray(cards) ? cards : []).map((card, i) =>
          <article key={i} className="specialty">
              <div className="specialty__img">
                <ImgSlot tone={card.image || window.pickImage(card.cat)} label={card.title} icon={false} />
              </div>
              <span className="specialty__sello">{card.sello}</span>
              <h3 className="specialty__title">{card.title}</h3>
              <p className="specialty__body">{card.body}</p>
              <a href="#" className="specialty__link" onClick={(e) => {e.preventDefault();setRoute('menu');}}>{card.linkLabel}</a>
            </article>
          )}
        </div>
      </div>
    </section>);

};


// ── Historia ──────────────────────────────────────────────────────
const MaisonStory = () => {
  const paragraphs = window.SC('maison.paragraphs', []);
  return (
    <section className="section" id="historia">
      <div className="container">
        <div className="maison">
          <div className="maison__media">
            <ImgSlot tone={window.SC('maison.image') || window.pickImage('maison')} label="" icon={false} />
          </div>
          <div className="maison__body">
            <span className="eyebrow" style={{ display: 'block', marginBottom: 22 }}>{window.SC('maison.eyebrow', 'Notre histoire · Desde 2018')}</span>
            <h2 className="display display-2" style={{ marginBottom: 28 }}>{window.SC('maison.title', 'De una cocina pequeña, un sueño grande.')}</h2>
            {(Array.isArray(paragraphs) ? paragraphs : []).map((p, i) =>
            <p key={i}>{renderRich(p)}</p>
            )}
            <div className="maison__signature">{window.SC('maison.signature', '— Alexandra')}</div>
          </div>
        </div>
      </div>
    </section>);

};


// ── Carta destacada (cross-link a menú) ──────────────────────────
const FeaturedFromMenu = ({ setRoute, onProductClick }) => {
  const has = window.hasImg || ((s) => typeof s === 'string' && /^https?:\/\//.test(s));
  const used = (window.SHOWCASE && window.SHOWCASE._used) || new Set();
  let featured = PRODUCTS.filter((p) => (p.sellos.includes('bestseller') || p.sellos.includes('signature')) && has(p.img) && !used.has(p.img)).slice(0, 4);
  if (featured.length < 3) {
    const extra = PRODUCTS.filter((p) => has(p.img) && !used.has(p.img) && !featured.includes(p)).slice(0, 3 - featured.length);
    featured = featured.concat(extra);
  }
  return (
    <section className="section section--plum">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow eyebrow--cream" style={{ color: 'var(--gold-light)' }}>{window.SC('featured.eyebrow', 'De la carta')}</span>
          <h2 className="display display-2" style={{ color: 'var(--cream)' }}>{window.SC('featured.title', 'Lo más querido')}</h2>
          <p className="lede" style={{ color: 'rgba(255,255,255,0.75)' }}>{window.SC('featured.lede', 'Una pequeña selección de los favoritos de la casa. La carta completa te espera más adelante.')}</p>
        </div>
        <div className="specialties">
          {featured.map((p) =>
          <article key={p.id} className="specialty" onClick={() => onProductClick(p)} style={{ cursor: 'pointer' }}>
              <div className="specialty__img">
                <ImgSlot tone={p.img} label={p.name} sub="Foto del producto" icon={false} />
              </div>
              <span className="specialty__sello" style={{ color: 'var(--gold-light)' }}>— {p.sellos.includes('signature') ? 'Spécialité maison' : 'La favorite'} —</span>
              <h3 className="specialty__title" style={{ color: 'var(--cream)' }}>{p.name}</h3>
              <p className="specialty__body" style={{ color: 'rgba(255,255,255,0.75)' }}>{p.desc}</p>
              <span className="specialty__link" style={{ color: 'var(--gold-light)', borderColor: 'var(--gold-light)' }}>{cop(p.price)}</span>
            </article>
          ).slice(0, 3)}
        </div>
        <div style={{ textAlign: 'center', marginTop: 56 }}>
          <button className="btn btn--on-dark" onClick={() => setRoute('menu')}>{window.SC('featured.ctaLabel', 'Ver la carta completa')}</button>
        </div>
      </div>
    </section>);

};

// ── Visit / horarios ──────────────────────────────────────────────
const Visit = () => {
  // Días en español
  const now = new Date();
  const days = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'];
  const today = days[now.getDay()];
  const hour = now.getHours();
  const openFrom = window.SC('visit.openFrom', 9);
  const openTo = window.SC('visit.openTo', 19);
  const isOpen = hour >= openFrom && hour < openTo; // 9:15 a. m. – 7:00 p. m., todos los días
  const reservaMsg = window.SC('meta.reservationMsg', 'Hola, quisiera reservar una mesa en Alexandra Castro Pastelería. ¿Disponibilidad?');
  return (
    <section className="section section--tight" id="visit">
      <div className="container">
        <div className="visit">
          <div className="visit__block">
            <div className="visit__label">{window.SC('visit.label1', '— La pastelería —')}</div>
            <div className="visit__title">{window.SC('visit.address1', 'Cra. 51 #82–145')}</div>
            <div className="visit__body">{window.SC('visit.address2line1', 'Nte. Centro Histórico')}<br />{window.SC('visit.address2line2', 'Barranquilla, Atlántico')}</div>
          </div>
          <div className="visit__block">
            <div className="visit__label">{window.SC('visit.label2', '— Horarios —')}</div>
            <div className="visit__title" id="weekly-hours">
              {window.SC('visit.hoursLine1', 'Todos los días')}<br />
              {window.SC('visit.hoursLine2', '9:15 a. m. – 7:00 p. m.')}
            </div>
            <div className="visit__body" style={{ marginTop: 14 }}>
              <span className={`status-pill ${isOpen ? '' : 'status-pill--closed'}`}>
                <span className="status-pill__dot"></span>
                {isOpen ? `Abierto · ${today}` : `Cerrado · ${today}`}
              </span>
            </div>
          </div>
          <div className="visit__block">
            <div className="visit__label">{window.SC('visit.label3', '— Reservas —')}</div>
            <div className="visit__title">
              <a href={window.waLink(reservaMsg)}
                 target="_blank" rel="noopener noreferrer"
                 style={{ color: 'inherit', textDecoration: 'none' }}>
                {window.SC('visit.phoneDisplay', '+57 315 323 2280')}
              </a>
            </div>
            <div className="visit__body">
              {window.SC('visit.phoneSub', 'Reserva por WhatsApp')}
            </div>
          </div>
        </div>
      </div>
    </section>);

};

// ── Banner dinámico ──────────────────────────────────────────────
const DynamicBanner = () =>
<div id="dynamic-banner">
    <div className="container">
      <p>
        <strong>{window.SC('banner.strongText', 'Hoy en la vitrina')}</strong>
        {window.SC('banner.text', 'Tarta de pistacho siciliano · macarons de violeta · brunch hasta las 12 m.')}
      </p>
    </div>
  </div>;


// ── Landing page ─────────────────────────────────────────────────
const Landing = ({ heroVariant, setRoute, onProductClick }) => {
  const order = window.SC('sectionsOrder', ['banner', 'hero', 'specialties', 'maison', 'featured', 'visit']);
  const list = Array.isArray(order) ? order : ['banner', 'hero', 'specialties', 'maison', 'featured', 'visit'];
  const heroVar = window.SC('hero.variant', heroVariant || 'full');
  const render = {
    banner: () => <DynamicBanner key="banner" />,
    hero: () => <Hero key="hero" variant={heroVar} setRoute={setRoute} />,
    specialties: () => <Specialties key="specialties" setRoute={setRoute} />,
    maison: () => <MaisonStory key="maison" />,
    featured: () => <FeaturedFromMenu key="featured" setRoute={setRoute} onProductClick={onProductClick} />,
    visit: () => <Visit key="visit" />,
  };
  return (
    <>
      {list.map((name) => {
        if (!render[name]) return null;
        if (window.SC(name + '.visible', true) === false) return null;
        return render[name]();
      })}
    </>);

};


window.Landing = Landing;
window.Hero = Hero;