// FaqSection — accordion FAQ page. Composes SectionHeading.
const { SectionHeading } = window.BluePhoenixDesignSystem_f91d3d;

const FAQS = [
  { q: "What should we expect?", a: "After a brief introduction from our captain and a safety briefing, we'll dive into action! We run past Cabo's landmarks on the way out, including the iconic Land's End rock formations, Lovers Beach, the Arch, and the sea lion colony, then head for the fishing grounds. Depending on the season you can expect marlin, dorado, tuna, wahoo, and roosterfish. Keep your eyes peeled for majestic humpback whales, a common and acrobatic presence. You might even encounter about 40% of all marine mammals in the world, including various dolphin species, blue whales, gray whales, fin whales, orcas, and sea lions. Our captain's expertise ensures both your safety and the well-being of these creatures, respecting their natural behaviors." },
  { q: "Tag and release or catch and keep?", a: "Both, and the choice is yours. Every fish tells a story and you decide how it ends. If you want to keep your catch, our crew will handle it and point you to a local restaurant that will cook it for you. If you'd rather release, we tag and release with care so the fish swims off strong." },
  { q: "Is smoking allowed?", a: "No! Smoking is strictly prohibited onboard for the comfort and safety of all guests." },
  { q: "BYOB policy?", a: "Guests are welcome to bring their own beverages and snacks, though glass containers are discouraged for safety reasons. All-Inclusive trips include food and drinks, so there will be no need to bring your own." },
  { q: "What is your cancellation policy?", a: "Cancel 7+ days before the charter: full refund minus a $100 non-refundable fee. Within 7 days: 50% refund. Within 24 hours: no refund. Full refunds will only be issued in the event of circumstances such as port closures, rain, or substantial storms. Our primary objective is to work together with you to find a suitable rescheduling solution. If rescheduling is not feasible, rest assured that a complete refund of your payment will be issued." },
  { q: "Arrival and departure?", a: "To ensure a smooth departure, we kindly ask our guests to arrive at the designated departure point a minimum of 15 minutes before the scheduled departure time. Our boats strictly adhere to the agreed-upon schedule for both departure and return timings, ensuring you have ample time to relish your journey." },
  { q: "Can we take pictures?", a: "We love capturing the magic of your voyage through photos and videos, which may be used for promotional purposes. Your memorable moments contribute to our story. If privacy is of utmost importance to you, please let us know in advance. Your comfort is our priority, and we respect your desire for a private and personalized experience." },
  { q: "Feedback and reviews", a: "Your feedback holds immense value to us. Following your charter experience, we welcome you to leave reviews and ratings on our platforms. Your insights help us continuously enhance our services and create unforgettable moments for our guests." },
];

function FaqRow({ q, a, open, onToggle }) {
  return (
    <div style={{ borderBottom: "1px solid var(--border-subtle)" }}>
      <button onClick={onToggle} style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20, background: "none", border: "none", padding: "22px 0", cursor: "pointer", textAlign: "left" }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, color: "var(--text-strong)", lineHeight: 1.35 }}>{q}</span>
        <span style={{ flexShrink: 0, width: 26, height: 26, borderRadius: 99, display: "grid", placeItems: "center", background: open ? "var(--accent)" : "var(--surface-inset)", color: open ? "var(--text-on-accent)" : "var(--text-muted)", fontSize: 15, fontWeight: 700, lineHeight: 1, transition: "background var(--dur-fast) var(--ease-out)" }}>{open ? "–" : "+"}</span>
      </button>
      {open && <p style={{ margin: "0 0 24px", paddingRight: 46, fontSize: 15.5, color: "#171718", lineHeight: 1.7 }}>{a}</p>}
    </div>
  );
}

function FaqSection({ onBook }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="bp-sec" style={{ padding: "88px 48px", maxWidth: 860, margin: "0 auto" }}>
      <SectionHeading overline="Good To Know" title="Frequently Asked" lead="Everything guests ask before their first trip out of Cabo San Lucas." align="center" />
      <div style={{ marginTop: 44 }}>
        {FAQS.map((f, i) => <FaqRow key={f.q} q={f.q} a={f.a} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />)}
      </div>
      <div style={{ marginTop: 44, textAlign: "center", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)", padding: "32px 28px" }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase", fontSize: 20, color: "var(--text-strong)", marginBottom: 8 }}>Still have a question?</div>
        <p style={{ margin: "0 0 20px", fontSize: 15.5, color: "var(--text-body)", lineHeight: 1.6 }}>Call or email and we'll get you an answer swiftly.</p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "center", fontSize: 15.5 }}>
          <a href="tel:+12064460449" style={{ fontWeight: 600 }}>+1 206 446 0449</a>
          <span style={{ color: "var(--text-muted)" }}>·</span>
          <a href="mailto:info@bluephoenixsportfishing.com" style={{ fontWeight: 600 }}>info@bluephoenixsportfishing.com</a>
        </div>
      </div>
    </section>
  );
}
window.FaqSection = FaqSection;
