// TripsSection — trip cards with in-card Basic / All-Inclusive slider. Composes SectionHeading, Card, Badge, Button.
const { SectionHeading, Card, Badge, Button } = window.BluePhoenixDesignSystem_f91d3d;

const TIERS = [
  { name: "Basic", note: <><span style={{ color: "#d4402e", fontWeight: 700 }}>*</span>Bring your own bait · Purchase your own permits</>, incl: ["Captain + crew", "Gear included", "Tag-and-release or catch-and-keep", "Water & ice provided", "6 guests standard · up to 8 max", "+$100 per additional guest"] },
  { name: "All-Inclusive", note: "Everything handled — just step aboard", incl: ["Permits included", "Fishing bait + gear included", "Tag-and-release or catch-and-keep", "Lunch aboard", "1 case of beer included", "Water & ice provided", "6 guests standard · up to 8 max", "+$100 per additional guest"] },
];

const TRIPS = [
  { name: "Full-Day", hours: "8 hr", prices: ["$1,100", "$1,600"], media: window.BP_ASSETS.fullday, tone: "accent", tag: "Most Booked", desc: "Best shot at a grander." },
  { name: "Half-Day", hours: "5 hr", prices: ["$780", "$1,250"], media: window.BP_ASSETS.halfday, tone: "neutral", tag: "", desc: "Salt, engine hum, and the sound of a reel giving line." },
];

function TripCard({ t, onBook }) {
  const [tier, setTier] = React.useState(0);
  const panelRefs = [React.useRef(null), React.useRef(null)];
  const [panelH, setPanelH] = React.useState(null);
  React.useEffect(() => {
    const el = panelRefs[tier].current;
    if (el) setPanelH(el.offsetHeight);
  }, [tier]);
  return (
    <Card media={t.media} mediaAlt={t.name} interactive featured={t.tone === "gold"} style={{ display: "flex", flexDirection: "column" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 10 }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 10, fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase", color: "var(--text-strong)", fontSize: 22, lineHeight: 1 }}>
          <span>{t.name}</span><span>·</span><span>{t.hours}</span>
        </div>
        {t.tag ? <Badge tone="accent" solid>{t.tag}</Badge> : null}
      </div>
      {t.desc ? <p style={{ margin: "0 0 14px", color: "var(--text-body)", fontSize: 17, fontWeight: 700, lineHeight: 1.5 }}>{t.desc}</p> : null}
      <div style={{ display: "flex", gap: 0, marginBottom: 14, border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-sm)", overflow: "hidden" }}>
        {TIERS.map((tr, i) => (
          <button key={tr.name} type="button" onClick={() => setTier(i)} style={{ flex: 1, padding: "10px 8px", fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase", letterSpacing: ".07em", fontSize: 13, cursor: "pointer", border: "none", transition: "background .2s,color .2s", background: tier === i ? "var(--bp-cyan-500)" : "var(--surface-inset)", color: tier === i ? "var(--text-on-accent, #fff)" : "var(--text-muted)" }}>{tr.name}</button>
        ))}
      </div>
      <div style={{ overflow: "hidden", marginBottom: 16, height: panelH == null ? "auto" : panelH, transition: "height .3s cubic-bezier(.4,0,.2,1)" }}>
        <div style={{ display: "flex", width: "200%", alignItems: "flex-start", transform: `translateX(${tier * -50}%)`, transition: "transform .35s cubic-bezier(.4,0,.2,1)" }}>
          {TIERS.map((tr, i) => (
            <div key={tr.name} ref={panelRefs[i]} style={{ width: "50%", flexShrink: 0, boxSizing: "border-box", paddingRight: 4 }}>
              <div style={{ fontSize: 14.5, color: "#171718", lineHeight: 1.45, marginBottom: 10 }}>{tr.note}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 7 }}>
                {tr.incl.map(s => (
                  <li key={s} style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 15, color: "#171718" }}>
                    <span style={{ width: 6, height: 6, borderRadius: 99, background: "var(--bp-cyan-500)", flexShrink: 0 }} />{s}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
      <div style={{ marginTop: "auto", display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 12 }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 28, color: "var(--text-strong)", lineHeight: 1 }}>{t.prices[tier]}</div>
        <Button variant={t.tone === "gold" ? "gold" : "primary"} onClick={() => onBook({ trip: (t.name === "Full-Day" ? "full" : "half") + (tier === 0 ? "-basic" : "-ai") })}>Book {TIERS[tier].name}</Button>
      </div>
    </Card>
  );
}

function TripsSection({ onBook, count }) {
  const trips = count ? TRIPS.slice(0, count) : TRIPS;
  return (
    <section id="trips" className="bp-sec" style={{ padding: "88px 48px", maxWidth: 1200, margin: "0 auto" }}>
      <SectionHeading overline="Our Trips" title="Pick Your Adventure" lead="Half day trips, full day adventures, and sightseeing tours. Every trip is led by a local Cabo captain." align="center" />
      <div className="bp-trips-grid" style={{ display: "grid", gridTemplateColumns: `repeat(${trips.length},1fr)`, gap: 24, marginTop: 48 }}>
        {trips.map(t => <TripCard key={t.name} t={t} onBook={onBook} />)}
      </div>
      <div className="bp-sightsee" style={{ marginTop: 24, position: "relative", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 28, flexWrap: "wrap", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)", padding: "30px 32px", boxShadow: "0 14px 34px -24px rgba(18,113,138,.4)" }}>
        <div style={{ position: "relative", minWidth: 260, flex: "1 1 420px" }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 10, fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase", color: "var(--text-strong)", fontSize: 30, lineHeight: 1.1, marginBottom: 10 }} className="bp-sightsee-title">
            <span>Sightseeing</span><span style={{ color: "var(--bp-cyan-500)" }}>·</span><span>By the hour</span>
          </div>
          <p style={{ margin: 0, color: "var(--text-body)", fontSize: 17, lineHeight: 1.55, maxWidth: 560 }} className="bp-sightsee-copy">Take either boat out for the arch, the sea lions, and whale watching in season. Same captain, same crew, new you.</p>
          <ul style={{ listStyle: "none", padding: 0, margin: "14px 0 0", display: "flex", flexWrap: "wrap", gap: "7px 22px" }}>
            {["Ice provided", "Bottled water provided"].map(s => (
              <li key={s} style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 15, color: "#171718" }}>
                <span style={{ width: 6, height: 6, borderRadius: 99, background: "var(--bp-cyan-500)", flexShrink: 0 }} />{s}
              </li>
            ))}
          </ul>
        </div>
        <div className="bp-sightsee-cta" style={{ position: "relative", display: "flex", alignItems: "flex-end", gap: 20 }}>
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 34, color: "var(--text-strong)", lineHeight: 1 }}>$150<span style={{ fontSize: 17, color: "var(--text-muted)" }}>/hr</span></div>
            <div style={{ fontSize: 13.5, color: "var(--text-muted)", marginTop: 6 }}>All boats · 2 hr minimum</div>
          </div>
          <Button variant="primary" onClick={() => onBook({ trip: "sightseeing" })}>Book Sightseeing</Button>
        </div>
      </div>
    </section>
  );
}
window.TripsSection = TripsSection;