// NIL (Name, Image & Likeness) service section
// Prominent feature on the Subscription Plans landing page

const NILSection = ({ asH1 } = {}) => {
  const Heading = asH1 ? "h1" : "h2";
  return (
  <section id="nil" style={{ background: "var(--cream-2)", color: "var(--ink)", padding: "120px 0", position: "relative", overflow: "hidden" }}>
    <div className="container">

      {/* ── Header band ── */}
      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 56, alignItems: "end", marginBottom: 56 }}>
        <div>
          <div className="mono-label" style={{ fontSize: 12, color: "var(--sun)", marginBottom: 24 }}>
            <span className="dot" style={{ marginRight: 10 }}/>NIL · NAME, IMAGE &amp; LIKENESS · NEW MEXICO
          </div>
          <Heading className="serif" style={{
            fontSize: "clamp(56px, 7vw, 104px)", lineHeight: 1.02,
            letterSpacing: "-0.02em", margin: 0, color: "var(--ink)"
          }}>
            For New Mexico's <em style={{ color: "var(--sun)" }}>athletes.</em>
          </Heading>
        </div>
        <div>
          <p className="serif" style={{
            fontSize: 22, fontStyle: "italic", lineHeight: 1.4,
            margin: 0, color: "var(--ink-soft)"
          }}>
            One non-compliant deal can cost a scholarship, a roster spot, or a year of eligibility. Your NIL deserves a New Mexico attorney — not a national firm three time zones away, and not an agent taking a cut.
          </p>
          <div style={{ marginTop: 22, fontSize: 13, color: "var(--ink-soft)", display: "flex", gap: 14, flexWrap: "wrap" }}>
            <strong style={{ color: "var(--ink)" }}>NM &amp; TX licensed</strong>
            <span>·</span>
            <span>Albuquerque &amp; Las Cruces</span>
            <span>·</span>
            <span>Fiduciary duty to you, not a commission</span>
          </div>
        </div>
      </div>

      {/* ── Stats strip (dark) ── */}
      <div style={{
        background: "var(--ink)", color: "var(--cream)",
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
        marginBottom: 72
      }}>
        {NIL_STATS.map((s, i) => (
          <div key={s.k} style={{
            padding: "32px 26px",
            borderLeft: i > 0 ? "1px solid rgba(245,239,227,0.18)" : "0"
          }}>
            <div className="numeric" style={{
              fontSize: 48, lineHeight: 1, letterSpacing: "-0.02em",
              fontWeight: 500, color: "var(--sun-soft)"
            }}>{s.k}</div>
            <div style={{ marginTop: 12, fontSize: 13, lineHeight: 1.45, color: "rgba(245,239,227,0.82)" }}>
              {s.v}
            </div>
          </div>
        ))}
      </div>

      {/* ── What your NIL attorney handles ── */}
      <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 28 }}>
        <span className="mono-label" style={{ fontSize: 11, color: "var(--sun)" }}>WHAT YOUR NIL ATTORNEY HANDLES</span>
        <h3 className="serif" style={{ fontSize: 40, margin: 0, lineHeight: 1, letterSpacing: "-0.01em" }}>
          The whole stack.
        </h3>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18, marginBottom: 80 }}>
        {NIL_HANDLE.map(card => (
          <div key={card.k} style={{
            background: "var(--paper)", border: "1px solid var(--rule)",
            padding: "28px 26px"
          }}>
            <div className="mono-label numeric" style={{ fontSize: 11, color: "var(--sun)", marginBottom: 14 }}>{card.k}</div>
            <h4 className="serif" style={{ fontSize: 26, lineHeight: 1.1, margin: "0 0 16px", color: "var(--ink)" }}>{card.h}</h4>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 9 }}>
              {card.bullets.map((b, i) => (
                <li key={i} style={{ display: "flex", gap: 10, fontSize: 13.5, lineHeight: 1.5, color: "var(--ink)" }}>
                  <span style={{ flex: "none", marginTop: 7, width: 5, height: 5, background: "var(--sun)", borderRadius: "50%" }}/>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      {/* ── Schools represented ── */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 2.2fr", gap: 56, alignItems: "start", marginBottom: 64 }}>
        <div>
          <span className="mono-label" style={{ fontSize: 11, color: "var(--sun)" }}>WHO WE REPRESENT</span>
          <h3 className="serif" style={{ fontSize: 44, lineHeight: 1.05, margin: "16px 0 14px", letterSpacing: "-0.01em" }}>
            From the Lobos to the Miners.
          </h3>
          <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-soft)", margin: 0 }}>
            UNM, NMSU, UTEP, and NMAA-eligible high-school athletes — plus the parents and families helping them figure it out. With offices in Albuquerque and Las Cruces and a Texas license for El Paso, we're where you are.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
          {NIL_SCHOOLS.map(s => (
            <div key={s.n} style={{
              background: "var(--paper)", color: "var(--ink)",
              padding: "22px 18px", minHeight: 140,
              border: "1px solid var(--rule)",
              display: "flex", flexDirection: "column", justifyContent: "space-between"
            }}>
              <div className="serif" style={{ fontSize: 26, lineHeight: 1.05 }}>{s.n}</div>
              <div className="mono-label" style={{ fontSize: 10, color: "var(--sun)" }}>{s.loc}</div>
            </div>
          ))}
        </div>
      </div>

      {/* ── Red flags band ── */}
      <div style={{
        background: "var(--sun)", color: "var(--ink)",
        padding: "40px 40px",
        display: "grid", gridTemplateColumns: "1fr 1.6fr",
        gap: 40, alignItems: "center", marginBottom: 64
      }}>
        <div>
          <div className="mono-label" style={{ fontSize: 11, color: "var(--ink)", marginBottom: 10 }}>⚐ RED FLAGS</div>
          <h3 className="serif" style={{ fontSize: 40, margin: 0, lineHeight: 0.98, letterSpacing: "-0.01em" }}>
            If your contract has one of these, stop.
          </h3>
          <p className="serif" style={{ fontSize: 16, fontStyle: "italic", lineHeight: 1.4, margin: "12px 0 0", color: "var(--ink)" }}>
            Most are negotiable — but only before you sign.
          </p>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
          {NIL_REDFLAGS.map(f => (
            <span key={f} style={{
              background: "var(--ink)", color: "var(--cream)",
              padding: "9px 16px", fontSize: 13, lineHeight: 1.2,
              borderRadius: 999, whiteSpace: "nowrap"
            }}>{f}</span>
          ))}
        </div>
      </div>

      {/* ── How it fits the subscription ── */}
      <div style={{
        background: "var(--paper)", color: "var(--ink)",
        padding: "48px 48px",
        display: "grid", gridTemplateColumns: "1.25fr 1fr",
        gap: 56, alignItems: "start",
        border: "1px solid var(--rule)"
      }}>
        <div>
          <span className="mono-label" style={{ fontSize: 11, color: "var(--sun)" }}>HOW IT FITS YOUR SUBSCRIPTION</span>
          <h3 className="serif" style={{ fontSize: 44, lineHeight: 1.04, margin: "14px 0 14px", letterSpacing: "-0.01em" }}>
            Your NIL attorney, on retainer.
          </h3>
          <p className="serif" style={{ fontSize: 19, fontStyle: "italic", lineHeight: 1.45, color: "var(--ink-soft)", margin: "0 0 22px" }}>
            NIL contracts arrive without warning. A subscription gives you the answer within your plan's reply window — no meter running, no surprise bill.
          </p>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
            {[
              "Quick contract questions: included in your monthly calls",
              "Full deal review or LLC formation: flat-fee project at the 25% member discount",
              "Compliance read before you submit to NIL Go: included",
              "Agent termination or dispute work: separate engagement at member rates",
              "CPA referral for self-employment tax, GRT, and quarterly estimates"
            ].map((t, i) => (
              <li key={i} style={{ display: "flex", gap: 12, fontSize: 14.5, lineHeight: 1.55 }}>
                <Tick color="var(--sun)"/><span>{t}</span>
              </li>
            ))}
          </ul>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div className="mono-label" style={{ fontSize: 10, color: "var(--sun)" }}>RECOMMENDED PLANS FOR ATHLETES</div>

          <div style={{ background: "var(--cream-2)", border: "1px solid var(--rule)", padding: "22px 22px" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 }}>
              <div className="serif" style={{ fontSize: 24, lineHeight: 1.1 }}>Personal Premium</div>
              <div className="numeric" style={{ fontSize: 22, fontWeight: 500 }}>$300<span className="mono-label" style={{ fontSize: 9, opacity: 0.6, marginLeft: 4 }}>/MO</span></div>
            </div>
            <p style={{ fontSize: 13, lineHeight: 1.5, color: "var(--ink-soft)", margin: 0 }}>
              For the athlete signing real deals. Three 30-minute calls a month, 24-hour reply, one drafted document project every three months.
            </p>
          </div>

          <div style={{ background: "var(--cream-2)", border: "1px solid var(--rule)", padding: "22px 22px" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 }}>
              <div className="serif" style={{ fontSize: 24, lineHeight: 1.1 }}>Solo Entrepreneur</div>
              <div className="numeric" style={{ fontSize: 22, fontWeight: 500 }}>$350<span className="mono-label" style={{ fontSize: 9, opacity: 0.6, marginLeft: 4 }}>/MO</span></div>
            </div>
            <p style={{ fontSize: 13, lineHeight: 1.5, color: "var(--ink-soft)", margin: 0 }}>
              For the single-member LLC built around your NIL income. Four monthly calls; represents the business, not you personally — most athletes want both.
            </p>
          </div>

          <a href="https://calendly.com/loelaw/consultation-subscription" target="_blank" rel="noopener" className="btn-primary lg" style={{ justifyContent: "center" }}>
            Free NIL contract review →
          </a>
          <a href="#plans" className="btn-ghost" style={{ justifyContent: "center" }}>
            See all plans
          </a>
        </div>
      </div>

      {/* ── Tax disclaimer ── */}
      <p className="mono-label" style={{
        marginTop: 28, fontSize: 10.5, lineHeight: 1.6,
        color: "var(--ink-soft)", letterSpacing: "0.08em",
        textTransform: "none", opacity: 0.75
      }}>
        TAX NOTICE — Johnn Osborn is not a tax attorney or CPA. NIL tax figures are educational references; consult a qualified tax professional before decisions about income, entity structure, or estimated payments. Compliance and contract review do not guarantee a specific outcome with NIL Go, the NCAA, or any school's compliance office.
      </p>
    </div>
  </section>
  );
};

Object.assign(window, { NILSection });

// ─── Slim NIL feature for the front page ─────────────────────────────────
// Featured but not the main focus — quick teaser that links to the dedicated page.
const NILFeature = () => (
  <section id="nil" style={{ background: "var(--cream-2)", color: "var(--ink)", position: "relative" }}>

    {/* ── "New service" announcement strip ── */}
    <div style={{
      background: "var(--sun)", color: "var(--ink)",
      borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--ink)"
    }}>
      <div className="container" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 24, padding: "14px 32px", flexWrap: "wrap"
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <span style={{
            background: "var(--ink)", color: "var(--sun)",
            fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.12em",
            padding: "5px 10px", borderRadius: 3, fontWeight: 500
          }}>NEW SERVICE</span>
          <span className="serif" style={{ fontSize: 18, fontStyle: "italic", lineHeight: 1.25 }}>
            Now offering NIL representation for New Mexico athletes — built around the subscription model.
          </span>
        </div>
        <a href="Name Image Likeness.html" className="mono-label" style={{
          fontSize: 11, color: "var(--ink)", textDecoration: "none",
          borderBottom: "1px solid var(--ink)", paddingBottom: 2
        }}>
          See the full page →
        </a>
      </div>
    </div>

    <div className="container" style={{ padding: "88px 32px 96px" }}>

      {/* ── Header ── */}
      <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 12, flexWrap: "wrap" }}>
        <span className="mono-label" style={{ fontSize: 11, color: "var(--sun)" }}>NEW · NIL FOR NM ATHLETES</span>
        <h2 className="serif" style={{
          fontSize: "clamp(44px, 5.2vw, 72px)", lineHeight: 1, margin: 0, letterSpacing: "-0.01em"
        }}>
          Built for the way NIL <em style={{ color: "var(--sun)" }}>actually arrives.</em>
        </h2>
      </div>
      <p className="serif" style={{
        fontSize: 20, fontStyle: "italic", lineHeight: 1.45,
        color: "var(--ink-soft)", margin: "0 0 48px", maxWidth: 820
      }}>
        Contracts show up with a 48-hour signing window. A school's revenue-share offer lands the night before a road trip. Subscription is the right model for this — a New Mexico attorney already on retainer, ready to read what's in front of you before you sign.
      </p>

      <div style={{ display: "grid", gridTemplateColumns: "1.25fr 1fr", gap: 48, alignItems: "stretch" }}>

        {/* Left column: why subscription is right for NIL */}
        <div style={{ background: "var(--paper)", border: "1px solid var(--rule)", padding: "36px 36px" }}>
          <div className="mono-label" style={{ fontSize: 11, color: "var(--sun)", marginBottom: 18 }}>
            WHY THE SUBSCRIPTION MODEL FITS NIL
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 18 }}>
            {[
              {
                h: "Contracts arrive on a deadline.",
                v: "Your monthly call cadence and reply window are already paid for — no scramble to engage an attorney before a signing deadline."
              },
              {
                h: "Compliance is a recurring need.",
                v: "Every deal ≥ $600 needs an NIL Go review. Every renewal needs another. Subscription absorbs the volume."
              },
              {
                h: "Member rates on the bigger work.",
                v: "Full deal negotiation, LLC formation, and operating agreements are flat-fee projects at the 25% member discount."
              },
              {
                h: "A New Mexico attorney, not a national firm.",
                v: "Licensed in NM and TX, with offices in Albuquerque and Las Cruces — same state as your school, your collective, and your eligibility rules."
              }
            ].map((row, i) => (
              <li key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 16 }}>
                <span className="mono-label numeric" style={{ fontSize: 11, color: "var(--sun)", paddingTop: 4 }}>0{i + 1}</span>
                <div>
                  <div className="serif" style={{ fontSize: 21, lineHeight: 1.2, marginBottom: 4 }}>{row.h}</div>
                  <div style={{ fontSize: 14, lineHeight: 1.55, color: "var(--ink-soft)" }}>{row.v}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>

        {/* Right column: scope + CTAs */}
        <div style={{ background: "var(--ink)", color: "var(--cream)", padding: "36px 32px", display: "flex", flexDirection: "column" }}>
          <div className="mono-label" style={{ fontSize: 10, color: "var(--sun-soft)", marginBottom: 16 }}>SERVICE AREA · NIL</div>
          <h3 className="serif" style={{ fontSize: 30, lineHeight: 1.05, margin: "0 0 18px", color: "var(--cream)" }}>
            What's covered.
          </h3>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 11, flex: 1 }}>
            {[
              "Endorsement & revenue-sharing contract review",
              "LLC formation & operating agreements",
              "NIL Go (≥ $600) & NCAA / school compliance",
              "Agent disputes under NM Uniform Athlete Agents Act",
              "NMAA rules for high-school athletes"
            ].map((t, i) => (
              <li key={i} style={{ display: "flex", gap: 11, fontSize: 14, lineHeight: 1.5, color: "rgba(245,239,227,0.92)" }}>
                <Tick color="var(--sun-soft)"/>
                <span>{t}</span>
              </li>
            ))}
          </ul>
          <div style={{ height: 1, background: "rgba(245,239,227,0.18)", margin: "22px 0" }}/>
          <div className="mono-label" style={{ fontSize: 10, opacity: 0.7, marginBottom: 16, color: "var(--sun-soft)" }}>
            UNM · NMSU · UTEP · NMAA · NM & TX LICENSED
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <a href="Name Image Likeness.html" className="btn-primary" style={{
              background: "var(--sun)", color: "var(--ink)", borderColor: "var(--sun)",
              justifyContent: "center"
            }}>
              Read more about NIL →
            </a>
            <a href="https://calendly.com/loelaw/consultation-subscription" target="_blank" rel="noopener" className="btn-ghost" style={{
              color: "var(--cream)", borderColor: "rgba(245,239,227,0.4)", justifyContent: "center"
            }}>
              Free NIL contract review
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ─── Wrapper used by Name Image Likeness.html ────────────────────────────
const NILPage = () => (
  <>
    <window.Nav current="nil"/>
    <main id="main">
      <NILSection asH1/>
    </main>
    <window.Footer/>
  </>
);

Object.assign(window, { NILSection, NILFeature, NILPage });
