/* === VALUE PROPS STRIP === */
function ValueProps() {
  const items = [
    { title: 'Em Meio à Natureza', desc: 'Evento cercado de verde e paisagem natural' },
    { title: 'Estrutura Completa', desc: 'Espaço preparado para receber seus convidados' },
    { title: 'Jacarepaguá — RJ', desc: 'Localização estratégica com fácil acesso' },
    { title: 'Gastronomia Própria', desc: 'Cardápio especial como parte da experiência' },
    { title: 'Personalização', desc: 'Cada evento é único — a equipe cuida dos detalhes' },
  ];
  return (
    <section className="value-strip">
      <div className="container">
        <div className="value-grid">
          {items.map((it, i) => (
            <div key={i} className="value-item fade-up" style={{ transitionDelay: `${i * 0.08}s` }}>
              <div className="value-dot"><div className="value-dot-inner"></div></div>
              <h4 className="value-title">{it.title}</h4>
              <p className="value-desc">{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* === ABOUT SECTION === */
function AboutSection({ tweaks }) {
  const aboutPos = tweaks ? tweaks.aboutPos : 35;
  return (
    <section className="section section-ivory" id="sobre">
      <div className="container">
        <div className="about-grid">
          <div className="about-text fade-up">
            <span className="section-label">Sobre o Espaço</span>
            <h2 className="section-title">Um Lugar que Transforma Eventos em Experiências</h2>
            <p className="about-p">
              A Casa da Mãe Joana é um sítio em Jacarepaguá com uma proposta
              singular: unir a tranquilidade da natureza à estrutura necessária
              para eventos de diferentes portes e estilos.
            </p>
            <p className="about-p">
              Aqui, cada celebração ganha uma atmosfera própria — do cenário
              natural ao atendimento atencioso, passando por uma gastronomia
              que faz parte da experiência. O espaço se adapta à sua visão, seja
              para um casamento intimista, um aniversário especial ou uma
              confraternização corporativa.
            </p>
            <p className="about-p" style={{ color: 'var(--stone)' }}>
              Na Taquara, com fácil acesso pela região de Jacarepaguá, a Casa da
              Mãe Joana oferece o equilíbrio entre charme, praticidade e uma
              experiência que seus convidados vão lembrar.
            </p>
          </div>
          <div className="about-img fade-up delay-2">
            <img src="images/caminho-jardim-dia.jpg" alt="Jardim da Casa da Mãe Joana" style={{ width: '100%', height: 420, objectFit: 'cover', objectPosition: `center ${aboutPos}%`, borderRadius: 12 }}/>
          </div>
        </div>
      </div>
    </section>
  );
}

/* === EVENTS SECTION — THEMED OVERLAY CARDS === */
const EVENTS = [
  { name: 'Casamentos', desc: 'Cenário natural e atmosfera acolhedora para celebrar a união com charme.', img: 'images/jardim-noite-luzes.jpg', pos: 'center center', color: 'rgba(180,145,80,0.7)' },
  { name: 'Aniversários', desc: 'Espaço versátil para festas de todos os estilos — do íntimo ao animado.', img: 'images/casa-noite-luzes.jpg', pos: 'center 30%', color: 'rgba(45,139,95,0.72)' },
  { name: 'Festas de 15 Anos', desc: 'Uma celebração especial merece um lugar à altura.', img: 'images/piscina-flores.jpg', pos: 'center 35%', color: 'rgba(160,90,110,0.7)' },
  { name: 'Eventos Corporativos', desc: 'Ambiente diferenciado para integrações e eventos empresariais.', img: 'images/area-externa-mesas.jpg', pos: 'center 30%', color: 'rgba(40,55,75,0.75)' },
  { name: 'Confraternizações', desc: 'Natureza, comida boa e tranquilidade para reunir quem importa.', img: 'images/piscina-mesa-plantas.jpg', pos: 'center 35%', color: 'rgba(165,110,60,0.7)' },
  { name: 'Eventos Privativos', desc: 'Alugue o sítio inteiro. Privacidade e atendimento dedicado.', img: 'images/piscina-area.jpg', pos: 'center 40%', color: 'rgba(27,60,52,0.75)' },
];

function EventsSection() {
  return (
    <section className="section section-white" id="eventos">
      <div className="container">
        <div className="text-center fade-up">
          <span className="section-label">Tipos de Evento</span>
          <h2 className="section-title">Eventos que o Espaço Recebe</h2>
          <p className="section-subtitle mx-auto">
            Estrutura e atendimento para diferentes tipos de celebração — cada
            uma com a personalidade que merece.
          </p>
        </div>
        <div className="events-grid">
          {EVENTS.map((ev, i) => (
            <div key={i} className="event-overlay-card fade-up" style={{ transitionDelay: `${i * 0.08}s` }}>
              <img src={ev.img} alt={ev.name} className="event-overlay-bg" style={{ objectPosition: ev.pos }}/>
              <div className="event-overlay-gradient" style={{ background: `linear-gradient(160deg, ${ev.color}, rgba(0,0,0,0.5))` }}></div>
              <div className="event-overlay-content">
                <h3 className="event-overlay-title">{ev.name}</h3>
                <p className="event-overlay-desc">{ev.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* === STRUCTURE & DIFFERENTIALS === */
const FEATURES = [
  { title: 'Contato com a Natureza', desc: 'Jardins, áreas verdes e paisagem natural como cenário do seu evento.' },
  { title: 'Ambiente Charmoso', desc: 'Arquitetura acolhedora com elementos de madeira, iluminação e identidade própria.' },
  { title: 'Áreas para Convidados', desc: 'Espaços internos e externos que acomodam diferentes momentos da celebração.' },
  { title: 'Personalização', desc: 'Flexibilidade para montar seu evento do seu jeito, com apoio da equipe.' },
  { title: 'Gastronomia', desc: 'Cardápio próprio, com opções que fazem da refeição parte da experiência.' },
  { title: 'Momentos ao Ar Livre', desc: 'Espaço para cerimônias, recepções e momentos especiais sob o céu aberto.' },
  { title: 'Cenário para Fotos', desc: 'Cantos, jardins e detalhes que rendem registros naturais e espontâneos.' },
  { title: 'Experiência Acolhedora', desc: 'Atendimento próximo e cuidado para que cada convidado se sinta bem.' },
];

function StructureSection() {
  return (
    <section className="section section-cream" id="estrutura">
      <div className="container">
        <div className="text-center fade-up">
          <span className="section-label">Estrutura e Diferenciais</span>
          <h2 className="section-title">O Que Torna o Espaço Especial</h2>
          <p className="section-subtitle mx-auto">
            Cada detalhe foi pensado para que seu evento seja prático, bonito e memorável.
          </p>
        </div>
        <div className="features-grid">
          {FEATURES.map((f, i) => (
            <div key={i} className="feature-item fade-up" style={{ transitionDelay: `${i * 0.06}s` }}>
              <div className="feature-icon">
                <div className="feature-icon-dot"></div>
              </div>
              <div>
                <h4 className="feature-title">{f.title}</h4>
                <p className="feature-desc">{f.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* === HOW IT WORKS === */
const STEPS = [
  { num: '01', title: 'Fale com a Equipe', desc: 'Entre em contato pelo WhatsApp. Conte sobre seu evento, data e expectativas.' },
  { num: '02', title: 'Agende uma Visita', desc: 'Conheça o espaço pessoalmente. Veja a estrutura, os ambientes e tire suas dúvidas.' },
  { num: '03', title: 'Receba sua Proposta', desc: 'A equipe monta uma proposta personalizada de acordo com o seu evento.' },
];

function HowItWorks() {
  return (
    <section className="section section-white" id="como-funciona">
      <div className="container">
        <div className="text-center fade-up">
          <span className="section-label">Processo Simples</span>
          <h2 className="section-title">Como Funciona</h2>
        </div>
        <div className="steps-row">
          {STEPS.map((s, i) => (
            <React.Fragment key={i}>
              <div className="step-card fade-up" style={{ transitionDelay: `${i * 0.15}s` }}>
                <span className="step-num">{s.num}</span>
                <h3 className="step-title">{s.title}</h3>
                <p className="step-desc">{s.desc}</p>
              </div>
              {i < STEPS.length - 1 && (
                <div className="step-connector fade-up" style={{ transitionDelay: `${i * 0.15 + 0.08}s` }}>
                  <svg width="40" height="2" viewBox="0 0 40 2"><line x1="0" y1="1" x2="40" y2="1" stroke="var(--gold)" strokeWidth="1.5" strokeDasharray="4 4"/></svg>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

/* === GALLERY SECTION WITH LIGHTBOX === */
const GALLERY_PHOTOS = [
  { src: 'images/jardim-noite-luzes.jpg', alt: 'Jardim com luzes à noite', span: 'wide', pos: 'center center' },
  { src: 'images/caminho-jardim-dia.jpg', alt: 'Caminho no jardim', span: 'tall', pos: 'center 35%' },
  { src: 'images/piscina-flores.jpg', alt: 'Piscina com flores', span: 'tall', pos: 'center 35%' },
  { src: 'images/area-externa-mesas.jpg', alt: 'Área externa com mesas', span: 'normal', pos: 'center 30%' },
  { src: 'images/casa-noite-luzes.jpg', alt: 'Casa à noite com luzes', span: 'normal', pos: 'center 30%' },
  { src: 'images/piscina-mesa-plantas.jpg', alt: 'Área da piscina', span: 'normal', pos: 'center 35%' },
];

function Lightbox({ photos, index, onClose, onNext, onPrev }) {
  const { useEffect, useCallback } = React;

  const handleKey = useCallback((e) => {
    if (e.key === 'Escape') onClose();
    if (e.key === 'ArrowRight') onNext();
    if (e.key === 'ArrowLeft') onPrev();
  }, [onClose, onNext, onPrev]);

  useEffect(() => {
    document.addEventListener('keydown', handleKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', handleKey);
      document.body.style.overflow = '';
    };
  }, [handleKey]);

  const photo = photos[index];

  return (
    <div className="lightbox-overlay" onClick={onClose}>
      <div className="lightbox-content" onClick={e => e.stopPropagation()}>
        <button className="lightbox-close" onClick={onClose} aria-label="Fechar">
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round">
            <line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/>
          </svg>
        </button>
        <button className="lightbox-arrow lightbox-prev" onClick={onPrev} aria-label="Anterior">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="15 18 9 12 15 6"/>
          </svg>
        </button>
        <img src={photo.src} alt={photo.alt} className="lightbox-img"/>
        <button className="lightbox-arrow lightbox-next" onClick={onNext} aria-label="Próxima">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="9 18 15 12 9 6"/>
          </svg>
        </button>
        <div className="lightbox-counter">{index + 1} / {photos.length}</div>
      </div>
    </div>
  );
}

function GallerySection({ tweaks }) {
  const [lightboxIdx, setLightboxIdx] = React.useState(null);
  const galPositions = tweaks ? [tweaks.galPos1, tweaks.galPos2, tweaks.galPos3, tweaks.galPos4, tweaks.galPos5, tweaks.galPos6] : [50,35,35,30,30,35];

  const openLightbox = (i) => setLightboxIdx(i);
  const closeLightbox = () => setLightboxIdx(null);
  const nextPhoto = () => setLightboxIdx(i => (i + 1) % GALLERY_PHOTOS.length);
  const prevPhoto = () => setLightboxIdx(i => (i - 1 + GALLERY_PHOTOS.length) % GALLERY_PHOTOS.length);

  return (
    <section className="section section-ivory" id="galeria">
      <div className="container">
        <div className="text-center fade-up">
          <span className="section-label">Conheça o Espaço</span>
          <h2 className="section-title">Galeria de Fotos</h2>
          <p className="section-subtitle mx-auto">
            Veja como a Casa da Mãe Joana une natureza, charme e estrutura em cada detalhe.
          </p>
        </div>
        <div className="gallery-grid">
          {GALLERY_PHOTOS.map((p, i) => (
            <div key={i} className={`gallery-item gallery-${p.span} fade-up`}
              style={{ transitionDelay: `${i * 0.08}s`, cursor: 'pointer' }}
              onClick={() => openLightbox(i)}>
              <img src={p.src} alt={p.alt} className="gallery-img" style={{ objectPosition: `center ${galPositions[i]}%` }}/>
            </div>
          ))}
        </div>
        {/* Video */}
        <div className="gallery-video fade-up" style={{ marginTop: 32 }}>
          <video
            src="images/video-sitio.mp4"
            controls
            playsInline
            preload="metadata"
            poster="images/jardim-noite-luzes.jpg"
            style={{ width: '100%', borderRadius: 14, maxHeight: 480, objectFit: 'cover', background: '#1a1a1a' }}
          ></video>
          <p style={{ textAlign: 'center', marginTop: 12, fontSize: 14, color: 'var(--stone, #7A756F)' }}>
            Assista e conheça o espaço por dentro
          </p>
        </div>
      </div>

      {lightboxIdx !== null && (
        <Lightbox
          photos={GALLERY_PHOTOS}
          index={lightboxIdx}
          onClose={closeLightbox}
          onNext={nextPhoto}
          onPrev={prevPhoto}
        />
      )}
    </section>
  );
}

Object.assign(window, { ValueProps, AboutSection, EventsSection, StructureSection, HowItWorks, GallerySection });