// About.jsx — About Beatriz + Services

const SERVICES = [
{
  name: "Design de Sobrancelhas",
  desc: "Modelagem precisa com pinça, respeitando o formato natural do rosto e buscando equilíbrio, simetria e leveza.",
  icon:
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M3 12 C6 6, 18 6, 21 12" strokeLinecap="round" />
        <path d="M3 12 C6 18, 18 18, 21 12" strokeLinecap="round" />
        <circle cx="12" cy="12" r="2" fill="currentColor" />
      </svg>

},
{
  name: "Mapeamento Facial",
  desc: "Análise das proporções do rosto para criar um desenho personalizado, harmônico e naturalmente elegante.",
  icon:
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <circle cx="12" cy="12" r="10" />
        <path d="M12 2v20M2 12h20M12 2C6 6 6 18 12 22M12 2C18 6 18 18 12 22" strokeLinecap="round" />
      </svg>

},
{
  name: "Henna",
  desc: "Preenchimento temporário para destacar o formato das sobrancelhas com naturalidade e definição suave.",
  icon:
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M12 3 C8 3 4 7 4 12 C4 17 8 21 12 21 C16 21 20 17 20 12 C20 7 16 3 12 3Z" />
        <path d="M12 3 C10 8 10 16 12 21" strokeLinecap="round" />
        <path d="M4 12 C8 10 16 10 20 12" strokeLinecap="round" />
      </svg>

},
{
  name: "Brow Lamination",
  desc: "Técnica para alinhar, encorpar e valorizar os fios, criando um efeito mais cheio, definido e moderno.",
  icon:
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M4 8 C6 5 10 5 12 8 C14 11 18 11 20 8" strokeLinecap="round" />
        <path d="M4 12 C6 9 10 9 12 12 C14 15 18 15 20 12" strokeLinecap="round" />
        <path d="M4 16 C6 13 10 13 12 16 C14 19 18 19 20 16" strokeLinecap="round" />
      </svg>

},
{
  name: "Tintura",
  desc: "Realce dos fios com coloração delicada para mais definição, presença e naturalidade no olhar.",
  icon:
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M9 3 L15 3 L18 12 L6 12 Z" strokeLinejoin="round" />
        <path d="M6 12 C6 12 4 14 4 16 C4 18 5.5 20 8 20 L16 20 C18.5 20 20 18 20 16 C20 14 18 12 18 12" strokeLinecap="round" />
      </svg>

},
{
  name: "Lash Lifting",
  desc: "Curvatura natural dos cílios para abrir o olhar com elegância, sem necessidade de extensão ou cílios postiços.",
  icon:
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M4 18 C6 12 10 8 12 8 C14 8 18 12 20 18" strokeLinecap="round" />
        <path d="M7 18 C8 14 10 11 12 11" strokeLinecap="round" />
        <path d="M17 18 C16 14 14 11 12 11" strokeLinecap="round" />
        <path d="M12 8 L12 4M8 9 L6 6M16 9 L18 6" strokeLinecap="round" />
      </svg>

}];


const VALUES = [
{ title: "Precisão", desc: "Cada detalhe importa no resultado final", icon: "◈" },
{ title: "Naturalidade", desc: "Resultados harmônicos, sem exageros", icon: "◇" },
{ title: "Cuidado", desc: "Atenção dedicada a cada cliente", icon: "◉" },
{ title: "Personalização", desc: "Design único para cada rosto", icon: "◎" }];


function About() {
  return (
    <section id="about">
      <div className="container">
        <div className="about-grid">
          {/* Image */}
          <div className="about-img-wrap reveal-left">
            <div className="about-frame">
              <img src={WORK_IMG} alt="Beatriz trabalhando" className="about-photo" />
            </div>
            <div className="about-accent" />
          </div>

          {/* Text */}
          <div className="about-text">
            <div className="eyebrow reveal" style={{ marginBottom: 24 }}>Sobre a Beatriz</div>
            <div className="gold-line reveal d1" style={{ marginBottom: 24 }} />
            <h2 className="about-title reveal d2">
              Não é sobre mudar o seu rosto.<br />
              É sobre revelar o{" "}
              <span className="hl" style={{ fontSize: "52px" }}>melhor dele.</span>
            </h2>
            <p className="about-desc reveal d3">
              Meu nome é Beatriz e sou designer de sobrancelhas, apaixonada pela
              área da beleza e pelo impacto que um design bem-feito pode ter na
              autoestima de cada cliente.
            </p>
            <p className="about-desc reveal d4">
              Meu trabalho é focado em realçar a beleza natural, respeitando a
              individualidade de cada rosto e buscando resultados harmônicos,
              personalizados e de alta qualidade — porque cada rosto pede um
              desenho e cada detalhe pede precisão.
            </p>
            <div className="about-values reveal d5">
              {VALUES.map((v) =>
              <div className="about-value" key={v.title}>
                  <div className="about-value-icon" style={{ color: "var(--gold)", fontSize: 18 }}>{v.icon}</div>
                  <div className="about-value-title">{v.title}</div>
                  <div className="about-value-desc">{v.desc}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Services() {
  return (
    <section id="services">
      <div className="container">
        <div className="section-header">
          <div className="eyebrow reveal" style={{ justifyContent: "center" }}>O que oferecemos</div>
          <h2 className="section-title reveal d1">
            Técnicas para realçar{" "}
            <span className="hl" style={{ fontSize: "52px" }}>seu olhar.</span>
          </h2>
          <p className="section-sub reveal d2">
            Cada serviço é pensado para valorizar a beleza natural, com resultados
            personalizados e acabamento impecável.
          </p>
        </div>

        <div className="services-grid">
          {SERVICES.map((s, i) =>
          <div className={`service-card reveal d${i % 3 + 1}`} key={s.name}>
              <div className="service-icon">{s.icon}</div>
              <div className="service-name">{s.name}</div>
              <p className="service-desc">{s.desc}</p>
              <a href={WA_LINK} target="_blank" rel="noopener" className="service-link">
                Agendar <span>→</span>
              </a>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { About, Services });