window.PageViews = (function createPageViews() {
  function SharedCta() {
    return (
      <section className="cta-section">
        <div className="container">
          <div className="cta-shell">
            <div className="section-divider" />
            <h2>Le ayudamos a resolver sus asuntos legales</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>
    );
  }

  function FamilyIcon() {
    return (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
        <path d="M7.5 10.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm9 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM12 8a2.25 2.25 0 1 0 0-4.5A2.25 2.25 0 0 0 12 8ZM4.5 18a3 3 0 0 1 3-3h0a3 3 0 0 1 3 3m3 0a3 3 0 0 1 3-3h0a3 3 0 0 1 3 3m-10.5 0a3.5 3.5 0 0 1 7 0" />
      </svg>
    );
  }

  function CivilIcon() {
    return (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
        <path d="M8 3.5h6l3 3V20.5H8z" />
        <path d="M14 3.5v4h3M10.5 11h4M10.5 14h4M10.5 17h4" />
      </svg>
    );
  }

  function PenalIcon() {
    return (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
        <path d="M12 4v14M6 8h12M8 8l-3 5h6L8 8Zm8 0-3 5h6l-3-5ZM5 20h14" />
      </svg>
    );
  }

  function GlobeIcon() {
    return (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
        <circle cx="12" cy="12" r="8.5" />
        <path d="M3.8 12h16.4M12 3.8c2.2 2.2 3.4 5.1 3.4 8.2S14.2 18 12 20.2M12 3.8C9.8 6 8.6 8.9 8.6 12s1.2 6 3.4 8.2" />
      </svg>
    );
  }

  function EstateIcon() {
    return (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
        <path d="M4 9 12 4l8 5M6 10.5v7M10 10.5v7M14 10.5v7M18 10.5v7M3 19.5h18" />
      </svg>
    );
  }

  function BusinessIcon() {
    return (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
        <path d="M4 20.5V8.5l6-2v14M10 20.5h10V5.5l-6-2v17M7 11h0M7 14h0M7 17h0M14 8h0M14 11h0M14 14h0M17 8h0M17 11h0M17 14h0" />
      </svg>
    );
  }

  function PinIcon() {
    return (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
        <path d="M12 20s6-5.4 6-10a6 6 0 1 0-12 0c0 4.6 6 10 6 10Z" />
        <circle cx="12" cy="10" r="2.3" />
      </svg>
    );
  }

  function PhoneIcon() {
    return (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
        <path d="M6.5 4.5h3l1.2 4.3-1.9 1.9a14.5 14.5 0 0 0 4.5 4.5l1.9-1.9 4.3 1.2v3a1.5 1.5 0 0 1-1.6 1.5A16.5 16.5 0 0 1 5 6.1 1.5 1.5 0 0 1 6.5 4.5Z" />
      </svg>
    );
  }

  function MailIcon() {
    return (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
        <path d="M4 7.5h16v9H4z" />
        <path d="m5 8.5 7 5 7-5" />
      </svg>
    );
  }

  function ClockIcon() {
    return (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
        <circle cx="12" cy="12" r="8.5" />
        <path d="M12 8v4.5l3 2" />
      </svg>
    );
  }

  function MapIcon() {
    return (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
        <path d="m3.5 6.5 5-2 7 2 5-2v13l-5 2-7-2-5 2z" />
        <path d="M8.5 4.5v13M15.5 6.5v13" />
      </svg>
    );
  }

  function HomePage() {
    return (
      <>
        <window.HeroSection
          id="inicio"
          className="hero-gold-accent"
          eyebrow="Asesoría legal en Colombia"
          title="Hernández & Asociados"
          text="Brindamos asesoría y representación jurídica con enfoque estratégico, atención cercana y acompañamiento claro en cada etapa del proceso. Nuestro equipo trabaja para proteger sus derechos y ayudarle a tomar decisiones legales con mayor seguridad."
        />
        <window.HomeSections />
      </>
    );
  }

  function AboutPage() {
    const values = [
      {
        title: "Nuestra Misión",
        text:
          "Brindar asesoría y representación legal con criterio técnico, trato cercano y soluciones claras para personas, familias y patrimonios que requieren respaldo jurídico confiable.",
      },
      {
        title: "Nuestra Visión",
        text:
          "Consolidarnos como una firma reconocida por su seriedad, comunicación transparente y capacidad para acompañar decisiones legales complejas con orden y estrategia.",
      },
      {
        title: "Nuestros Valores",
        text:
          "Actuamos con ética, confidencialidad, rigor profesional y compromiso real con los objetivos de cada cliente, priorizando siempre la claridad y la responsabilidad.",
      },
    ];

    const team = [
      {
        image: "/assets/images/team-fulanito.png",
        name: "Kevin Hernández",
        role: "Director y abogado fundador",
      },
      {
        image: "/assets/images/team-kevin.png",
        name: "Abogada asociada",
        role: "Derecho de familia y asuntos patrimoniales",
      },
      {
        image: "/assets/images/team-pepita.png",
        name: "Consultor jurídico",
        role: "Litigio civil y estrategia procesal",
      },
    ];

    return (
      <>
        <window.HeroSection
          inner={true}
          className="hero-contained hero-gold-accent"
          eyebrow="Sobre nosotros"
          title="Conozca más sobre nuestro Equipo"
          text="Acompañamos a nuestros clientes con una práctica jurídica centrada en estrategia, seguimiento cercano y decisiones claras en asuntos familiares, civiles y patrimoniales."
          backgroundImage="/assets/images/about-page-hero.jpg"
          backgroundPosition="center 18%"
          backgroundSize="100%"
          mobileBackgroundPosition="center 10%"
          mobileBackgroundSize="cover"
        />

        <section className="page-intro-section">
          <div className="container page-intro-grid">
            <div className="page-intro-copy">
              <div className="section-divider" />
              <h2>Sobre nosotros</h2>
              <p className="page-intro-lead">
                Hernández &amp; Asociados es una firma enfocada en ofrecer asesoría
                y representación jurídica con una atención cercana, análisis
                riguroso y acompañamiento constante.
              </p>
              <p>
                Entendemos que los asuntos legales no solo exigen conocimiento
                técnico; también requieren escucha, criterio y una estrategia
                adecuada para proteger los intereses de cada cliente en el corto y
                largo plazo.
              </p>
            </div>

            <div className="page-intro-media">
              <img
                src="/assets/images/office-photo.png"
                alt="Equipo de Hernández & Asociados en reunión"
              />
            </div>
          </div>
        </section>

        <section className="values-section">
          <div className="container">
            <div className="values-grid">
              {values.map(function renderValue(item) {
                return (
                  <article className="value-card" key={item.title}>
                    <h4>{item.title}</h4>
                    <p>{item.text}</p>
                  </article>
                );
              })}
            </div>
          </div>
        </section>

        <section className="team-section">
          <div className="container">
            <div className="section-head is-centered">
              <div className="section-divider" />
              <h2>Nuestro Equipo</h2>
              <p className="section-lead">
                Reunimos experiencia jurídica, preparación procesal y un estilo de
                trabajo enfocado en la confianza y la atención personalizada.
              </p>
            </div>

            <div className="team-grid">
              {team.map(function renderMember(member) {
                return (
                  <article className="team-card" key={member.name}>
                    <img src={member.image} alt={member.name} />
                    <h5>{member.name}</h5>
                    <p>{member.role}</p>
                  </article>
                );
              })}
            </div>
          </div>
        </section>

        <SharedCta />
      </>
    );
  }

  function SpecialtiesPage() {
    const practices = [
      {
        title: "Derecho de Familia",
        Icon: FamilyIcon,
        items: ["Separación y divorcio", "Custodia de menores", "Manutención", "Régimen de visitas"],
        highlighted: true,
      },
      {
        title: "Derecho Civil",
        Icon: CivilIcon,
        items: ["Contratos", "Sucesiones", "Propiedad", "Obligaciones"],
      },
      {
        title: "Derecho Penal",
        Icon: PenalIcon,
        items: ["Defensa penal", "Recursos de apelación", "Medidas cautelares", "Habeas corpus"],
      },
      {
        title: "Asuntos Internacionales",
        Icon: GlobeIcon,
        items: [
          "Derecho internacional privado",
          "Residencia y nacionalidad",
          "Contratos internacionales",
          "Arbitraje internacional",
        ],
      },
      {
        title: "Protección Patrimonial",
        Icon: EstateIcon,
        items: ["Planificación sucesoral", "Fideicomisos", "Alto patrimonio neto", "Estructuración familiar"],
      },
      {
        title: "Asesoría Empresarial",
        Icon: BusinessIcon,
        items: ["Constitución de empresas", "Contratos comerciales", "Resolución de disputas", "Due diligence"],
      },
    ];

    const steps = [
      {
        number: "01",
        title: "Consulta inicial",
        text: "Evaluamos tu caso de forma gratuita y confidencial.",
      },
      {
        number: "02",
        title: "Análisis y estrategia",
        text: "Diseñamos el camino legal más efectivo para tu situación.",
      },
      {
        number: "03",
        title: "Ejecución",
        text: "Actuamos con precisión, informándote en cada etapa.",
      },
      {
        number: "04",
        title: "Resultado",
        text: "Trabajamos hasta alcanzar la mejor resolución posible.",
      },
    ];

    return (
      <>
        <window.HeroSection
          inner={true}
          className="hero-contained"
          eyebrow="Especialidades"
          title="Somos expertos en muchas áreas legales."
          text="Ayudamos a las personas a resolver problemas legales mediante asesoría cercana, representación efectiva y estrategias pensadas para cada caso."
          backgroundImage="/assets/images/specialties-hero.jpg"
          backgroundPosition="center 24%"
          backgroundSize="96%"
          mobileBackgroundPosition="center 10%"
          mobileBackgroundSize="cover"
        />

        <section className="legal-practice-section">
          <div className="container">
            <div className="legal-practice-grid">
              {practices.map(function renderPractice(practice) {
                const Icon = practice.Icon;

                return (
                  <article
                    className={`legal-practice-card${practice.highlighted ? " is-highlighted" : ""}`}
                    key={practice.title}
                  >
                    <div className="legal-practice-head">
                      <span className="legal-practice-icon">
                        <Icon />
                      </span>
                      <h3>{practice.title}</h3>
                    </div>

                    <ul className="legal-practice-list">
                      {practice.items.map(function renderItem(item) {
                        return (
                          <li key={item}>
                            <span className="legal-practice-bullet" />
                            <span>{item}</span>
                          </li>
                        );
                      })}
                    </ul>

                    <a className="legal-practice-link" href="/contacto/">
                      Consultar <span aria-hidden="true">→</span>
                    </a>
                  </article>
                );
              })}
            </div>
          </div>
        </section>

        <section className="legal-process-section">
          <div className="container legal-process-shell">
            <div className="legal-process-copy">
              <p className="legal-section-eyebrow">Cómo trabajamos</p>
              <h2>
                De la consulta
                <br />
                al <span>resultado.</span>
              </h2>
              <p>
                Cada caso es único. Nuestro proceso garantiza que su situación
                reciba el análisis y la estrategia que merece.
              </p>
              <a className="button-primary legal-process-button" href="/contacto/">
                Solicitar asesoría
              </a>
            </div>

            <div className="legal-process-list">
              {steps.map(function renderStep(step, index) {
                return (
                  <article
                    className={`legal-process-step${index < steps.length - 1 ? " has-divider" : ""}`}
                    key={step.number}
                  >
                    <div className="legal-process-index">{step.number}</div>
                    <div className="legal-process-body">
                      <h4>{step.title}</h4>
                      <p>{step.text}</p>
                    </div>
                  </article>
                );
              })}
            </div>
          </div>
        </section>

        <FAQSection />

        <SharedCta />
      </>
    );
  }

  function FAQSection() {
    const items = [
      {
        question: "¿Qué tipo de asuntos manejan en la firma?",
        answer:
          "Atendemos principalmente asuntos de familia, patrimonio, conflictos civiles y procesos que requieren representación o asesoría jurídica especializada.",
      },
      {
        question: "¿Es posible tener una consulta virtual?",
        answer:
          "Sí. Podemos realizar una primera consulta virtual para conocer el caso, revisar antecedentes y definir los siguientes pasos.",
      },
      {
        question: "¿Qué documentos debo llevar a la primera reunión?",
        answer:
          "Es recomendable contar con identificación, contratos, providencias, comunicaciones y cualquier soporte que ayude a entender los hechos del caso.",
      },
      {
        question: "¿También llevan procesos judiciales?",
        answer:
          "Sí. Además de la asesoría preventiva, acompañamos conciliaciones, reclamaciones, recursos y procesos judiciales cuando el caso lo requiere.",
      },
    ];

    const [openIndex, setOpenIndex] = React.useState(0);

    return (
      <section className="faq-section">
        <div className="container faq-shell">
          <div className="section-head is-centered">
            <div className="section-divider" />
            <h2>Preguntas frecuentes</h2>
          </div>

          <div className="faq-list">
            {items.map(function renderFaq(item, index) {
              const isOpen = openIndex === index;
              return (
                <article className={`faq-item${isOpen ? " is-open" : ""}`} key={item.question}>
                  <button
                    className="faq-trigger"
                    type="button"
                    onClick={function onClick() {
                      setOpenIndex(function nextIndex(previous) {
                        return previous === index ? -1 : index;
                      });
                    }}
                  >
                    <span>{item.question}</span>
                    <span className="faq-symbol">{isOpen ? "-" : "+"}</span>
                  </button>
                  {isOpen ? <p className="faq-answer">{item.answer}</p> : null}
                </article>
              );
            })}
          </div>
        </div>
      </section>
    );
  }

  function ContactPage() {
    const [formState, setFormState] = React.useState({
      fullName: "",
      email: "",
      phone: "",
      area: "",
      message: "",
    });
    const [submitState, setSubmitState] = React.useState({
      status: "idle",
      message: "",
    });

    function handleChange(event) {
      const { name, value } = event.target;
      setFormState(function updateState(previous) {
        return Object.assign({}, previous, { [name]: value });
      });
    }

    async function handleSubmit(event) {
      event.preventDefault();
      setSubmitState({
        status: "loading",
        message: "Enviando consulta...",
      });

      try {
        const response = await fetch("/api/contact.php", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(formState),
        });

        const result = await response.json();

        if (!response.ok || !result.success) {
          throw new Error(result.message || "No fue posible enviar la consulta.");
        }

        setSubmitState({
          status: "success",
          message:
            "Tu consulta fue enviada correctamente. Nuestro equipo te responderá pronto.",
        });
        setFormState({
          fullName: "",
          email: "",
          phone: "",
          area: "",
          message: "",
        });
        return;
      } catch (error) {
        setSubmitState({
          status: "error",
          message:
            error && error.message
              ? error.message
              : "Ocurrió un error al enviar el formulario. Inténtalo nuevamente.",
        });
        return;
      }

      const messageLines = [
        "Hola, quisiera recibir asesoría legal.",
        "Nombre: " + formState.fullName,
        "Correo: " + formState.email,
        "Teléfono: " + formState.phone,
        "Área de consulta: " + formState.area,
        "Situación: " + formState.message,
      ];

      window.open(
        "https://wa.me/573022943899?text=" + encodeURIComponent(messageLines.join("\n")),
        "_blank",
        "noopener"
      );
    }

    const contactInfo = [
      {
        title: "Dirección",
        detail: [
          "Carrera 13 No. 32-51",
          "Edificio Parque Residencial Baviera",
          "Bogotá, Colombia",
        ],
        Icon: PinIcon,
      },
      {
        title: "Teléfono / WhatsApp",
        detail: ["+57 302 294 3899"],
        Icon: PhoneIcon,
      },
      {
        title: "Correo",
        detail: ["kevin.h@hernandezasociados.com.co"],
        Icon: MailIcon,
      },
      {
        title: "Horario de atención",
        detail: ["Lunes a Viernes: 8:00am – 6:00pm", "Sábados: 9:00am – 1:00pm"],
        Icon: ClockIcon,
      },
    ];

    return (
      <>
        <window.HeroSection
          inner={true}
          className="hero-contained"
          eyebrow="Contacto"
          title="Póngase en contacto con nosotros para sus Asuntos Legales"
          text="Si necesita orientación jurídica o desea revisar un caso con nuestro equipo, puede escribirnos y coordinaremos la mejor forma de atenderle."
          backgroundImage="/assets/images/contact-hero.png"
          backgroundPosition="center top"
          mobileBackgroundPosition="center 10%"
          mobileBackgroundSize="cover"
        />

        <section className="contact-studio-section">
          <div className="container contact-studio-shell">
            <form className="contact-form-panel" onSubmit={handleSubmit}>
              <p className="contact-panel-eyebrow">Formulario de contacto</p>

              <label className="contact-field">
                <span>Nombre completo</span>
                <input
                  type="text"
                  name="fullName"
                  placeholder="Tu nombre"
                  value={formState.fullName}
                  onChange={handleChange}
                  required
                />
              </label>

              <label className="contact-field">
                <span>Correo electrónico</span>
                <input
                  type="email"
                  name="email"
                  placeholder="tucorreo@email.com"
                  value={formState.email}
                  onChange={handleChange}
                  required
                />
              </label>

              <label className="contact-field">
                <span>Teléfono</span>
                <input
                  type="tel"
                  name="phone"
                  placeholder="+57 300 000 0000"
                  value={formState.phone}
                  onChange={handleChange}
                />
              </label>

              <label className="contact-field">
                <span>Área de consulta</span>
                <div className="contact-select-wrap">
                  <select name="area" value={formState.area} onChange={handleChange}>
                    <option value="">Seleccionar área legal</option>
                    <option value="Derecho de familia">Derecho de familia</option>
                    <option value="Derecho civil">Derecho civil</option>
                    <option value="Derecho penal">Derecho penal</option>
                    <option value="Protección patrimonial">Protección patrimonial</option>
                    <option value="Asuntos internacionales">Asuntos internacionales</option>
                    <option value="Asesoría empresarial">Asesoría empresarial</option>
                  </select>
                </div>
              </label>

              <label className="contact-field">
                <span>Cuéntanos tu situación</span>
                <textarea
                  name="message"
                  rows="6"
                  placeholder="Descripción breve de tu caso..."
                  value={formState.message}
                  onChange={handleChange}
                  required
                />
              </label>

              <button
                className="contact-submit-button"
                type="submit"
                disabled={submitState.status === "loading"}
              >
                {submitState.status === "loading" ? "Enviando..." : "Enviar consulta"}
              </button>
              <p className="contact-submit-note">
                Tu información es confidencial y protegida bajo secreto profesional.
              </p>
              {submitState.status !== "idle" ? (
                <p
                  className={`contact-submit-status${
                    submitState.status === "success" ? " is-success" : ""
                  }${submitState.status === "error" ? " is-error" : ""}`}
                >
                  {submitState.message}
                </p>
              ) : null}
            </form>

            <div className="contact-info-panel">
              <p className="contact-panel-eyebrow">Información de contacto</p>

              <div className="contact-info-list">
                {contactInfo.map(function renderInfo(item, index) {
                  const Icon = item.Icon;
                  return (
                    <article
                      className={`contact-info-row${index < contactInfo.length - 1 ? " has-divider" : ""}`}
                      key={item.title}
                    >
                      <div className="contact-info-icon">
                        <Icon />
                      </div>
                      <div className="contact-info-body">
                        <h4>{item.title}</h4>
                        {item.detail.map(function renderLine(line) {
                          return <p key={line}>{line}</p>;
                        })}
                      </div>
                    </article>
                  );
                })}
              </div>

              <a
                className="contact-map-preview"
                href="https://maps.google.com/?q=Carrera+13+32-51+Bogot%C3%A1"
                target="_blank"
                rel="noreferrer"
              >
                <span className="contact-map-icon">
                  <MapIcon />
                </span>
                <strong>Mapa / Ubicación</strong>
                <span>Bogotá, Colombia</span>
              </a>
            </div>
          </div>
        </section>
      </>
    );
  }

  return {
    HomePage,
    AboutPage,
    SpecialtiesPage,
    ContactPage,
  };
})();