// ─── PORTER TAB ───────────────────────────────────────────────────

function PorterTab() {
  const traits = ["Creative", "Sporty", "Outgoing", "Smart", "Wagon Wheel"];

  const reminders = [
    "The LAIS teacher evaluation includes a family section. Schools score parent expectations, boundaries, and cooperation with staff. They are evaluating how you parent, not just Porter.",
    "Apply to at least 4–5 schools where you could genuinely be happy. Admissions outcomes vary and applying to fewer is a real risk, even for strong candidates.",
    "The 'greatest challenges' question tends to trip families up. Ask Mike & Ruth to review your wording before submitting — they offer to do this explicitly.",
    "Ask about sibling preference policies at every school you tour. It affects the Tate timeline significantly.",
  ];

  const aiTags = [
    "Project-based learning",
    "Student agency",
    "Creative risk-taking",
    "Emotional intelligence",
    "Collaboration over competition",
  ];

  return (
    <div>
      {/* Full-bleed Porter portrait — LA golden hour atmosphere */}
      <div style={{
        position: "relative",
        margin: "0 -20px 36px",
        height: 480,
        overflow: "hidden",
        background: "var(--forest-deep)",
      }}>
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: `url(${IMG.porter})`,
          backgroundSize: "cover",
          backgroundPosition: "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)",
          }}>Porter</h2>
        </div>
      </div>

      {/* Trait line */}
      <div style={{ padding: "0 20px" }}>
        <div style={{
          display: "flex", flexWrap: "wrap", gap: 0,
          alignItems: "center",
          paddingBottom: 24,
          borderBottom: "1px solid var(--line)",
          marginBottom: 28,
        }}>
          {traits.map((t, i) => (
            <React.Fragment key={t}>
              <span className="serif" style={{
                fontSize: 22, fontStyle: "italic",
                color: "var(--forest)",
                fontWeight: 400,
              }}>{t}</span>
              {i < traits.length - 1 && (
                <Ornament size={8} style={{ margin: "0 16px", opacity: 0.7 }} />
              )}
            </React.Fragment>
          ))}
        </div>

        {/* Reading column */}
        <p className="serif" style={{
          margin: "0 0 18px",
          fontSize: 22,
          lineHeight: 1.4,
          color: "var(--ink)",
          fontWeight: 400,
        }}>
          Porter is creative and sporty, smart and visibly outgoing. That combination is genuinely useful in this process — schools will notice his social confidence and energy.
        </p>
        <p style={{
          margin: "0 0 14px",
          fontSize: 14.5,
          lineHeight: 1.7,
          color: "var(--ink-2)",
        }}>
          The creative streak makes arts-forward schools a natural fit, and the sportiness means you should also be asking about physical education, outdoor time, and whether the school has space for active kids to move.
        </p>
        <p style={{
          margin: 0,
          fontSize: 14.5,
          lineHeight: 1.7,
          color: "var(--ink-2)",
        }}>
          The schools likeliest to suit him: <em className="serif" style={{ fontStyle:"italic", color:"var(--forest)" }}>Center</em> for its warmth and developmental culture, <em className="serif" style={{ fontStyle:"italic", color:"var(--forest)" }}>Oakwood</em> for its progressive energy, <em className="serif" style={{ fontStyle:"italic", color:"var(--forest)" }}>Crossroads</em> and <em className="serif" style={{ fontStyle:"italic", color:"var(--forest)" }}>The Willows</em> for arts-first environments where creative kids lead.
        </p>

        {/* Tate */}
        <SectionRule label="Tate · the second cycle" />
        <p style={{
          margin: 0,
          fontSize: 14.5,
          lineHeight: 1.7,
          color: "var(--ink-2)",
        }}>
          Tate will likely apply for Fall 2029 K, with the process starting Spring–Fall 2028. Many families find the second cycle significantly easier — you'll know the landscape, have alumni connections, and the schools will already know your family. Where Porter lands matters for Tate's process too. <em className="serif" style={{ fontStyle:"italic", color:"var(--forest)" }}>Worth flagging sibling preference policies on every tour.</em>
        </p>

        {/* AI lens */}
        <SectionRule label="The AI lens" />
        <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>

        {/* Reminders */}
        <SectionRule label="Things to keep in mind" />
        <div style={{ display:"flex", flexDirection:"column", gap: 18 }}>
          {reminders.map((r, i) => (
            <div key={i} style={{
              display: "grid",
              gridTemplateColumns: "auto 1fr",
              gap: 18,
              alignItems: "start",
            }}>
              <span className="serif" style={{
                fontSize: 28,
                fontStyle: "italic",
                color: "var(--gold)",
                lineHeight: 1,
                fontWeight: 400,
                marginTop: 4,
              }}>0{i+1}</span>
              <p style={{
                margin: 0,
                fontSize: 14.5,
                lineHeight: 1.65,
                color: "var(--ink-2)",
              }}>{r}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.PorterTab = PorterTab;
