// Light-theme book-call page — standalone, doesn't need the old P/D palette API.

function BookCallPageLight({ C }) {
  const B = C.bookCall;
  const [submitted, setSubmitted] = React.useState(false);

  const onSubmit = (e) => {
    e.preventDefault();
    const fd = new FormData(e.target);
    const params = new URLSearchParams();
    const subject = `Advisory call · ${fd.get("name") || "—"} · ${fd.get("org") || "—"}`;
    const body = [
      `Name: ${fd.get("name") || ""}`,
      `Email: ${fd.get("email") || ""}`,
      `Org: ${fd.get("org") || ""}`,
      `Role: ${fd.get("role") || ""}`,
      `Industry: ${fd.get("industry") || ""}`,
      `Engagement: ${fd.get("engagement") || ""}`,
      ``,
      `Maturity level (self-assessed): ${fd.get("maturity") || ""}`,
      ``,
      `What's the actual problem?`,
      fd.get("problem") || "",
      ``,
      `What's been tried already?`,
      fd.get("tried") || "",
    ].join("\n");
    params.set("subject", subject);
    params.set("body", body);
    // Email submission disabled - contact via LinkedIn\n    console.log(\"Form data:\", Object.fromEntries(new FormData(e.target)));
    setSubmitted(true);
  };

  const PAL = {
    bg: "#FBFBFD", bgAlt: "#F5F5F7", ink: "#1D1D1F", inkSoft: "#424245", inkMuted: "#86868B",
    line: "#D2D2D7", lineFaint: "#E8E8ED", accent: "oklch(0.55 0.18 252)", accentHover: "oklch(0.50 0.18 252)",
    inkBg: "#1D1D1F",
  };
  const FAM = '"Inter", -apple-system, BlinkMacSystemFont, sans-serif';

  const inputStyle = {
    width: "100%", padding: "14px 16px", border: `1px solid ${PAL.line}`,
    borderRadius: 12, fontFamily: FAM, fontSize: 15, color: PAL.ink, background: "#fff",
    outline: "none",
  };
  const labelStyle = {
    fontSize: 12, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase",
    color: PAL.inkSoft, marginBottom: 8, display: "block",
  };

  return (
    <main style={{ background: PAL.bg, color: PAL.ink, fontFamily: FAM }}>
      {/* Hero */}
      <section style={{ padding: "100px 32px 80px", textAlign: "center" }}>
        <div style={{ maxWidth: 980, margin: "0 auto" }}>
          <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: PAL.accent, marginBottom: 16 }}>
            Advisory · 30 minutes
          </div>
          <h1 style={{ fontSize: 88, lineHeight: 1.05, letterSpacing: "-0.035em", fontWeight: 600, margin: 0, color: PAL.ink, textWrap: "balance" }}>
            {B.headline}
          </h1>
          <p style={{ fontSize: 22, lineHeight: 1.4, color: PAL.inkSoft, margin: "28px auto 0", maxWidth: 720, textWrap: "pretty" }}>
            {B.sub}
          </p>
          <p style={{ fontSize: 16, color: PAL.accent, margin: "20px auto 0", fontWeight: 500 }}>
            {B.promise}
          </p>
        </div>
      </section>

      {/* What to expect */}
      <section style={{ padding: "0 32px 80px" }}>
        <div style={{ maxWidth: 1180, margin: "0 auto" }}>
          <div style={{ background: PAL.bgAlt, borderRadius: 24, padding: "56px 48px" }}>
            <div style={{ textAlign: "center", marginBottom: 40 }}>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: PAL.accent, marginBottom: 12 }}>
                What to expect
              </div>
              <h2 style={{ fontSize: 36, fontWeight: 600, letterSpacing: "-0.02em", margin: 0, color: PAL.ink }}>
                The 30 minutes, in four moves.
              </h2>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
              {B.expect.map((e, i) => (
                <div key={i} style={{ background: "#fff", borderRadius: 16, padding: "28px 24px" }}>
                  <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.08em", color: PAL.accent, marginBottom: 8 }}>{e.num}</div>
                  <div style={{ fontSize: 18, fontWeight: 600, color: PAL.ink, marginBottom: 4 }}>{e.label}</div>
                  <div style={{ fontSize: 12, color: PAL.inkMuted, marginBottom: 12, fontWeight: 500 }}>{e.time}</div>
                  <div style={{ fontSize: 14, color: PAL.inkSoft, lineHeight: 1.5 }}>{e.detail}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Engagements */}
      <section style={{ padding: "0 32px 80px" }}>
        <div style={{ maxWidth: 1180, margin: "0 auto" }}>
          <div style={{ textAlign: "center", marginBottom: 40 }}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: PAL.accent, marginBottom: 12 }}>
              Engagements
            </div>
            <h2 style={{ fontSize: 36, fontWeight: 600, letterSpacing: "-0.02em", margin: 0, color: PAL.ink }}>
              Four ways to work together.
            </h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
            {B.engagements.map((e, i) => (
              <div key={i} style={{ background: PAL.bgAlt, borderRadius: 20, padding: "32px 32px" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
                  <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.08em", color: PAL.accent }}>{e.kind}</div>
                  <div style={{ fontSize: 14, color: PAL.ink, fontWeight: 600 }}>{e.price}</div>
                </div>
                <div style={{ fontSize: 22, fontWeight: 600, color: PAL.ink, letterSpacing: "-0.015em", marginBottom: 10 }}>{e.title}</div>
                <div style={{ fontSize: 14, color: PAL.inkSoft, lineHeight: 1.5 }}>{e.best}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Best for / not for */}
      <section style={{ padding: "0 32px 80px" }}>
        <div style={{ maxWidth: 1180, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <div style={{ background: PAL.bgAlt, borderRadius: 20, padding: "36px 36px" }}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.08em", color: PAL.accent, marginBottom: 16 }}>● Best for</div>
            {B.bestFor.map((b, i) => (
              <div key={i} style={{ fontSize: 16, color: PAL.ink, padding: "10px 0", borderTop: i ? `1px solid ${PAL.lineFaint}` : "none", lineHeight: 1.5 }}>{b}</div>
            ))}
          </div>
          <div style={{ background: PAL.bgAlt, borderRadius: 20, padding: "36px 36px" }}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.08em", color: PAL.inkMuted, marginBottom: 16 }}>○ Not for</div>
            {B.notFor.map((b, i) => (
              <div key={i} style={{ fontSize: 16, color: PAL.inkSoft, padding: "10px 0", borderTop: i ? `1px solid ${PAL.lineFaint}` : "none", lineHeight: 1.5 }}>{b}</div>
            ))}
          </div>
        </div>
      </section>

      {/* Form */}
      <section style={{ padding: "0 32px 120px" }}>
        <div style={{ maxWidth: 880, margin: "0 auto" }}>
          <div style={{ background: PAL.bgAlt, borderRadius: 24, padding: "56px 48px" }}>
            <div style={{ textAlign: "center", marginBottom: 32 }}>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: PAL.accent, marginBottom: 12 }}>
                Intake
              </div>
              <h2 style={{ fontSize: 36, fontWeight: 600, letterSpacing: "-0.02em", margin: 0, color: PAL.ink, textWrap: "balance" }}>
                {B.intake.title.replace(/^TELL ME /, "Tell me ").toLowerCase().replace(/^./, c => c.toUpperCase())}
              </h2>
              <p style={{ fontSize: 16, color: PAL.inkSoft, margin: "12px auto 0", maxWidth: 560 }}>
                {B.intake.sub}
              </p>
            </div>

            {submitted ? (
              <div style={{ background: "#fff", borderRadius: 16, padding: "32px", textAlign: "center" }}>
                <div style={{ fontSize: 18, color: PAL.ink, fontWeight: 600 }}>✓ Email draft opened</div>
                <p style={{ fontSize: 15, color: PAL.inkSoft, marginTop: 8 }}>Your message is ready to submit.</p>
              </div>
            ) : (
              <form onSubmit={onSubmit} style={{ display: "grid", gap: 20 }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                  <div><label style={labelStyle}>Name</label><input name="name" style={inputStyle} placeholder="Your name" /></div>
                  <div><label style={labelStyle}>Email *</label><input name="email" type="email" required style={inputStyle} placeholder="you@org.com" /></div>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                  <div><label style={labelStyle}>Organization</label><input name="org" style={inputStyle} placeholder="Company / org" /></div>
                  <div><label style={labelStyle}>Your role</label><input name="role" style={inputStyle} placeholder="CIO, CTO, VP Eng…" /></div>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                  <div>
                    <label style={labelStyle}>Industry</label>
                    <select name="industry" style={inputStyle} defaultValue="">
                      <option value="" disabled>Choose…</option>
                      <option>Healthcare / Life Sciences</option>
                      <option>Insurance</option>
                      <option>Financial Services</option>
                      <option>Other</option>
                    </select>
                  </div>
                  <div>
                    <label style={labelStyle}>Engagement</label>
                    <select name="engagement" style={inputStyle} defaultValue="">
                      <option value="" disabled>Choose…</option>
                      <option>30-min advisory call</option>
                      <option>Half-day architecture review</option>
                      <option>Quarterly advisory</option>
                      <option>eAi.OS workshop</option>
                    </select>
                  </div>
                </div>
                <div>
                  <label style={labelStyle}>Maturity (self-assessed, L1–L5)</label>
                  <select name="maturity" style={inputStyle} defaultValue="">
                    <option value="" disabled>Choose…</option>
                    <option>L1 — Ad hoc</option>
                    <option>L2 — Platformized</option>
                    <option>L3 — Productized & agentic</option>
                    <option>L4 — Governed & compliant</option>
                    <option>L5 — Autonomous & self-optimizing</option>
                  </select>
                </div>
                <div>
                  <label style={labelStyle}>What's the actual problem?</label>
                  <textarea name="problem" rows="4" style={{...inputStyle, resize: "vertical", fontFamily: FAM}} placeholder="The messy version. Specifics > buzzwords." />
                </div>
                <div>
                  <label style={labelStyle}>What's been tried already?</label>
                  <textarea name="tried" rows="3" style={{...inputStyle, resize: "vertical", fontFamily: FAM}} placeholder="Stack, vendors, frameworks. What worked, what didn't." />
                </div>
                <button type="submit" style={{
                  marginTop: 8, alignSelf: "center",
                  background: PAL.accent, color: "#fff", border: "none",
                  padding: "14px 28px", borderRadius: 980, fontFamily: FAM,
                  fontSize: 15, fontWeight: 500, cursor: "pointer",
                }}>
                  Send intake & open mail
                </button>
              </form>
            )}
          </div>
        </div>
      </section>
    </main>
  );
}

window.BookCallPageLight = BookCallPageLight;