// Price / Bonus / Final CTA / About / Footer / FAQ

function PriceSection({ heroPhoto }){
  const photo = heroPhoto === 'blazer' ? 'assets/adriana-green.jpg' : 'assets/adriana-blazer.jpg';
  return (
    <section id="unirme" className="sec-lg" style={{ padding: '140px 0', position:'relative' }}>
      <div className="container">
        <div className="price-card" style={{
          position:'relative',
          background: 'var(--cream)',
          border: '1px solid var(--line)',
          borderRadius: 4,
          padding: '80px 0',
          overflow:'hidden',
        }}>
          {/* soft coral blob */}
          <div aria-hidden style={{
            position:'absolute', top: -100, left: -100, width: 500, height: 500,
            borderRadius:'50%',
            background:'radial-gradient(circle at 50% 50%, var(--coral) 0%, transparent 65%)',
            opacity: 0.5,
          }}/>
          <div className="two-col price" style={{ position:'relative' }}>
            <div>
              <Reveal><Eyebrow>Empieza hoy por</Eyebrow></Reveal>
              <Reveal delay={120}>
                <div className="price-row" style={{ display:'flex', alignItems:'flex-start', gap: 14, marginTop: 20, flexWrap:'wrap' }}>
                  <div style={{ display:'flex', alignItems:'flex-start', gap: 6 }}>
                    <span className="serif-it" style={{ fontSize: 36, color:'var(--muted)', marginTop: 18 }}>$</span>
                    <span className="serif price-number" style={{ fontSize: 160, lineHeight: 0.8, color:'var(--ink)', fontWeight: 500 }}>15</span>
                  </div>
                  <div className="price-unit" style={{ marginTop: 24, marginLeft: 4 }}>
                    <div className="serif-it" style={{ fontSize: 28, color:'var(--accent)' }}>USD</div>
                    <div className="uppercase-track" style={{ fontSize: 11, color:'var(--muted)', marginTop: 6 }}>al mes</div>
                  </div>
                </div>
              </Reveal>

              <Reveal delay={200}>
                <ul style={{ listStyle:'none', padding: 0, margin: '32px 0 40px', display:'grid', gap: 12 }}>
                  {[
                    'Ebook guiado nuevo cada mes',
                    'Ejercicios de escritura + expresión visual',
                    'Meditación mensual en grupo privado',
                    'Cancelas cuando quieras, sin letra chica',
                  ].map((t,i)=>(
                    <li key={i} style={{ display:'flex', gap: 12, alignItems:'center', fontSize: 15, color:'var(--ink)' }}>
                      <svg width="18" height="18" viewBox="0 0 18 18"><circle cx="9" cy="9" r="8" fill="none" stroke="var(--accent)" strokeWidth="1"/><path d="M 5 9 L 8 12 L 13 6" stroke="var(--accent)" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                      {t}
                    </li>
                  ))}
                </ul>
              </Reveal>

              <Reveal delay={300}>
                <Button href="#" size="lg">Quiero empezar hoy</Button>
              </Reveal>
            </div>

            <Reveal delay={150}>
              {/* Bonus card */}
              <div style={{ position:'relative' }}>
                <div style={{
                  position:'absolute', top:-20, left: -10,
                  transform:'rotate(-5deg)',
                  background:'var(--sage)', color:'var(--terracotta-deep)',
                  padding:'8px 18px', borderRadius: 2,
                  fontSize: 11, letterSpacing:'0.2em', textTransform:'uppercase', fontWeight: 700, zIndex: 2,
                }}>
                  Bono incluido
                </div>
                <div style={{
                  background: 'var(--terracotta)',
                  color: 'var(--cream)',
                  borderRadius: 4,
                  padding: '44px 40px',
                  boxShadow: '0 40px 80px -30px rgba(122,68,52,0.6)',
                }}>
                  <div style={{ display:'flex', alignItems:'center', gap: 14 }}>
                    <WhatsAppIcon/>
                    <div className="uppercase-track" style={{ fontSize: 11, opacity: 0.85 }}>Grupo privado de WhatsApp</div>
                  </div>
                  <h3 className="serif-it" style={{ fontSize: 34, lineHeight: 1.05, margin:'20px 0 16px' }}>
                    Una meditación mensual para soltar la carga.
                  </h3>
                  <p style={{ fontSize: 15, lineHeight: 1.6, opacity: 0.9, margin: 0 }}>
                    Al unirte, entrarás a la comunidad donde recibirás una meditación
                    guiada diseñada para ayudarte a recuperar la calma cuando más lo necesites.
                  </p>
                  <div style={{
                    marginTop: 32, paddingTop: 20,
                    borderTop:'1px solid rgba(253,235,221,0.25)',
                    display:'flex', alignItems:'center', gap: 10, fontSize: 13, opacity: 0.9,
                  }}>
                    <span>Incluido sin costo extra</span>
                    <span>·</span>
                    <span>Solo para miembros</span>
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function WhatsAppIcon(){
  return (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="11" fill="var(--cream)" fillOpacity="0.15"/>
      <path d="M 7 15 C 6 13, 6 10, 8 8 C 10 6, 13 6, 15 8 C 17 10, 17 13, 15 15 C 14 16, 12 16, 11 15 L 7 16 Z" stroke="var(--cream)" strokeWidth="1.2" fill="none" strokeLinejoin="round"/>
    </svg>
  );
}

function AboutSection({ heroPhoto }){
  // use the OPPOSITE photo from hero
  const photo = heroPhoto === 'blazer' ? 'assets/adriana-green.jpg' : 'assets/adriana-blazer.jpg';
  return (
    <section className="sec-lg" style={{ padding: '120px 0', background: 'var(--sage)', position:'relative' }}>
      <div className="container">
        <div className="two-col about">
          <Reveal>
            <div style={{ position:'relative', aspectRatio: '3/4', background:'var(--cream)', overflow:'hidden' }}>
              <img src={photo} alt="Adriana Laitano" style={{ width:'100%', height:'100%', objectFit:'cover' }}/>
            </div>
          </Reveal>
          <Reveal delay={150}>
            <Eyebrow>Sobre Adriana</Eyebrow>
            <h2 className="serif-it" style={{
              fontSize:'clamp(36px, 4.4vw, 58px)', lineHeight: 1.05, margin:'20px 0 24px',
            }}>
              Soy <span style={{color:'var(--terracotta)'}}>la que migró</span>,<br/>y se reinventó.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.7, color:'var(--ink)', margin: '0 0 20px' }}>
              Soy psicóloga y life coach. Después de emigrar y atravesar lo que muchas de
              ustedes están atravesando, entendí algo: las emociones que no gestionamos
              terminan al final viviendo en nuestro cuerpo.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.7, color:'var(--ink)', margin: '0 0 28px' }}>
              El Círculo de Art Journaling nació de esa experiencia —y de las herramientas
              que más me sirvieron en el proceso. No es teoría. Es lo que yo misma uso,
              ahora contigo.
            </p>
            <div className="script" style={{ fontSize: 38, color:'var(--terracotta)' }}>
              Adriana Laitano
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function FaqSection(){
  const qs = [
    { q:'¿Necesito saber dibujar o escribir bien?', a:'Nada de eso. Los ejercicios están guiados paso a paso — están pensados para que los haga cualquiera, incluso si nunca has escrito un diario.' },
    { q:'¿Cuánto tiempo al día requiere?', a:'Unos 15 minutos al día, o el tiempo que tengas. Muchas mujeres lo hacen en su hora de almuerzo.' },
    { q:'¿Qué recibo cuando me inscribo?', a:'Acceso inmediato al eBook del mes actual, a los ejercicios, y al grupo privado de WhatsApp con la meditación mensual.' },
    { q:'¿Puedo cancelar cuando quiera?', a:'Sí. La membresía se renueva mes a mes y puedes cancelarla en cualquier momento desde tu cuenta.' },
    { q:'¿Esto reemplaza la terapia?', a:'No. Es una herramienta complementaria de autoconocimiento. Si estás pasando por algo complejo, te recomiendo también acompañarte con un profesional.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="sec-lg" style={{ padding: '120px 0', background:'var(--cream-soft)' }}>
      <div className="container">
        <div style={{ maxWidth: 840, margin:'0 auto' }}>
          <Reveal style={{textAlign:'center'}}><Eyebrow>Preguntas frecuentes</Eyebrow></Reveal>
          <Reveal delay={100}>
            <h2 className="serif-it" style={{
              fontSize:'clamp(36px, 4.4vw, 56px)', textAlign:'center', lineHeight: 1.05, margin: '20px 0 60px',
            }}>
              Antes de unirte…
            </h2>
          </Reveal>
          <div>
            {qs.map((item, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{ borderTop: i===0 ? '1px solid var(--line)': 'none', borderBottom: '1px solid var(--line)' }}>
                  <button onClick={()=> setOpen(isOpen ? -1 : i)}
                    style={{
                      width:'100%', textAlign:'left', background:'transparent', border:'none',
                      padding: '26px 0', cursor:'pointer',
                      display:'flex', justifyContent:'space-between', alignItems:'center', gap: 20,
                    }}>
                    <span style={{
                      fontFamily:"'Cormorant Garamond', serif",
                      fontSize: 22, color:'var(--ink)', fontWeight: 500,
                    }}>{item.q}</span>
                    <span style={{
                      width: 32, height: 32, borderRadius:'50%',
                      border:'1px solid var(--accent)', color:'var(--accent)',
                      display:'grid', placeItems:'center', flexShrink:0,
                      transition:'transform .3s ease',
                      transform: isOpen ? 'rotate(45deg)':'none',
                    }}>+</span>
                  </button>
                  <div style={{
                    maxHeight: isOpen ? 200 : 0, overflow:'hidden',
                    transition:'max-height .4s ease, opacity .4s ease, padding .3s ease',
                    opacity: isOpen ? 1 : 0,
                    padding: isOpen ? '0 0 24px' : '0',
                  }}>
                    <p style={{ margin:0, fontSize: 16, lineHeight: 1.65, color:'var(--muted)', maxWidth: 640 }}>
                      {item.a}
                    </p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCTA(){
  return (
    <section className="sec-lg" style={{ padding:'160px 0 120px', position:'relative', overflow:'hidden' }}>
      <div className="container" style={{ textAlign:'center' }}>
        <Reveal><Eyebrow>Empezar ahora</Eyebrow></Reveal>
        <Reveal delay={100}>
          <h2 className="final-headline" style={{
            fontFamily:"'Cormorant Garamond', serif",
            fontStyle:'italic',
            fontSize:'clamp(48px, 7vw, 120px)',
            lineHeight: 0.98, margin:'32px auto 0', maxWidth: 1000,
            fontWeight: 400,
          }}>
            Deja de <span style={{color:'var(--accent)'}}>guardarlo</span>.<br/>
            Empieza a <span style={{
              position:'relative', display:'inline-block'
            }}>
              soltarlo
              <svg viewBox="0 0 200 14" preserveAspectRatio="none" style={{
                position:'absolute', left: 0, right: 0, bottom: -6, width: '100%', height: 12,
              }}>
                <path d="M 2 8 Q 50 1, 100 7 T 198 6" stroke="var(--accent)" strokeWidth="2" fill="none" strokeLinecap="round"/>
              </svg>
            </span>.
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <div style={{ marginTop: 60, display:'flex', flexDirection:'column', alignItems:'center', gap: 18 }}>
            <Button href="#" size="lg">Quiero unirme ahora</Button>
            <div style={{ fontSize: 13, color:'var(--muted)' }}>
              $15 USD/mes · cancela cuando quieras · incluye el grupo privado
            </div>
          </div>
        </Reveal>

        <Reveal delay={300}>
          <div style={{ marginTop: 100, display:'flex', justifyContent:'center' }}>
            <LogoMark size={90} color="var(--terracotta)"/>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer(){
  return (
    <footer style={{
      padding: '40px 0', borderTop: '1px solid var(--line)', background: 'var(--cream-soft)'
    }}>
      <div className="container" style={{
        display:'flex', justifyContent:'space-between', alignItems:'center', gap: 20, flexWrap:'wrap'
      }}>
        <div style={{ fontSize: 12, color:'var(--muted)' }}>
          © 2026 Club Reinventadas · Adriana Laitano
        </div>
        <div style={{ display:'flex', gap: 20, fontSize: 12 }}>
          <a href="#" style={{color:'var(--muted)', textDecoration:'none'}}>Instagram</a>
          <a href="#" style={{color:'var(--muted)', textDecoration:'none'}}>Términos</a>
          <a href="#" style={{color:'var(--muted)', textDecoration:'none'}}>Privacidad</a>
          <a href="#" style={{color:'var(--muted)', textDecoration:'none'}}>Contacto</a>
        </div>
      </div>
    </footer>
  );
}

function StickyCTA(){
  const [show, setShow] = React.useState(false);
  React.useEffect(()=>{
    const onS = ()=> setShow(window.scrollY > 700 && window.scrollY < document.body.scrollHeight - 1200);
    window.addEventListener('scroll', onS);
    return ()=> window.removeEventListener('scroll', onS);
  },[]);
  return (
    <div style={{
      position:'fixed', bottom: 22, left: '50%',
      transform: show ? 'translate(-50%, 0)' : 'translate(-50%, 120%)',
      transition:'transform .4s cubic-bezier(.3,.6,.2,1)',
      zIndex: 40,
      background:'var(--ink)',
      color: 'var(--cream)',
      borderRadius: 999,
      padding:'8px 10px 8px 24px',
      display:'flex', alignItems:'center', gap: 18,
      boxShadow: '0 30px 60px -20px rgba(0,0,0,0.3)',
      maxWidth:'calc(100vw - 40px)',
    }}>
      <span style={{ fontSize: 13, fontWeight: 500 }}>$15/mes · cancela cuando quieras</span>
      <a href="#unirme" style={{
        background:'var(--accent)', color:'#fff', textDecoration:'none',
        padding:'10px 18px', borderRadius: 999,
        fontSize: 11, letterSpacing:'0.18em', textTransform:'uppercase', fontWeight: 600,
      }}>Unirme →</a>
    </div>
  );
}

window.PriceSection = PriceSection;
window.AboutSection = AboutSection;
window.FaqSection = FaqSection;
window.FinalCTA = FinalCTA;
window.Footer = Footer;
window.StickyCTA = StickyCTA;