// Screens.jsx — composed pages (home, listing, detail, register step 1, confirm)
const CAMPS = [
  { id: 1, title: "Fairhope Soccer Camp", location: "Fairhope, AL", dates: "Jun 24–28", ageGroup: "U10–U14", price: 249, tags: ["Half day", "Technical"], status: "recommended" },
  { id: 2, title: "Tampa Bay Skills Camp", location: "Tampa, FL", dates: "Jul 8–12", ageGroup: "U8–U12", price: 299, tags: ["Overnight"], status: "soldout" },
  { id: 3, title: "Atlanta Goalkeeper Intensive", location: "Atlanta, GA", dates: "Jul 22–26", ageGroup: "U12–U16", price: 329, tags: ["Goalkeeper", "Full day"], status: "open" },
  { id: 4, title: "Boulder Mountain Camp", location: "Boulder, CO", dates: "Aug 5–9", ageGroup: "U10–U14", price: 279, tags: ["Half day"], status: "open" },
  { id: 5, title: "Brooklyn Futsal Series", location: "Brooklyn, NY", dates: "Aug 12–16", ageGroup: "U8–U12", price: 219, tags: ["Futsal", "Half day"], status: "open" },
  { id: 6, title: "Austin Champion Camp", location: "Austin, TX", dates: "Aug 19–23", ageGroup: "U14–U18", price: 349, tags: ["Full day", "Competitive"], status: "recommended" },
];

// ============ HOME ============
const HomeScreen = ({ onNav }) => (
  <div>
    <div className="bee-hero">
      <HexMotif width={300} style={{ position: "absolute", right: "9%", top: "12%" }} />
      <div style={{ position: "absolute", left: "8%", top: "20%", display: "flex", flexDirection: "column", gap: 14, maxWidth: 620 }}>
        <Pill variant="dark" style={{ alignSelf: "flex-start", background: "rgba(0,0,0,.78)", color: "var(--bee-yellow)" }}>
          <span className="dot" style={{ background: "var(--bee-yellow)" }}/>Summer '26 registration open
        </Pill>
        <PromoLine size={86}>thrive in the hive</PromoLine>
      </div>
    </div>
    <div className="bee-section" style={{ textAlign: "center" }}>
      <div style={{ fontFamily: "var(--bee-font-body)", fontWeight: 700, fontSize: 56, lineHeight: 1.05, letterSpacing: "-.01em", whiteSpace: "pre-line" }}>
        {"Developing Great Players.\nBetter People"}
      </div>
      <p style={{ maxWidth: 720, margin: "20px auto 28px", fontSize: 16, color: "var(--bee-fg-muted)", lineHeight: 1.55 }}>
        Join the Hive through camps, training, and the Beestera app. Every experience helps players grow with structure, confidence, and purpose.
      </p>
      <div style={{ display: "flex", justifyContent: "center", gap: 14 }}>
        <Btn variant="dark" size="lg" onClick={() => onNav("camps")}>Find a Camp</Btn>
        <Btn variant="ghost" size="lg" onClick={() => onNav("app")}>Get the App</Btn>
      </div>
    </div>
    <div className="bee-section" style={{ paddingTop: 0 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24 }}>
        {[
          { title: "Day & Overnight Camps", body: "Technical training in a positive, energetic environment.", cta: "See Camps", action: "camps" },
          { title: "Private Training", body: "Small-group coaching with our certified Beestera coaches.", cta: "Book Sessions", action: "support" },
          { title: "The Beestera App", body: "Skill paths, video drills, and progress for every player.", cta: "Get the App", action: "app" },
        ].map((c) => (
          <div key={c.title} className="bee-card" style={{ padding: 24, display: "flex", flexDirection: "column", gap: 10 }}>
            <div style={{ width: 44, height: 44, borderRadius: 14, background: "var(--bee-yellow)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 6 }}>
              <img src="../../assets/bee-icon-black.png" style={{ height: 30 }} />
            </div>
            <div style={{ fontWeight: 700, fontSize: 18 }}>{c.title}</div>
            <p style={{ fontSize: 14, color: "var(--bee-fg-muted)", margin: 0, lineHeight: 1.55 }}>{c.body}</p>
            <div style={{ marginTop: 8 }}><InlineLink onClick={() => onNav(c.action)}>{c.cta}</InlineLink></div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// ============ CAMP LISTING ============
const ListingScreen = ({ onNav, onPickCamp }) => {
  const [filter, setFilter] = React.useState("All");
  const filters = ["All", "U8–U12", "U10–U14", "U14–U18", "Half day", "Overnight", "Goalkeeper"];
  return (
    <div>
      <div style={{ background: "#FAFAFA", borderBottom: "1px solid var(--bee-border)", padding: "32px 80px" }}>
        <div style={{ fontSize: 28, fontWeight: 700, fontFamily: "var(--bee-font-body)" }}>Find a Camp</div>
        <div style={{ marginTop: 6, color: "var(--bee-fg-muted)" }}>Browse upcoming camps near you. New dates added weekly.</div>
      </div>
      <div style={{ padding: "16px 80px", borderBottom: "1px solid var(--bee-border)", display: "flex", gap: 8, flexWrap: "wrap" }}>
        {filters.map((f) => (
          <Pill key={f} variant="ghost" active={filter === f} onClick={() => setFilter(f)}>{f}</Pill>
        ))}
      </div>
      <div style={{ padding: "32px 80px", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 28 }}>
        {CAMPS.map((c) => <CampCard key={c.id} camp={c} onSelect={onPickCamp} />)}
      </div>
    </div>
  );
};

// ============ CAMP DETAIL ============
const DetailScreen = ({ camp, onNav, onRegister }) => (
  <div>
    <div style={{ height: 360, background: `linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.3) 100%), url('../../assets/hero-camp-photo.png') center / cover` }} />
    <div style={{ padding: "48px 80px", display: "grid", gridTemplateColumns: "1fr 360px", gap: 48 }}>
      <div>
        <div style={{ fontSize: 32, fontWeight: 700, fontFamily: "var(--bee-font-ui)" }}>{camp.title}</div>
        <div style={{ display: "flex", gap: 28, marginTop: 16, color: "var(--bee-fg-muted)" }}>
          <span>📅 {camp.dates}</span>
          <span>👤 Ages {camp.ageGroup}</span>
          <span>📍 {camp.location}</span>
        </div>
        <div style={{ marginTop: 28, fontSize: 18, fontWeight: 700, fontFamily: "var(--bee-font-ui)" }}>What's Included</div>
        <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 10 }}>
          {[
            "Small-group coaching (6:1 ratio)",
            "Full day 9am–3pm · Half day 9am–12pm",
            "Snacks included (full day only)",
            "Beestera camp t-shirt",
            "Tournament play on the final day",
          ].map((line) => (
            <div key={line} style={{ display: "flex", gap: 12, alignItems: "center", fontSize: 14 }}>
              <span style={{ width: 22, height: 22, borderRadius: "50%", background: "var(--bee-yellow)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--bee-ink)", fontWeight: 700 }}>{Icons.check}</span>
              <span>{line}</span>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 36, padding: 20, background: "var(--bee-gray-100)", borderRadius: 14 }}>
          <div style={{ fontWeight: 700, fontFamily: "var(--bee-font-ui)" }}>Coaching Staff</div>
          <div style={{ marginTop: 6, color: "var(--bee-fg-muted)", fontSize: 14, lineHeight: 1.55 }}>
            Led by certified Beestera coaches with USSF B-license backgrounds and college playing experience. All staff are background-checked and safesport-certified.
          </div>
        </div>
      </div>
      <div className="bee-card" style={{ padding: 22, height: "fit-content", position: "sticky", top: 20 }}>
        <div style={{ fontFamily: "var(--bee-font-ui)", fontSize: 13, color: "var(--bee-fg-muted)", letterSpacing: ".05em", textTransform: "uppercase", fontWeight: 700 }}>From</div>
        <div style={{ fontSize: 36, fontWeight: 700, fontFamily: "var(--bee-font-body)" }}>${camp.price}</div>
        <div style={{ color: "var(--bee-fg-muted)", marginTop: 4, fontSize: 13 }}>per player · 5 sessions</div>
        <Btn variant="yellow" size="lg" style={{ width: "100%", marginTop: 20 }} onClick={() => onRegister(camp)}>Register Now</Btn>
        <Btn variant="ghost" size="md" style={{ width: "100%", marginTop: 10 }}>Save for later</Btn>
        <div style={{ marginTop: 18, padding: "12px 14px", background: "var(--bee-info-tint)", color: "var(--bee-info)", borderRadius: 10, fontSize: 12 }}>
          ✓ Free cancellation up to 14 days before camp.
        </div>
      </div>
    </div>
  </div>
);

// ============ REGISTER STEP 1 ============
const RegisterScreen = ({ camp, onNav, onSubmit }) => {
  const [data, setData] = React.useState({ first: "Avery", last: "", dob: "05 / 14 / 2014", age: "" });
  const errors = {};
  return (
    <div>
      <StepProgress current={1} />
      <div style={{ padding: "48px 80px", display: "grid", gridTemplateColumns: "1fr 360px", gap: 48 }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 700, fontFamily: "var(--bee-font-ui)" }}>Player Information</div>
          <div style={{ marginTop: 20, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
            <Field label="First name" icon={Icons.user} value={data.first} onChange={(v) => setData({ ...data, first: v })} />
            <Field label="Last name" icon={Icons.user} value={data.last} placeholder="Last name" onChange={(v) => setData({ ...data, last: v })} />
            <Field label="Date of birth" icon={Icons.calendar} value={data.dob} onChange={(v) => setData({ ...data, dob: v })} />
            <Select label="Age group at camp" value={data.age} onChange={(v) => setData({ ...data, age: v })} options={["U8", "U10", "U12", "U14", "U16"]} placeholder="Select age group" />
          </div>
          <div style={{ marginTop: 20 }}>
            <InfoBanner>You'll enter medical information in a later step.</InfoBanner>
          </div>
          <div style={{ marginTop: 28, display: "flex", gap: 12 }}>
            <Btn variant="ghost" size="md" onClick={() => onNav("detail")}>Back</Btn>
            <Btn variant="yellow" size="lg" onClick={onSubmit}>Continue →</Btn>
          </div>
        </div>
        <div className="bee-card" style={{ padding: 22, height: "fit-content" }}>
          <div style={{ fontFamily: "var(--bee-font-ui)", fontSize: 12, color: "var(--bee-fg-muted)", letterSpacing: ".05em", textTransform: "uppercase", fontWeight: 700 }}>Registering for</div>
          <div style={{ fontSize: 18, fontWeight: 700, marginTop: 6 }}>{camp.title}</div>
          <div style={{ color: "var(--bee-fg-muted)", marginTop: 4, fontSize: 13 }}>{camp.dates} · {camp.location}</div>
          <div style={{ height: 1, background: "var(--bee-border)", margin: "16px 0" }} />
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
            <span>Camp fee</span><span style={{ fontWeight: 700 }}>${camp.price}.00</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14, marginTop: 6, color: "var(--bee-fg-muted)" }}>
            <span>Promo</span><span>—</span>
          </div>
          <div style={{ height: 1, background: "var(--bee-border)", margin: "16px 0" }} />
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 18, fontWeight: 700 }}>
            <span>Total</span><span>${camp.price}.00</span>
          </div>
        </div>
      </div>
    </div>
  );
};

// ============ CONFIRMATION ============
const ConfirmScreen = ({ camp, onNav }) => (
  <div style={{ padding: "80px 80px", display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center" }}>
    <div style={{ width: 110, height: 110, position: "relative" }}>
      <img src="../../assets/bee-icon-full.png" style={{ width: "100%", height: "100%" }} />
    </div>
    <div style={{ fontSize: 36, fontWeight: 700, fontFamily: "var(--bee-font-body)", marginTop: 24, lineHeight: 1.1 }}>You're in the Hive!</div>
    <p style={{ maxWidth: 540, color: "var(--bee-fg-muted)", marginTop: 14, lineHeight: 1.55 }}>
      Your spot at <b style={{ color: "var(--bee-ink)" }}>{camp.title}</b> is confirmed for {camp.dates}. We've emailed a receipt and a checklist of what to bring.
    </p>
    <div style={{ display: "flex", gap: 12, marginTop: 28 }}>
      <Btn variant="yellow" size="lg" onClick={() => onNav("home")}>Back to Home</Btn>
      <Btn variant="ghost" size="lg">Add to calendar</Btn>
    </div>
  </div>
);

window.HomeScreen = HomeScreen;
window.ListingScreen = ListingScreen;
window.DetailScreen = DetailScreen;
window.RegisterScreen = RegisterScreen;
window.ConfirmScreen = ConfirmScreen;