// Style landing page — Editorial spread treatment.
const { useEffect: useE_s } = React;

function StylePage({ artistId, styleId, setPage }) {
  const style = STYLES_DATA[artistId]?.find(s => s.id === styleId);
  const artist = ARTISTS[artistId];
  useE_s(() => { window.scrollTo(0, 0); }, []);
  if (!style || !artist) return null;

  return (
    <div style={{ background: C.bg, minHeight: "100vh", paddingTop: "56px" }}>
      {/* HERO */}
      <section style={{
        minHeight: "85vh",
        display: "flex", flexDirection: "column", justifyContent: "flex-end",
        padding: "0 3rem 4rem",
        borderBottom: `1px solid ${C.line}`,
        position: "relative", overflow: "hidden",
      }} className="casa-hero">
        <div style={{ position: "absolute", inset: 0, opacity: 0.5 }}>
          <ImgSlot label={`SIGNATURE ${style.short.toUpperCase()}`} src={style.cover} style={{ width: '100%', height: '100%' }} />
        </div>
        <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to top, ${C.bg} 0%, transparent 60%)` }} />
        <Reveal y={32} style={{ position: "relative" }}>
          <p style={{ ...TY.label, color: C.gray2, marginBottom: "2rem" }}>{artist.name} · {style.label}</p>
          <h1 style={{
            ...TY.hero,
            fontSize: "clamp(2.4rem, 6.5vw, 5.2rem)",
            color: C.white, whiteSpace: "pre-line",
            lineHeight: 1.02, letterSpacing: "-0.015em",
            maxWidth: "16ch", textWrap: "balance",
          }}>{style.hero}</h1>
          <div className="casa-style-hero-row" style={{
            borderTop: `1px solid ${C.line}`, marginTop: "3rem", paddingTop: "2.5rem",
            display: "grid", gridTemplateColumns: "1fr auto", gap: "4rem", alignItems: "end",
          }}>
            <p style={{ ...TY.spec, color: C.gray1, lineHeight: 1.85, maxWidth: "640px" }}>{style.intro}</p>
            <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
              <button onClick={() => window.open(`https://wa.me/${artist.whatsapp}`, "_blank")} className="casa-btn casa-btn-ghost" style={btnGhost}>
                WHATSAPP <span className="casa-arrow">→</span>
              </button>
              <button onClick={() => document.getElementById("lead-form")?.scrollIntoView({ behavior: "smooth" })} className="casa-btn casa-btn-primary"
                style={btnPrimary}>SOLICITAR ORÇAMENTO</button>
            </div>
          </div>
        </Reveal>
      </section>

      {/* WHY */}
      <section className="casa-sec" style={{ padding: "6rem 3rem", borderBottom: `1px solid ${C.line}` }}>
        <div className="casa-inner" style={{ maxWidth: "1280px", margin: "0 auto" }}>
          <SectionHead label="POR QUE ESCOLHER" title={`Como pensamos em ${style.short.toLowerCase()}.`} />
          <div className="casa-why-grid" style={{
            display: "grid", gridTemplateColumns: "repeat(3,1fr)",
            borderTop: `1px solid ${C.line}`, borderLeft: `1px solid ${C.line}`,
          }}>
            {style.why.map((w, i) => (
              <Reveal key={i} delay={i * 110} style={{
                padding: "2.8rem 2.2rem",
                borderRight: `1px solid ${C.line}`,
                borderBottom: `1px solid ${C.line}`,
                background: C.bgCard,
              }}>
                <p style={{ ...TY.micro, color: C.gray4, marginBottom: "1.5rem" }}>0{i + 1}</p>
                <h3 style={{ ...TY.h3, color: C.white, marginBottom: "1rem", lineHeight: 1.3 }}>{w.t}</h3>
                <p style={{ ...TY.body, color: C.gray2, lineHeight: 1.8 }}>{w.d}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section className="casa-sec" style={{ padding: "6rem 3rem", background: C.bgAlt, borderBottom: `1px solid ${C.line}` }}>
        <div className="casa-inner" style={{ maxWidth: "1280px", margin: "0 auto" }}>
          <SectionHead label="COMO FUNCIONA" title="O Processo." />
          <div style={{ borderTop: `1px solid ${C.line}` }}>
            {style.process.map((step, i) => (
              <Reveal key={i} delay={i * 200} className="casa-prow" style={{
                display: "grid",
                gridTemplateColumns: "120px 240px 1fr",
                gap: "3rem", alignItems: "start",
                borderBottom: `1px solid ${C.line}`, padding: "2.5rem 0",
              }}>
                <CountNumber value={step.n} style={{ ...TY.hero, fontSize: "3rem", color: C.gray4 }} />
                <h3 style={{ ...TY.h3, color: C.white, paddingTop: "0.5rem" }}>{step.t}</h3>
                <p style={{ ...TY.body, color: C.gray2, lineHeight: 1.85, maxWidth: "65ch" }}>{step.d}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* GALLERY */}
      <section className="casa-sec" style={{ padding: "6rem 3rem", borderBottom: `1px solid ${C.line}` }}>
        <div className="casa-inner" style={{ maxWidth: "1280px", margin: "0 auto" }}>
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "flex-end",
            marginBottom: "2.5rem", flexWrap: "wrap", gap: "2rem",
          }}>
            <SectionHead label="GALERIA" title={`Trabalhos — ${style.short}.`} />
            <button onClick={() => window.open(`https://instagram.com/${artist.ig}`, "_blank")} className="casa-btn casa-btn-ghost" style={btnGhost}>
              VER MAIS NO INSTAGRAM <span className="casa-arrow">→</span>
            </button>
          </div>
          <Gallery labels={style.gallery} />
        </div>
      </section>

      {/* LEAD FORM */}
      <section className="casa-sec" style={{ padding: "6rem 3rem", background: C.bgAlt }}>
        <div className="casa-inner" style={{ maxWidth: "1100px", margin: "0 auto" }}>
          <SectionHead label="PRÓXIMO PASSO" title="Solicitar Orçamento." />
          <LeadForm prefillArtist={artistId} prefillStyle={styleId} />
        </div>
      </section>

      {/* Sticky CTA */}
      <div style={{
        position: "sticky", bottom: 0,
        background: "rgba(0,0,0,0.96)",
        borderTop: `1px solid ${C.line}`,
        padding: "1rem 3rem",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        backdropFilter: "blur(8px)", zIndex: 100, gap: "1rem", flexWrap: "wrap",
      }}>
        <span style={{ ...TY.micro, color: C.gray3 }}>{artist.name} · {style.label}</span>
        <div style={{ display: "flex", gap: "1rem" }}>
          <button onClick={() => window.open(`https://wa.me/${artist.whatsapp}`, "_blank")} className="casa-btn casa-btn-ghost"
            style={{ ...btnGhost, padding: "8px 18px", fontSize: "0.58rem" }}>WHATSAPP <span className="casa-arrow">→</span></button>
          <button onClick={() => document.getElementById("lead-form")?.scrollIntoView({ behavior: "smooth" })} className="casa-btn casa-btn-primary"
            style={{ ...btnPrimary, padding: "8px 18px", fontSize: "0.58rem" }}>SOLICITAR ORÇAMENTO</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StylePage });