/* global React */
const { Field, Button, Icon } = window.MissionInsurancePartnersDesignSystem_445ed5;

function ConsultationPage() {
  const [sent, setSent] = React.useState(false);
  const { PageFooter } = window;
  return (
    <>
      <section style={{ background: "linear-gradient(155deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%)", color: "#fff", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: "0 0 0 auto", width: "40%", background: "var(--gradient-accent)", clipPath: "polygon(28% 0, 100% 0, 100% 100%, 0 100%)", opacity: 0.5 }} />
        <div className="mip-hero-grid" style={{ position: "relative", maxWidth: "var(--container-max)", marginInline: "auto", paddingInline: "var(--container-pad)", paddingBlock: "var(--space-9)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-9)", alignItems: "center", width: "100%" }}>
          <div>
            <span style={{ fontFamily: "var(--font-ui)", fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", fontSize: "var(--fs-eyebrow)", color: "var(--gold-300)" }}>100% Free Consultation</span>
            <h1 style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-display)", color: "#fff", margin: "0.75rem 0 1rem", lineHeight: 1.08, letterSpacing: "-0.02em" }}>Let's find coverage that actually fits your life.</h1>
            <p style={{ fontSize: "var(--fs-lead)", color: "rgba(255,255,255,0.9)", lineHeight: "var(--lh-snug)", margin: "0 0 1.75rem", maxWidth: "46ch" }}>Ready to secure your family's future? Book a one-on-one call with a licensed advisor. No obligation, no sales quotas — just real answers.</p>
            <div style={{ display: "flex", alignItems: "center", gap: "0.9rem", background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.18)", borderRadius: "var(--radius-pill)", padding: "0.5rem 1.1rem 0.5rem 0.5rem", marginBottom: "1.75rem", width: "fit-content" }}>
              <img src={window.ANTHONY} alt="Anthony Hendrickson" style={{ width: 52, height: 52, borderRadius: "999px", objectFit: "cover", border: "2px solid var(--gold-300)" }} />
              <div><div style={{ fontWeight: 700 }}>You'll talk with Anthony Hendrickson</div><div style={{ fontSize: "var(--fs-sm)", color: "var(--gold-300)" }}>Founder &amp; Licensed Advisor</div></div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
              {[["clock", "Takes 30 seconds to book"], ["hand-heart", "No pressure, ever"], ["phone", "Talk to a real, licensed human"]].map(([ic, t]) => (
                <span key={t} style={{ display: "flex", alignItems: "center", gap: "0.75rem", fontWeight: 600 }}><Icon name={ic} size={22} color="var(--gold-300)" />{t}</span>
              ))}
            </div>
          </div>
          <div style={{ background: "#fff", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-lg)", padding: "var(--space-7)" }}>
            {sent ? (
              <div style={{ textAlign: "center", padding: "var(--space-6) 0" }}>
                <div style={{ width: 72, height: 72, borderRadius: "999px", background: "var(--blue-50)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 1.25rem" }}><Icon name="check" size={40} strokeWidth={3} color="var(--brand-primary)" /></div>
                <h2 style={{ fontFamily: "var(--font-display)", color: "var(--text-heading)", margin: "0 0 0.5rem" }}>You're all set!</h2>
                <p style={{ color: "var(--text-body)", margin: "0 0 1.5rem" }}>A licensed advisor will reach out within one business day. Talk soon.</p>
                <Button intent="secondary" onClick={() => window.go("home")}>Back to Home</Button>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); window.scrollTo(0, 0); }} style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-4)" }}>
                <h2 style={{ gridColumn: "1/-1", fontFamily: "var(--font-display)", color: "var(--text-heading)", margin: "0 0 0.25rem", fontSize: "var(--fs-h3)" }}>Make an appointment</h2>
                <Field label="First name" name="fn" placeholder="Jane" required />
                <Field label="Last name" name="ln" placeholder="Doe" required />
                <Field style={{ gridColumn: "1/-1" }} label="Phone number" type="tel" name="phone" placeholder="(555) 555-5555" required />
                <Field style={{ gridColumn: "1/-1" }} label="Email" type="email" name="email" placeholder="jane@email.com" />
                <Field style={{ gridColumn: "1/-1" }} label="What do you need help with?" options={["Medicare Supplement (Medigap)", "Medicare Advantage", "ACA / Under 65", "Long-Term Care", "Final Expense", "Not sure yet"]} />
                <div style={{ gridColumn: "1/-1", marginTop: "0.5rem" }}><Button intent="cta" fullWidth size="lg" type="submit">Book My Free Consultation</Button></div>
                <p style={{ gridColumn: "1/-1", textAlign: "center", fontSize: "var(--fs-sm)", color: "var(--text-muted)", margin: 0 }}>One call. No pressure. Just real answers.</p>
              </form>
            )}
          </div>
        </div>
      </section>
      <PageFooter />
    </>
  );
}
window.ConsultationPage = ConsultationPage;