/* ============ CHER — Início (Home) composition ============ */
const { useEffect: aEffect } = React;

/* striped placeholder for imagery we don't have yet */
const phSrc = (label, w=900, h=680) =>
  'data:image/svg+xml;utf8,' + encodeURIComponent(
   `<svg xmlns='http://www.w3.org/2000/svg' width='${w}' height='${h}' viewBox='0 0 ${w} ${h}'>
      <defs><pattern id='p' width='16' height='16' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'>
        <rect width='16' height='16' fill='#0e2640'/><rect width='8' height='16' fill='#11304a'/></pattern></defs>
      <rect width='100%' height='100%' fill='url(#p)'/>
      <rect x='1' y='1' width='${w-2}' height='${h-2}' fill='none' stroke='#C99A6B' stroke-opacity='0.5'/>
      <text x='50%' y='50%' fill='#C99A6B' font-family='monospace' font-size='22' letter-spacing='2'
        text-anchor='middle' dominant-baseline='middle'>${label}</text>
    </svg>`);

/* ---- data ---- */
const PALETTE = [
  {name:'Azul Profundo', hex:'#0B1D33', fg:'#EDE7DC', note:'Confiança, autoridade e solidez'},
  {name:'Azul Petróleo', hex:'#15414A', fg:'#EDE7DC', note:'Estratégia, segurança e profundidade'},
  {name:'Caramelo Nude', hex:'#C99A6B', fg:'#241a10', note:'Acolhimento, elegância e sofisticação'},
  {name:'Off-White',     hex:'#F7F5F0', fg:'#2a2622', note:'Clareza, leveza e minimalismo'},
  {name:'Areia Clara',   hex:'#DCD6CC', fg:'#2a2622', note:'Neutralidade, equilíbrio e sofisticação'},
  {name:'Verde Oliva',   hex:'#6E7260', fg:'#f4f2ec', note:'Crescimento, estabilidade e conexão'},
  {name:'Taupe Soft',    hex:'#A89F94', fg:'#241f19', note:'Refinamento, suavidade e elegância'},
  {name:'Chumbo Soft',   hex:'#3E4246', fg:'#EDE7DC', note:'Modernidade, força e estrutura'},
];

const BRANDS = ['Dior','Chanel','Hermès','Prada','Armani','Valentino','Louis Vuitton','Gucci','Saint Laurent','Loro Piana','Burberry'];

const SEASONS = [
  {n:'Primavera', d:'Quente e clara — tons vivos, luminosos e calorosos.', bars:['#E8A0A8','#F4C95D','#7FBF7F','#5FB4C4']},
  {n:'Verão', d:'Frio e suave — tons claros, acinzentados e delicados.', bars:['#A7C7D6','#C9A6C0','#9FB8A8','#8893B5']},
  {n:'Outono', d:'Quente e profundo — tons ricos, terrosos e sofisticados.', bars:['#7A1F2B','#15414A','#C99A6B','#3F4A2E']},
  {n:'Inverno', d:'Frio e intenso — tons puros, contrastantes e marcantes.', bars:['#0B1D33','#8C1C3A','#F7F5F0','#2E5E4E']},
];

const FEATURE_TABS = [
  { value:'corp', label:'Consultoria Corporativa', icon:icons.crown,
    content:{ badge:'Imagem estratégica', title:'Posicionamento e presença para líderes e equipes',
      description:'Alinhamos imagem, comunicação e apresentação de pessoas e times à estratégia da empresa — para que cada ponto de contato transmita autoridade e credibilidade.',
      items:['Diagnóstico de imagem e percepção atual','Alinhamento de presença para líderes e equipes','Posicionamento e comunicação visual coerente','Construção de autoridade e percepção de valor'],
      buttonText:'Agendar conversa', href:'contato.html', imageSrc:'assets/cheris-2.jpg', imageAlt:'Consultoria corporativa CHER' } },
  { value:'cor', label:'Coloração & Estilo', icon:icons.spark,
    content:{ badge:'Análise pessoal', title:'As cores e o estilo que valorizam você',
      description:'A coloração pessoal e a leitura de estilo revelam a cartela e as combinações que comunicam saúde, segurança e autoridade — usando a cor como ferramenta estratégica.',
      items:['Diagnóstico de subtom, contraste e intensidade','Cartela de cores que mais favorecem você','Neutros e metais ideais para o seu tom','Combinações que elevam presença e autoridade'],
      buttonText:'Falar com a Cheris', href:'contato.html', imageSrc:'assets/cheris-3.jpg', imageAlt:'Análise de coloração pessoal' } },
  { value:'app', label:'Aplicativo CHER', icon:icons.app,
    content:{ badge:'Tecnologia + imagem', title:'Uma consultoria inteligente no seu bolso',
      description:'O app CHER leva a experiência de uma consultoria profissional para o dia a dia: análise de coloração, estilo, guarda-roupa digital e um personal stylist com inteligência artificial.',
      items:['Coloração pessoal e identificação de estilo','Personal stylist com inteligência artificial','Guarda-roupa inteligente e looks por evento','Bazar CHER — moda circular entre usuários'],
      buttonText:'Conhecer o app', href:'aplicativo.html', imageSrc:phSrc('app · personal IA'), imageAlt:'Aplicativo CHER' } },
];

/* ================= DEPOIMENTOS (ContainerScroll) ================= */
const TESTIMONIALS = [
  { ini:'MA', name:'Mariana Albuquerque', role:'Diretora Comercial · Tecnologia',
    text:'Depois da CHER, entro em cada negociação com outra presença. Minha imagem passou a abrir portas antes da primeira palavra.' },
  { ini:'RT', name:'Rafael Tavares', role:'Fundador & CEO · Construtech',
    text:'O trabalho de posicionamento mudou como o mercado enxerga a nossa empresa. Coerência virou autoridade — e autoridade virou contrato.' },
  { ini:'JC', name:'Juliana Costa', role:'Advogada · Sócia de escritório',
    text:'A análise de coloração foi reveladora. Hoje sei exatamente quais cores comunicam a segurança que meus clientes esperam de mim.' },
  { ini:'BM', name:'Bruno Meneghel', role:'Consultor de Investimentos',
    text:'O aplicativo virou meu personal stylist de bolso. Planejo os looks da semana em minutos e nunca mais titubeei numa reunião importante.' },
  { ini:'PL', name:'Patrícia Lemos', role:'Head de Pessoas · Varejo',
    text:'Levamos a CHER para a liderança da empresa. A imagem do time ficou alinhada, profissional e muito mais confiante.' },
];

function useScrollProgress(ref){
  const [p,setP] = React.useState(0);
  React.useEffect(()=>{
    const el=ref.current; if(!el) return;
    let raf=null;
    const calc=()=>{
      const rect=el.getBoundingClientRect();
      const vh=window.innerHeight;
      const total=rect.height+vh;
      setP(Math.min(1,Math.max(0,(vh-rect.top)/total)));
      raf=null;
    };
    const onScroll=()=>{ if(!raf) raf=requestAnimationFrame(calc); };
    calc();
    window.addEventListener('scroll',onScroll,{passive:true});
    window.addEventListener('resize',onScroll);
    return ()=>{ window.removeEventListener('scroll',onScroll); window.removeEventListener('resize',onScroll); };
  },[]);
  return p;
}

function Testimonials(){
  const ref = React.useRef(null);
  const p = useScrollProgress(ref);
  const reduced = (typeof prefersReduced==='function') && prefersReduced();
  const isMobile = typeof window!=='undefined' && window.innerWidth<=768;
  const e = Math.min(1, p*1.6); // ease toward settled while entering
  const rotate = reduced ? 0 : (1-e)*(isMobile?10:17);
  const scale  = reduced ? 1 : (isMobile ? (0.86+e*0.1) : (1.05 - e*0.05));
  const headY  = reduced ? 0 : (1-e)*28;
  return (
    <section className="section-pad testi" data-screen-label="Depoimentos">
      <div className="wrap tcontainer" ref={ref}>
        <div className="thead" style={{transform:`translateY(${headY}px)`}}>
          <span className="eyebrow reveal in">Quem vive a CHER</span>
          <h2 className="reveal in d1">Imagem que o mercado reconhece</h2>
        </div>
        <div className="tcard" style={{transform:`perspective(1100px) rotateX(${rotate}deg) scale(${scale})`}}>
          <div className="tcard-inner">
            <div className="tgrid">
              {TESTIMONIALS.map(t=>(
                <figure className="tcell" key={t.ini}>
                  <div className="stars" aria-label="5 de 5">★★★★★</div>
                  <blockquote className="ttext">“{t.text}”</blockquote>
                  <figcaption className="tperson">
                    <span className="tav" aria-hidden="true">{t.ini}</span>
                    <span><span className="tname">{t.name}</span><span className="trole">{t.role}</span></span>
                  </figcaption>
                </figure>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================= APP ================= */
function App(){
  aEffect(()=>{
    const els = document.querySelectorAll('.reveal:not(.in)');
    const io = new IntersectionObserver((ents)=>{
      ents.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });
    },{threshold:0.12, rootMargin:'0px 0px -8% 0px'});
    els.forEach(el=>io.observe(el));
    const y=document.querySelector('[data-year]'); if(y) y.textContent=new Date().getFullYear();
    return ()=>io.disconnect();
  },[]);

  return (
  <React.Fragment>
    <GradientNav active="inicio" />

    {/* ===== HERO ===== */}
    <section className="hero" id="topo" data-screen-label="Hero">
      <GoldHero />
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <span className="eyebrow reveal in">Consultoria de Imagem Corporativa</span>
          <h1 className="reveal in d1">Sua imagem comunica <em>antes da sua fala.</em></h1>
          <p className="lead maxch reveal in d2">Posicionamento, presença e autoridade construídos com estratégia — para líderes e marcas que querem ser percebidos pelo valor que realmente entregam.</p>
          <div className="hero-actions reveal in d3">
            <AButton href="aplicativo.html">Conhecer o app</AButton>
            <GhostButton href="contato.html">Falar com a Cheris</GhostButton>
          </div>
        </div>
        <div className="hero-photo reveal in d2">
          <div className="frame"><img src="assets/cheris-1.jpg" alt="Cheris Sisti, fundadora da CHER" /></div>
          <div className="tag"><div className="k">+17</div><div className="v">anos no mundo corporativo</div></div>
        </div>
      </div>
      <div className="hero-palette" aria-hidden="true">
        {PALETTE.map(c=>(
          <i key={c.hex} style={{background:c.hex}}><span className="pc" style={{color:c.fg}}>{c.hex}</span></i>
        ))}
      </div>
    </section>

    {/* ===== MANIFESTO ===== */}
    <section className="sec-teal section-pad" data-screen-label="Manifesto">
      <div className="wrap" style={{textAlign:'center',display:'flex',flexDirection:'column',alignItems:'center',gap:'34px'}}>
        <div className="fleuron reveal"><span>&#10070;</span></div>
        <p className="q reveal d1" style={{maxWidth:'22ch'}}>“A forma como você se apresenta determina o valor que o mercado está disposto a reconhecer.”</p>
        <div className="eyebrow reveal d2" style={{marginBottom:0}}>CHER · Imagem Estratégica</div>
      </div>
    </section>

    {/* ===== QUEM É A CHERIS ===== */}
    <section className="sec-light section-pad" id="sobre" data-screen-label="Sobre a Cheris">
      <div className="wrap split flip">
        <div className="reveal">
          <span className="eyebrow">Quem é a Cheris</span>
          <h2>Da liderança empresarial à imagem estratégica</h2>
          <p className="lead" style={{color:'var(--txt-on-light-dim)'}}>Por mais de 17 anos, Cheris Sisti viveu o mundo corporativo de dentro — empreendendo, liderando equipes e construindo negócios.</p>
          <p>Ao longo dessa trajetória, percebeu algo que se repetia em toda mesa de negociação: a forma como uma pessoa ou uma marca se apresenta muda, na prática, o valor que o mercado reconhece nela.</p>
          <p>Foi essa convicção que a levou a mudar de carreira. Hoje, à frente da <strong>CHER — Consultoria de Imagem Corporativa</strong>, ajuda empresários, líderes e equipes a se posicionarem com autoridade, credibilidade e presença, de forma autêntica e alinhada ao seu propósito.</p>
          <p className="about-quote">“Imagem estratégica gera percepção de valor.”</p>
        </div>
        <div className="split-img reveal d2">
          <img src="assets/cheris-3.jpg" alt="Cheris Sisti, fundadora da CHER" loading="lazy" />
          <span className="edge" aria-hidden="true"></span>
        </div>
      </div>
    </section>

    {/* ===== COLORAÇÃO + PALETTE STACK ===== */}
    <section className="sec-sand section-pad" id="coloracao" data-screen-label="Coloração pessoal">
      <div className="wrap">
        <div className="center intro-narrow reveal">
          <span className="eyebrow">Coloração pessoal</span>
          <h2>As cores certas trabalham a seu favor</h2>
          <p className="lead" style={{color:'var(--txt-on-light-dim)'}}>As cores que ficam perto do rosto são as primeiras a serem lidas. A tonalidade certa ilumina a pele, transmite saúde e segurança — e se torna uma ferramenta de comunicação a seu favor.</p>
        </div>

        <div style={{display:'grid',gridTemplateColumns:'minmax(0,0.92fr) minmax(0,1.08fr)',gap:'clamp(30px,5vw,72px)',alignItems:'start'}} className="cor-split">
          <div className="reveal cor-aside">
            <h3 style={{color:'var(--teal)',marginBottom:'1rem'}}>A paleta da marca</h3>
            <p style={{color:'var(--txt-on-light-dim)'}}>Cada cor da CHER comunica uma intenção. Juntas, formam um sistema de imagem coerente — a base de todo posicionamento que construímos.</p>
            <p style={{color:'var(--txt-on-light-dim)',marginTop:'1rem'}}>Role para percorrer os oito tons que sustentam a identidade.</p>
          </div>
          <PaletteStack colors={PALETTE} />
        </div>

        <p className="center eyebrow reveal" style={{display:'block',margin:'30px 0 28px'}}>As quatro estações da cor</p>
        <div className="season-row">
          {SEASONS.map((s,i)=>(
            <div className={`season reveal ${i?('d'+Math.min(i,3)):''}`} key={s.n}>
              <div className="bars">{s.bars.map((b,j)=><i key={j} style={{background:b}} />)}</div>
              <div className="body"><strong>{s.n}</strong><span>{s.d}</span></div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* ===== BRANDS (LogoLoop) ===== */}
    <section className="brands-band" data-screen-label="Marcas">
      <div className="cap reveal">
        <span className="eyebrow" style={{marginBottom:'8px'}}>Referências que vestem autoridade</span>
      </div>
      <LogoLoop items={BRANDS} />
    </section>

    {/* ===== SERVIÇOS (Feature108) ===== */}
    <section className="sec-ink section-pad" id="servicos" data-screen-label="Serviços">
      <div className="wrap">
        <div className="center intro-narrow reveal">
          <span className="eyebrow">Como a CHER trabalha</span>
          <h2>Percepção é o que define o seu valor de mercado</h2>
          <p className="lead">Imagem, comunicação e presença deixam de ser estética e passam a ser ferramentas de crescimento. Escolha a frente e veja o que está incluído.</p>
        </div>
        <div className="reveal d1"><Feature108 tabs={FEATURE_TABS} /></div>
      </div>
    </section>

    {/* ===== POSICIONAMENTO cards ===== */}
    <section className="sec-ink section-pad" id="posicionamento" data-screen-label="Posicionamento" style={{paddingTop:0}}>
      <div className="wrap">
        <div className="grid-3">
          <article className="card reveal">
            <svg className="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-6 8-6s8 2 8 6"/></svg>
            <h3>Presença</h3>
            <p>Alinhar imagem, apresentação e comunicação de forma estratégica e coerente, fortalecendo credibilidade em cada ponto de contato.</p>
          </article>
          <article className="card reveal d1">
            <svg className="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4.5"/><circle cx="12" cy="12" r="1"/></svg>
            <h3>Posicionamento</h3>
            <p>Construir percepção consistente de marca, consolidando autoridade e coerência por meio de uma comunicação visual bem definida.</p>
          </article>
          <article className="card reveal d2">
            <svg className="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M3 8l4 3 5-6 5 6 4-3-2 11H5z"/></svg>
            <h3>Autoridade</h3>
            <p>Elevar o posicionamento de mercado e a percepção de valor, transformando imagem corporativa em uma experiência premium.</p>
          </article>
        </div>
      </div>
    </section>

    {/* ===== DEPOIMENTOS ===== */}
    <Testimonials />

    {/* ===== APP teaser (Lightfall) ===== */}
    <section className="sec-ink section-pad appteaser" id="app" data-screen-label="Aplicativo">
      <Lightfall />
      <div className="wrap split">
        <div className="reveal">
          <span className="eyebrow">O aplicativo</span>
          <h2>Uma consultoria de imagem no seu bolso</h2>
          <p className="lead">A CHER também é um aplicativo de consultoria de imagem inteligente: coloração pessoal, identificação de estilo e um personal stylist com inteligência artificial, disponível quando você precisar.</p>
          <div className="pillars">
            <span>Coloração &amp; estilo</span><span>Personal IA</span><span>Guarda-roupa inteligente</span><span>Bazar CHER</span>
          </div>
          <AButton href="aplicativo.html">Entenda como funciona</AButton>
        </div>
        <div className="reveal d2">
          <div className="app-aside">
            <h4>Por que existe</h4>
            <p>Levar a experiência de uma consultoria profissional para o dia a dia: você descobre as cores e o estilo que valorizam a sua imagem, organiza o que já tem e se veste com segurança em qualquer ocasião.</p>
            <div className="fleuron" style={{justifyContent:'flex-start'}}><span>&#10070;</span></div>
            <p className="qi">“Sua imagem fala antes da sua palavra.”</p>
          </div>
        </div>
      </div>
    </section>

    {/* ===== FOOTER ===== */}
    <Footer />
  </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);