// site-tickets-submit.jsx — Tickets & venues + Submit a film form.

function Tickets({ navigate }) {
  const d = useSite();
  const page = d.festival.ticketsPage || {};
  return (
    <Page k="tickets">
      <section className="dark section tight">
        <div className="wrap">
          <span className="eyebrow">{page.eyebrow || ("Box Office \u00b7 " + d.festival.year)}</span>
          <h1 className="display" style={{ fontSize: "clamp(48px,10vw,140px)", margin: "16px 0 24px" }}>{page.heading || "Tickets"}</h1>
          <p className="lead muted" style={{ maxWidth: 540 }}>{page.body || "Eight nights of student short cinema. Most screenings are free with online RSVP; the closing Paper Bird Awards night at SCALE is ticketed."}</p>
        </div>
      </section>

      {/* tiers */}
      <section className="section">
        <div className="wrap">
          <Kicker n="§ 01">Passes & tickets</Kicker>
          <div className="grid cols-4 ticket-grid">
            {d.tickets.map((t, i) => {
              const free = String(t.price) === "0";
              const feature = i === 2;
              return (
                <div key={t.id} style={{ display: "flex", flexDirection: "column", padding: "26px 24px", minHeight: 260, background: feature ? "var(--purple)" : "var(--card)", color: feature ? "#fff" : "var(--ink)", border: feature ? "none" : "1px solid var(--line)" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start" }}>
                    <span className="label" style={{ color: feature ? "rgba(255,255,255,0.7)" : "var(--muted)" }}>0{i + 1}</span>
                    {feature && <span className="tag" style={{ background: "var(--yellow)", borderColor: "var(--yellow)", color: "var(--ink)" }}>Best value</span>}
                  </div>
                  <div className="display" style={{ fontSize: "clamp(40px,5vw,68px)", marginTop: 18 }}>{free ? "Free" : "£" + t.price}</div>
                  <div className="display" style={{ fontSize: 22, fontStretch: "100%", fontWeight: 700, marginTop: 8 }}>{t.name}</div>
                  <p style={{ marginTop: 10, fontSize: 14.5, opacity: 0.8, flex: 1 }}>{t.desc}</p>
                  <button className={`btn ${feature ? "coral" : "outline"}`} style={{ marginTop: 16, width: "100%" }}
                    onClick={() => t.link ? window.open(t.link, "_blank", "noopener") : null}>
                    {free ? "Reserve" : "Buy"} <SIcon name="arrowR" /></button>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* venues */}
      <section className="section dark">
        <div className="wrap">
          <Kicker n="§ 02">Venues</Kicker>
          <h2 className="display" style={{ fontSize: "clamp(30px,5vw,64px)", marginBottom: 36 }}>Where it happens.</h2>
          <div className="grid cols-3">
            {d.venues.map((v) => (
              <div key={v.id} style={{ borderTop: "1px solid var(--line-d)", paddingTop: 22 }}>
                <span style={{ color: "var(--coral-bright)" }}><SIcon name="pin" style={{ width: 22, height: 22 }} /></span>
                <div className="display" style={{ fontSize: 26, fontStretch: "100%", fontWeight: 700, marginTop: 14 }}>{v.name}</div>
                <div className="muted" style={{ fontSize: 14.5, marginTop: 8, lineHeight: 1.6 }}>{v.address}</div>
                {v.capacity > 0 && <div className="label muted" style={{ marginTop: 12 }}>Capacity {v.capacity}</div>}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* info strip */}
      <section className="section tight">
        <div className="wrap">
          <div className="grid cols-3">
            {[["Access", "All venues are step-free. Captioned and relaxed screenings are marked in the programme."], ["Box office", "Opens one hour before the first daily screening. Card only at the door."], ["Students", "LJMU students attend free with valid ID — reserve seats online in advance."]].map(([h, b]) => (
              <div key={h}>
                <div className="display" style={{ fontSize: 24, fontStretch: "100%", fontWeight: 700 }}>{h}</div>
                <p className="muted" style={{ fontSize: 15, marginTop: 10, lineHeight: 1.6 }}>{b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Schedule strip */}
      {(d.schedule || []).length > 0 && (
      <section className="section" style={{ background: "var(--paper-2)" }}>
        <div className="wrap">
          <Kicker n="§ 03">Schedule</Kicker>
          <h2 className="display" style={{ fontSize: "clamp(28px,4vw,52px)", marginBottom: 28 }}>Eight nights.</h2>
          <div style={{ borderTop: "1px solid var(--line)" }}>
            {d.schedule.map((s) => (
              <div key={s.id} style={{ display: "grid", gridTemplateColumns: "1.2fr 0.6fr 2fr 1.8fr 1fr", padding: "18px 0", borderBottom: "1px solid var(--line)", alignItems: "baseline", gap: 16 }}>
                <div className="display" style={{ fontSize: "clamp(22px,2.6vw,32px)" }}>{s.date}</div>
                <div className="label muted">{s.time}</div>
                <div className="display" style={{ fontSize: "clamp(18px,1.8vw,24px)" }}>{s.title}</div>
                <div className="muted" style={{ fontSize: 14 }}>{s.venue}</div>
                <div style={{ textAlign: "right" }}>
                  <span className="tag" style={{ borderColor: "var(--ink)", color: "var(--ink)" }}>{s.strand}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      )}
    </Page>
  );
}

// ── Submit ───────────────────────────────────────────────────────────────────
function renderSubmissionBody(text) {
  if (!text) return null;
  return text.split(/\n\n+/).map((para, i) => {
    const lines = para.split("\n").filter(l => l.trim());
    if (!lines.length) return null;
    const isList = lines.every(l => /^[-•]/.test(l.trim()));
    if (isList) return (
      <ul key={i} style={{ listStyle: "none", padding: 0, margin: "0 0 18px" }}>
        {lines.map((line, j) => (
          <li key={j} style={{ paddingLeft: 20, position: "relative", marginBottom: 8, lineHeight: 1.7 }}>
            <span style={{ position: "absolute", left: 0, color: "var(--coral)" }}>—</span>
            {line.replace(/^[-•]\s*/, "")}
          </li>
        ))}
      </ul>
    );
    return (
      <p key={i} style={{ marginBottom: 18, lineHeight: 1.8 }}>
        {lines.map((line, j) => (
          <React.Fragment key={j}>{line}{j < lines.length - 1 && <br />}</React.Fragment>
        ))}
      </p>
    );
  });
}

function Submit({ navigate }) {
  const d = useSite();
  const sub = d.festival.submissions || {};
  const sections = sub.sections || [];
  const box = sub.box || {};
  const submitOpen = box.submitOpen !== false;

  return (
    <Page k="submit">
      {/* Dark hero */}
      <section className="dark section tight">
        <div className="wrap">
          <span className="eyebrow">{sub.heroEyebrow || ("Submissions \u00b7 " + d.festival.year)}</span>
          <h1 className="display" style={{ fontSize: "clamp(44px,8vw,116px)", margin: "16px 0 24px" }}>{sub.heroTitle || "Submit a film."}</h1>
          <p className="lead muted" style={{ maxWidth: 600 }}>{sub.heroLead || "We accept short films from students at film schools and universities worldwide."}</p>
        </div>
      </section>

      <section className="section">
        <div className="wrap submit-grid" style={{ display: "grid", gridTemplateColumns: "1fr 340px", gap: "clamp(32px,5vw,80px)", alignItems: "start" }}>

          {/* Left: editorial content sections */}
          <div>
            {sections.map((sec, i) => (
              <div key={sec.id || i} style={{ marginBottom: "clamp(40px,5vw,64px)", paddingBottom: "clamp(40px,5vw,64px)", borderBottom: i < sections.length - 1 ? "1px solid var(--line)" : "none" }}>
                <Kicker n={"§ 0" + (i + 1)}>{sec.title}</Kicker>
                <h2 className="display" style={{ fontSize: "clamp(26px,3vw,40px)", margin: "14px 0 22px", fontStretch: "100%" }}>{sec.title}.</h2>
                <div style={{ fontSize: 16, lineHeight: 1.8, color: "var(--muted)" }}>
                  {renderSubmissionBody(sec.body)}
                </div>
              </div>
            ))}
          </div>

          {/* Right: sticky submission box */}
          <aside style={{ position: "sticky", top: 88 }}>
            <div style={{ background: "var(--ink)", color: "var(--paper)", padding: "clamp(24px,3vw,36px)" }}>
              <h3 className="display" style={{ fontSize: "clamp(20px,2.5vw,28px)", marginBottom: 20, color: "var(--paper)", textTransform: "uppercase" }}>
                {box.title || "Before you submit"}
              </h3>
              {/* Rows */}
              <div style={{ marginBottom: 20 }}>
                {(box.rows || []).map((row, i) => (
                  <div key={row.id || i} style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "12px 0", borderBottom: "1px solid rgba(240,238,233,0.1)" }}>
                    <span style={{ fontSize: 11, fontFamily: "var(--mono)", letterSpacing: ".1em", textTransform: "uppercase", color: "rgba(240,238,233,0.5)" }}>{row.label}</span>
                    <span style={{ fontSize: 12, fontFamily: "var(--mono)", letterSpacing: ".06em", textTransform: "uppercase", color: "var(--paper)" }}>{row.value}</span>
                  </div>
                ))}
              </div>
              {/* Email */}
              {box.email && (
                <p style={{ fontSize: 13.5, color: "rgba(240,238,233,0.6)", marginBottom: 20, lineHeight: 1.6 }}>
                  Questions? Write to <a href={"mailto:" + box.email} style={{ color: "var(--coral)", textDecoration: "none" }}>{box.email}</a>
                </p>
              )}
              <div style={{ borderTop: "1px solid rgba(240,238,233,0.12)", paddingTop: 20 }}>
                {submitOpen ? (
                  <a href={box.submitUrl || "https://filmfreeway.com/ljmumashortfilmfestival"} target="_blank" rel="noopener noreferrer" style={{ display: "block" }}>
                    <button className="btn coral" style={{ width: "100%", justifyContent: "center", padding: "15px 20px", fontSize: 13, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase" }}>
                      Submit your film now <SIcon name="arrowR" />
                    </button>
                  </a>
                ) : (
                  <button className="btn" disabled style={{ width: "100%", justifyContent: "center", padding: "15px 20px", opacity: 0.4, cursor: "not-allowed", fontSize: 13, textTransform: "uppercase", letterSpacing: ".06em" }}>
                    Submissions closed
                  </button>
                )}
              </div>
            </div>
          </aside>
        </div>
      </section>
    </Page>
  );
}

Object.assign(window, { Tickets, Submit });
