// ─── WIDER FIELD TAB ──────────────────────────────────────────────

function FieldSchool({ s }) {
  return (
    <article style={{
      paddingTop: 22,
      paddingBottom: 22,
      borderTop: "1px solid var(--line)",
    }}>
      <div style={{
        display: "flex",
        alignItems: "baseline",
        justifyContent: "space-between",
        gap: 14,
        marginBottom: 6,
      }}>
        <h4 className="serif" style={{
          margin: 0,
          fontSize: 22,
          fontWeight: 400,
          letterSpacing: "-0.01em",
          color: "var(--ink)",
          lineHeight: 1.15,
        }}>{s.name}</h4>
        <span className="serif" style={{
          fontSize: 14,
          fontStyle: "italic",
          color: "var(--gold)",
          whiteSpace: "nowrap",
        }}>{s.tuition}</span>
      </div>
      <p style={{
        margin: "0 0 14px",
        fontSize: 11.5,
        letterSpacing: "0.06em",
        color: "var(--ink-3)",
      }}>{s.loc} · {s.grades} · deadline {s.deadline}</p>

      <p style={{ margin: "0 0 12px", fontSize: 13.5, lineHeight: 1.65, color: "var(--ink-2)" }}>
        {s.note}
      </p>

      <div style={{
        display: "flex",
        gap: 14,
        alignItems: "flex-start",
        padding: "12px 0 0",
        borderTop: "1px dashed var(--line)",
      }}>
        <span className="serif" style={{
          fontSize: 11,
          fontStyle: "italic",
          color: "var(--gold)",
          letterSpacing: "0.14em",
          textTransform: "uppercase",
          paddingTop: 3,
          flexShrink: 0,
        }}>Porter lens</span>
        <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.65, color: "var(--forest)" }}>
          {s.lens}
        </p>
      </div>

      <p style={{
        margin: "10px 0 0",
        fontSize: 10.5,
        letterSpacing: "0.14em",
        textTransform: "uppercase",
        color: "var(--ink-3)",
        fontWeight: 500,
      }}>{s.pedagogy}</p>
    </article>
  );
}

function FieldTab() {
  const [openRegion, setOpenRegion] = React.useState("Westside");

  return (
    <div>
      {/* Cover image */}
      <div style={{
        position: "relative",
        margin: "0 -20px 36px",
        height: 280,
        overflow: "hidden",
        background: "var(--forest-deep)",
      }}>
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: `url(${IMG.field})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          filter: "saturate(0.85) contrast(1.05)",
        }} />
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(to top, rgba(26,38,32,0.85) 0%, rgba(26,38,32,0.30) 60%, rgba(26,38,32,0.10) 100%)",
        }} />
        <div style={{ position:"absolute", left:32, right:32, bottom:28, color:"var(--cream)" }}>
          <Eyebrow tone="cream">The wider field</Eyebrow>
          <h2 className="serif" style={{
            margin: "10px 0 0",
            fontSize: 44,
            fontWeight: 300,
            lineHeight: 1,
            letterSpacing: "-0.02em",
            color: "var(--cream)",
          }}>
            Twenty-six schools<br/>
            <em style={{ fontStyle:"italic", fontWeight: 400 }}>beyond your shortlist</em>
          </h2>
        </div>
      </div>

      <div style={{ padding: "0 20px" }}>
        {/* Market context */}
        <p className="serif" style={{
          margin: "0 0 6px",
          fontSize: 22,
          lineHeight: 1.4,
          color: "var(--ink)",
          fontStyle: "italic",
        }}>
          How the LA market works.
        </p>
        <p style={{ margin: "0 0 28px", fontSize: 14, lineHeight: 1.7, color: "var(--ink-2)" }}>
          Roughly 60 LAIS member schools and 100+ private elementary options when you include religious and specialty schools. Four things worth knowing before the brief.
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 0, marginBottom: 36 }}>
          {MARKET.map((m, i) => (
            <div key={i} style={{
              padding: "20px 0",
              borderTop: "1px solid var(--line)",
              borderBottom: i === MARKET.length - 1 ? "1px solid var(--line)" : "none",
            }}>
              <Eyebrow tone="gold">{m.eyebrow}</Eyebrow>
              <h4 className="serif" style={{
                margin: "8px 0 8px",
                fontSize: 19,
                fontWeight: 400,
                lineHeight: 1.3,
                color: "var(--ink)",
              }}>{m.title}</h4>
              <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.7, color: "var(--ink-2)" }}>
                {m.body}
              </p>
            </div>
          ))}
        </div>

        {/* The three suggestions */}
        <SectionRule label="Three suggestions" />
        <div style={{
          background: "var(--forest-deep)",
          color: "var(--cream)",
          padding: "32px 28px",
          margin: "0 -8px 36px",
        }}>
          {SUGGESTIONS.map((s, i) => (
            <div key={i} style={{
              paddingTop: i === 0 ? 0 : 22,
              paddingBottom: i === SUGGESTIONS.length - 1 ? 0 : 22,
              borderBottom: i < SUGGESTIONS.length - 1 ? "1px solid rgba(245,239,230,0.12)" : "none",
              display: "grid",
              gridTemplateColumns: "auto 1fr",
              gap: 18,
              alignItems: "start",
            }}>
              <span className="serif" style={{
                fontSize: 28,
                fontStyle: "italic",
                color: "var(--gold-soft)",
                lineHeight: 1,
                fontWeight: 400,
              }}>{s.num}</span>
              <div>
                <h4 className="serif" style={{
                  margin: "0 0 6px",
                  fontSize: 19,
                  fontWeight: 400,
                  lineHeight: 1.3,
                  color: "var(--cream)",
                }}>{s.title}</h4>
                <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.7, color: "rgba(245,239,230,0.78)" }}>
                  {s.body}
                </p>
              </div>
            </div>
          ))}
        </div>

        {/* Region accordions */}
        <SectionRule label="The schools, by region" />
        <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
          {WIDER_FIELD.map(group => {
            const open = openRegion === group.region;
            return (
              <div key={group.region} style={{ borderTop: "1px solid var(--line)" }}>
                <button
                  onClick={() => setOpenRegion(open ? null : group.region)}
                  style={{
                    width: "100%",
                    padding: "20px 0",
                    background: "transparent",
                    border: "none",
                    cursor: "pointer",
                    display: "flex",
                    alignItems: "baseline",
                    justifyContent: "space-between",
                    textAlign: "left",
                  }}>
                  <h3 className="serif" style={{
                    margin: 0,
                    fontSize: 26,
                    fontWeight: 400,
                    color: open ? "var(--forest)" : "var(--ink)",
                    letterSpacing: "-0.01em",
                  }}>{group.region}</h3>
                  <span className="serif" style={{
                    fontSize: 14,
                    fontStyle: "italic",
                    color: "var(--ink-3)",
                  }}>{group.schools.length} schools · {open ? "close" : "open"}</span>
                </button>
                {open && (
                  <div style={{ paddingBottom: 12 }}>
                    {group.schools.map(s => <FieldSchool key={s.name} s={s} />)}
                  </div>
                )}
              </div>
            );
          })}
          <div style={{ borderTop: "1px solid var(--line)" }} />
        </div>

        {/* Tuition table */}
        <SectionRule label="Tuition reality check" />
        <p style={{ margin: "0 0 6px", fontSize: 13.5, lineHeight: 1.7, color: "var(--ink-2)" }}>
          Lower-school tuition, 2025–26. Add new-student fees of $1,000–$2,500 and parent-association fees on top. Verify every figure with the school directly.
        </p>
        <div style={{
          marginTop: 22,
          borderTop: "1px solid var(--ink)",
          borderBottom: "1px solid var(--ink)",
        }}>
          <div style={{
            display: "grid",
            gridTemplateColumns: "1.7fr 1fr 1fr",
            padding: "10px 0",
            borderBottom: "1px solid var(--line)",
          }}>
            <Eyebrow>School</Eyebrow>
            <Eyebrow>Region</Eyebrow>
            <Eyebrow style={{ textAlign: "right" }}>Tuition</Eyebrow>
          </div>
          {TUITION_TABLE.map((t, i) => (
            <div key={t.school} style={{
              display: "grid",
              gridTemplateColumns: "1.7fr 1fr 1fr",
              padding: "11px 0",
              borderBottom: i < TUITION_TABLE.length - 1 ? "1px solid var(--line-2)" : "none",
              alignItems: "baseline",
            }}>
              <span style={{ fontSize: 13.5, color: "var(--ink)" }}>{t.school}</span>
              <span style={{ fontSize: 12, color: "var(--ink-3)" }}>{t.region}</span>
              <span className="serif" style={{
                fontSize: 16,
                fontStyle: "italic",
                color: "var(--forest)",
                textAlign: "right",
              }}>{t.tuition}</span>
            </div>
          ))}
        </div>

        {/* Pedagogy spectrum */}
        <SectionRule label="The pedagogy spectrum" />
        <p style={{ margin: "0 0 24px", fontSize: 14, lineHeight: 1.7, color: "var(--ink-2)" }}>
          A useful map, not rigid categories. For Porter — creative, sporty, smart, outgoing — the developmental-progressive middle is exactly the band that suits.
        </p>
        {PEDAGOGY.map((p, i) => (
          <div key={p.band} style={{
            padding: "22px 0",
            borderTop: "1px solid var(--line)",
            borderBottom: i === PEDAGOGY.length - 1 ? "1px solid var(--line)" : "none",
          }}>
            <div style={{
              display: "flex",
              alignItems: "baseline",
              justifyContent: "space-between",
              gap: 16,
              marginBottom: 10,
            }}>
              <h4 className="serif" style={{
                margin: 0,
                fontSize: 20,
                fontWeight: 400,
                color: "var(--ink)",
                letterSpacing: "-0.01em",
              }}>{p.band}</h4>
              <span className="serif" style={{
                fontSize: 13,
                fontStyle: "italic",
                color: "var(--gold)",
              }}>0{i+1} / 04</span>
            </div>
            <p style={{ margin: "0 0 12px", fontSize: 13.5, lineHeight: 1.7, color: "var(--ink-2)" }}>
              {p.desc}
            </p>
            <p style={{
              margin: 0,
              fontSize: 13,
              lineHeight: 1.7,
              color: "var(--forest)",
              fontStyle: "italic",
              fontFamily: "var(--serif)",
            }}>
              {p.schools.join(" · ")}
            </p>
          </div>
        ))}

        {/* Continuity */}
        <SectionRule label="Middle-school continuity" />
        <p style={{ margin: "0 0 24px", fontSize: 14, lineHeight: 1.7, color: "var(--ink-2)" }}>
          The variable that compounds across both kids. Every K–6 school means two more cycles for your family. Every K–12 school means zero.
        </p>
        {CONTINUITY.map((c, i) => (
          <div key={c.type} style={{
            padding: "20px 0",
            borderTop: "1px solid var(--line)",
            borderBottom: i === CONTINUITY.length - 1 ? "1px solid var(--line)" : "none",
          }}>
            <Eyebrow tone="gold">{c.type}</Eyebrow>
            <p style={{ margin: "10px 0 12px", fontSize: 13.5, lineHeight: 1.7, color: "var(--ink-2)" }}>
              {c.note}
            </p>
            <p style={{
              margin: 0,
              fontSize: 13,
              lineHeight: 1.7,
              color: "var(--forest)",
              fontStyle: "italic",
              fontFamily: "var(--serif)",
            }}>
              {c.schools.join(" · ")}
            </p>
          </div>
        ))}

        {/* Strategy */}
        <SectionRule label="Strategic considerations" />
        <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
          {STRATEGY.map((s, i) => (
            <div key={i} style={{
              padding: "22px 0",
              borderTop: "1px solid var(--line)",
              borderBottom: i === STRATEGY.length - 1 ? "1px solid var(--line)" : "none",
              display: "grid",
              gridTemplateColumns: "auto 1fr",
              gap: 22,
              alignItems: "start",
            }}>
              <span className="serif" style={{
                fontSize: 28,
                fontStyle: "italic",
                color: "var(--gold)",
                lineHeight: 1,
                fontWeight: 400,
                paddingTop: 4,
              }}>0{i+1}</span>
              <div>
                <Eyebrow>{s.eyebrow}</Eyebrow>
                <h4 className="serif" style={{
                  margin: "8px 0 8px",
                  fontSize: 19,
                  fontWeight: 400,
                  lineHeight: 1.3,
                  color: "var(--ink)",
                }}>{s.title}</h4>
                <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.7, color: "var(--ink-2)" }}>
                  {s.body}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.FieldTab = FieldTab;
