// v2A · "Joyería" — composición centrada y simétrica, ritmo de casa de alta joyería
const { V2, Reveal, Slideshow, StarMark, Eyebrow, WaButton, GalleryFilter, SaboresList, Cotizador, Calendario, FaqList, Contacto, FooterV2, DIFERENCIALES, clampPx } = window;
const PJ = window.MD.PHOTOS;

const NAVJ = [['Galería', '#galeria'], ['Sabores', '#sabores'], ['Cotizar', '#cotizar'], ['Fechas', '#fechas'], ['Historia', '#maleni']];

function NavJ() {
  const [solid, setSolid] = React.useState(false);
  React.useEffect(() => { const f = () => setSolid(window.scrollY > 40); f(); window.addEventListener('scroll', f); return () => window.removeEventListener('scroll', f); }, []);
  return (
    <header style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50, padding: '14px clamp(16px, 4vw, 48px)', display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 16, background: solid ? 'rgba(18,12,9,.82)' : 'transparent', backdropFilter: solid ? 'blur(14px)' : 'none', borderBottom: `1px solid ${solid ? V2.lineSoft : 'transparent'}`, transition: 'all .5s' }}>
      <nav className="v2-nav" style={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>{NAVJ.map(([l, h]) => <a key={l} href={h}>{l}</a>)}</nav>
      <a href="#inicio" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', lineHeight: 1, opacity: solid ? 1 : 0, transition: 'opacity .5s' }}>
        <span style={{ fontFamily: V2.script, fontSize: 34, color: V2.gold }}>Mil Delicias</span>
      </a>
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}><WaButton style={{ padding: '14px 24px', fontSize: 11 }}>Hacer pedido</WaButton></div>
    </header>
  );
}

function Sec({ id, eyebrow, title, sub, children, bg, pad = 'clamp(80px, 10vw, 150px)', max = 1240 }) {
  return (
    <section id={id} style={{ background: bg || 'transparent', padding: `${pad} clamp(20px, 5vw, 72px)` }}>
      <div style={{ maxWidth: max, margin: '0 auto' }}>
        {(eyebrow || title) && (
          <Reveal style={{ textAlign: 'center', marginBottom: 'clamp(40px, 5vw, 72px)' }}>
            {eyebrow && <Eyebrow style={{ justifyContent: 'center' }}><span>{eyebrow}</span><span style={{ width: 28, height: 1, background: V2.gold, display: 'inline-block' }} /></Eyebrow>}
            {title && <h2 style={{ fontFamily: V2.display, fontSize: clampPx(34, 4.6, 62), fontWeight: 400, lineHeight: 1.05, letterSpacing: '-0.015em', margin: '20px auto 0', maxWidth: 820, textWrap: 'balance' }}>{title}</h2>}
            {sub && <p style={{ fontFamily: V2.serif, fontSize: clampPx(18, 1.6, 22), fontStyle: 'italic', color: V2.muted, lineHeight: 1.6, margin: '18px auto 0', maxWidth: 640, textWrap: 'pretty' }}>{sub}</p>}
          </Reveal>
        )}
        {children}
      </div>
    </section>
  );
}

const Sc = ({ children }) => <span style={{ fontFamily: V2.script, color: V2.gold, fontWeight: 400, fontSize: '1.28em' }}>{children}</span>;

function HeroJ() {
  return (
    <Slideshow style={{ minHeight: '100vh' }} dim={0.78}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 55% at 50% 55%, rgba(18,12,9,.55), transparent 70%)' }} />
      <div id="inicio" style={{ position: 'relative', minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '140px 24px 120px' }}>
        <Reveal><StarMark size={26} /></Reveal>
        <Reveal delay={120}><div style={{ fontFamily: V2.sans, fontSize: 11, letterSpacing: '.4em', textTransform: 'uppercase', color: V2.ink, opacity: .85, marginTop: 26 }}>Repostería boutique · Moquegua · desde 2022</div></Reveal>
        <Reveal delay={240}><h1 style={{ fontFamily: V2.script, fontSize: clampPx(84, 15, 210), color: V2.gold, fontWeight: 400, lineHeight: .95, margin: '18px 0 0', textShadow: '0 20px 60px rgba(0,0,0,.45)' }}>Mil Delicias</h1></Reveal>
        <Reveal delay={360}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 18, margin: '26px 0 22px', justifyContent: 'center' }}><span style={{ width: 60, height: 1, background: V2.gold }} /><span style={{ fontFamily: V2.display, fontSize: clampPx(19, 2, 28), fontStyle: 'italic', color: V2.ink, fontWeight: 500 }}>Arte en cada torta y bocadito</span><span style={{ width: 60, height: 1, background: V2.gold }} /></div>
        </Reveal>
        <Reveal delay={480}><p style={{ fontFamily: V2.serif, fontSize: clampPx(19, 1.7, 23), color: V2.ink, maxWidth: 560, lineHeight: 1.55, margin: 0, textWrap: 'pretty' }}>Tortas y bocaditos personalizados. El color exacto que pides, queque fresco que no empalaga y entrega puntual para tu celebración.</p></Reveal>
        <Reveal delay={600}><div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center', marginTop: 40 }}><WaButton big /><a className="v2-btn ghost big" href="#galeria">Ver la galería</a></div></Reveal>
      </div>
    </Slideshow>
  );
}

function DiferencialesJ() {
  return (
    <Sec id="promesas" eyebrow="Lo que nos define" title={<>Cuatro promesas en <Sc>cada pedido.</Sc></>}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 180px), 1fr))', gap: 0, borderTop: `1px solid ${V2.line}`, borderBottom: `1px solid ${V2.line}` }}>
        {DIFERENCIALES.map(([n, t, d], i) => (
          <Reveal key={n} delay={i * 110}>
            <div style={{ padding: 'clamp(32px, 3vw, 48px) 28px', textAlign: 'center', borderLeft: i ? `1px solid ${V2.lineSoft}` : 'none', height: '100%' }}>
              <div style={{ fontFamily: V2.display, fontSize: 15, fontStyle: 'italic', color: V2.gold, letterSpacing: '.1em' }}>{n}</div>
              <h3 style={{ fontFamily: V2.display, fontSize: 24, fontWeight: 400, margin: '18px 0 14px', lineHeight: 1.2, textWrap: 'balance' }}>{t}</h3>
              <p style={{ fontFamily: V2.serif, fontSize: 18, fontStyle: 'italic', color: V2.muted, lineHeight: 1.6, margin: 0, textWrap: 'pretty' }}>{d}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </Sec>
  );
}

function MaleniJ() {
  return (
    <Sec id="maleni" bg={V2.bg2} eyebrow="La repostera" title={<>Detrás de cada torta, <Sc>Maleni.</Sc></>}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 380px), 1fr))', gap: 'clamp(32px, 5vw, 80px)', alignItems: 'center' }}>
        <Reveal><div style={{ position: 'relative', padding: 18 }}><div style={{ position: 'absolute', inset: 0, border: `1px solid ${V2.gold}`, opacity: .55 }} /><div className="v2-card" style={{ aspectRatio: '4 / 3' }}><img src={PJ.maleni} alt="Maleni L. Pickman decorando una torta" style={{ filter: 'grayscale(1) contrast(1.05)' }} /></div></div></Reveal>
        <Reveal delay={150}>
          <div style={{ fontFamily: V2.display, fontSize: 30, fontWeight: 400, lineHeight: 1.15, margin: 0 }}>Maleni L. Pickman</div>
          <div style={{ fontFamily: V2.sans, fontSize: 10, letterSpacing: '.3em', textTransform: 'uppercase', color: V2.gold, marginTop: 10 }}>Repostera y fundadora</div>
          <p style={{ fontFamily: V2.serif, fontSize: clampPx(19, 1.6, 23), fontStyle: 'italic', color: V2.ink, lineHeight: 1.55, marginTop: 28, textWrap: 'pretty' }}>“Mi trabajo empieza escuchando. Cada clienta llega con una idea, un color, un personaje. Mi promesa es que la torta se vea exactamente así, y que además sepa rica: queque fresco, equilibrado, sin empalagar.”</p>
          <p style={{ fontFamily: V2.serif, fontSize: 18, color: V2.muted, lineHeight: 1.7, marginTop: 20, textWrap: 'pretty' }}>Mil Delicias nació en Moquegua en 2022. Hoy sigue siendo un taller de pedido: cada pieza se hornea, modela y decora a mano para una fecha concreta, y se entrega puntual el día del evento.</p>
          <div style={{ display: 'flex', gap: 36, marginTop: 36, paddingTop: 28, borderTop: `1px solid ${V2.line}` }}>
            {[['2022', 'Desde'], ['100%', 'Personalizado'], ['A mano', 'Cada pieza']].map(([n, l]) => <div key={l}><div style={{ fontFamily: V2.display, fontSize: 34, color: V2.gold, lineHeight: 1 }}>{n}</div><div style={{ fontFamily: V2.sans, fontSize: 10, letterSpacing: '.25em', textTransform: 'uppercase', color: V2.muted, marginTop: 8 }}>{l}</div></div>)}
          </div>
        </Reveal>
      </div>
    </Sec>
  );
}

function PageJoyeria() {
  return (
    <div style={{ background: V2.bg, color: V2.ink, fontFamily: V2.sans }}>
      <style>{window.V2_CSS}</style>
      <NavJ />
      <HeroJ />
      <DiferencialesJ />
      <Sec id="galeria" eyebrow="Portafolio" title={<>Trabajos que ya salieron <Sc>del taller.</Sc></>} sub="Filtra por tipo de celebración. Todas las piezas son diseños únicos hechos para una clienta real.">
        <GalleryFilter layout="grid" />
      </Sec>
      <Sec id="sabores" bg={V2.bg2} eyebrow="Carta de sabores" title={<>Elige el queque, <Sc>elige el relleno.</Sc></>} sub="Dos líneas: los clásicos de siempre y los especiales para quienes quieren algo distinto. Combinaciones a tu gusto.">
        <SaboresList />
      </Sec>
      <Sec id="cotizar" eyebrow="Cotización en un minuto" title={<>Cuéntanos tu idea y <Sc>te respondemos.</Sc></>} sub="Arma tu pedido aquí. El mensaje se envía por WhatsApp y recibes propuesta y precio en menos de 24 horas.">
        <Reveal><Cotizador /></Reveal>
      </Sec>
      <Sec id="fechas" bg={V2.bg2} eyebrow="Agenda" title={<>Fechas <Sc>disponibles.</Sc></>} sub="Revisa qué días siguen libres antes de escribirnos.">
        <Reveal><Calendario /></Reveal>
      </Sec>
      <MaleniJ />
      <Sec id="faq" eyebrow="Preguntas frecuentes" title={<>Lo que siempre <Sc>nos preguntan.</Sc></>} max={860}>
        <Reveal><FaqList /></Reveal>
      </Sec>
      <section id="contacto" style={{ padding: 'clamp(80px, 10vw, 150px) clamp(20px, 5vw, 72px)', background: `radial-gradient(ellipse at 50% 0%, rgba(209,168,109,.14), transparent 60%), ${V2.bg2}`, borderTop: `1px solid ${V2.line}` }}>
        <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
          <Reveal><StarMark size={22} /><h2 style={{ fontFamily: V2.display, fontSize: clampPx(40, 6, 84), fontWeight: 400, lineHeight: 1, letterSpacing: '-0.02em', margin: '24px 0 16px' }}>¿Hablamos de <Sc>tu evento?</Sc></h2>
          <p style={{ fontFamily: V2.serif, fontSize: 21, fontStyle: 'italic', color: V2.muted, margin: '0 auto 40px', maxWidth: 520 }}>Escríbenos por WhatsApp con la fecha, porciones y tu idea. Te respondemos en menos de 24 horas.</p>
          <WaButton big /></Reveal>
          <Reveal delay={150} style={{ marginTop: 64 }}><Contacto align="center" /></Reveal>
        </div>
      </section>
      <FooterV2 center />
    </div>
  );
}

window.PageJoyeria = PageJoyeria;