// v8_sections.jsx — Mission Control + Family Visibility

const { useState: useStateV8, useEffect: useEffectV8 } = React;

// ── Mission Control ───────────────────────────────────────────────────
function MissionControlSection() {
  const [mode, setMode] = useStateV8("renter");

  const movesRenter = [
    { addr: "12 Beechwood Park, Bray",        sub: "Application sent · 4 days no reply · HomeWoosh chasing", tone: "amber"  },
    { addr: "44 Glenview Avenue, Bray",       sub: "Viewing booked Sat 11:30 — added to your calendar",     tone: "green"  },
    { addr: "8 Killarney Heights, Greystones", sub: "AIB mortgage form filled · ready for your review",       tone: "amber"  },
    { addr: "26 Marlborough Road, Dublin 6",   sub: "Reference check in progress",                            tone: "blue"   },
    { addr: "Source of funds: €4,200 lodgement", sub: "Awaiting your explanation",                            tone: "amber"  },
  ];
  const movesBuyer = [
    { addr: "12 Beechwood Park, Bray",         sub: "Bid €445k sent · awaiting agent response",               tone: "amber"  },
    { addr: "44 Glenview Avenue, Bray",        sub: "Viewing booked Sat 11:30 — added to calendar",            tone: "green"  },
    { addr: "8 Killarney Heights",             sub: "AIB mortgage form filled · ready for review",             tone: "amber"  },
    { addr: "HTB1 application",                sub: "Filled · awaiting your signature",                        tone: "amber"  },
    { addr: "Source of funds: €4,200 lodgement", sub: "Awaiting your explanation",                            tone: "amber"  },
  ];
  const moves = mode === "renter" ? movesRenter : movesBuyer;

  return (
    <section id="mission-control" style={{ padding: "100px 48px", background: "#FBF8F2" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 36, maxWidth: 820, marginLeft: "auto", marginRight: "auto" }}>
          <div style={{ fontSize: 11, color: "#1E5BFF", letterSpacing: ".10em", textTransform: "uppercase", fontWeight: 500, marginBottom: 14 }}>
            Your daily command centre
          </div>
          <h2 className="display" style={{ fontSize: "clamp(34px, 4vw, 48px)", margin: "0 0 14px", lineHeight: 1.05, letterSpacing: "-0.025em", fontWeight: 500 }}>
            Mission control for <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>everything in flight.</span>
          </h2>
          <p className="serif" style={{ fontSize: 18, lineHeight: 1.4, color: "var(--ink-2)", margin: "12px auto 0", maxWidth: 680, fontStyle: "italic" }}>
            Every application, every bid, every viewing, every reply. One screen. Always knows what needs you, what's blocked, what's working.
          </p>
        </div>

        {/* Toggle */}
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 28 }}>
          <div style={{
            display: "inline-flex", gap: 4,
            background: "#FFFFFF", padding: 5, borderRadius: 999,
            border: "0.5px solid var(--border)",
          }}>
            {[{k: "renter", l: "I'm renting"}, {k: "buyer", l: "I'm buying"}].map(t => (
              <button key={t.k} onClick={() => setMode(t.k)} style={{
                appearance: "none", border: 0,
                background: mode === t.k ? "var(--ink)" : "transparent",
                color: mode === t.k ? "#FFFFFF" : "var(--ink-2)",
                padding: "9px 22px", borderRadius: 999,
                fontSize: 13.5, fontWeight: 500, cursor: "pointer",
                transition: "all .2s",
              }}>{t.l}</button>
            ))}
          </div>
        </div>

        {/* Dashboard mockup */}
        <div style={{
          background: "var(--ink)", color: "#FFFFFF",
          borderRadius: 22, padding: 24,
          boxShadow: "0 24px 60px rgba(10,24,48,0.20)",
          display: "grid",
          gridTemplateColumns: "1.6fr 1fr",
          gap: 16,
        }} className="r-mc-grid">
          {/* Panel 1 — Your Moves */}
          <div style={{
            background: "rgba(255,255,255,0.04)",
            border: "0.5px solid rgba(255,255,255,0.10)",
            borderRadius: 16, padding: 20,
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ fontSize: 11, letterSpacing: ".10em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)", fontWeight: 600 }}>Your moves</span>
                <span style={{ fontSize: 11, padding: "2px 8px", borderRadius: 999, background: "rgba(255,255,255,0.08)", color: "#FFFFFF", fontWeight: 600 }} className="tnum">14 active</span>
              </div>
              <a style={{ fontSize: 11, color: "rgba(255,255,255,0.55)" }}>See all →</a>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 8 }} key={mode}>
              {moves.map((m, i) => (
                <div key={i} className="fade-in" style={{
                  display: "grid", gridTemplateColumns: "10px 1fr 12px",
                  gap: 14, alignItems: "center",
                  padding: "11px 14px",
                  background: "rgba(255,255,255,0.03)",
                  borderRadius: 10,
                  fontSize: 13,
                }}>
                  <span style={{
                    width: 8, height: 8, borderRadius: 999,
                    background: m.tone === "green" ? "#7FE5A4" :
                                m.tone === "amber" ? "#E8A83A" :
                                m.tone === "blue"  ? "#7FB1FF" : "rgba(255,255,255,0.4)",
                    boxShadow: m.tone === "amber" ? "0 0 0 3px rgba(232,168,58,0.18)" :
                                m.tone === "green" ? "0 0 0 3px rgba(127,229,164,0.18)" :
                                m.tone === "blue"  ? "0 0 0 3px rgba(127,177,255,0.18)" : "none",
                  }}/>
                  <div>
                    <div style={{ color: "#FFFFFF", fontWeight: 500 }}>{m.addr}</div>
                    <div style={{ color: "rgba(255,255,255,0.60)", fontSize: 11.5, marginTop: 2 }}>{m.sub}</div>
                  </div>
                  <Icon name="chevR" size={11} style={{ color: "rgba(255,255,255,0.45)" }}/>
                </div>
              ))}
            </div>
          </div>

          {/* Right column — two stacked panels */}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {/* Blocking */}
            <div style={{
              background: "rgba(232,168,58,0.06)",
              border: "0.5px solid rgba(232,168,58,0.25)",
              borderRadius: 16, padding: 18,
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
                <span style={{ fontSize: 11, letterSpacing: ".10em", textTransform: "uppercase", color: "#E8A83A", fontWeight: 600 }}>What's blocking you</span>
                <span style={{ fontSize: 11, padding: "2px 8px", borderRadius: 999, background: "rgba(232,168,58,0.20)", color: "#E8A83A", fontWeight: 600 }} className="tnum">3</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {[
                  "Resolve €4,200 source of funds",
                  "AIP renewal due in 89 days",
                  "Dad's gift letter pending signature",
                ].map((t, i) => (
                  <div key={i} style={{ display: "grid", gridTemplateColumns: "16px 1fr", gap: 10, fontSize: 12.5, color: "rgba(255,255,255,0.88)", alignItems: "flex-start", lineHeight: 1.4 }}>
                    <span style={{ color: "#E8A83A", marginTop: 1 }}>
                      <Icon name="alert" size={13}/>
                    </span>
                    {t}
                  </div>
                ))}
              </div>
            </div>

            {/* Ready */}
            <div style={{
              background: "rgba(127,229,164,0.06)",
              border: "0.5px solid rgba(127,229,164,0.25)",
              borderRadius: 16, padding: 18,
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
                <span style={{ fontSize: 11, letterSpacing: ".10em", textTransform: "uppercase", color: "#7FE5A4", fontWeight: 600 }}>Ready for you</span>
                <span style={{ fontSize: 11, padding: "2px 8px", borderRadius: 999, background: "rgba(127,229,164,0.20)", color: "#7FE5A4", fontWeight: 600 }} className="tnum">3</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                {[
                  "Approve follow-up to Sherry FitzGerald",
                  "Approve viewing slot for Sat 11:30",
                  "Approve filled AIP form for AIB",
                ].map((t, i) => (
                  <div key={i} style={{
                    display: "grid", gridTemplateColumns: "1fr 12px", gap: 10,
                    fontSize: 12.5, color: "rgba(255,255,255,0.92)", alignItems: "center",
                    padding: "7px 10px",
                    background: "rgba(127,229,164,0.05)",
                    borderRadius: 8, cursor: "pointer",
                  }}>
                    {t}
                    <Icon name="chevR" size={11} style={{ color: "#7FE5A4" }}/>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Supporting lines + CTA */}
        <div style={{ textAlign: "center", marginTop: 36, maxWidth: 720, marginLeft: "auto", marginRight: "auto" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5, marginBottom: 24 }}>
            <span>Open it every morning. Know what needs you, what's working, what's stuck.</span>
            <span>Approve actions. HomeWoosh does the work.</span>
            <span>Never wonder which application you're waiting on, or which one needs chasing.</span>
          </div>
          <button style={{
            background: "#1E5BFF", color: "#FFFFFF",
            border: 0, padding: "13px 26px", borderRadius: 12,
            fontSize: 15, fontWeight: 500,
            display: "inline-flex", alignItems: "center", gap: 8,
            boxShadow: "0 6px 20px rgba(30,91,255,0.30)",
          }}>
            See it for yourself <Icon name="arrow" size={14}/>
          </button>
        </div>
      </div>
    </section>
  );
}

// ── Family Visibility ─────────────────────────────────────────────────
function FamilyVisibilitySection() {
  return (
    <section style={{
      padding: "110px 48px",
      background: "linear-gradient(180deg, #0A1F3D 0%, #061429 100%)",
      color: "#FFFFFF",
      position: "relative",
      overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", left: "50%", top: "50%",
        width: 900, height: 900,
        transform: "translate(-50%, -50%)",
        background: "radial-gradient(circle, rgba(232,168,58,0.08), transparent 60%)",
        pointerEvents: "none",
      }}/>

      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative", zIndex: 2 }}>
        <div style={{ textAlign: "center", marginBottom: 56, maxWidth: 880, marginLeft: "auto", marginRight: "auto" }}>
          <div style={{ fontSize: 11, color: "#E8A83A", letterSpacing: ".12em", textTransform: "uppercase", fontWeight: 500, marginBottom: 16 }}>
            Family visibility
          </div>
          <h2 className="display" style={{ fontSize: "clamp(34px, 4.4vw, 52px)", margin: "0 0 16px", lineHeight: 1.05, letterSpacing: "-0.025em", fontWeight: 500, color: "#FFFFFF" }}>
            Let the people who care about you <br/>
            <span className="serif" style={{ color: "#E8A83A", fontWeight: 400 }}>actually see what you're doing.</span>
          </h2>
          <p style={{ fontSize: 16.5, lineHeight: 1.55, color: "rgba(255,255,255,0.72)", margin: "16px auto 0", maxWidth: 620 }}>
            Share a clean read-only view of your progress with parents, sponsors, or partners. They see proof, not stress.
          </p>
        </div>

        {/* Two-device visual */}
        <div className="r-family-vis-grid" style={{
          display: "grid",
          gridTemplateColumns: "1fr auto 1fr",
          gap: 28,
          alignItems: "center",
          marginBottom: 56,
        }}>
          {/* Phone — your view */}
          <DevicePhone label="Aoife's view">
            <UserDashboardMini/>
          </DevicePhone>

          {/* Connector */}
          <div className="r-family-vis-conn" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
            <svg width="120" height="20" viewBox="0 0 120 20">
              <line x1="0" y1="10" x2="120" y2="10" stroke="rgba(255,255,255,0.30)" strokeWidth="1.5" strokeDasharray="4 4"/>
              <path d="M 110 5 L 118 10 L 110 15" fill="none" stroke="#E8A83A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            <div style={{
              padding: "6px 14px", borderRadius: 999,
              background: "rgba(232,168,58,0.10)",
              border: "0.5px solid rgba(232,168,58,0.35)",
              fontSize: 11, color: "#E8A83A", fontWeight: 600,
              letterSpacing: ".06em", textAlign: "center",
              whiteSpace: "nowrap",
            }}>
              Shared · view-only · weekly
            </div>
          </div>

          {/* iPad — mum's view */}
          <DevicePhone label="Mum's view" wide>
            <FamilyDashboardMini/>
          </DevicePhone>
        </div>

        {/* Supporting copy + CTA */}
        <div style={{ textAlign: "center", maxWidth: 760, margin: "0 auto" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 14.5, color: "rgba(255,255,255,0.72)", lineHeight: 1.5, marginBottom: 28 }}>
            <span>Most renters and buyers can't explain what they're going through. The dashboard can.</span>
            <span>Parents see the work, not the worry. Sponsors see the progress, not the panic.</span>
            <span>You stay in control — share what you want, hide what you don't.</span>
          </div>
          <button style={{
            background: "#E8A83A", color: "#0A1830",
            border: 0, padding: "13px 26px", borderRadius: 12,
            fontSize: 15, fontWeight: 600,
            display: "inline-flex", alignItems: "center", gap: 8,
            boxShadow: "0 6px 20px rgba(232,168,58,0.30)",
          }}>
            See how family mode works <Icon name="arrow" size={14}/>
          </button>
        </div>
      </div>
    </section>
  );
}

function DevicePhone({ label, children, wide = false }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
      <div style={{
        width: "100%",
        maxWidth: wide ? 380 : 280,
        padding: 12,
        borderRadius: 36,
        background: "linear-gradient(180deg, #1a2540, #0A1830)",
        border: "1px solid rgba(255,255,255,0.10)",
        boxShadow: "0 30px 80px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.06)",
        transform: wide ? "rotate(2deg)" : "rotate(-2deg)",
      }}>
        <div style={{
          background: "#FBF8F2",
          borderRadius: 26,
          padding: 16,
          minHeight: 420,
          color: "var(--ink)",
        }}>
          {children}
        </div>
      </div>
      <div style={{ fontSize: 12, color: "rgba(255,255,255,0.55)", letterSpacing: ".06em", textTransform: "uppercase", fontWeight: 500 }}>
        {label}
      </div>
    </div>
  );
}

function UserDashboardMini() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      <div style={{ fontSize: 11, color: "var(--ink-3)", marginBottom: 2 }}>Aoife · Pro</div>
      <div className="tnum display" style={{ fontSize: 18, fontWeight: 500, letterSpacing: "-0.01em", color: "var(--ink)" }}>14 Apr 2027</div>

      {/* Mini panels */}
      <div style={{ background: "var(--ink)", color: "#FFFFFF", borderRadius: 10, padding: 10, marginTop: 6 }}>
        <div style={{ fontSize: 9, letterSpacing: ".10em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)", marginBottom: 6 }}>Your moves · 14</div>
        {[
          { dot: "#E8A83A", lbl: "Beechwood Park · chasing" },
          { dot: "#7FE5A4", lbl: "Glenview · viewing Sat" },
          { dot: "#E8A83A", lbl: "AIB form · review" },
        ].map((r, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 10, padding: "4px 0", color: "rgba(255,255,255,0.85)" }}>
            <span style={{ width: 5, height: 5, borderRadius: 999, background: r.dot }}/> {r.lbl}
          </div>
        ))}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
        <div style={{ background: "rgba(232,168,58,0.10)", border: "0.5px solid rgba(232,168,58,0.30)", borderRadius: 8, padding: 8 }}>
          <div style={{ fontSize: 8.5, letterSpacing: ".10em", textTransform: "uppercase", color: "#A87729", fontWeight: 600, marginBottom: 2 }}>Blocking</div>
          <div className="tnum display" style={{ fontSize: 18, color: "var(--ink)", fontWeight: 500 }}>3</div>
        </div>
        <div style={{ background: "rgba(61,106,79,0.10)", border: "0.5px solid rgba(61,106,79,0.30)", borderRadius: 8, padding: 8 }}>
          <div style={{ fontSize: 8.5, letterSpacing: ".10em", textTransform: "uppercase", color: "var(--green-2)", fontWeight: 600, marginBottom: 2 }}>Ready</div>
          <div className="tnum display" style={{ fontSize: 18, color: "var(--ink)", fontWeight: 500 }}>3</div>
        </div>
      </div>
    </div>
  );
}

function FamilyDashboardMini() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <div>
        <div style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: ".10em", textTransform: "uppercase", marginBottom: 4, fontWeight: 600 }}>
          Aoife's home journey
        </div>
        <div style={{ fontSize: 13, color: "var(--ink)", fontWeight: 500, letterSpacing: "-0.005em" }}>
          Saving to buy · Dublin 6 · target Q2 2027
        </div>
      </div>

      {/* Readiness ring + status */}
      <div style={{
        display: "flex", alignItems: "center", gap: 14,
        padding: 14, background: "var(--ink)", color: "#FFFFFF",
        borderRadius: 12,
      }}>
        <svg width="64" height="64" viewBox="0 0 64 64" style={{ transform: "rotate(-90deg)", flexShrink: 0 }}>
          <circle cx="32" cy="32" r="24" fill="none" stroke="rgba(255,255,255,0.10)" strokeWidth="6"/>
          <circle cx="32" cy="32" r="24" fill="none" stroke="#7FE5A4" strokeWidth="6"
            strokeLinecap="round" strokeDasharray={2 * Math.PI * 24}
            strokeDashoffset={2 * Math.PI * 24 * 0.28}/>
        </svg>
        <div>
          <div className="tnum display" style={{ fontSize: 22, color: "#FFFFFF", fontWeight: 500, lineHeight: 1 }}>72 <span style={{ fontSize: 12, color: "rgba(255,255,255,0.5)", fontWeight: 400 }}>/100</span></div>
          <div style={{ fontSize: 10, color: "rgba(255,255,255,0.6)", letterSpacing: ".06em", textTransform: "uppercase", marginTop: 4, fontWeight: 600 }}>Readiness</div>
          <div style={{ fontSize: 10.5, color: "#7FE5A4", marginTop: 4 }} className="tnum">+6 this month</div>
        </div>
      </div>

      {/* Summary lines */}
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {[
          { lbl: "Active moves",   val: "8 applications · 2 viewings this week" },
          { lbl: "Working on",     val: "Resolving source of funds" },
          { lbl: "Needs from you", val: "A gift letter signed", action: true },
        ].map((r, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "1fr",
            padding: "8px 10px",
            background: r.action ? "rgba(232,168,58,0.08)" : "var(--surface-2)",
            border: r.action ? "0.5px solid rgba(232,168,58,0.30)" : "0.5px solid var(--border)",
            borderRadius: 8,
          }}>
            <div style={{ fontSize: 9, letterSpacing: ".10em", textTransform: "uppercase", color: r.action ? "#A87729" : "var(--ink-3)", fontWeight: 600, marginBottom: 2 }}>{r.lbl}</div>
            <div style={{ fontSize: 11.5, color: "var(--ink)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              {r.val}
              {r.action && <Icon name="arrowUR" size={11} style={{ color: "#A87729" }}/>}
            </div>
          </div>
        ))}
      </div>

      {/* Footer */}
      <div style={{
        marginTop: 4, paddingTop: 10,
        borderTop: "0.5px solid var(--border)",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        fontSize: 9.5, color: "var(--ink-3)", letterSpacing: ".04em",
      }}>
        <span>Shared by Aoife · view-only</span>
        <span>Weekly updates</span>
      </div>
    </div>
  );
}

window.MissionControlSection = MissionControlSection;
window.FamilyVisibilitySection = FamilyVisibilitySection;