// faq.jsx — frequently asked questions accordion
const FAQS = [
  {
    q: "¿La primera consulta tiene costo?",
    a: "La consulta inicial tiene un valor de $30.000 y, si decides contratar mis servicios, ese monto se abona a los honorarios acordados. En ese primer encuentro revisamos tu situación, te explico tus alternativas y conversamos de forma transparente los honorarios antes de iniciar cualquier gestión.",
  },
  {
    q: "¿Cómo agendo una hora?",
    a: "Puedes escribirme por WhatsApp al +56 9 9291 9059, llamarme dentro del horario de atención o enviarme un correo a paularojasabogada@gmail.com. Te responderé a la brevedad para coordinar día y hora.",
  },
  {
    q: "¿Atiendes solo en Talca?",
    a: "Atiendo principalmente en Talca y las comunas de la Región del Maule. Para casos fuera de la región o consultas iniciales, también ofrezco orientación a distancia por videollamada o teléfono.",
  },
  {
    q: "¿Cómo se determinan los honorarios?",
    a: "Los honorarios se conversan de manera clara y por adelantado, según la complejidad y el tipo de causa. Mi compromiso es que sepas con certeza qué incluye el servicio antes de comprometerte, sin costos ocultos.",
  },
  {
    q: "¿La atención es presencial u online?",
    a: "Ambas. Puedes asistir de forma presencial a una reunión coordinada o, si lo prefieres, realizar la consulta por videollamada. Buscamos la modalidad que te resulte más cómoda y oportuna.",
  },
  {
    q: "¿Qué documentos debo llevar a la primera reunión?",
    a: "Lo ideal es reunir todo lo relacionado con tu caso: contratos, notificaciones, demandas, certificados o cualquier documento relevante. Si no tienes algo a mano, no te preocupes: lo revisamos juntos y te indico qué necesitamos.",
  },
];

function FaqItem({ faq, open, onToggle }) {
  return (
    <div className={`border-b border-ink/12 transition-colors ${open ? "bg-white/50" : ""}`}>
      <button onClick={onToggle} className="flex w-full items-center justify-between gap-6 py-6 text-left lg:py-7">
        <h3 className="font-display text-[22px] font-semibold leading-snug text-ink lg:text-[25px]">{faq.q}</h3>
        <span className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-full border transition-all duration-300 ${open ? "rotate-45 border-bronze bg-bronze text-white" : "border-ink/20 text-ink/60"}`}>
          <span className="block h-4 w-4"><Icon name="plus" stroke={2} /></span>
        </span>
      </button>
      <div className={`grid transition-all duration-300 ease-out ${open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`}>
        <div className="overflow-hidden">
          <p className="max-w-3xl pb-7 pr-12 font-body text-[16px] leading-relaxed text-ink/70">{faq.a}</p>
        </div>
      </div>
    </div>
  );
}

function Faq() {
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section id="preguntas" className="bg-cream py-24 lg:py-32">
      <div className="mx-auto grid max-w-7xl gap-12 px-6 lg:grid-cols-[0.85fr_1.15fr] lg:gap-20 lg:px-10">
        <div className="lg:sticky lg:top-28 lg:self-start">
          <Eyebrow className="text-bronze">Preguntas frecuentes</Eyebrow>
          <h2 className="mt-5 font-display text-[clamp(2.2rem,4.5vw,3.4rem)] font-semibold leading-[1.05] text-ink">
            Resuelve tus dudas antes de empezar
          </h2>
          <p className="mt-5 text-pretty font-body text-[16px] leading-relaxed text-ink/65">
            Aquí respondo las consultas más habituales. Si tienes otra pregunta, escríbeme y con gusto te oriento.
          </p>
          <a href={WA_AGENDAR} target="_blank" rel="noopener"
             className="mt-8 inline-flex items-center gap-2.5 font-body text-[15px] font-semibold text-bronze transition-colors hover:text-[#9c7a2c]">
            <span className="block h-[18px] w-[18px]"><Icon name="wa" /></span>
            Tengo otra pregunta
          </a>
        </div>
        <div>
          {FAQS.map((faq, i) => (
            <FaqItem key={faq.q} faq={faq} open={openIdx === i}
              onToggle={() => setOpenIdx(openIdx === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Faq });