// ─── BOYS TAB — Porter | Tate pill toggle, profile per kid ──

function BoysTab({ kidId, setKidId }) {
  const kid = KIDS.find(k => k.id === kidId) || KIDS[0];

  return (
    <div>
      {/* Pill toggle: Porter | Tate */}
      <div style={{
        padding: "24px 20px 18px",
        display: "flex",
        gap: 8,
        alignItems: "center",
      }}>
        <Eyebrow tone="gold" style={{ marginRight: 4 }}>Our boys</Eyebrow>
        <div style={{ flex:1 }} />
        <div style={{
          display: "flex",
          gap: 0,
          background: "var(--cream-warm)",
          borderRadius: 999,
          padding: 3,
        }}>
          {KIDS.map(k => {
            const active = k.id === kidId;
            return (
              <button key={k.id}
                onClick={() => setKidId(k.id)}
                style={{
                  background: active ? "var(--forest)" : "transparent",
                  color: active ? "var(--cream)" : "var(--ink-2)",
                  border: "none",
                  borderRadius: 999,
                  padding: "8px 18px",
                  fontFamily: "var(--sans)",
                  fontSize: 11,
                  fontWeight: 500,
                  letterSpacing: "0.14em",
                  textTransform: "uppercase",
                  cursor: "pointer",
                  transition: "all 0.15s ease",
                }}>{k.name}</button>
            );
          })}
        </div>
      </div>

      {/* Image — full bleed for Porter, monogram for Tate */}
      {kid.image ? (
        <KidPortrait kid={kid} />
      ) : (
        <KidMonogram kid={kid} />
      )}

      <div style={{ padding: "0 20px" }}>
        {/* Tagline */}
        <p className="serif" style={{
          margin: "0 0 22px",
          fontSize: 24,
          lineHeight: 1.3,
          color: "var(--ink)",
          fontWeight: 400,
          fontStyle: "italic",
        }}>
          {kid.tagline}
        </p>

        {/* Quick facts */}
        <div style={{
          display:"grid", gridTemplateColumns:"1fr 1fr",
          gap:0,
          borderTop: "1px solid var(--line)",
          borderBottom: "1px solid var(--line)",
          padding: "16px 0",
          marginBottom: 28,
        }}>
          <Fact label="Age"        value={kid.age} />
          <Fact label="Cycle"      value={kid.targetYear} />
          <Fact label="Applying for" value={kid.applyingFor} colSpan={2} />
        </div>

        {/* Traits */}
        <Eyebrow tone="gold">What we see in {kid.name}</Eyebrow>
        <div style={{ display:"flex", flexDirection:"column", gap:14, margin:"14px 0 32px" }}>
          {kid.traits.map((t, i) => (
            <div key={t.label} style={{
              display:"grid", gridTemplateColumns:"auto 1fr",
              gap:18, alignItems:"baseline",
              paddingBottom: i === kid.traits.length-1 ? 0 : 14,
              borderBottom: i === kid.traits.length-1 ? "none" : "1px solid var(--line-2)",
            }}>
              <div className="serif" style={{
                fontSize: 22, fontStyle:"italic",
                color:"var(--forest)",
                fontWeight: 500,
                whiteSpace:"nowrap",
              }}>{t.label}</div>
              <p style={{
                margin: 0, fontSize: 13.5, lineHeight: 1.6,
                color: "var(--ink-2)",
              }}>{t.note}</p>
            </div>
          ))}
        </div>

        {/* Hopes */}
        <SectionRule label="What we hope school does for him" />
        <div style={{ display:"flex", flexDirection:"column", gap: 14, marginBottom: 32 }}>
          {kid.hopes.map((h, i) => (
            <div key={i} style={{
              display:"grid", gridTemplateColumns:"auto 1fr", gap:18, alignItems:"start",
            }}>
              <span className="serif" style={{
                fontSize:24, fontStyle:"italic", color:"var(--gold)", lineHeight:1,
                fontWeight:400, marginTop:2,
              }}>0{i+1}</span>
              <p style={{
                margin:0, fontSize:14.5, lineHeight:1.65,
                color:"var(--ink-2)",
              }}>{h}</p>
            </div>
          ))}
        </div>

        {/* Watch-outs */}
        <SectionRule label="Things to keep in mind" />
        <div style={{ display:"flex", flexDirection:"column", gap: 14, marginBottom: 32 }}>
          {kid.watchouts.map((w, i) => (
            <p key={i} style={{
              margin:0, fontSize:14, lineHeight:1.65,
              color:"var(--ink-2)",
              borderLeft:"2px solid var(--gold-soft)",
              paddingLeft:14,
            }}>{w}</p>
          ))}
        </div>

        {/* Tate-specific footnote when on Tate */}
        {kid.id === "tate" && <TatePathways />}

        {/* Porter-specific AI block */}
        {kid.id === "porter" && <PorterAILens />}

        <div style={{ height: 40 }} />
      </div>
    </div>
  );
}

function KidPortrait({ kid }) {
  return (
    <div style={{
      position: "relative",
      margin: "0 -20px 32px",
      height: 460,
      overflow: "hidden",
      background: "var(--forest-deep)",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: `url(${kid.image})`,
        backgroundSize: "cover",
        backgroundPosition: kid.id === "tate" ? "center 18%" : "center 25%",
        filter: "saturate(0.95) contrast(1.02)",
      }} />
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(to top, rgba(26,38,32,0.85) 0%, rgba(26,38,32,0.20) 50%, rgba(26,38,32,0.05) 100%)",
      }} />
      <div style={{
        position: "absolute", left: 20, right: 20, bottom: 28,
        color: "var(--cream)",
      }}>
        <Eyebrow tone="cream">Applicant profile</Eyebrow>
        <h2 className="serif" style={{
          margin: "10px 0 0", fontSize: 56, fontWeight: 400,
          lineHeight: 1, letterSpacing: "-0.02em", color:"var(--cream)",
        }}>{kid.name}</h2>
        <p style={{
          margin:"10px 0 0", fontSize:13, color:"rgba(245,239,230,0.7)",
        }}>{kid.applyingFor}</p>
      </div>
    </div>
  );
}

function KidMonogram({ kid }) {
  const initial = kid.name[0];
  return (
    <div style={{
      position: "relative",
      margin: "0 -20px 32px",
      height: 360,
      overflow: "hidden",
      background: "linear-gradient(135deg, var(--forest-deep) 0%, var(--forest) 100%)",
    }}>
      {/* Decorative ornament pattern */}
      <div style={{
        position:"absolute", inset:0, opacity:0.08,
        backgroundImage: "radial-gradient(circle at 20% 30%, rgba(245,239,230,0.3) 1px, transparent 1px), radial-gradient(circle at 70% 70%, rgba(245,239,230,0.3) 1px, transparent 1px)",
        backgroundSize: "60px 60px",
      }} />
      {/* Big italic monogram */}
      <div style={{
        position:"absolute", inset:0,
        display:"flex", alignItems:"center", justifyContent:"center",
      }}>
        <div className="serif" style={{
          fontSize: 280, fontStyle:"italic", fontWeight:300,
          color:"var(--cream)", opacity:0.18,
          lineHeight:1, letterSpacing:"-0.04em",
        }}>{initial}</div>
      </div>
      <div style={{
        position: "absolute", left: 20, right: 20, bottom: 28,
        color: "var(--cream)",
      }}>
        <Eyebrow tone="cream">Applicant profile · future</Eyebrow>
        <h2 className="serif" style={{
          margin: "10px 0 0", fontSize: 56, fontWeight: 400,
          lineHeight: 1, letterSpacing: "-0.02em", color:"var(--cream)",
        }}>{kid.name}</h2>
        <p style={{
          margin:"10px 0 0", fontSize:13, color:"rgba(245,239,230,0.7)",
        }}>{kid.applyingFor}</p>
      </div>
      {/* Pencil-style note: portrait coming */}
      <div style={{
        position:"absolute", top: 24, right: 20,
        fontFamily:"var(--sans)", fontSize:9, fontWeight:500,
        letterSpacing:"0.18em", textTransform:"uppercase",
        color:"rgba(245,239,230,0.5)",
        border:"1px solid rgba(245,239,230,0.2)",
        padding:"6px 10px", borderRadius:2,
      }}>Portrait pending</div>
    </div>
  );
}

function Fact({ label, value, colSpan }) {
  return (
    <div style={{
      gridColumn: colSpan ? `span ${colSpan}` : "auto",
      paddingTop: 4,
    }}>
      <Eyebrow tone="default" style={{ fontSize:9, marginBottom:4 }}>{label}</Eyebrow>
      <div className="serif" style={{
        fontSize: 18, fontWeight: 500,
        color:"var(--forest-deep)",
        letterSpacing:"-0.005em",
      }}>{value}</div>
    </div>
  );
}

function TatePathways() {
  return (
    <div style={{
      background:"var(--cream-warm)",
      padding:"24px 22px",
      margin:"24px -8px 0",
    }}>
      <Eyebrow tone="gold">Tate's pathway, school by school</Eyebrow>
      <p className="serif" style={{
        margin:"10px 0 18px", fontSize: 18, lineHeight:1.4,
        color:"var(--forest-deep)", fontStyle:"italic", fontWeight:400,
      }}>
        Where Porter lands changes Tate's odds. Here's the sibling lift at each shortlisted school.
      </p>
      <div style={{ display:"flex", flexDirection:"column", gap:0 }}>
        {Object.entries(SIBLING_PATHWAY).map(([name, p], i, arr) => (
          <div key={name} style={{
            padding:"14px 0",
            borderBottom: i === arr.length-1 ? "none" : "1px solid rgba(31,27,22,0.08)",
          }}>
            <div style={{ display:"flex", alignItems:"center", gap:12, marginBottom:6 }}>
              <div className="serif" style={{
                fontSize:15, fontWeight:500, color:"var(--forest-deep)", flex:1,
              }}>{name}</div>
              <Pill>{p.grades}</Pill>
              <Dots value={p.strength} max={5} />
            </div>
            <p style={{
              margin:0, fontSize:12.5, lineHeight:1.55, color:"var(--ink-2)",
            }}>{p.note}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function PorterAILens() {
  const aiTags = [
    "Project-based learning", "Student agency", "Creative risk-taking",
    "Emotional intelligence", "Collaboration over competition",
  ];
  return (
    <div style={{
      background: "var(--forest-deep)",
      color: "var(--cream)",
      padding: "32px 28px",
      margin: "0 -8px",
    }}>
      <Eyebrow tone="cream">Choosing for the world Porter will grow up in</Eyebrow>
      <p className="serif" style={{
        margin: "12px 0 14px", fontSize: 22, lineHeight: 1.4,
        color: "var(--cream)", fontWeight: 400,
      }}>
        By the time Porter is in 5th grade, AI will handle most rote academic tasks. The skills that hold value are the ones AI can't replicate.
      </p>
      <p style={{
        margin: "0 0 14px", fontSize: 14, lineHeight: 1.7,
        color: "rgba(245,239,230,0.78)",
      }}>
        Creative thinking, emotional intelligence, collaboration, and the ability to ask original questions. Prioritise places that develop the whole child over those that drill academic performance early. Ask schools directly: how do they think about preparing kids for a world of AI? The answers will be revealing.
      </p>
      <div style={{ display:"flex", flexWrap:"wrap", gap:6, marginTop: 18 }}>
        {aiTags.map(t => (
          <span key={t} style={{
            fontSize: 11, padding: "5px 11px",
            border: "1px solid rgba(245,239,230,0.25)",
            borderRadius: 2, color: "rgba(245,239,230,0.85)",
            fontWeight: 400, letterSpacing: "0.02em",
          }}>{t}</span>
        ))}
      </div>
    </div>
  );
}

window.BoysTab = BoysTab;