// Home page sections — assembled into HomePage at the bottom.

const { useState: useS_h, useEffect: useE_h } = React;

// ─── HERO ───────────────────────────────────────────────────
function Hero({ scrollTo, bg = "pontos" }) {
  return (
    <section id="hero" style={{
      minHeight: "100vh", background: C.bg,
      display: "flex", flexDirection: "column", justifyContent: "flex-end",
      padding: "0 3rem 4rem", position: "relative", overflow: "hidden",
    }} className="casa-hero">
      {/* Ambient animated background — switchable via Tweaks */}
      {bg === "pontos" && <DottedSurface opacity={0.5} />}
      {bg === "ondas" && <ShaderAnimation opacity={0.4} />}
      {bg === "ondas-cor" && <ShaderAnimation opacity={0.55} colored />}
      {bg === "imagem" && (
        <div style={{ position: "absolute", inset: 0, opacity: 0.55 }}>
          <ImgSlot label="HERO IMAGE — FULL-BLEED EDITORIAL (signature work close-up)" style={{ width: '100%', height: '100%' }} />
        </div>
      )}
      <div style={{ position: "absolute", inset: 0, background: `radial-gradient(ellipse at 50% 30%, transparent 0%, ${C.bg} 78%)` }} />
      <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to top, ${C.bg} 0%, transparent 45%, transparent 78%, rgba(0,0,0,0.4) 100%)` }} />

      <div className="casa-hero-meta" style={{
        position: "absolute", top: "76px", left: "3rem", right: "3rem",
        display: "flex", justifyContent: "space-between",
        borderBottom: `1px solid ${C.line}`, paddingBottom: "1rem",
        animation: "heroFade 1s ease 0.3s both",
      }}>
        <span style={{ ...TY.micro, color: C.gray2 }}>TATUAPÉ · SÃO PAULO</span>
        <span style={{ ...TY.micro, color: C.gray2 }}>COWORK PRIVATIVO · SOB DEMANDA</span>
        <span style={{ ...TY.micro, color: C.gray2 }}>AGENDAMENTO OBRIGATÓRIO</span>
      </div>

      <div style={{
        position: "relative",
        animation: "heroRise 1.2s cubic-bezier(0.16,1,0.3,1) 0.1s both",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: "1.2rem", marginBottom: "1.5rem" }}>
          <LogoMark size={56} />
          <p style={{ ...TY.label, color: C.gray2 }}>ESTÚDIO DE TATUAGEM · DESDE 2015</p>
        </div>
        <h1 style={{ ...TY.hero, color: C.white, display: "block", lineHeight: 0.88 }}>
          ESTÚDIO<br />CASA
        </h1>
        <div style={{
          borderTop: `1px solid ${C.line}`, marginTop: "2.5rem", paddingTop: "2rem",
          display: "flex", justifyContent: "space-between", alignItems: "flex-end",
          flexWrap: "wrap", gap: "2rem",
        }}>
          <p style={{ ...TY.spec, color: C.gray1, maxWidth: "420px", lineHeight: 1.8 }}>
            Cobertura, Realismo, Fine Line e Orixás.<br />Arte exclusiva. Sem catálogo.
          </p>
          <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
            {Object.entries(ARTISTS).map(([id, a]) => (
              <button key={id} onClick={() => window.open(`https://wa.me/${a.whatsapp}`, "_blank")} className="casa-btn casa-btn-ghost"
                style={{ ...btnGhost, borderColor: C.gray2, color: C.white }}>
                AGENDAR COM {a.name.split(" ")[0]} <span className="casa-arrow">→</span>
              </button>
            ))}
          </div>
        </div>
      </div>
      <div style={{
        position: "absolute", bottom: "1.5rem", left: "50%",
        transform: "translateX(-50%)", ...TY.micro, color: C.gray2,
        animation: "nudge 2s 2s infinite",
      }}>ROLE ↓</div>
    </section>
  );
}

// ─── ARTISTS — magazine spreads ─────────────────────────────
function ArtistsSection({ setPage }) {
  const [hov, setHov] = useS_h(null);
  const entries = Object.entries(ARTISTS);
  return (
    <section id="artistas" style={section}>
      <div className="casa-inner" style={inner}>
        <SectionHead label="ARTISTAS · 02" title="Dois nomes." />
        {entries.map(([artistId, artist], ai) => {
          const portraitLeft = ai % 2 === 0;
          return (
            <div key={artistId} style={{
              borderTop: `1px solid ${C.line}`,
              paddingTop: "3rem", paddingBottom: "3rem",
              marginBottom: ai < entries.length - 1 ? "1rem" : 0,
            }}>
              {/* Editorial magazine spread */}
              <div className="casa-artist-spread" style={{
                display: "grid",
                gridTemplateColumns: portraitLeft ? "420px 1fr 220px" : "220px 1fr 420px",
                gap: "3.5rem", alignItems: "start", marginBottom: "2.5rem",
              }}>
                {portraitLeft ? (
                  <ImgSlot label={`${artist.name.split(" ")[0]} — RETRATO`} src={artist.portrait} position="center top" h={420} />
                ) : (
                  <div style={{ display: "flex", flexDirection: "column", gap: "0.8rem", paddingTop: "0.5rem" }}>
                    <button onClick={() => window.open(`https://wa.me/${artist.whatsapp}`, "_blank")} className="casa-btn casa-btn-primary" style={btnPrimary}>
                      AGENDAR · WHATSAPP <span className="casa-arrow">→</span>
                    </button>
                    <button onClick={() => window.open(`https://instagram.com/${artist.ig}`, "_blank")} className="casa-btn casa-btn-ghost" style={btnGhost}>
                      PORTFÓLIO · {artist.handle.toUpperCase()}
                    </button>
                    <ImgSlot label="SIGNATURE WORK" src={artist.signature} h={180} />
                    <div style={{ ...TY.micro, color: C.gray3, letterSpacing: "0.15em", textTransform: "uppercase" }}>
                      ★★★★★ · 5 / 5
                    </div>
                  </div>
                )}

                <div style={{ paddingTop: "0.2rem" }}>
                  <p style={{ ...TY.micro, color: C.gray4, marginBottom: "0.7rem" }}>
                    {String(ai + 1).padStart(2, "0")} / {artist.handle} · {artist.years}
                  </p>
                  <h2 style={{ ...TY.h1, color: C.white, fontSize: "clamp(2rem,4.5vw,3.6rem)" }}>{artist.name}</h2>
                  <p style={{ ...TY.spec, color: C.gray2, marginTop: "1rem", fontStyle: "italic" }}>
                    Specializes in {artist.spec.toLowerCase()}.
                  </p>
                  <p style={{ ...TY.body, color: C.gray2, lineHeight: 1.85, marginTop: "1.2rem", maxWidth: "60ch" }}>
                    {artist.bio}
                  </p>

                  <p style={{ ...TY.label, color: C.gray3, marginTop: "2rem", marginBottom: "1rem" }}>
                    ESTILOS — ESCOLHA PARA VER PROCESSO E GALERIA
                  </p>
                  <div className="casa-tiles-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "2px" }}>
                    {STYLES_DATA[artistId].map((style) => {
                      const key = `${artistId}-${style.id}`;
                      const isHov = hov === key;
                      return (
                        <button key={style.id} className="casa-tile"
                          onMouseEnter={() => setHov(key)} onMouseLeave={() => setHov(null)}
                          onClick={() => { setPage({ type: "style", artistId, styleId: style.id }); window.scrollTo(0, 0); }}
                          style={{
                            background: isHov ? C.white : C.bgCard,
                            border: `1px solid ${isHov ? C.white : C.line}`,
                            padding: "1.3rem 1.4rem",
                            cursor: "pointer", textAlign: "left",
                            transition: "all 0.15s",
                            display: "flex", justifyContent: "space-between", alignItems: "center",
                          }}>
                          <span style={{ ...TY.h3, color: isHov ? C.bg : C.white, fontSize: "0.7rem" }}>{style.label}</span>
                          <span style={{ color: isHov ? C.bg : C.gray4, fontSize: "1rem", marginLeft: "0.5rem" }}>→</span>
                        </button>
                      );
                    })}
                  </div>
                </div>

                {portraitLeft ? (
                  <div style={{ display: "flex", flexDirection: "column", gap: "0.8rem", paddingTop: "0.5rem" }}>
                    <button onClick={() => window.open(`https://wa.me/${artist.whatsapp}`, "_blank")} className="casa-btn casa-btn-primary" style={btnPrimary}>
                      AGENDAR · WHATSAPP <span className="casa-arrow">→</span>
                    </button>
                    <button onClick={() => window.open(`https://instagram.com/${artist.ig}`, "_blank")} className="casa-btn casa-btn-ghost" style={btnGhost}>
                      PORTFÓLIO · {artist.handle.toUpperCase()}
                    </button>
                    <ImgSlot label="SIGNATURE WORK" src={artist.signature} h={180} />
                    <div style={{ ...TY.micro, color: C.gray3, letterSpacing: "0.15em", textTransform: "uppercase" }}>
                      ★★★★★ · 5 / 5
                    </div>
                  </div>
                ) : (
                  <ImgSlot label={`${artist.name.split(" ")[0]} — RETRATO`} src={artist.portrait} position="center top" h={420} />
                )}
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ─── PROCESS — shared 4-step ────────────────────────────────
function ProcessSection() {
  return (
    <section id="processo" style={sectionAlt}>
      <div className="casa-inner" style={inner}>
        <SectionHead label="COMO FUNCIONA · 03" title="Do primeiro contato à cicatrização." />
        <div className="casa-process-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "0", borderTop: `1px solid ${C.line}`, borderLeft: `1px solid ${C.line}` }}>
          {HOME_PROCESS.map((step, i) => (
            <Reveal key={step.n} delay={i * 220} style={{
              padding: "2.5rem 2rem", minHeight: "260px",
              borderRight: `1px solid ${C.line}`,
              borderBottom: `1px solid ${C.line}`,
              display: "flex", flexDirection: "column", justifyContent: "space-between",
              gap: "1.5rem",
            }}>
              <CountNumber value={step.n} style={{ ...TY.hero, fontSize: "3.5rem", color: C.gray4, lineHeight: 1 }} />
              <div>
                <h3 style={{ ...TY.h3, color: C.white, marginBottom: "0.8rem" }}>{step.t}</h3>
                <p style={{ ...TY.body, color: C.gray2, lineHeight: 1.7, fontSize: "0.85rem" }}>{step.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── GALLERY ON HOME ────────────────────────────────────────
function HomeGallery() {
  const allLabels = [
    "REALISMO · FABIONESS", "COBERTURA · ANTES/DEPOIS", "FINE LINE · NANDA", "ORIXÁS · NANDA",
    "BLACKWORK · FABIONESS", "AQUARELA · NANDA", "SKETCH · FABIONESS", "FLORAL · NANDA",
  ];
  const [filter, setFilter] = useS_h("todos");
  return (
    <section id="galeria" style={section}>
      <div className="casa-inner" style={inner}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: "2rem", marginBottom: "3rem" }}>
          <SectionHead label="GALERIA · 04" title="Trabalhos do estúdio." />
          <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
            {[["todos", "TODOS"], ["fabioness", "FABIONESS"], ["nanda", "NANDA"]].map(([id, lb]) => (
              <button key={id} onClick={() => setFilter(id)}
                style={filter === id
                  ? { ...btnPrimary, padding: "8px 18px", fontSize: "0.58rem" }
                  : { ...btnGhost, padding: "8px 18px", fontSize: "0.58rem" }
                }>{lb}</button>
            ))}
          </div>
        </div>
        <Gallery labels={allLabels} filter={filter} />
        <div style={{ display: "flex", justifyContent: "center", marginTop: "2rem" }}>
          <button style={btnGhost}>VER GALERIA COMPLETA →</button>
        </div>
      </div>
    </section>
  );
}

// ─── TESTIMONIALS ───────────────────────────────────────────
function Testimonials() {
  return (
    <section id="depoimentos" style={sectionAlt}>
      <div className="casa-inner" style={inner}>
        <SectionHead label="DEPOIMENTOS · 04" title="Quem já passou por aqui." />
        {Object.entries(TESTIMONIALS).map(([artistId, reviews]) => (
          <div key={artistId} style={{ marginBottom: "4rem" }}>
            <p style={{ ...TY.label, color: C.gray3, borderBottom: `1px solid ${C.line}`, paddingBottom: "1rem", marginBottom: 0 }}>
              {ARTISTS[artistId].name} · GOOGLE 5 / 5
            </p>
            {reviews.slice(0, 3).map((r, i) => (
              <Reveal key={i} delay={i * 90} className="casa-review-row" style={{
                display: "grid",
                gridTemplateColumns: "180px 1fr 80px",
                gap: "3rem", alignItems: "center",
                borderBottom: `1px solid ${C.line}`, padding: "1.8rem 0",
              }}>
                <p style={{ ...TY.body, color: C.gray3, fontWeight: 600 }}>— {r.name}</p>
                <p style={{ ...TY.body, color: C.gray1, lineHeight: 1.75, fontStyle: "italic" }}>"{r.text}"</p>
                <p style={{ color: C.gray4, fontSize: "0.9rem", textAlign: "right", letterSpacing: "0.1em" }}>★★★★★</p>
              </Reveal>
            ))}
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── FAQ ────────────────────────────────────────────────────
function FAQ() {
  const [open, setOpen] = useS_h(null);
  const items = [
    { q: "COMO SOLICITAR ORÇAMENTO?", a: "Envie fotos de referência e descrição do projeto pelo WhatsApp ou preencha o formulário abaixo. Respondemos com estimativa de valor e prazo em até 24h úteis." },
    { q: "QUAL O VALOR MÍNIMO?", a: "O valor mínimo é de R$350. O preço final depende do tamanho, complexidade, local no corpo e tempo de sessão. Coberturas têm avaliação técnica específica." },
    { q: "PRECISO DEIXAR SINAL?", a: "Sim. 30% do valor para confirmar o agendamento. O valor é descontado do total. Cancelamentos com menos de 48h de antecedência não têm reembolso." },
    { q: "ONDE FICA O ESTÚDIO?", a: "Rua Bom Sucesso, 200 — Tatuapé, São Paulo. Sala de cowork privativa, atendimento exclusivo por agendamento." },
    { q: "COMO ME PREPARAR PARA A SESSÃO?", a: "Coma bem, hidrate-se, durma bem. Evite álcool nas 24h anteriores. Vista roupa confortável com acesso fácil ao local da tatuagem." },
    { q: "FAZEM COBERTURA DE QUALQUER TATUAGEM?", a: "Avaliamos antes de confirmar. Se não for possível cobrir com qualidade, falamos com clareza. Sem promessas que não podemos cumprir." },
    { q: "QUAL A IDADE MÍNIMA?", a: "18 anos. Documento com foto obrigatório. Não atendemos menores em nenhuma circunstância." },
    { q: "FAZEM ATENDIMENTO WALK-IN?", a: "Não. Exclusivamente por agendamento prévio para garantir tempo e atenção adequados a cada projeto." },
  ];
  return (
    <section id="faq" style={section}>
      <div className="casa-inner" style={inner}>
        <div className="casa-faq-grid" style={{ display: "grid", gridTemplateColumns: "360px 1fr", gap: "4rem", alignItems: "start" }}>
          <div style={{ minWidth: 0 }}>
            <Reveal>
              <p style={{ ...TY.label, color: C.gray3, marginBottom: "0.9rem" }}>FAQ · 05</p>
              <h2 style={{
                ...TY.h2, color: C.white,
                fontSize: "clamp(1.6rem,2.4vw,2.4rem)",
                lineHeight: 1.05, textWrap: "balance",
              }}>Perguntas<br/>frequentes.</h2>
              <p style={{ ...TY.spec, color: C.gray2, lineHeight: 1.8, fontStyle: "italic", marginTop: "1.4rem" }}>
                Não está aqui? Manda mensagem.<br/>Resposta honesta antes de qualquer compromisso.
              </p>
            </Reveal>
          </div>
          <div style={{ borderTop: `1px solid ${C.line}`, minWidth: 0 }}>
            {items.map((item, i) => (
              <Reveal key={i} delay={i * 60} style={{ borderBottom: `1px solid ${C.line}` }}>
                <button onClick={() => setOpen(open === i ? null : i)}
                  style={{
                    width: "100%", background: "none", border: "none", cursor: "pointer",
                    padding: "1.4rem 0", display: "flex", justifyContent: "space-between",
                    alignItems: "center", gap: "2rem", textAlign: "left",
                  }}>
                  <span style={{
                    ...TY.h3, color: open === i ? C.white : C.gray2,
                    transition: "color 0.2s", fontSize: "0.78rem",
                  }}>{item.q}</span>
                  <span style={{
                    color: C.gray3, fontSize: "1.2rem", flexShrink: 0,
                    transform: open === i ? "rotate(45deg)" : "none",
                    transition: "transform 0.25s",
                  }}>+</span>
                </button>
                <div style={{ maxHeight: open === i ? "300px" : "0", overflow: "hidden", transition: "max-height 0.35s ease" }}>
                  <p style={{ ...TY.body, color: C.gray2, lineHeight: 1.85, paddingBottom: "1.5rem", maxWidth: "70ch" }}>{item.a}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CONTACT ────────────────────────────────────────────────
function Contact() {
  return (
    <section id="contato" style={sectionAlt}>
      <div className="casa-inner" style={inner}>
        <SectionHead label="CONTATO · 06" title="Localização & Agendamento." />
        <div className="casa-contact-grid" style={{
          display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: "0",
          border: `1px solid ${C.line}`, marginBottom: "5rem",
        }}>
          <div style={{ padding: "2.5rem", borderRight: `1px solid ${C.line}` }}>
            <p style={{ ...TY.label, color: C.gray3, marginBottom: "1.2rem" }}>ENDEREÇO</p>
            <p style={{ ...TY.h2, color: C.white, lineHeight: 1.2, marginBottom: "1rem", fontSize: "1.5rem" }}>
              RUA BOM SUCESSO, 200<br />TATUAPÉ · SÃO PAULO SP
            </p>
            <p style={{ ...TY.micro, color: C.gray3, lineHeight: 2.2 }}>
              COWORK PRIVATIVO · SOB DEMANDA<br />SEG A SEX 10H–20H · SÁB 10H–18H<br />AGENDAMENTO PRÉVIO OBRIGATÓRIO
            </p>
          </div>
          {Object.entries(ARTISTS).map(([id, a], i) => (
            <div key={id} style={{ padding: "2.5rem", borderRight: i === 0 ? `1px solid ${C.line}` : "none" }}>
              <p style={{ ...TY.label, color: C.gray3, marginBottom: "1.2rem" }}>{a.name}</p>
              <p style={{ ...TY.spec, color: C.gray2, lineHeight: 1.8, marginBottom: "1rem", fontStyle: "italic" }}>
                {a.spec.split(" · ").slice(0, 3).join(" · ").toLowerCase()}.
              </p>
              <p style={{ ...TY.micro, color: C.gray4, marginBottom: "1.5rem" }}>{a.handle}</p>
              <button onClick={() => window.open(`https://wa.me/${a.whatsapp}`, "_blank")} className="casa-btn casa-btn-primary" style={btnPrimary}>
                WHATSAPP <span className="casa-arrow">→</span>
              </button>
            </div>
          ))}
        </div>
        <LeadForm />
      </div>
    </section>
  );
}

// ─── HOME PAGE ──────────────────────────────────────────────
function HomePage({ setPage, scrollTo, heroBg }) {
  return (
    <>
      <Hero scrollTo={scrollTo} bg={heroBg} />
      <ArtistsSection setPage={setPage} />
      <ProcessSection />
      <Testimonials />
      <FAQ />
      <Contact />
      <Footer />
    </>
  );
}

Object.assign(window, { Hero, ArtistsSection, ProcessSection, HomeGallery, Testimonials, FAQ, Contact, HomePage });