// Lotus Assist — Page shell (header, form card, footer trust bar)
// Used by every form page. Keeps individual form files thin.

function FormPage({ schema, children, onTweaksMount }) {
  return (
    <div style={{ minHeight: "100vh", background: "var(--bg-soft)", display: "flex", flexDirection: "column" }}>
      <FormHero schema={schema} />
      <main style={{ flex: 1, padding: "0 20px 64px" }}>
        <div style={{ maxWidth: 720, margin: "-60px auto 0", position: "relative", zIndex: 2 }}>
          <div style={{
            background: "#fff",
            borderRadius: 24,
            boxShadow: "var(--shadow-md)",
            border: "1px solid var(--border)",
            padding: "40px 44px 44px",
          }}>
            {children}
          </div>
          <FormFooterNote />
        </div>
      </main>
      <FormFooter />
    </div>
  );
}

function FormHeader() {
  return (
    <header style={{
      background: "#fff",
      borderBottom: "1px solid var(--border)",
      padding: "16px 20px",
    }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
        <a href="https://lotusassist.com.au" style={{ display: "flex", alignItems: "center", textDecoration: "none" }}>
          <img src={window.__resources?.logoRgb || "/assets/logo-primary-rgb.jpg"} alt="Lotus Assist" style={{ height: 60 }} />
        </a>
        <a
          href="tel:1800645809"
          style={{
            fontSize: 14,
            fontWeight: 600,
            color: "var(--brand)",
            textDecoration: "none",
            display: "inline-flex",
            alignItems: "center",
            gap: 8,
          }}
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
          <span>1800 645 809</span>
        </a>
      </div>
    </header>
  );
}

function FormHero({ schema }) {
  return (
    <section style={{
      position: "relative",
      background: "linear-gradient(160deg, var(--la-teal-700) 0%, var(--la-teal-800) 60%, var(--la-teal-900) 100%)",
      color: "#fff",
      padding: "12px 20px 100px",
      overflow: "hidden",
    }}>
      {/* Petal decorative layer */}
      <svg
        aria-hidden="true"
        viewBox="0 0 1200 300"
        preserveAspectRatio="xMidYMid slice"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.5 }}
      >
        <defs>
          <radialGradient id="petal-mag" cx="85%" cy="25%" r="40%">
            <stop offset="0%" stopColor="#DA518C" stopOpacity="1"/>
            <stop offset="100%" stopColor="#DA518C" stopOpacity="0"/>
          </radialGradient>
          <radialGradient id="petal-teal" cx="15%" cy="70%" r="45%">
            <stop offset="0%" stopColor="#00A79D" stopOpacity="0.9"/>
            <stop offset="100%" stopColor="#00A79D" stopOpacity="0"/>
          </radialGradient>
          <radialGradient id="petal-green" cx="55%" cy="110%" r="35%">
            <stop offset="0%" stopColor="#57BD84" stopOpacity="0.75"/>
            <stop offset="100%" stopColor="#57BD84" stopOpacity="0"/>
          </radialGradient>
          <radialGradient id="petal-gold" cx="70%" cy="80%" r="25%">
            <stop offset="0%" stopColor="#FCB56C" stopOpacity="0.5"/>
            <stop offset="100%" stopColor="#FCB56C" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <rect width="1200" height="300" fill="url(#petal-mag)"/>
        <rect width="1200" height="300" fill="url(#petal-teal)"/>
        <rect width="1200" height="300" fill="url(#petal-green)"/>
        <rect width="1200" height="300" fill="url(#petal-gold)"/>
      </svg>

      {/* In-hero top bar — white-outline logo + phone */}
      <div style={{
        position: "relative",
        maxWidth: 1200, margin: "0 auto",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 16, marginBottom: 20,
      }}>
        <a href="https://lotusassist.com.au" style={{ display: "flex", alignItems: "center", textDecoration: "none" }}>
          <img src={window.__resources?.logoReverse || "/assets/logo-primary-reverse-navy.png"} alt="Lotus Assist" style={{ height: 100 }} />
        </a>
        <a href="tel:1800645809" style={{
          fontSize: 14, fontWeight: 600, color: "#fff", textDecoration: "none",
          display: "inline-flex", alignItems: "center", gap: 8,
          padding: "8px 16px", borderRadius: 999,
          background: "rgba(255,255,255,0.12)",
          border: "1px solid rgba(255,255,255,0.22)",
          backdropFilter: "blur(8px)",
        }}>
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
          <span>1800 645 809</span>
        </a>
      </div>

      <div style={{ position: "relative", maxWidth: 720, margin: "0 auto" }}>
        {schema.eyebrow && (
          <div style={{
            fontSize: 12,
            letterSpacing: ".12em",
            textTransform: "uppercase",
            fontWeight: 700,
            color: "var(--la-gold-500)",
            marginBottom: 14,
          }}>{schema.eyebrow}</div>
        )}
        <h1 style={{
          margin: "0 0 14px",
          fontSize: "clamp(32px, 4.5vw, 44px)",
          fontWeight: 700,
          lineHeight: 1.1,
          letterSpacing: "-0.01em",
          color: "#fff",
          textWrap: "balance",
        }}>{schema.title}</h1>
        {schema.intro && (
          <p style={{
            margin: 0,
            fontSize: 17,
            lineHeight: 1.55,
            color: "rgba(255,255,255,0.9)",
            maxWidth: 620,
            textWrap: "pretty",
          }}>{schema.intro}</p>
        )}
      </div>
    </section>
  );
}

function FormFooterNote() {
  return (
    <div style={{
      maxWidth: 720,
      margin: "24px auto 0",
      padding: "0 8px",
      textAlign: "center",
      color: "var(--fg-soft)",
      fontSize: 13.5,
      lineHeight: 1.6,
    }}>
      Questions? Call us on <a href="tel:1800645809" style={{ color: "var(--brand)", fontWeight: 600 }}>1800 645 809</a> or email <a href="mailto:planmanager@lotusassist.com.au" style={{ color: "var(--brand)", fontWeight: 600 }}>planmanager@lotusassist.com.au</a>.
    </div>
  );
}

function FormFooter() {
  return (
    <footer style={{
      background: "var(--la-teal-900)",
      color: "rgba(255,255,255,0.75)",
      padding: "28px 20px",
      fontSize: 13,
    }}>
      <div style={{
        maxWidth: 1200,
        margin: "0 auto",
        display: "flex",
        flexWrap: "wrap",
        gap: 16,
        justifyContent: "space-between",
        alignItems: "center",
      }}>
        <div style={{ maxWidth: 780, lineHeight: 1.55 }}>
          To endorse us as a PACE provider, Support Coordinator, Recovery Coach and/or Plan Manager, call the NDIS National Call Centre on <a href="tel:1800800110" style={{ color: "var(--la-gold-500)", fontWeight: 600, textDecoration: "none" }}>1800 800 110</a> and state our provider number <strong style={{ color: "#fff" }}>4050072073</strong>.
        </div>
        <div style={{ color: "rgba(255,255,255,0.55)", whiteSpace: "nowrap" }}>© {new Date().getFullYear()} Lotus Assist Pty Ltd</div>
      </div>
    </footer>
  );
}

Object.assign(window, { FormPage });