// FleetSection — the Blue Phoenix fleet: Coral Dream (has photo) + Blue Phoenix (photos TBD).
// Only Coral Dream imagery is used; Blue Phoenix uses a user-fillable <image-slot>.
const { SectionHeading, StatBlock, Badge, Button } = window.BluePhoenixDesignSystem_f91d3d;

function Spec({ value, label, accent }) {
  return <StatBlock value={value} label={label} accent={accent} />;
}

function BoatFeature({ name, media, badgeText, badgeTone, desc, specs, ctaLabel, onBook, reverse }) {
  const mediaBlock = (
    <div className="bp-boat-media" style={{ position: "relative", minWidth: 0, borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-lg)", aspectRatio: "16 / 11", background: "var(--surface-inset)", gridColumn: reverse ? 2 : 1 }}>
      {media}
      {badgeText && <div style={{ position: "absolute", top: 14, left: 14, zIndex: 2 }}><Badge tone={badgeTone} solid>{badgeText}</Badge></div>}
    </div>
  );
  const infoBlock = (
    <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", minWidth: 0, gridColumn: reverse ? 1 : 2, gridRow: 1 }}>
      <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 34, textTransform: "uppercase", color: "var(--text-strong)", lineHeight: 1, marginBottom: 8 }}>{name}</div>
      <p style={{ color: "var(--text-body)", fontSize: 16, lineHeight: 1.6, margin: "0 0 24px" }}>{desc}</p>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, padding: "20px 0", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", marginBottom: 24 }}>
        {specs.map((s, i) => <Spec key={i} value={s.value} label={s.label} accent={s.accent} />)}
      </div>
      <div style={{ display: "flex", gap: 12 }}>
        <Button variant="primary" onClick={() => onBook({ boat: name })}>{ctaLabel}</Button>
      </div>
    </div>
  );
  return (
    <div className="bp-boat" style={{ display: "grid", gridTemplateColumns: reverse ? "minmax(0,1fr) minmax(0,1.35fr)" : "minmax(0,1.35fr) minmax(0,1fr)", gap: 32, alignItems: "center" }}>
      {reverse ? <>{infoBlock}{mediaBlock}</> : <>{mediaBlock}{infoBlock}</>}
    </div>
  );
}

function FleetSection({ onBook }) {
  return (
    <section id="fleet" className="bp-sec" style={{ padding: "0 48px 88px", maxWidth: 1200, margin: "0 auto" }}>
      <SectionHeading overline="The Fleet" title="Our Boats" lead="The Blue Phoenix fleet knows these waters, and both boats are ready when you are." align="center" />
      <div style={{ display: "flex", flexDirection: "column", gap: 64, marginTop: 48 }}>
        <BoatFeature
          name="Coral Dream"
          media={<img src={window.BP_ASSETS.cd1} alt="Coral Dream docked at IGY Marina, Cabo San Lucas" style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
          desc="A tower-rigged sportfisher with a shaded helm, open cockpit, and the range to reach the banks. Fully set up for big catches and comfortable for a full day on the water off Los Cabos."
          specs={[{ value: "33", label: "Length · ft", accent: true }, { value: "6", label: "Standard Guests" }, { value: "Tuna", label: "Tower" }, { value: "8", label: "Max Capacity" }]}
          ctaLabel="BOOK CORAL DREAM" onBook={onBook}
        />
        <BoatFeature
          reverse
          name="Blue Phoenix"
          media={<img src={window.BP_ASSETS.bp1} alt="Blue Phoenix — Riviera 34 Convertible underway" style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
          desc="The flagship of the fleet, and the boat the company is named for. A Riviera 34 Convertible with a flybridge helm and open cockpit. She has been in the water off Los Cabos long enough to know where the fish hold."
          specs={[{ value: "34", label: "Length · ft", accent: true }, { value: "6", label: "Standard Guests" }, { value: "Flybridge", label: "Helm" }, { value: "8", label: "Max Capacity" }]}
          ctaLabel="BOOK BLUE PHOENIX" onBook={onBook}
        />
      </div>
    </section>
  );
}
window.FleetSection = FleetSection;