/* global React, Reveal, Sym, Eyebrow, Btn, Placeholder, Accordion */

/* =================== HERO (Blocos 1 + 2) =================== */
function Hero() {
  return (
    <header className="section" id="topo" style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', paddingTop: 'clamp(120px,16vh,200px)' }}>
      <div className="container" style={{ width: '100%' }}>
        <Reveal as="div">
          <Eyebrow>Estratégia · Cultura · Conexão</Eyebrow>
        </Reveal>
        <Reveal delay={80}>
          <h1 className="h-hero" style={{ color: 'var(--blue)', margin: '26px 0 0', maxWidth: 1060 }}>
            Estratégia que conecta ao que <span className="display-italic">realmente importa.</span>
          </h1>
        </Reveal>
        <Reveal delay={160}>
          <p className="lead text-col" style={{ marginTop: 34 }}>
            Em meio a tanto ruído, construir conexões verdadeiras virou diferencial. É nisso que a FRESTA trabalha. Marcas, projetos criativos e pessoas que querem sair do lugar, com método, escuta e propósito.
          </p>
        </Reveal>
        <Reveal delay={240}>
          <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '20px 28px', marginTop: 44 }}>
            <Btn variant="solid" lg href="#contato">Quero entender como a FRESTA pode me ajudar</Btn>
          </div>
        </Reveal>
      </div>
    </header>
  );
}

/* =================== ABERTURA (Bloco 3) =================== */
function Abertura() {
  return (
    <section className="section bg-paper" id="proposta">
      <div className="container">
        <div className="two-col two-col--wide">
          <Reveal>
            <SectionMark />
            <h2 className="h-sec" style={{ color: 'var(--blue)', marginTop: 0 }}>
              Vivemos em meio ao ruído. Muita produção, pouca conexão.
            </h2>
          </Reveal>
          <Reveal delay={120} className="body" style={{ alignSelf: 'center' }}>
            <p style={{ marginTop: 0 }}>
              Fala-se muito, escuta-se pouco. Assim, o vínculo entre marcas e pessoas se perde no caminho.
            </p>
            <p>
              A FRESTA nasceu para preencher essa lacuna. Não com mais conteúdo, mais métricas ou promessas. Com algo raro: <strong style={{ fontWeight: 600, color: 'var(--blue)' }}>escuta de verdade e estratégia com relevância.</strong>
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* =================== DOR (Bloco 5) =================== */
const PAINS = [
  'Sua marca investe em ações de marketing, mas não consegue criar vínculo duradouro com quem importa.',
  'Sua marca se faz presente, e ainda assim não é lembrada pelo que deveria.',
  'Você sabe que sua marca tem potencial cultural, mas não sabe como transformar isso em estratégia.',
  'Você ativa patrocínios e eventos, mas a conexão com a comunidade não se sustenta depois.',
  'Você tem uma ideia que não sai do papel há meses, e não sabe nem por onde começar.',
  'Você começou um projeto com energia, mas ele foi perdendo o rumo pelo caminho.',
  'Você tem repertório e ideias, mas falta método para transformar isso em algo concreto.',
];
function Dor() {
  return (
    <section className="section bg-blue" id="dor">
      <div className="container">
        <div className="two-col two-col--wide" style={{ alignItems: 'start' }}>
          <Reveal className="sticky-col" style={{ position: 'sticky', top: 120 }}>
            <SectionMark onBlue />
            <h2 className="h-sec" style={{ marginTop: 0 }}>
              Você se reconhece em alguma dessas situações?
            </h2>
          </Reveal>
          <Reveal delay={100}>
            <ul className="pain-list">
              {PAINS.map((p, i) => (
                <li className="pain-item" key={i}>
                  <span className="idx">{String(i + 1).padStart(2, '0')}</span>
                  <span>{p}</span>
                </li>
              ))}
            </ul>
          </Reveal>
        </div>
        <Reveal>
          <p className="h-sub text-col" style={{ margin: 'clamp(56px,8vw,96px) 0 0' }}>
            O que falta é <span className="display-italic" style={{ color: 'var(--gold-soft)' }}>direção estratégica</span>, mapeamento afiado, escuta e alguém que construa junto.
          </p>
          <p className="lead" style={{ marginTop: 24, maxWidth: 620 }}>
            Nenhuma IA vai dar conta de te conectar verdadeiramente com pessoas.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* =================== SOLUÇÃO (Bloco 6) =================== */
function Solucao() {
  return (
    <section className="section bg-paper" id="solucao">
      <div className="container">
        <Reveal style={{ maxWidth: 760 }}>
          <SectionMark />
          <h2 className="h-sec" style={{ color: 'var(--blue)', marginTop: 0 }}>
            Trabalhamos com dois pilares e um mesmo princípio: conexões verdadeiras geram vínculos duradouros.
          </h2>
        </Reveal>

        <div className="two-col" style={{ marginTop: 'clamp(50px,7vw,84px)' }}>
          <Reveal>
            <Sym tone="blue" style={{ height: 26, width: 'auto', marginBottom: 22 }} />
            <h3 className="h-sub" style={{ color: 'var(--blue)' }}>Para marcas e agências</h3>
            <p className="body" style={{ marginTop: 16 }}>
              Construímos relevância cultural de longo prazo. Mapeamos territórios, articulamos comunidades e desenhamos estratégias que fazem marcas caminharem ao lado das pessoas.
            </p>
            <p className="body">
              O objetivo não é conversão imediata. É <span className="display-italic" style={{ color: 'var(--gold-accent)' }}>brand loving.</span>
            </p>
          </Reveal>
          <Reveal delay={120}>
            <Sym tone="blue" style={{ height: 26, width: 'auto', marginBottom: 22 }} />
            <h3 className="h-sub" style={{ color: 'var(--blue)' }}>Para criadores e projetos</h3>
            <p className="body" style={{ marginTop: 16 }}>
              Transformamos ideias em projetos estruturados e viáveis. Se você tem uma ideia que vive na sua cabeça mas nunca ganhou forma, trabalhamos juntos do zero: da concepção à execução, com método e acompanhamento.
            </p>
          </Reveal>
        </div>

        <Reveal>
          <div style={{ marginTop: 'clamp(48px,6vw,72px)', padding: 'clamp(30px,4vw,44px)', background: 'var(--cream)', borderRadius: 8, border: '1px solid var(--line)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
            <p className="body" style={{ margin: 0, maxWidth: 720 }}>
              A FRESTA também oferece uma <strong style={{ fontWeight: 600, color: 'var(--blue)' }}>mentoria pessoal e de carreira</strong>, um espaço de troca para mulheres do universo corporativo, da publicidade e da comunicação.
            </p>
            <a href="mentoria.html" target="_blank" rel="noopener" className="tlink" style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 15, whiteSpace: 'nowrap' }}>Saiba mais →</a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* =================== O NOSSO JEITO (Bloco 7) =================== */
const PRINCIPLES = [
  'Nada de projeto reciclado. Cada estratégia nasce do seu contexto.',
  'Relevância que se constrói com tempo e consistência.',
  'Construímos juntos, do diagnóstico à execução.',
  'Mais vínculo, menos ruído.',
];
function Beneficios() {
  return (
    <section className="section bg-cream" id="beneficios">
      <div className="container">
        <Reveal style={{ maxWidth: 640 }}>
          <SectionMark />
          <h2 className="h-sec" style={{ color: 'var(--blue)', marginTop: 0 }}>
            O nosso jeito
          </h2>
        </Reveal>
        <div style={{ marginTop: 'clamp(44px,6vw,72px)' }}>
          {PRINCIPLES.map((b, i) => (
            <Reveal key={i} delay={i * 60}>
              <div style={{ display: 'grid', gridTemplateColumns: '40px 1fr', gap: 18, alignItems: 'start', padding: '24px 0', borderTop: '1px solid var(--line)' }}>
                <Sym tone="gold" style={{ height: 15, width: 'auto', marginTop: 8 }} />
                <p style={{ margin: 0, fontFamily: 'var(--display-active)', fontSize: 'clamp(20px,2.2vw,26px)', lineHeight: 1.4, color: 'var(--blue)' }}>{b}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =================== BIO (Bloco 8) =================== */
function Bio() {
  return (
    <section className="section bg-paper" id="quem">
      <div className="container">
        <div className="two-col two-col--wide" style={{ alignItems: 'center', gridTemplateColumns: '0.85fr 1.15fr' }}>
          <Reveal>
            <figure style={{ margin: 0 }}>
              <img src="assets/ludmila.jpg?v=6" alt="Ludmila Kaminskas" style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover', borderRadius: 6, display: 'block' }} />
              <figcaption style={{ fontFamily: 'var(--sans)', fontSize: 10.5, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--blue-ink)', opacity: .38, marginTop: 9 }}>
                foto <a href="https://instagram.com/spineelli" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none' }}>@spineelli</a>
              </figcaption>
            </figure>
          </Reveal>
          <Reveal delay={120}>
            <Eyebrow>Quem está por trás da FRESTA</Eyebrow>
            <h2 className="h-sub" style={{ color: 'var(--blue)', marginTop: 20 }}>Ludmila Kaminskas</h2>
            <p className="body" style={{ marginTop: 22 }}>
              Estrategista de marketing com mais de 10 anos de experiência na interseção entre marcas e cultura. Liderou a área de Cultura e Relacionamento de Budweiser na Ambev, onde desenvolveu a metodologia de Cultura e Relacionamento da empresa e posicionou a marca como uma das mais relevantes no cenário musical brasileiro.
            </p>
            <p className="body">
              Hoje lidera a FRESTA com o propósito de criar projetos com impacto real, sempre guiada por escuta, consistência e propósito.
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* =================== OFERTA (Bloco 9) =================== */
const OFFERS = [
  { mark: 'blue', title: 'Marcas e Agências', body: 'Consultoria estratégica em relevância cultural, diagnóstico, mapeamento, articulação e acompanhamento.', price: 'Proposta personalizada conforme escopo', cta: 'Quero conversar sobre minha marca', variant: 'ghost' },
  { mark: 'blue', title: 'Projetos Criativos', body: 'Desenvolvimento de projeto, estruturação, método e acompanhamento até a ideia virar algo real.', price: 'Proposta personalizada conforme projeto', cta: 'Quero tirar minha ideia do papel', variant: 'ghost' },
  { mark: 'blue', title: 'Mentoria Pessoal e de Carreira', body: 'Para mulheres que querem retomar o controle do próprio caminho. Um espaço seguro e acolhedor, onde você não fica sozinha.', price: 'Online · quinzenal · personalizado', cta: 'Quero saber mais sobre a mentoria', variant: 'gold', feature: true, href: 'mentoria.html', newTab: true },
];
function Oferta() {
  return (
    <section className="section bg-paper" id="oferta">
      <div className="container">
        <Reveal style={{ maxWidth: 640 }}>
          <SectionMark />
          <h2 className="h-sec" style={{ color: 'var(--blue)', marginTop: 0 }}>Por onde podemos começar</h2>
        </Reveal>
        <div className="cards" style={{ marginTop: 'clamp(44px,6vw,72px)' }}>
          {OFFERS.map((o, i) => (
            <Reveal key={i} delay={i * 90} className={`card ${o.feature ? 'card--feature' : ''}`}>
              <Sym tone={o.mark} className="card-mark" />
              <h3>{o.title}</h3>
              <p className="card-body">{o.body}</p>
              <p className="card-price">{o.price}</p>
              <Btn variant={o.variant} href={o.href || '#contato'} newTab={o.newTab} arrow>{o.cta}</Btn>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =================== GARANTIA (Bloco 11) =================== */
function Garantia() {
  return (
    <section className="section bg-cream" id="garantia">
      <div className="container">
        <Reveal className="text-col" style={{ margin: '0 auto', textAlign: 'center' }}>
          <Sym tone="gold" style={{ height: 28, width: 'auto', margin: '0 auto 30px' }} />
          <p className="pull" style={{ color: 'var(--blue)' }}>
            Todo projeto começa com escuta.
          </p>
          <p className="lead" style={{ marginTop: 26 }}>
            Antes de qualquer proposta, entendemos a fundo o contexto, os objetivos e o que faz sentido para cada marca ou projeto. Só avançamos quando há alinhamento real.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* =================== URGÊNCIA (Bloco 12) =================== */
function Urgencia() {
  return (
    <section className="section bg-paper" id="conversa">
      <div className="container">
        <Reveal><hr className="fresta-rule" style={{ marginBottom: 'clamp(50px,7vw,84px)' }} /></Reveal>
        <div className="two-col two-col--wide">
          <Reveal>
            <h3 className="h-sub" style={{ color: 'var(--blue)' }}>Para marcas e agências</h3>
            <p className="body" style={{ margin: '16px 0 28px' }}>
              Entre em contato e entendemos juntos como a FRESTA pode construir relevância para a sua marca.
            </p>
            <Btn variant="ghost" href="#contato">Quero marcar uma conversa</Btn>
          </Reveal>
          <Reveal delay={120}>
            <h3 className="h-sub" style={{ color: 'var(--blue)' }}>Para projetos criativos</h3>
            <p className="body" style={{ margin: '16px 0 28px' }}>
              Cada projeto recebe atenção integral. Por isso, abrimos novas frentes em ciclos.
            </p>
            <Btn variant="ghost" href="#contato">Quero conversar sobre disponibilidade</Btn>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* =================== FAQ (Bloco 13) =================== */
const FAQS = [
  { q: 'Como funciona o processo com marcas e agências?', a: 'Começa com uma conversa para entender o contexto e os objetivos. A partir daí, desenhamos uma proposta personalizada, sem modelos prontos.' },
  { q: 'Como funciona o desenvolvimento de projetos criativos?', a: 'Trabalhamos do zero: da estruturação da ideia até o plano de execução. O processo é acompanhado de perto, com método e presença em cada etapa.' },
  { q: 'A FRESTA atende marcas de todos os segmentos?', a: 'Nosso foco é relevância cultural, então trabalhamos com marcas que querem construir conexões reais com comunidades e movimentos. Se faz sentido para o seu contexto, a conversa inicial vai esclarecer.' },
  { q: 'Como começo?', a: (<span>É só escrever para <a className="tlink" href="mailto:hello@fresta.io">hello@fresta.io</a>. A primeira conversa é sempre de escuta, sem compromisso.</span>) },
];
function Faq() {
  return (
    <section className="section bg-paper" id="faq">
      <div className="container">
        <div className="two-col two-col--wide" style={{ gridTemplateColumns: '0.8fr 1.2fr', alignItems: 'start' }}>
          <Reveal className="sticky-col" style={{ position: 'sticky', top: 120 }}>
            <SectionMark />
            <h2 className="h-sec" style={{ color: 'var(--blue)', marginTop: 0 }}>Dúvidas</h2>
          </Reveal>
          <Reveal delay={100}>
            <Accordion items={FAQS} defaultOpen={0} />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* =================== CTA FINAL (Bloco 14) =================== */
function CtaFinal() {
  return (
    <section className="section bg-cream" id="contato" style={{ overflow: 'hidden', position: 'relative' }}>
      <div className="container" style={{ position: 'relative' }}>
        <Reveal className="text-col">
          <SectionMark />
          <h2 className="h-hero" style={{ marginTop: 24, fontSize: 'clamp(40px,6vw,82px)', color: 'var(--blue)' }}>
            Você chegou até aqui porque algo <span className="display-italic" style={{ color: 'var(--gold-accent)' }}>ressoou.</span>
          </h2>
          <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '20px 30px', marginTop: 44 }}>
            <Btn variant="solid" lg href="mailto:hello@fresta.io">Quero começar uma conversa</Btn>
            <a href="mailto:hello@fresta.io" className="tlink" style={{ fontFamily: 'var(--sans)', fontSize: 16 }}>hello@fresta.io</a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Abertura, Dor, Solucao, Beneficios, Bio, Oferta, Garantia, Urgencia, Faq, CtaFinal });