window.HomeSections = function HomeSections() {
  const aboutHighlights = [
    {
      title: "Representación integral",
      text:
        "Acompañamos a nuestros clientes en asuntos de familia, patrimonio y conflictos civiles con una visión estratégica, técnica y orientada a resultados.",
    },
    {
      title: "Atención clara y oportuna",
      text:
        "Explicamos cada etapa del proceso jurídico con lenguaje claro, definimos prioridades desde el inicio y mantenemos un seguimiento cercano del caso.",
    },
  ];

  const stats = [
    {
      value: "120+",
      label: "Casos atendidos",
      icon: function StatScale() {
        return (
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
            <path d="M12 3v16m-6 0h12M7 7l-3 5h6L7 7Zm10 0-3 5h6l-3-5Z" />
          </svg>
        );
      },
    },
    {
      value: "130+",
      label: "Clientes asesorados",
      icon: function StatHammer() {
        return (
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
            <path d="m14 4 6 6-2 2-6-6 2-2ZM3 21l8-8m1-7 7 7M8 10l6-6" />
          </svg>
        );
      },
    },
    {
      value: "1",
      label: "Oficina en Bogotá",
      icon: function StatBuilding() {
        return (
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
            <path d="M4 21V5l8-2 8 2v16M9 8h1m4 0h1M9 12h1m4 0h1M9 16h1m4 0h1M11 21v-3h2v3" />
          </svg>
        );
      },
    },
    {
      value: "145+",
      label: "Consultas jurídicas",
      icon: function StatBriefcase() {
        return (
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
            <path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m4 3H4v9h16v-9ZM4 10l5 3h6l5-3" />
          </svg>
        );
      },
    },
  ];

  const awardCards = [
    {
      icon: "/assets/images/award-1.svg",
      title: "Análisis jurídico riguroso",
      text:
        "Estudiamos cada caso con criterio técnico para identificar riesgos, alternativas y el camino más conveniente para el cliente.",
    },
    {
      icon: "/assets/images/award-2.svg",
      title: "Estrategia a la medida",
      text:
        "No aplicamos soluciones genéricas. Diseñamos una ruta de acción según los objetivos, tiempos y particularidades de cada asunto.",
    },
    {
      icon: "/assets/images/award-3.svg",
      title: "Comunicación transparente",
      text:
        "Mantenemos al cliente informado sobre avances, opciones y decisiones relevantes para que pueda actuar con tranquilidad y claridad.",
    },
    {
      icon: "/assets/images/award-4.svg",
      title: "Atención personalizada",
      text:
        "Cada asunto recibe seguimiento cercano, escucha activa y una respuesta alineada con la complejidad jurídica y humana del caso.",
    },
    {
      icon: "/assets/images/award-5.svg",
      title: "Confidencialidad y ética",
      text:
        "Tratamos la información de nuestros clientes con reserva profesional y con el compromiso que exige una asesoría responsable.",
    },
    {
      icon: "/assets/images/award-6.svg",
      title: "Defensa firme de intereses",
      text:
        "Representamos a nuestros clientes con preparación, criterio y determinación tanto en negociación como en escenarios judiciales.",
    },
  ];

  const practiceColumns = [
    [
      {
        title: "Separación y divorcio",
        text:
          "Asesoría en divorcio de mutuo acuerdo o contencioso, liquidación de sociedad conyugal y definición de medidas provisionales.",
      },
      {
        title: "Custodia del niño",
        text:
          "Acompañamiento en acuerdos y procesos sobre custodia, cuidado personal, visitas y protección del interés superior del menor.",
      },
      {
        title: "Manutención de los hijos",
        text:
          "Gestión de cuotas alimentarias, fijación, aumento, disminución o cobro, con enfoque en estabilidad y bienestar familiar.",
      },
      {
        title: "Manutención conyugal",
        text:
          "Orientación en solicitudes de alimentos entre cónyuges o compañeros permanentes según las condiciones del caso concreto.",
      },
    ],
    [
      {
        title: "Asuntos internacionales",
        text:
          "Apoyo en casos con elementos transfronterizos, residencia en el exterior, documentos y coordinación de actuaciones internacionales.",
      },
      {
        title: "Apelaciones de derecho familiar",
        text:
          "Revisión de providencias, análisis de errores y preparación de recursos para defender adecuadamente los derechos del cliente.",
      },
      {
        title: "Protección de la riqueza",
        text:
          "Asesoría preventiva para proteger bienes, ordenar el patrimonio y reducir riesgos jurídicos en decisiones personales o familiares.",
      },
      {
        title: "Servicios de alto patrimonio neto",
        text:
          "Acompañamiento legal en estructuras patrimoniales, acuerdos familiares y decisiones sensibles que requieren especial cuidado.",
      },
    ],
  ];

  const processSteps = [
    {
      icon: "/assets/images/process-1.png",
      title: "Consulta inicial",
      text:
        "Escuchamos su situación, revisamos los antecedentes relevantes y definimos el alcance jurídico del asunto desde la primera reunión.",
    },
    {
      icon: "/assets/images/process-2.png",
      title: "Estrategia legal",
      text:
        "Evaluamos escenarios, documentos, riesgos y objetivos para proponer una hoja de ruta clara y alineada con su caso.",
    },
    {
      icon: "/assets/images/process-3.png",
      title: "Gestión y seguimiento",
      text:
        "Ejecutamos la estrategia acordada, representamos sus intereses y mantenemos acompañamiento continuo durante el proceso.",
    },
  ];

  return (
    <>
      <section className="about-section" id="sobre-nosotros">
        <div className="container about-grid">
          <div className="about-copy">
            <div className="section-divider" />
            <h2>Sobre Nosotros</h2>
            <div className="about-subtitle">Asesoría jurídica estratégica y cercana</div>
            <div className="about-stack">
              <p className="about-intro">
                En Hernández &amp; Asociados brindamos asesoría y representación legal
                con enfoque humano, criterio técnico y acompañamiento constante.
                Trabajamos para ofrecer soluciones claras en asuntos familiares,
                patrimoniales y civiles, priorizando la protección de los derechos e
                intereses de cada cliente.
              </p>

              <div className="about-highlight-grid">
                {aboutHighlights.map(function renderHighlight(item) {
                  return (
                    <div key={item.title}>
                      <h4>{item.title}</h4>
                      <p>{item.text}</p>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>

          <div className="about-portrait-wrap">
            <img
              className="about-portrait"
              src="/assets/images/about-portrait.png"
              alt="Retrato del abogado principal"
            />
          </div>
        </div>
      </section>

      <section className="stats-section">
        <div className="container">
          <div className="stats-grid">
            {stats.map(function renderStat(item) {
              const Icon = item.icon;

              return (
                <article className="stat-card" key={item.label}>
                  <div className="stat-icon">
                    <Icon />
                  </div>
                  <h3>{item.value}</h3>
                  <p>{item.label}</p>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      <section className="awards-section">
        <div className="container">
          <div className="section-head">
            <div className="section-divider" />
            <h2>Nuestro enfoque</h2>
            <p className="section-lead">
              Más que frases generales, ofrecemos una forma de trabajo basada en
              análisis serio, comunicación clara y una defensa jurídica construida
              alrededor de las necesidades reales de cada cliente.
            </p>
          </div>

          <div className="awards-grid">
            {awardCards.map(function renderAward(card) {
              return (
                <article className="award-card" key={card.title}>
                  <img src={card.icon} alt="" aria-hidden="true" />
                  <h4>{card.title}</h4>
                  <p>{card.text}</p>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      <section className="areas-section" id="especialidades">
        <div className="container">
          <div className="areas-grid">
            <div className="areas-media">
              <div className="section-divider" />
              <h2>Nuestras Áreas</h2>
              <p className="section-lead">
                Prestamos asesoría legal en asuntos familiares y patrimoniales con una
                mirada práctica, preventiva y orientada a la protección de sus intereses.
              </p>
              <div className="areas-photo">
                <img
                  src="/assets/images/office-photo.png"
                  alt="Equipo de Hernández & Asociados"
                />
              </div>
            </div>

            {practiceColumns.map(function renderColumn(column, columnIndex) {
              return (
                <div
                  className={`areas-column${columnIndex === 1 ? " offset-top" : ""}`}
                  key={`practice-column-${columnIndex}`}
                >
                  {column.map(function renderArea(item) {
                    return (
                      <article className="area-card" key={item.title}>
                        <h4>{item.title}</h4>
                        <p>{item.text}</p>
                      </article>
                    );
                  })}
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="process-section">
        <div className="container">
          <div className="section-head is-centered">
            <div className="section-divider" />
            <h2>Cómo funciona</h2>
            <p className="section-lead">
              Cada caso requiere estudio, orden y seguimiento. Este es el proceso con
              el que estructuramos nuestra asesoría y representación legal.
            </p>
          </div>

          <div className="process-grid">
            {processSteps.map(function renderStep(step) {
              return (
                <article className="process-card" key={step.title}>
                  <img src={step.icon} alt="" aria-hidden="true" />
                  <h4>{step.title}</h4>
                  <p>{step.text}</p>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      <section className="cta-section">
        <div className="container">
          <div className="cta-shell">
            <div className="section-divider" />
            <h2>Conversemos sobre su caso</h2>
            <p>
              Si necesita asesoría legal, representación o una segunda opinión
              jurídica, podemos revisar su situación y proponer el mejor camino a
              seguir.
            </p>
            <a
              className="button-primary"
              href="https://wa.me/+573022943899"
              target="_blank"
              rel="noreferrer"
            >
              Solicitar consulta
            </a>
          </div>
        </div>
      </section>
    </>
  );
};