/* global React */
const { useState, useEffect, useRef } = React;

// ============================================
// Curated Unsplash photography
// ============================================
const PHOTOS = {
  // Baja California / Tijuana feel — sunset, warm
  hero_bg: "https://images.unsplash.com/photo-1518105779142-d975f22f1b0a?w=2000&q=80&auto=format&fit=crop", // warm desert dusk
  founder: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=900&q=80&auto=format&fit=crop", // professional woman, warm
  taco: "https://images.unsplash.com/photo-1565299585323-38d6b0865b47?w=900&q=80&auto=format&fit=crop", // tacos
  taquero: "https://images.unsplash.com/photo-1606851094291-6efae152bb87?w=900&q=80&auto=format&fit=crop", // street vendor warmth
  dentist: "https://images.unsplash.com/photo-1606811971618-4486d14f3f99?w=900&q=80&auto=format&fit=crop", // dental clinic warm
  artisan: "https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?w=900&q=80&auto=format&fit=crop", // artisan ceramics hands
  baja_1: "https://images.unsplash.com/photo-1580137189272-c9379f8864fd?w=1600&q=80&auto=format&fit=crop", // Baja landscape
  mercado: "https://images.unsplash.com/photo-1604147706283-d7119b5b822c?w=1200&q=80&auto=format&fit=crop", // mexican market
  whatsapp_phone: "https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?w=1200&q=80&auto=format&fit=crop" // phone in hand
};

// ============================================
// Lang context (lightweight)
// ============================================
const LangCtx = React.createContext({ lang: "es", setLang: () => {} });
const useLang = () => React.useContext(LangCtx);
const useT = () => {
  const { lang } = useLang();
  return window.COPY[lang];
};

// ============================================
// Reveal-on-scroll
// ============================================
function Reveal({ children, delay = 0, as: As = "div", className = "", style = {}, ...rest }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setShown(true); io.disconnect(); } });
    }, { threshold: 0.12 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return (
    <As ref={ref}
        className={`reveal ${shown ? "visible" : ""} ${className}`}
        style={{ transitionDelay: `${delay}ms`, ...style }}
        {...rest}>
      {children}
    </As>
  );
}

// ============================================
// AI¹-style superscript mark (subtle homage)
// ============================================
function Mark({ size = 1 }) {
  return (
    <span style={{ fontFamily: "var(--serif)", fontWeight: 500, letterSpacing: "-0.02em" }}>
      Cielo<sup style={{ fontFamily: "var(--mono)", fontSize: `${0.55 * size}em`, color: "var(--terracotta)", verticalAlign: "super", marginLeft: 1 }}>¹</sup>
    </span>
  );
}

// ============================================
// Nav
// ============================================
function Nav() {
  const t = useT();
  const { lang, setLang } = useLang();
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="nav-inner">
        <a href="#top" className="nav-logo" aria-label="Cielo Mercadotecnia">
          <span style={{ fontFamily: "var(--serif)", fontSize: 22, fontWeight: 500 }}>
            Cielo<sup style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--terracotta)", verticalAlign: "super" }}>¹</sup>
          </span>
          <span className="nav-logo-tag mono">MERCADOTECNIA</span>
        </a>

        <div className="nav-links">
          <a href="#servicios">{t.nav.servicios}</a>
          <a href="#casos">{t.nav.casos}</a>
          <a href="#manual">{t.nav.manual}</a>
          <a href="#productos">{t.nav.productos}</a>
          <a href="#contacto">{t.nav.contacto}</a>
        </div>

        <div className="nav-right">
          <div className="lang-toggle" role="group" aria-label="Language">
            <button className={lang === "es" ? "active" : ""} onClick={() => setLang("es")}>ES</button>
            <span>·</span>
            <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <a href="#contacto" className="btn btn-primary nav-cta">{t.nav.cta} →</a>
          <button className="nav-burger" onClick={() => setOpen(o => !o)} aria-label="Menu">
            <span /><span /><span />
          </button>
        </div>
      </div>
      {open && (
        <div className="nav-mobile">
          <a href="#servicios" onClick={() => setOpen(false)}>{t.nav.servicios}</a>
          <a href="#casos" onClick={() => setOpen(false)}>{t.nav.casos}</a>
          <a href="#manual" onClick={() => setOpen(false)}>{t.nav.manual}</a>
          <a href="#productos" onClick={() => setOpen(false)}>{t.nav.productos}</a>
          <a href="#contacto" onClick={() => setOpen(false)}>{t.nav.contacto}</a>
          <div className="lang-toggle">
            <button className={lang === "es" ? "active" : ""} onClick={() => setLang("es")}>ES</button>
            <span>·</span>
            <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
        </div>
      )}
    </nav>
  );
}

// ============================================
// Hero
// ============================================
function Hero() {
  const t = useT();
  return (
    <header id="top" className="hero">
      {/* sunset gradient sky */}
      <div className="hero-sky" aria-hidden="true">
        <div className="sun" />
        <div className="hero-grain" />
      </div>

      <div className="hero-inner container">
        <Reveal delay={0}>
          <div className="eyebrow hero-eyebrow">
            <span className="dot" /> {t.hero.eyebrow}
          </div>
        </Reveal>

        <Reveal delay={120} as="h1" className="hero-title">
          <span>{t.hero.title_a}</span>
          <span className="hero-grad">{t.hero.title_b}</span>
          <span>{t.hero.title_c}</span>
        </Reveal>

        <Reveal delay={240}>
          <p className="hero-sub">{t.hero.sub}</p>
        </Reveal>

        <Reveal delay={360}>
          <div className="hero-ctas">
            <a href="#contacto" className="btn btn-sunset">{t.hero.cta_primary} →</a>
            <a href="#manual" className="btn btn-ghost">{t.hero.cta_secondary}</a>
          </div>
        </Reveal>

        <Reveal delay={500}>
          <div className="hero-portrait-wrap">
            <div className="hero-portrait">
              <div className="portrait-frame">
                <div className="portrait-placeholder">
                  <svg viewBox="0 0 100 100" width="64" height="64" fill="none" stroke="currentColor" strokeWidth="1.2">
                    <circle cx="50" cy="38" r="16" />
                    <path d="M18 88 C 22 64, 78 64, 82 88" />
                  </svg>
                  <div className="mono" style={{ fontSize: 11, marginTop: 12, opacity: 0.6 }}>FOTO PENDIENTE</div>
                </div>
              </div>
              <div className="hero-portrait-meta">
                <div className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", color: "var(--ink-muted)" }}>FUNDADORA</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 22, marginTop: 4 }}>Cielo López</div>
                <div className="muted" style={{ fontSize: 14 }}>{t.hero.caption.replace("Fundado por Cielo López — ", "").replace("Founded by Cielo López — ", "")}</div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>

      <div className="hero-scrollcue mono">↓ scroll</div>
    </header>
  );
}

// ============================================
// Stats bar
// ============================================
function Stats() {
  const t = useT();
  return (
    <section className="stats-bar">
      <div className="container stats-grid">
        {t.stats.map((s, i) => (
          <Reveal key={i} delay={i * 80} className="stat">
            <div className="stat-n serif">{s.n}</div>
            <div className="stat-l">{s.l}</div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ============================================
// About
// ============================================
function About() {
  const t = useT();
  return (
    <section className="section about" id="about">
      <div className="container about-grid">
        <Reveal className="about-media">
          <div className="about-photo">
            <img src={PHOTOS.baja_1} alt="Baja California" />
            <div className="about-photo-tag mono">TIJUANA · BAJA CALIFORNIA</div>
          </div>
          <div className="about-photo about-photo-sm">
            <img src={PHOTOS.taquero} alt="Negocio local" />
          </div>
        </Reveal>

        <div className="about-copy">
          <Reveal><div className="eyebrow">{t.about.eyebrow}</div></Reveal>
          <Reveal delay={80} as="h2" className="h-display">
            {t.about.title_a} <span className="grad-text">{t.about.title_b}</span>
          </Reveal>
          <Reveal delay={160}><p className="lede">{t.about.body_1}</p></Reveal>
          <Reveal delay={240}><p className="lede muted">{t.about.body_2}</p></Reveal>
          <Reveal delay={320}>
            <blockquote className="pull">
              <span className="pull-mark">“</span>
              {t.about.pull}
            </blockquote>
          </Reveal>
          <Reveal delay={400}>
            <div className="founder-card">
              <div className="founder-avatar">CSL</div>
              <div>
                <div className="serif" style={{ fontSize: 20 }}>Cielo López</div>
                <div className="muted" style={{ fontSize: 14 }}>{t.about.role} · {t.about.city}</div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ============================================
// Servicios
// ============================================
function Servicios() {
  const t = useT();
  return (
    <section className="section servicios" id="servicios">
      <div className="container">
        <div className="section-head">
          <Reveal><div className="eyebrow">{t.servicios.eyebrow}</div></Reveal>
          <Reveal delay={80} as="h2" className="h-display">{t.servicios.title}</Reveal>
          <Reveal delay={160}><p className="section-sub muted">{t.servicios.sub}</p></Reveal>
        </div>
        <div className="serv-grid">
          {t.servicios.items.map((s, i) => (
            <Reveal key={i} delay={i * 60} className="serv-card">
              <div className="serv-tag mono">{s.tag}</div>
              <h3 className="serv-title">{s.t}</h3>
              <p className="serv-desc">{s.d}</p>
              <div className="serv-arrow">→</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================
// Casos de éxito
// ============================================
function Casos() {
  const t = useT();
  const photos = [PHOTOS.taquero, PHOTOS.dentist, PHOTOS.artisan];
  return (
    <section className="section casos" id="casos">
      <div className="container">
        <div className="section-head">
          <Reveal><div className="eyebrow">{t.casos.eyebrow}</div></Reveal>
          <Reveal delay={80} as="h2" className="h-display">{t.casos.title}</Reveal>
          <Reveal delay={160}><p className="section-sub muted">{t.casos.sub}</p></Reveal>
        </div>
        <div className="casos-grid">
          {t.casos.items.map((c, i) => (
            <Reveal key={i} delay={i * 100} className="caso-card">
              <div className="caso-photo">
                <img src={photos[i]} alt={c.biz} />
                <div className="caso-stat">
                  <div className="caso-stat-n serif">{c.stat}</div>
                  <div className="caso-stat-l mono">{c.stat_l}</div>
                </div>
              </div>
              <div className="caso-body">
                <p className="caso-quote">“{c.quote}”</p>
                <div className="caso-meta">
                  <div className="caso-name serif">{c.name}</div>
                  <div className="caso-biz muted mono">{c.biz}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.CieloPart1 = { Nav, Hero, Stats, About, Servicios, Casos, Reveal, useLang, useT, LangCtx, PHOTOS, Mark };