/* Section components for Neci Recrutamento — split for editability */
const { useState } = React;

// ---------- Inline icons ----------
const Icon = {
  Arrow: ({ size = 16 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>,

  Plus: () =>
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <path d="M12 5v14M5 12h14" />
    </svg>,

  Phone: () =>
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />
    </svg>,

  Mail: () =>
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2" />
      <path d="m3 7 9 6 9-6" />
    </svg>,

  Clock: () =>
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9" />
      <path d="M12 7v5l3 2" />
    </svg>,

  Star: () =>
  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
    </svg>,

  Whatsapp: () =>
  <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor">
      <path d="M17.5 14.4c-.3-.2-1.8-.9-2-1s-.5-.2-.7.2-.8 1-1 1.2-.4.2-.7.1c-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.7l.5-.6.3-.6c.1-.2 0-.4 0-.5L9 7.2c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.2 3.3 5.3 4.6.7.3 1.3.5 1.8.6.7.2 1.4.2 2 .1.6-.1 1.8-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.2-.3-.3-.6-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.4c1.4.8 3.1 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z" />
    </svg>,

  Instagram: () =>
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" />
    </svg>

};

// ---------- LOGO ----------
function NeciLogo({ size = 'md', onDark = false }) {
  const cls = `logo${size === 'lg' ? ' logo--lg' : ''}${onDark ? ' logo--on-dark' : ''}`;
  return (
    <a href="#" className={cls} aria-label="Neci Recrutamento">
      <img src="images/logo-neci.png" alt="Neci Recrutamento" className="logo-img" />
    </a>);

}
function Nav() {
  const [open, setOpen] = useState(false);
  return (
    <nav className="nav">
      <div className="nav-inner">
        <NeciLogo />
        <div className="nav-links">
          <a href="#home" className="is-active">Início</a>
          <a href="#servicos">Serviços</a>
          <a href="#processo">Como funciona</a>
          <a href="#historia">Nossa história</a>
          <a href="#duvidas">Dúvidas</a>
        </div>
        <div className="nav-actions">
          <a href="#contato" className="btn btn-ghost nav-contact-link" style={{ padding: '12px 14px' }}>Contato</a>
          <a href="#contato" className="btn btn-primary nav-cta">Candidatar-se <Icon.Arrow size={14} /></a>
          <button className="nav-burger" aria-label="Menu" onClick={() => setOpen((o) => !o)}>
            <span style={{ transform: open ? 'rotate(45deg) translateY(5px)' : 'none' }}></span>
            <span style={{ opacity: open ? 0 : 1 }}></span>
            <span style={{ transform: open ? 'rotate(-45deg) translateY(-5px)' : 'none' }}></span>
          </button>
        </div>
      </div>
      <div className={`nav-drawer ${open ? 'is-open' : ''}`}>
        <a href="#home" onClick={() => setOpen(false)}>Início</a>
        <a href="#servicos" onClick={() => setOpen(false)}>Serviços</a>
        <a href="#processo" onClick={() => setOpen(false)}>Como funciona</a>
        <a href="#diferenciais" onClick={() => setOpen(false)}>Diferenciais</a>
        <a href="#historia" onClick={() => setOpen(false)}>Nossa história</a>
        <a href="#duvidas" onClick={() => setOpen(false)}>Dúvidas</a>
        <a href="#contato" onClick={() => setOpen(false)} className="nav-drawer-cta">Candidatar-se</a>
      </div>
    </nav>);

}

// ---------- HERO ----------
function Hero() {
  return (
    <section className="hero" id="home">
      <div className="container">
        <div className="hero-grid">
          <div>
            <span className="eyebrow">Recrutamento doméstico · há mais de 20 anos</span>
            <h1>
              Profissionais<br />
              de confiança<br />
              <span className="accent">para a sua casa.</span>
            </h1>
            <p className="lede">
              Selecionamos babás, empregadas, cozinheiras, motoristas e caseiros com
              entrevista presencial, referências verificadas e o olhar de quem entende
              o dia a dia da profissão.
            </p>
            <div className="hero-cta">
              <a href="#servicos" className="btn btn-primary">Quero contratar <Icon.Arrow size={14} /></a>
              <a href="#contato" className="btn btn-secondary">Sou profissional</a>
            </div>
            <div className="hero-meta">
              <div className="hero-meta-item">
                <span className="num">+1.000</span>
                <span className="label">famílias atendidas em todo o estado de SP</span>
              </div>
              <div className="hero-meta-item">
                <span className="num">22 <em>anos</em></span>
                <span className="label">de experiência no setor doméstico</span>
              </div>
              <div className="hero-meta-item">
                <span className="num">4,9★</span>
                <span className="label">avaliação média das famílias atendidas</span>
              </div>
            </div>
          </div>

          <div>
            <div className="hero-visual">
              <image-slot id="hero" placeholder="Foto principal — profissional doméstica sorrindo (4:5)" style={{ width: '100%', height: '100%' }}></image-slot>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ---------- TRUST MARQUEE ----------
function Trust() {
  const items = ['Confiança', 'Empatia', 'Ética', 'Tradição', 'Excelência', 'Cuidado', 'Humanização'];
  const row =
  <span>
      {items.map((w, i) =>
    <React.Fragment key={i}>
          {w}<span className="dot"></span>
        </React.Fragment>
    )}
    </span>;

  return (
    <div className="trust">
      <div className="trust-track">
        {row}{row}{row}{row}
      </div>
    </div>);

}

// ---------- SERVICES ----------
function Services() {
  const items = [
  { num: '01', title: 'Babás e cuidadoras', desc: 'Profissionais experientes em cuidado infantil, com referências verificadas e perfil adequado ao seu ambiente familiar.', img: 'images/babas.jpg', pos: 'center center' },
  { num: '02', title: 'Empregadas e diaristas', desc: 'Seleção personalizada para o cuidado completo da casa, com base em postura, comportamento e histórico.', img: 'images/empregadas.jpg', pos: 'top center' },
  { num: '03', title: 'Cozinheiras', desc: 'Profissionais com experiência comprovada, capazes de manter a rotina da casa com carinho e organização.', img: 'images/cozinheiras.jpg', pos: 'top center' },
  { num: '04', title: 'Motoristas e caseiros', desc: 'Profissionais de confiança para transporte e cuidado do lar, garantindo tranquilidade para toda a família.', img: 'images/motoristas.jpg', pos: 'top center' }];

  return (
    <section id="servicos">
      <div className="container">
        <div className="services-head">
          <div>
            <span className="eyebrow">O que fazemos</span>
            <h2 style={{ marginTop: 18 }}>Quatro especialidades,<br /><em>um mesmo cuidado.</em></h2>
          </div>
          <p className="lede">Cada vaga é tratada como se fosse para a nossa própria casa. Conhecemos cada candidata pessoalmente antes de apresentá-la à sua família, porque confiança não se mede em currículo, se constrói em conversa.



          </p>
        </div>
        <div className="services-grid">
          {items.map((it) =>
          <div className="service-card" key={it.num}>
              <span className="num">— {it.num}</span>
              <div className="photo">
                <img src={it.img} alt={it.title} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: it.pos }} />
              </div>
              <h3>{it.title}</h3>
              <p>{it.desc}</p>
              <span className="arrow">Saiba mais <Icon.Arrow size={14} /></span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------- PROCESS ----------
function Process() {
  const steps = [
  { n: '01', t: 'Conversa inicial', d: 'Entendemos seu perfil, sua rotina e o que torna sua casa única. Sem pressa, sem formulário frio.' },
  { n: '02', t: 'Seleção criteriosa', d: 'Entrevistamos pessoalmente, validamos referências e checamos histórico. Só apresentamos quem passaria na nossa porta.' },
  { n: '03', t: 'Apresentação', d: 'Você conhece 2 ou 3 candidatas pré-selecionadas. Acompanhamos a entrevista para te ajudar a decidir bem.' },
  { n: '04', t: 'Acompanhamento', d: 'Mantemos contato após a contratação para garantir que tudo flua com naturalidade e segurança.' }];

  return (
    <section className="process" id="processo">
      <div className="container">
        <div className="process-head">
          <div>
            <span className="eyebrow">Como funciona</span>
            <h2 style={{ marginTop: 18 }}>Um processo<br /><em>feito de conversa.</em></h2>
          </div>
          <p className="lede">
            Não somos um marketplace. Cada contratação passa por entrevista presencial,
            análise de perfil e acompanhamento pós-contratação. É mais lento e é
            exatamente esse o ponto.
          </p>
        </div>
        <div className="process-steps">
          {steps.map((s) =>
          <div className="step" key={s.n}>
              <span className="step-num">{s.n}</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------- DIFFERENTIALS ----------
function Differentials() {
  const items = [
  { n: '01', t: 'Atendimento próximo e humanizado' },
  { n: '02', t: 'Mais de 20 anos de experiência no setor doméstico' },
  { n: '03', t: 'Análise de referências reais e comprovadas' },
  { n: '04', t: 'Entrevistas presenciais e triagens criteriosas' },
  { n: '05', t: 'Seleção personalizada para cada família' },
  { n: '06', t: 'Acompanhamento contínuo após a contratação' },
  { n: '07', t: 'Comprometimento com segurança e transparência' },
  { n: '08', t: 'Um legado de amor, verdade e confiança' }];

  return (
    <section id="diferenciais">
      <div className="container">
        <div className="diffs-head">
          <div>
            <span className="eyebrow">Diferenciais</span>
            <h2 style={{ marginTop: 18 }}>O que torna nosso<br />trabalho <em>único.</em></h2>
          </div>
          <p className="lede">Não é só intermediar uma contratação. É entender a casa, conhecer a profissional e construir uma relação que funcione pelos próximos anos, com a calma de quem faz isso há mais de duas décadas.



          </p>
        </div>
        <div className="diffs-grid">
          {items.map((it) =>
          <div className="diff" key={it.n}>
              <span className="diff-num">— {it.n}</span>
              <div className="diff-title">{it.t}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------- STORY ----------
function Story() {
  return (
    <section id="historia">
      <div className="container">
        <div className="story-grid">
          <div className="story-visual">
            <div className="story-photo">
              <image-slot id="story-1" placeholder="Foto da Maria Neci (4:5)" style={{ width: '100%', height: '100%' }}></image-slot>
            </div>
          </div>
          <div className="story-body">
            <span className="eyebrow">Nossa história</span>
            <h2 style={{ marginTop: 18, marginBottom: 8 }}>Tudo começou<br />com a <em>Maria Neci.</em></h2>
            <p className="story-quote">Comecei aos 13 anos na área doméstica. Hoje, aos 60, são mais de quatro décadas, e 22 anos no mesmo lar. Foi ali que aprendi o que é cuidar de uma casa de verdade.



            </p>
            <p>Ao longo desse tempo, construí amizades e conexões de confiança com famílias e profissionais. Sem perceber, comecei a indicar pessoas para vagas e estava nascendo um trabalho de recrutamento feito por alguém que conhece o dia a dia da profissão.




            </p>
            <p>Há cinco anos transformei esse dom em empresa. Desde então, mais de mil famílias passaram a contar com profissionais escolhidos a dedo com seriedade, carinho e o compromisso de quem já esteve dos dois lados da história.




            </p>
            <div className="story-sig">
              Maria Neci
              <small>fundadora · Neci Recrutamento</small>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ---------- TESTIMONIALS ----------
function Testimonials() {
  const [current, setCurrent] = useState(0);
  const items = [
  { quote: 'Quero deixar uma super indicação! A Neci é diferente de todas as agências pelas quais já passei — atenciosa, dedicada e entende exatamente a necessidade de cada casa, trazendo opções de confiança e profissionais excelentes.', name: 'Alessandra R.', role: 'Família · São Paulo / SP' },
  { quote: 'Pode confiar de olhos fechados. Eu tinha passado por experiências ruins antes de conhecer a Neci e ela me ajudou num momento em que eu estava completamente desanimada. O trabalho dela é sério, honesto e feito com muito coração.', name: 'Fernanda M.', role: 'Família · São Paulo / SP' },
  { quote: 'Quero agradecer imensamente à Neci. Obrigada pela indicação, pela atenção e por todo o suporte que recebi durante o processo. Encontrei a oportunidade que eu precisava e só tenho gratidão pelo atendimento e carinho.', name: 'Karen T.', role: 'Babá contratada' }];

  const prev = () => setCurrent(i => (i - 1 + items.length) % items.length);
  const next = () => setCurrent(i => (i + 1) % items.length);

  const Card = ({ t, i }) => (
    <div className="testimonial">
      <div className="testimonial-stars">
        {[...Array(5)].map((_, j) => <Icon.Star key={j} />)}
      </div>
      <blockquote>"{t.quote}"</blockquote>
      <div className="testimonial-person">
        <div className="testimonial-avatar">
          <image-slot id={`av-${i}`} placeholder="Foto" shape="circle" style={{ width: '100%', height: '100%' }}></image-slot>
        </div>
        <div className="testimonial-meta">
          <div className="name">{t.name}</div>
          <div className="role">{t.role}</div>
        </div>
      </div>
    </div>
  );

  return (
    <section className="testimonials">
      <div className="container">
        <div className="testimonials-head">
          <div>
            <span className="eyebrow">Depoimentos</span>
            <h2 style={{ marginTop: 18 }}>Famílias que <em>voltam.</em></h2>
          </div>
          <p className="lede" style={{ maxWidth: 420 }}>
            Mais de 90% das famílias que contratam conosco voltam para uma segunda
            vaga ou indicam para amigos.
          </p>
        </div>

        {/* Desktop grid */}
        <div className="testimonials-grid">
          {items.map((t, i) => <Card key={i} t={t} i={i} />)}
        </div>

        {/* Mobile carousel */}
        <div className="testimonials-carousel">
          <div className="testimonials-carousel-track" style={{ transform: `translateX(-${current * 100}%)` }}>
            {items.map((t, i) => (
              <div className="testimonials-carousel-slide" key={i}>
                <Card t={t} i={i} />
              </div>
            ))}
          </div>
          <div className="testimonials-carousel-nav">
            <button className="carousel-arrow" onClick={prev} aria-label="Anterior">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
            </button>
            <div className="carousel-dots">
              {items.map((_, i) => (
                <button key={i} className={`carousel-dot${i === current ? ' is-active' : ''}`} onClick={() => setCurrent(i)} aria-label={`Ir para ${i + 1}`} />
              ))}
            </div>
            <button className="carousel-arrow" onClick={next} aria-label="Próximo">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
            </button>
          </div>
        </div>
      </div>
    </section>);

}

// ---------- FAQ ----------
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
  { q: 'Como funciona a cobrança do serviço?', a: 'Cobramos uma taxa única após a contratação efetivada, equivalente a um salário da profissional. Não há mensalidades, nem custos para abrir a vaga.' },
  { q: 'E se a profissional não se adaptar?', a: 'Oferecemos garantia de 90 dias. Caso a profissional não se adapte nesse período, fazemos uma nova seleção sem custo adicional.' },
  { q: 'Quanto tempo leva para apresentar candidatas?', a: 'Em média, de 7 a 15 dias úteis. Cada vaga é trabalhada manualmente, preferimos demorar um pouco mais e acertar do que ser rápidos e errar.' },
  { q: 'Vocês atendem fora de São Paulo?', a: 'Atendemos toda a Grande São Paulo e cidades do interior mediante consulta. Entre em contato para verificarmos sua região.' },
  { q: 'Sou profissional. Como me candidato?', a: 'Pelo botão "Candidatar-se a uma vaga" no topo da página ou pelo WhatsApp. Conversamos pessoalmente antes de incluir no nosso cadastro.' }];

  return (
    <section id="duvidas">
      <div className="container">
        <div className="faq-grid">
          <div>
            <span className="eyebrow">Dúvidas</span>
            <h2 style={{ marginTop: 18 }}>Perguntas<br /><em>frequentes.</em></h2>
            <p className="lede" style={{ marginTop: 24 }}>Não encontrou o que procurava? Fale com a gente no WhatsApp, a dona Neci ou a Maria respondem pessoalmente.


            </p>
          </div>
          <div className="faq-items">
            {items.map((it, i) =>
            <div key={i} className={`faq-item ${open === i ? 'is-open' : ''}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  {it.q}
                  <span className="faq-toggle"><Icon.Plus /></span>
                </button>
                <div className="faq-a">{it.a}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ---------- CTA / CONTACT ----------
function CTA() {
  return (
    <section className="cta" id="contato">
      <div className="container">
        <div className="cta-grid">
          <div>
            <span className="eyebrow" style={{ color: 'color-mix(in oklab, var(--bg) 60%, transparent)' }}>Vamos conversar</span>
            <h2 style={{ marginTop: 18 }}>Pronta para encontrar<br />quem cuidará da sua casa <em>como você cuidaria.</em></h2>
            <p className="lede">
              Conte sua rotina, o perfil que procura e o que torna sua casa única.
              Em até 24 horas, retornamos com os próximos passos.
            </p>
            <div className="cta-actions">
              <a href="https://wa.me/5511930786338?text=Olá%2C%20gostaria%20de%20solicitar%20uma%20profissional." className="btn btn-primary" target="_blank">Solicitar profissional <Icon.Arrow size={14} /></a>
              <a href="https://wa.me/5511930786338?text=Olá%2C%20quero%20me%20candidatar%20a%20uma%20vaga." className="btn btn-secondary" target="_blank">Quero me candidatar</a>
            </div>
          </div>
          <div className="cta-contact">
            <div className="cta-contact-row">
              <span className="cta-contact-icon"><Icon.Phone /></span>
              <div>
                <div className="cta-contact-label">WhatsApp</div>
                <div className="cta-contact-value">(11) 93078-6338</div>
              </div>
            </div>
            <div className="cta-contact-row">
              <span className="cta-contact-icon"><Icon.Mail /></span>
              <div>
                <div className="cta-contact-label">E-mail</div>
                <div className="cta-contact-value">maria.neci742@gmail.com</div>
              </div>
            </div>
            <div className="cta-contact-row">
              <span className="cta-contact-icon"><Icon.Clock /></span>
              <div>
                <div className="cta-contact-label">Atendimento</div>
                <div className="cta-contact-value">Seg–Sex · 9h às 17h</div>
              </div>
            </div>
            <div className="cta-contact-row">
              <span className="cta-contact-icon"><Icon.Instagram /></span>
              <div>
                <div className="cta-contact-label">Instagram</div>
                <div className="cta-contact-value">@necirecrutamentooficial</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div>© 2026 Neci Recrutamento · Todos os direitos reservados</div>
        <div style={{ display: 'flex', gap: 20 }}>
          <a href="mailto:maria.neci742@gmail.com?subject=Política de privacidade">Política de privacidade</a>
          <a href="mailto:maria.neci742@gmail.com?subject=Termos de uso">Termos</a>
        </div>
      </div>
    </footer>);

}

function FloatingWhatsApp() {
  return (
    <a href="https://wa.me/5511930786338" className="fab" target="_blank" aria-label="WhatsApp">
      <Icon.Whatsapp />
    </a>);

}

Object.assign(window, { NeciLogo, Nav, Hero, Trust, Services, Process, Differentials, Story, Testimonials, FAQ, CTA, Footer, FloatingWhatsApp });