/* global React, Icon, Reveal, Eyebrow, Pill, Section */
const { useState: useStateMid } = React;

const DIFFERENTIALS = [
  { t: "Atendimento dedicado", d: "Poucos clientes por vez, atenção real, decisões a quatro mãos." },
  { t: "Estratégia antes da estética", d: "Cada escolha visual responde a um objetivo de marca." },
  { t: "Visual premium com intenção", d: "Estética refinada que comunica valor sem ostentação." },
  { t: "Comunicação alinhada", d: "Texto, imagem e ritmo conversam, sempre no mesmo tom." },
  { t: "Clareza e autoridade", d: "Posicionamento que torna sua marca a escolha óbvia." },
  { t: "Experiência delicada", d: "Processo organizado, profissional e leve do início ao fim." },
];

function DiffRow({ i, t, d }) {
  const [h, setH] = useStateMid(false);
  return (
    <Reveal delay={i * 50}>
      <li onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ padding: "32px 0", display: "flex", gap: 32, borderTop: i === 0 ? "none" : "1px solid var(--line)" }}>
        <span style={{ fontFamily: "var(--font-display)", fontSize: 24, color: "var(--steel)", width: 40, flex: "none" }}>0{i + 1}</span>
        <div>
          <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 24, color: h ? "var(--steel)" : "var(--graphite)", margin: "0 0 8px", transition: "color .3s" }}>{t}</h3>
          <p className="vl-body" style={{ margin: 0 }}>{d}</p>
        </div>
      </li>
    </Reveal>
  );
}

function Differentials() {
  return (
    <Section id="diferenciais">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(12,1fr)", gap: 48 }} className="vl-diff-grid">
        <div className="vl-diff-head" style={{ gridColumn: "span 5", position: "sticky", top: 128, alignSelf: "start" }}>
          <Reveal>
            <Eyebrow>Diferenciais</Eyebrow>
            <h2 className="vl-display-2" style={{ marginTop: 24 }}>Por que marcas de alto padrão escolhem a <em style={{ fontStyle: "italic", fontWeight: 300, color: "var(--steel)" }}>Vittalure</em>.</h2>
            <p className="vl-body" style={{ marginTop: 24 }}>Trabalhamos com método, sensibilidade e profundidade. O resultado é uma presença digital coerente, desejada e construída para o longo prazo.</p>
          </Reveal>
        </div>
        <ul style={{ gridColumn: "7 / span 6", listStyle: "none", margin: 0, padding: 0 }} className="vl-diff-list">
          {DIFFERENTIALS.map((it, i) => <DiffRow key={it.t} i={i} {...it} />)}
        </ul>
      </div>
    </Section>
  );
}

const CASES = [
  {
    idx: "Case 01", name: "Dra. Mariana Bonilha", role: "Médica tricologista · @marimbonilha.dermato",
    antesImg: "case-mari-antes.jpg", depoisImg: "case-mari-depois.jpg",
    antesPalette: [["#9C968C", "Cinza quente"], ["#D8CEBE", "Bege claro"], ["#ECEAE4", "Branco gelo"], ["#8A7A68", "Marrom suave"], ["#B6ADA1", "Tons dessaturados"]],
    depoisPalette: [["#C8AE97", "Nude sofisticado"], ["#E4D2BC", "Champagne"], ["#F1E9DC", "Marfim"], ["#A89685", "Taupe elegante"], ["#C9A86A", "Dourado suave"]],
    antes: ["Conteúdo mais genérico.", "Menor consistência visual.", "Posicionamento pouco evidente.", "Baixa diferenciação dentro do nicho."],
    depois: ["Autoridade claramente posicionada em tricologia.", "Conteúdo mais estratégico e educativo.", "Identidade visual consistente.", "Marca pessoal reconhecível.", "Maior percepção de valor dos serviços."],
  },
  {
    idx: "Case 02", name: "Dra. Gabriela Dallagnese", role: "Dermatologista · @gabidallagnese",
    antesImg: "case-gabi-antes.jpg", depoisImg: "case-gabi-depois.jpg",
    antesPalette: [["#9C8E78", "Bege escuro"], ["#8A8073", "Marrom acinzentado"], ["#5F6B5A", "Verde fechado"], ["#E6E1D8", "Branco suave"], ["#ADA597", "Tons neutros apagados"]],
    depoisPalette: [["#DAC7AC", "Bege luminoso"], ["#E8D8C0", "Champagne"], ["#F3ECE0", "Branco quente"], ["#D2B884", "Dourado claro"], ["#D8BBA9", "Nude rosado"]],
    antes: ["Comunicação mais tradicional.", "Menor conexão emocional.", "Conteúdo menos alinhado à marca pessoal.", "Menor diferenciação visual."],
    depois: ["Posicionamento premium mais evidente.", "Conteúdo humanizado e estratégico.", "Marca pessoal fortalecida.", "Comunicação mais sofisticada.", "Maior conexão e identificação com o público."],
  },
];

function useViewport() {
  const [w, setW] = useStateMid(typeof window !== "undefined" ? window.innerWidth : 1200);
  React.useEffect(() => {
    const on = () => setW(window.innerWidth);
    window.addEventListener("resize", on);
    return () => window.removeEventListener("resize", on);
  }, []);
  return w;
}

function Swatch({ c, name }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
      <span style={{ width: 16, height: 16, borderRadius: "50%", background: c, flex: "none", border: "1px solid rgba(44,44,42,.1)", boxShadow: "inset 0 0 0 2px rgba(255,255,255,.4)" }} />
      <span style={{ fontSize: 13, color: "var(--graphite-soft)", lineHeight: 1.2 }}>{name}</span>
    </div>
  );
}

function BASide({ tag, img, alt, palette, accent, isMobile }) {
  const paletteStyle = isMobile
    ? { display: "flex", flexWrap: "wrap", gap: "10px 18px", marginTop: 16 }
    : { display: "flex", flexDirection: "column", justifyContent: "center", gap: 14, width: 124, flex: "none" };
  const mediaStyle = isMobile ? {} : { display: "flex", gap: 18, alignItems: "stretch" };
  return (
    <figure style={{ margin: 0 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 14 }}>
        <span style={{ width: 18, height: 1, background: accent ? "var(--steel)" : "var(--line)" }} />
        <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".26em", textTransform: "uppercase", color: accent ? "var(--steel-deep)" : "var(--cinza-medio)" }}>{tag}</span>
      </div>
      <div style={mediaStyle}>
        <div style={{ flex: 1, alignSelf: "flex-start", borderRadius: 16, overflow: "hidden", border: accent ? "1px solid var(--steel-light)" : "1px solid var(--line)", boxShadow: accent ? "var(--shadow-elegant)" : "var(--shadow-soft)" }}>
          <img src={`assets/${img}`} alt={alt} style={{ width: "100%", aspectRatio: "9 / 16", height: "auto", objectFit: "cover", objectPosition: "top center", display: "block" }} />
        </div>
        <div style={paletteStyle}>
          <span style={{ flex: isMobile ? "1 0 100%" : "none", fontSize: 10, fontWeight: 600, letterSpacing: ".2em", textTransform: "uppercase", color: "var(--cinza-medio)" }}>Paleta</span>
          {palette.map(([col, name]) => <Swatch key={name} c={col} name={name} />)}
        </div>
      </div>
    </figure>
  );
}

function AnalysisCard({ title, items, accent }) {
  return (
    <div style={{ padding: "clamp(24px,2.4vw,32px)", borderRadius: 16, border: accent ? "1px solid var(--steel-light)" : "1px solid var(--line)", background: accent ? "linear-gradient(180deg, var(--champagne-card) 0%, #EFEBE2 100%)" : "var(--champagne-card)" }}>
      <h4 style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, letterSpacing: ".24em", textTransform: "uppercase", color: accent ? "var(--steel-deep)" : "var(--cinza-medio)", margin: "0 0 18px" }}>{title}</h4>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 13 }}>
        {items.map((it) => (
          <li key={it} style={{ position: "relative", paddingLeft: 22, fontSize: 15, fontWeight: 300, lineHeight: 1.5, color: "var(--graphite-soft)" }}>
            <span style={{ position: "absolute", left: 0, top: ".5em", width: 7, height: 7, borderRadius: "50%", background: accent ? "var(--steel)" : "var(--line)" }} />
            {it}
          </li>
        ))}
      </ul>
    </div>
  );
}

function CaseBlock({ c, isMobile, isTablet, delay }) {
  const compareStyle = isMobile
    ? { display: "flex", flexDirection: "column", gap: 28 }
    : { display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: isTablet ? 24 : 40, alignItems: "center" };
  const analysisStyle = isMobile
    ? { display: "flex", flexDirection: "column", gap: 18, marginTop: 36 }
    : { display: "grid", gridTemplateColumns: "1fr 1fr", gap: isTablet ? 24 : 40, marginTop: 44 };
  return (
    <Reveal delay={delay}>
      <article style={{ borderTop: "1px solid var(--line)", paddingTop: "clamp(32px,4vw,52px)" }}>
        <header style={{ display: "flex", alignItems: "baseline", flexWrap: "wrap", gap: "8px 18px", marginBottom: "clamp(28px,4vw,44px)" }}>
          <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 17, color: "var(--steel)", letterSpacing: ".04em" }}>{c.idx}</span>
          <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(1.7rem,3vw,2.4rem)", margin: 0, color: "var(--graphite)", lineHeight: 1.05 }}>{c.name}</h3>
          <span style={{ fontSize: 14, color: "var(--cinza-medio)" }}>— {c.role}</span>
        </header>
        <div style={compareStyle}>
          <BASide tag="Antes" img={c.antesImg} alt={`Feed antigo — ${c.name}`} palette={c.antesPalette} isMobile={isMobile} />
          <div style={{ display: "grid", placeItems: "center" }}>
            <span style={{ width: 46, height: 46, borderRadius: "50%", display: "grid", placeItems: "center", border: "1px solid var(--line)", background: "var(--champagne-card)", color: "var(--steel-deep)", boxShadow: "var(--shadow-soft)", transform: isMobile ? "rotate(90deg)" : "none" }}>
              <Icon name="arrow-right" size={20} />
            </span>
          </div>
          <BASide tag="Depois" img={c.depoisImg} alt={`Feed atual — ${c.name}`} palette={c.depoisPalette} accent isMobile={isMobile} />
        </div>
        <div style={analysisStyle}>
          <AnalysisCard title="Antes" items={c.antes} />
          <AnalysisCard title="Depois" items={c.depois} accent />
        </div>
      </article>
    </Reveal>
  );
}

function Portfolio() {
  const w = useViewport();
  const isMobile = w < 760;
  const isTablet = w >= 760 && w < 1000;
  return (
    <Section id="cases" style={{ background: "rgba(202,213,223,.4)" }}>
      <Reveal>
        <div style={{ maxWidth: 640, marginBottom: "clamp(48px,7vh,72px)" }}>
          <Eyebrow>Cases</Eyebrow>
          <h2 className="vl-display-2" style={{ marginTop: 24 }}>Transformações que constroem <em style={{ fontStyle: "italic", fontWeight: 300, color: "var(--steel)" }}>autoridade</em>.</h2>
        </div>
      </Reveal>
      <div style={{ display: "flex", flexDirection: "column", gap: "clamp(56px,9vh,110px)" }}>
        {CASES.map((c, i) => <CaseBlock key={c.name} c={c} isMobile={isMobile} isTablet={isTablet} delay={i * 80} />)}
      </div>
      <Reveal>
        <div style={{ marginTop: "clamp(48px,7vh,80px)", paddingTop: "clamp(32px,4vw,48px)", borderTop: "1px solid var(--line)", textAlign: "center" }}>
          <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 400, fontSize: "clamp(1.4rem,2.8vw,2.1rem)", lineHeight: 1.3, color: "var(--graphite)", margin: "0 auto", maxWidth: "24ch", textWrap: "balance" }}>A Vittalure não cria apenas posts. Ela transforma profissionais em <em style={{ color: "var(--steel)" }}>marcas fortes, desejadas e memoráveis.</em></p>
        </div>
      </Reveal>
    </Section>
  );
}

const STEPS = [
  { n: "01", t: "Diagnóstico de marca", d: "Imersão profunda em quem você é, onde está e onde quer chegar." },
  { n: "02", t: "Estratégia e posicionamento", d: "Definição de discurso, território, audiência e percepção desejada." },
  { n: "03", t: "Direção criativa", d: "Identidade visual e verbal coerente, traduzida em sistema editorial." },
  { n: "04", t: "Produção e gestão", d: "Conteúdo planejado, produzido e publicado com consistência editorial." },
  { n: "05", t: "Análise e otimização", d: "Leitura mensal de dados, ajustes finos e evolução contínua." },
];

function ProcessStep({ n, t, d, delay }) {
  const [h, setH] = useStateMid(false);
  return (
    <Reveal delay={delay}>
      <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} className="vl-step-grid"
        style={{ display: "grid", gridTemplateColumns: "repeat(12,1fr)", gap: 24, padding: "40px 24px", margin: "0 -24px", borderTop: "1px solid var(--line)", alignItems: "baseline", borderRadius: 16, background: h ? "rgba(202,213,223,.3)" : "transparent", transition: "background .4s var(--ease-smooth)" }}>
        <div style={{ gridColumn: "span 2", fontFamily: "var(--font-display)", fontSize: "clamp(2.4rem,4vw,3.5rem)", color: "var(--steel)" }} className="vl-step-n">{n}</div>
        <h3 style={{ gridColumn: "span 4", fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(1.4rem,2.4vw,1.85rem)", color: "var(--graphite)", margin: 0 }} className="vl-step-t">{t}</h3>
        <p className="vl-body" style={{ gridColumn: "7 / span 6", margin: 0, fontSize: 17 }} className="vl-step-d">{d}</p>
      </div>
    </Reveal>
  );
}

function Process() {
  return (
    <Section id="processo">
      <Reveal>
        <div style={{ maxWidth: 640, marginBottom: 64 }}>
          <Eyebrow>Como funciona</Eyebrow>
          <h2 className="vl-display-2" style={{ marginTop: 24 }}>Um processo <em style={{ fontStyle: "italic", fontWeight: 300, color: "var(--steel)" }}>claro</em>, do diagnóstico ao desejo.</h2>
        </div>
      </Reveal>
      <div>{STEPS.map((s, i) => <ProcessStep key={s.n} {...s} delay={i * 60} />)}</div>
    </Section>
  );
}

Object.assign(window, { Differentials, Portfolio, Process });