// landing.jsx — Single-page landing: Hero + Templates + FAQ.

// Real example thumbnails (rendered from the map designer).
// English variants live in examples/en/*.png (same base names).
const TEMPLATE_IMG = { wedding: 'boda', home: 'hogar', firstmet: 'conocimos' };
const TEMPLATE_EMOJI = { firstmet: '❤️', home: '🏡', wedding: '💍' };
const TEMPLATE_ORDER = ['firstmet', 'home', 'wedding'];

function exampleDir(lang) { return lang === 'en' ? 'examples/en/' : 'examples/'; }

// Auto-advancing hero slider (lifestyle photos). No clicking needed — it loops.
const SLIDER_IMGS = ['examples/slider/slider-1.jpg', 'examples/slider/slider-2.jpg', 'examples/slider/slider-3.jpg'];
function HeroSlider() {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setI(x => (x + 1) % SLIDER_IMGS.length), 4000);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="hero-slider">
      {SLIDER_IMGS.map((src, idx) => (
        <img key={idx} src={src} alt="" className={`hero-slide ${idx === i ? 'active' : ''}`} loading="lazy" />
      ))}
      <div className="hero-slider-dots">
        {SLIDER_IMGS.map((_, idx) => <span key={idx} className={idx === i ? 'on' : ''} />)}
      </div>
    </div>
  );
}

function Landing({ onStart, onPickTemplate }) {
  const { t, lang } = React.useContext(window.LangContext);
  const dir = exampleDir(lang);

  return (
    <div className="landing">
      <header className="nav">
        <div className="nav-brand">WIS<i>maps</i></div>
        <nav className="nav-links">
          <a href="#plantillas">{t('nav.templates')}</a>
          <a href="#faq">{t('nav.faq')}</a>
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <LangToggle />
          <button className="nav-cta" onClick={onStart}>{t('nav.createMap')}</button>
        </div>
      </header>

      {/* HERO */}
      <section className="hero">
        <div>
          <div className="hero-eyebrow">{t('hero.eyebrow')}</div>
          <h1 className="hero-title">
            {t('hero.titleLine1')}
            <br /> <em>{t('hero.titleLine2')}</em>
          </h1>
          <p className="hero-sub">{t('hero.sub')}</p>
          <div className="hero-ctas">
            <button className="btn-primary" onClick={onStart}>
              {t('hero.ctaStart')}
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M5 12h14M13 5l7 7-7 7"/>
              </svg>
            </button>
            <a href="#plantillas" className="btn-ghost" style={{ textDecoration: 'none' }}>{t('hero.ctaTemplates')}</a>
          </div>
          <div className="hero-meta">
            <span className="hero-meta-item">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
              {t('hero.meta1')}
            </span>
            <span className="hero-meta-item">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5"/></svg>
              {t('hero.meta2')}
            </span>
            <span className="hero-meta-item">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 12v6a2 2 0 002 2h12a2 2 0 002-2v-6"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
              {t('hero.meta3')}
            </span>
          </div>
        </div>

        <HeroSlider />
      </section>

      {/* MEMORIES / TEMPLATES */}
      <section className="template-section" id="plantillas">
        <div className="intent-wrap">
          <h2 className="intent-title">
            {t('intent.titlePre')}<em>{t('intent.titleEm')}</em>{t('intent.titlePost')}
          </h2>

          <div className="template-grid template-grid-4">
            {TEMPLATE_ORDER.map(id => {
              const tpl = window.getLocalizedTemplate(lang, id);
              if (!tpl || !tpl.id) return null;
              return (
                <button key={id} className="template-card-lg" onClick={() => onPickTemplate(id)}>
                  <div className="template-thumb-lg">
                    <img src={`${dir}${TEMPLATE_IMG[id]}.png`} alt={tpl.name} className="template-thumb-img" />
                  </div>
                  <div className="template-meta-lg">
                    <h4>{TEMPLATE_EMOJI[id]} {tpl.name}</h4>
                    <span className="template-tag">{tpl.subtitle}</span>
                  </div>
                </button>
              );
            })}

            {/* Start from scratch */}
            <button className="template-card-lg" onClick={onStart}>
              <div className="template-thumb-lg template-thumb-blank">
                <div className="blank-inner">
                  <span className="blank-icon">✨</span>
                  <span className="blank-text">{t('intent.blankTile1')}<br />{t('intent.blankTile2')}</span>
                </div>
              </div>
              <div className="template-meta-lg">
                <h4>✨ {t('intent.blankName')}</h4>
                <span className="template-tag">{t('intent.blankSub')}</span>
              </div>
            </button>
          </div>
        </div>
      </section>

      <FAQ />
      <Footer />
    </div>
  );
}

function FAQ() {
  const { t, lang } = React.useContext(window.LangContext);
  const items = (window.I18N_STRINGS[lang] && window.I18N_STRINGS[lang].faq.items) || window.I18N_STRINGS.es.faq.items;
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq-section" id="faq">
      <div className="faq-wrap">
        <h2 className="intent-title" style={{ textAlign: 'left' }}>{t('faq.heading')}</h2>
        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-toggle">{open === i ? '−' : '+'}</span>
              </button>
              {open === i && <div className="faq-a">{it.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const { t } = React.useContext(window.LangContext);
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div className="footer-brand">
          <div className="nav-brand">WIS<i>maps</i></div>
          <p className="footer-blurb">{t('footer.blurb')}</p>
        </div>
        <div className="footer-col">
          <h5>{t('footer.product')}</h5>
          <a href="#plantillas">{t('footer.templates')}</a>
          <a href="#faq">{t('footer.faq')}</a>
          <a href="#">{t('footer.giftcards')}</a>
        </div>
        <div className="footer-col">
          <h5>{t('footer.contact')}</h5>
          <a href="mailto:hola@wismaps.com">hola@wismaps.com</a>
          <a href="#">Instagram</a>
        </div>
        <div className="footer-col">
          <h5>{t('footer.legal')}</h5>
          <a href="#">{t('footer.privacy')}</a>
          <a href="#">{t('footer.terms')}</a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>{t('footer.rights')}</span>
        <span>{t('footer.madeIn')}</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Landing, Footer });