/* global React */
const { useState, useEffect } = React;

// ────────────────────────────────────────────────────────────────
// Pearl Pilates — components (recreated marketing site)
// ────────────────────────────────────────────────────────────────

// Live-site CDN assets
const IMG = {
  logo: "https://cdn.prod.website-files.com/6977c0c42844752583a2c269/6977c1e75d0ae1c5620b018d_relume-726832.png",
  reformer: "https://cdn.prod.website-files.com/6977c0c42844752583a2c269/698f44c159254c37de580fbe_IMG_5578.jpeg",
  reception: "https://cdn.prod.website-files.com/6977c0c42844752583a2c269/6996112c85d9f9d3afa3b16a_Screenshot%202026-02-18%20122059.png",
  classPhoto: "https://cdn.prod.website-files.com/6977c0c42844752583a2c269/697fa5dd6f7d1878c226dcb0_pexels-ahmetkurt-25599827%20(1).jpg",
};

const Mark = ({ size = 28, color = "currentColor" }) => (
  <svg width={size} height={size * (140/240)} viewBox="0 0 240 140" fill={color} aria-hidden="true" style={{ display: "block" }}>
    <circle cx="118" cy="22" r="14"/>
    <path d="M10,70 C50,40 90,52 130,58 C170,64 210,58 232,46 L232,58 C210,70 170,82 130,76 C90,70 50,58 10,82 Z"/>
    <path d="M20,90 C60,68 100,80 140,80 C180,80 215,72 232,62 L232,74 C215,86 180,98 140,94 C100,90 60,80 20,102 Z" opacity="0.78"/>
    <path d="M30,110 C70,92 115,102 155,98 C190,96 215,88 232,80 L232,92 C215,104 190,112 155,114 C115,116 70,108 30,124 Z" opacity="0.55"/>
  </svg>
);

const Wordmark = ({ height = 56, invert = false }) => (
  <img
    src={IMG.logo}
    alt="Pearl Pilates"
    style={{
      height,
      width: "auto",
      display: "block",
      mixBlendMode: invert ? "screen" : "multiply",
      filter: invert ? "invert(1) grayscale(1) brightness(2)" : "none",
    }}
  />
);

const Eyebrow = ({ children, color = "var(--pp-pearl-600)" }) => (
  <span style={{ fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 500, letterSpacing: "0.28em", textTransform: "uppercase", color }}>
    {children}
  </span>
);

const Button = ({ children, variant = "primary", as = "button", arrow = false, ...props }) => {
  const base = {
    fontFamily: "var(--font-sans)",
    fontSize: 12,
    fontWeight: 500,
    letterSpacing: "0.16em",
    textTransform: "uppercase",
    padding: "16px 30px",
    borderRadius: 999,
    border: "1px solid transparent",
    cursor: "pointer",
    lineHeight: 1,
    transition: "background-color 320ms cubic-bezier(0.22,0.61,0.36,1), color 320ms, box-shadow 320ms, border-color 320ms",
    textDecoration: "none",
    display: "inline-flex",
    alignItems: "center",
    gap: 10,
  };
  const variants = {
    primary:   { background: "var(--pp-pearl-500)", color: "#fff" },
    secondary: { background: "transparent", color: "var(--fg)", borderColor: "var(--line-strong)" },
    inverse:   { background: "var(--pp-cream-100)", color: "var(--pp-ink-800)" },
    ghost:     { background: "transparent", color: "var(--fg)", padding: "16px 4px", borderRadius: 0 },
    dark:      { background: "var(--pp-ink-800)", color: "var(--pp-cream-100)" },
  };
  const Tag = as;
  return (
    <Tag
      style={{ ...base, ...variants[variant] }}
      onMouseEnter={(e) => {
        if (variant === "primary") { e.currentTarget.style.background = "var(--pp-pearl-600)"; e.currentTarget.style.boxShadow = "var(--shadow-glow)"; }
        if (variant === "secondary") { e.currentTarget.style.background = "var(--pp-cream-200)"; e.currentTarget.style.borderColor = "var(--pp-pearl-400)"; }
        if (variant === "ghost") { e.currentTarget.style.color = "var(--accent)"; }
        if (variant === "dark") { e.currentTarget.style.background = "var(--pp-ink-900)"; }
      }}
      onMouseLeave={(e) => {
        if (variant === "primary") { e.currentTarget.style.background = "var(--pp-pearl-500)"; e.currentTarget.style.boxShadow = "none"; }
        if (variant === "secondary") { e.currentTarget.style.background = "transparent"; e.currentTarget.style.borderColor = "var(--line-strong)"; }
        if (variant === "ghost") { e.currentTarget.style.color = "var(--fg)"; }
        if (variant === "dark") { e.currentTarget.style.background = "var(--pp-ink-800)"; }
      }}
      {...props}
    >
      <span>{children}</span>
      {arrow ? <span style={{ fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: 16, letterSpacing: 0 }}>→</span> : null}
    </Tag>
  );
};

// ───── Top nav ─────
const TopNav = () => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const items = [
    { label: "Founders", href: "#founders" },
    { label: "Pricing", href: "#pricing" },
    { label: "FAQ", href: "#faq" },
    { label: "Contact", href: "#contact" },
  ];
  return (
    <nav className="pp-nav" style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      background: "var(--pp-cream-100)",
      borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
      transition: "border-color 320ms",
    }}>
      <div className="pp-nav-inner" style={{ maxWidth: 1320, margin: "0 auto", padding: "20px 40px", display: "grid", gridTemplateColumns: "auto 1fr auto", alignItems: "center", gap: 32 }}>
        <a href="#top" style={{ cursor: "pointer", textDecoration: "none", display: "block" }}><Wordmark height={48} /></a>
        <div className="pp-nav-menu" style={{ display: "flex", gap: 32, justifyContent: "center" }}>
          {items.map(item => (
            <a key={item.label} href={item.href}
              style={{
                fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 500,
                letterSpacing: "0.22em", textTransform: "uppercase",
                color: "var(--fg)", opacity: 0.72,
                cursor: "pointer", paddingBottom: 4,
                textDecoration: "none",
                transition: "opacity 320ms",
              }}
              onMouseEnter={e => e.currentTarget.style.opacity = 1}
              onMouseLeave={e => e.currentTarget.style.opacity = 0.72}>
              {item.label}
            </a>
          ))}
        </div>
        <Button className="pp-nav-book" variant="primary" as="a" href="https://pearlpilates.v.frappe.cloud/book" target="_blank" rel="noreferrer">Book a Class</Button>
      </div>
    </nav>
  );
};

// ───── Hero ─────
const Hero = () => (
  <section id="top" className="pp-hero" style={{ position: "relative", paddingTop: 140, paddingBottom: 96 }}>
    <div className="pp-hero-inner" style={{
      maxWidth: 1320, margin: "0 auto", padding: "0 40px",
      display: "grid", gridTemplateColumns: "0.95fr 1.05fr", gap: 80, alignItems: "center",
    }}>
      <div className="pp-hero-image" style={{
        aspectRatio: "0.82 / 1",
        borderRadius: "999px 999px 24px 24px",
        overflow: "hidden",
        boxShadow: "var(--shadow-lg)",
        position: "relative",
      }}>
        <img src={IMG.reformer} alt="Pearl Pilates reformer room" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      </div>
      <div>
        <h1 style={{
          fontFamily: "var(--font-serif)", fontWeight: 300,
          fontSize: "clamp(56px, 7.5vw, 104px)", lineHeight: 1.01, letterSpacing: "-0.025em",
          margin: "0 0 32px", color: "var(--fg)", textWrap: "balance",
        }}>
          Move with <em style={emStyle}>Intention.</em><br/>
          Strengthen with <em style={emStyle}>Grace.</em>
        </h1>
        <p style={{
          fontFamily: "var(--font-serif)", fontWeight: 300, fontStyle: "italic",
          fontSize: 24, lineHeight: 1.45, color: "var(--fg)", maxWidth: "32ch",
          margin: "0 0 36px",
        }}>
          A modern Pilates studio in Erie, Colorado designed for mindful movement, lasting strength, and a supportive community.
        </p>
        <div className="pp-hero-buttons" style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
          <Button variant="primary" as="a" href="https://pearlpilates.v.frappe.cloud/book" target="_blank" rel="noreferrer">Book a Class</Button>
          <Button variant="secondary" as="a" href="#contact">Contact Us</Button>
        </div>
      </div>
    </div>
  </section>
);

const emStyle = {
  fontFamily: "var(--font-script)",
  fontStyle: "normal",
  fontWeight: 400,
  fontSize: "1.12em",
  color: "var(--pp-pearl-500)",
  padding: "0 0.04em",
  lineHeight: 0.7,
  verticalAlign: "-0.06em",
};

// ───── Intro / About band ─────
const Intro = () => (
  <section className="pp-intro" style={{ padding: "96px 40px 144px" }}>
    <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
      <Eyebrow>The Practice</Eyebrow>
      <p style={{
        fontFamily: "var(--font-serif)", fontWeight: 300,
        fontSize: "clamp(28px, 3vw, 40px)", lineHeight: 1.35, letterSpacing: "-0.015em",
        color: "var(--fg)", margin: "24px 0 0", textWrap: "balance",
      }}>
        At Pearl Pilates, we believe Pilates is more than a workout — it's a <em style={emStyle}>practice</em>. Our studio offers expertly guided classes that build strength, improve mobility, and restore balance in a calm, welcoming space.
      </p>
    </div>
  </section>
);

// ───── Image band — left photo + right dark panel with copy ─────
const Diptych = () => (
  <section className="pp-diptych" style={{
    position: "relative",
    padding: "160px 40px",
    background: "var(--pp-ink-900)",
    color: "var(--pp-cream-100)",
    overflow: "hidden",
  }}>
    <div className="pp-diptych-bg" style={{
      position: "absolute", inset: 0, right: "50%",
      backgroundImage: `linear-gradient(180deg, rgba(31,28,25,0.25), rgba(31,28,25,0.45)), url(${IMG.classPhoto})`,
      backgroundSize: "cover",
      backgroundPosition: "center",
      backgroundRepeat: "no-repeat",
    }} />
    <div className="pp-diptych-grid" style={{
      position: "relative", zIndex: 1,
      maxWidth: 1320, margin: "0 auto",
      display: "grid", gridTemplateColumns: "0.95fr 1.05fr",
      gap: 80, alignItems: "center",
    }}>
      <div className="pp-diptych-image" style={{
        aspectRatio: "0.88 / 1",
        borderRadius: "999px 999px 24px 24px",
        overflow: "hidden",
        boxShadow: "var(--shadow-lg)",
      }}>
        <img
          src={IMG.reception}
          alt="Pearl Pilates reception"
          style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
        />
      </div>
      <div>
        <Eyebrow color="var(--pp-pearl-300)">The Studio</Eyebrow>
        <h2 style={{
          fontFamily: "var(--font-serif)", fontWeight: 300,
          fontSize: "clamp(40px, 5vw, 64px)", lineHeight: 1.05, letterSpacing: "-0.02em",
          margin: "24px 0 24px", color: "var(--pp-cream-100)", textWrap: "balance",
        }}>
          A calm, welcoming <em style={{ ...emStyle, color: "var(--pp-pearl-300)" }}>space</em>.
        </h2>
        <p style={{
          fontFamily: "var(--font-sans)", fontSize: 18, fontWeight: 300, lineHeight: 1.7,
          color: "var(--pp-cream-200)", maxWidth: "44ch", margin: 0,
        }}>
          Pale wood reformers, soft arches, and cream-stone walls — the studio is built around warm natural light and the quiet rhythm of a daily practice.
        </p>
      </div>
    </div>
  </section>
);

// ───── Founders Club intro ─────
const FoundersIntro = () => (
  <section id="founders" className="pp-founders-intro" style={{ background: "var(--pp-cream-200)", padding: "144px 40px 96px" }}>
    <div style={{ maxWidth: 980, margin: "0 auto", textAlign: "center" }}>
      <Eyebrow>Founders Club</Eyebrow>
      <h2 style={{
        fontFamily: "var(--font-serif)", fontWeight: 300,
        fontSize: "clamp(48px, 6vw, 80px)", lineHeight: 1.05, letterSpacing: "-0.02em",
        margin: "24px 0 28px", color: "var(--fg)", textWrap: "balance",
      }}>
        Be there from the <em style={emStyle}>beginning</em>.
      </h2>
      <p style={{
        fontFamily: "var(--font-sans)", fontSize: 19, fontWeight: 300, lineHeight: 1.7,
        color: "var(--fg)", maxWidth: "62ch", margin: "0 auto",
      }}>
        Our Founders Club is a limited early access membership created for those who want to help shape Pearl Pilates from day one. Founding members lock in our best monthly rate, enjoy unlimited classes, and receive special guest passes as our way of saying thank you for joining us early.
      </p>
    </div>
  </section>
);

// ───── Pricing cards ─────
const PricingCard = ({ eyebrow, featured, title, price, period, blurb, includes }) => (
  <article className="pp-pricing-card" style={{
    background: featured ? "var(--pp-ink-800)" : "#ffffff",
    color: featured ? "var(--pp-cream-100)" : "var(--fg)",
    borderRadius: 28,
    padding: 48,
    boxShadow: featured ? "var(--shadow-lg)" : "var(--shadow-md)",
    display: "flex", flexDirection: "column", gap: 24,
    position: "relative",
  }}>
    {featured ? (
      <div style={{
        position: "absolute", top: 24, right: 24,
        fontFamily: "var(--font-sans)", fontSize: 10, fontWeight: 500,
        letterSpacing: "0.22em", textTransform: "uppercase",
        color: "var(--pp-pearl-300)",
        border: "1px solid var(--pp-pearl-400)",
        borderRadius: 999, padding: "6px 12px",
      }}>Limited</div>
    ) : null}
    <Mark size={34} color={featured ? "var(--pp-pearl-300)" : "var(--pp-pearl-500)"} />
    <div>
      <Eyebrow color={featured ? "var(--pp-pearl-300)" : "var(--pp-pearl-600)"}>{eyebrow}</Eyebrow>
      <h3 style={{
        fontFamily: "var(--font-serif)", fontWeight: 300,
        fontSize: 44, letterSpacing: "-0.02em", lineHeight: 1.05,
        margin: "14px 0 0",
        color: featured ? "var(--pp-cream-100)" : "var(--fg)",
      }}>{title}</h3>
    </div>
    <p style={{
      fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 300, lineHeight: 1.7,
      margin: 0, color: featured ? "var(--pp-cream-200)" : "var(--fg-muted)",
      maxWidth: "36ch",
    }}>{blurb}</p>
    <div style={{ height: 1, background: featured ? "var(--line-on-dark)" : "var(--line)", margin: "8px 0" }} />
    <div>
      <Eyebrow color={featured ? "var(--pp-pearl-300)" : "var(--pp-pearl-600)"}>Includes</Eyebrow>
      <ul style={{ listStyle: "none", padding: 0, margin: "18px 0 0", display: "grid", gap: 14 }}>
        {includes.map(b => (
          <li key={b} style={{
            fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 300, lineHeight: 1.55,
            color: featured ? "var(--pp-cream-100)" : "var(--fg)",
            display: "grid", gridTemplateColumns: "16px 1fr", alignItems: "baseline", gap: 12,
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: "50%",
              background: featured ? "var(--pp-pearl-300)" : "var(--pp-pearl-500)",
              display: "inline-block", transform: "translateY(-2px)",
            }}/>
            <span>{b}</span>
          </li>
        ))}
      </ul>
    </div>
    <div style={{ flex: 1 }} />
    <Button
      variant={featured ? "inverse" : "primary"}
      as="a" href="#contact"
      style={{ alignSelf: "flex-start" }}
    >Get Started</Button>
  </article>
);

const Pricing = () => (
  <section id="pricing" className="pp-pricing" style={{ background: "var(--pp-cream-200)", padding: "0 40px 144px" }}>
    <div className="pp-pricing-grid" style={{ maxWidth: 1180, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
      <PricingCard
        featured
        eyebrow="Membership"
        title="Founders Club"
        blurb="Our best rate, locked in for as long as you stay. A small, intentional circle helping shape Pearl Pilates from day one."
        includes={[
          "Unlimited Pilates classes per month",
          "Introductory Founders rate",
          "3 guest passes per year to share Pearl Pilates",
          "Access to the full class schedule",
          "Early-member status as the studio opens",
        ]}
      />
      <PricingCard
        eyebrow="Membership"
        title="Regular"
        blurb="A steady monthly rhythm. Ongoing access to the full schedule, designed for those building a long-term practice with us."
        includes={[
          "Unlimited Pilates classes per month",
          "Ongoing access to the full class schedule",
          "Consistent monthly membership",
          "Supportive, small-group studio environment",
          "Up to 1 guest per year",
        ]}
      />
    </div>
  </section>
);

// ───── Class Packages + Single Drop In ─────
const PackagesAndDropIn = () => (
  <section className="pp-packages" style={{ padding: "144px 40px" }}>
    <div className="pp-packages-grid" style={{ maxWidth: 1180, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64 }}>
      <article>
        <Eyebrow>Class Packages</Eyebrow>
        <h3 style={blockHeading}>
          Flexibility without the <em style={emStyle}>commitment</em>.
        </h3>
        <p style={blockBody}>
          Ideal for those who want flexibility while saving on per-class pricing. Class packages are perfect if you attend regularly but don't need an unlimited membership. Use your classes at your own pace and enjoy the same high quality instruction and welcoming studio environment.
        </p>
        <a href="#contact" style={ghostLink}>Ask about packages →</a>
      </article>
      <article>
        <Eyebrow>Single Drop-In</Eyebrow>
        <h3 style={blockHeading}>
          One class, no <em style={emStyle}>commitment</em>.
        </h3>
        <p style={blockBody}>
          Perfect for first-time visitors, travelers, or anyone looking to try a class without a commitment. Join us for one Pilates class and experience the Pearl Pilates studio, teaching style, and community — no membership required.
        </p>
        <a href="https://pearlpilates.v.frappe.cloud/book" target="_blank" rel="noreferrer" style={ghostLink}>Book a drop-in →</a>
      </article>
    </div>
  </section>
);

const blockHeading = {
  fontFamily: "var(--font-serif)", fontWeight: 300,
  fontSize: 44, lineHeight: 1.08, letterSpacing: "-0.02em",
  margin: "20px 0 24px", color: "var(--fg)",
};
const blockBody = {
  fontFamily: "var(--font-sans)", fontSize: 17, fontWeight: 300, lineHeight: 1.7,
  margin: "0 0 28px", color: "var(--fg)", maxWidth: "46ch",
};
const ghostLink = {
  fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 500,
  letterSpacing: "0.22em", textTransform: "uppercase",
  color: "var(--pp-pearl-600)", textDecoration: "none",
  borderBottom: "1px solid var(--pp-pearl-400)", paddingBottom: 6,
};

// ───── FAQ ─────
const FAQ_ITEMS = [
  { q: "What should I bring?",
    a: "Bring yourself and wear comfortable clothes that let you move freely. We provide mats and props, so you don't need to carry anything extra." },
  { q: "Am I too stiff for Pilates?",
    a: "Stiffness is exactly where Pilates begins. Every body is welcome here, and our instructors will meet you at your starting point and help you progress at your own pace." },
  { q: "How often should I come?",
    a: "Start with once or twice a week and build from there. Consistency matters more than intensity, and we'll help you find a rhythm that fits your life." },
  { q: "What if I have an injury?",
    a: "Tell us about it before class starts. Our instructors modify movements to work around injuries and can suggest private sessions for more personalized attention." },
  { q: "What should I wear?",
    a: "Wear comfortable clothing that allows full movement and bring an open mind. We supply everything else you need, from mats to props and modifications. Just show up ready to move." },
];

const FAQItem = ({ q, a, open, onClick }) => (
  <div style={{ borderBottom: "1px solid var(--line)" }}>
    <button onClick={onClick} style={{
      width: "100%", background: "transparent", border: "none", cursor: "pointer",
      padding: "32px 0", display: "grid", gridTemplateColumns: "1fr 32px",
      alignItems: "center", gap: 24, textAlign: "left",
    }}>
      <span className="pp-faq-question" style={{
        fontFamily: "var(--font-serif)", fontWeight: 400, fontSize: 26,
        letterSpacing: "-0.01em", color: "var(--fg)",
      }}>{q}</span>
      <span style={{
        width: 32, height: 32, borderRadius: "50%",
        border: "1px solid var(--line-strong)",
        display: "grid", placeItems: "center",
        fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 300,
        color: "var(--fg)",
        transform: open ? "rotate(45deg)" : "rotate(0)",
        transition: "transform 320ms cubic-bezier(0.22,0.61,0.36,1)",
      }}>+</span>
    </button>
    <div style={{
      maxHeight: open ? 240 : 0, overflow: "hidden",
      transition: "max-height 480ms cubic-bezier(0.22,0.61,0.36,1)",
    }}>
      <p style={{
        fontFamily: "var(--font-sans)", fontSize: 17, fontWeight: 300, lineHeight: 1.7,
        margin: "0 0 32px", color: "var(--fg-muted)", maxWidth: "62ch",
      }}>{a}</p>
    </div>
  </div>
);

const FAQ = () => {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="pp-faq" style={{ background: "var(--pp-cream-200)", padding: "144px 40px" }}>
      <div className="pp-faq-grid" style={{ maxWidth: 1180, margin: "0 auto", display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 96, alignItems: "start" }}>
        <div className="pp-faq-sidebar" style={{ position: "sticky", top: 120 }}>
          <Eyebrow>Questions</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-serif)", fontWeight: 300,
            fontSize: "clamp(44px, 5vw, 64px)", lineHeight: 1.05, letterSpacing: "-0.02em",
            margin: "24px 0 24px", color: "var(--fg)",
          }}>
            Everything you need to <em style={emStyle}>know</em>.
          </h2>
          <p style={{
            fontFamily: "var(--font-sans)", fontSize: 17, fontWeight: 300, lineHeight: 1.7,
            color: "var(--fg-muted)", maxWidth: "38ch", margin: "0 0 28px",
          }}>
            About starting and continuing your Pilates practice with us. Reach out and we'll answer anything else.
          </p>
          <a href="#contact" style={ghostLink}>Get in touch →</a>
        </div>
        <div>
          {FAQ_ITEMS.map((it, i) => (
            <FAQItem key={it.q} q={it.q} a={it.a} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
};

// ───── Contact ─────
const Field = ({ label, type = "text", as = "input", name }) => {
  const Tag = as;
  const shared = {
    width: "100%",
    background: "transparent",
    border: "none",
    borderBottom: "1px solid rgba(245, 239, 230, 0.28)",
    padding: "14px 0",
    fontFamily: "var(--font-sans)", fontSize: 17, fontWeight: 300,
    color: "var(--pp-cream-100)",
    outline: "none",
    resize: "none",
    display: "block",
  };
  return (
    <label style={{ display: "block" }}>
      <span style={{
        display: "block",
        fontFamily: "var(--font-sans)", fontSize: 10, fontWeight: 500,
        letterSpacing: "0.28em", textTransform: "uppercase",
        color: "var(--pp-pearl-300)",
        marginBottom: 6,
      }}>{label}</span>
      <Tag
        type={type} name={name} rows={as === "textarea" ? 4 : undefined}
        style={shared}
        onFocus={e => e.currentTarget.style.borderBottomColor = "var(--pp-pearl-300)"}
        onBlur={e => e.currentTarget.style.borderBottomColor = "rgba(245, 239, 230, 0.28)"}
      />
    </label>
  );
};

const Contact = () => {
  const [status, setStatus] = useState("idle"); // idle | sending | success | error
  const [errorMessage, setErrorMessage] = useState("");
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (status === "sending") return;
    const data = Object.fromEntries(new FormData(e.currentTarget).entries());
    setStatus("sending");
    setErrorMessage("");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      });
      const payload = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(payload.error || "Could not send message. Please try again.");
      setStatus("success");
    } catch (err) {
      setStatus("error");
      setErrorMessage(err.message || "Could not send message. Please try again.");
    }
  };
  return (
    <section id="contact" className="pp-contact" style={{ background: "var(--pp-ink-800)", color: "var(--pp-cream-100)", padding: "144px 40px" }}>
      <div className="pp-contact-grid" style={{ maxWidth: 1180, margin: "0 auto", display: "grid", gridTemplateColumns: "0.95fr 1.05fr", gap: 96, alignItems: "start" }}>
        <div>
          <Eyebrow color="var(--pp-pearl-300)">Visit · Write</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-serif)", fontWeight: 300,
            fontSize: "clamp(48px, 6vw, 80px)", lineHeight: 1.04, letterSpacing: "-0.02em",
            margin: "24px 0 36px", color: "var(--pp-cream-100)", textWrap: "balance",
          }}>
            Contact <em style={{ ...emStyle, color: "var(--pp-pearl-300)" }}>us</em>.
          </h2>
          <div style={{ display: "grid", gap: 32, maxWidth: 420 }}>
            <div>
              <Eyebrow color="var(--pp-pearl-300)">Location</Eyebrow>
              <p style={{
                fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 300,
                fontSize: 22, lineHeight: 1.45, color: "var(--pp-cream-100)",
                margin: "12px 0 0",
              }}>
                149 S Briggs St, Suite 100<br/>Erie, CO 80516
              </p>
            </div>
            <div>
              <Eyebrow color="var(--pp-pearl-300)">Email</Eyebrow>
              <p style={{
                fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 300,
                fontSize: 22, lineHeight: 1.45, margin: "12px 0 0",
              }}>
                <a href="mailto:pearlpilates1@gmail.com" style={{ color: "var(--pp-cream-100)", textDecoration: "none", borderBottom: "1px solid var(--pp-pearl-400)", paddingBottom: 2 }}>pearlpilates1@gmail.com</a>
              </p>
            </div>
            <div>
              <Eyebrow color="var(--pp-pearl-300)">Hours</Eyebrow>
              <p style={{
                fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 300, lineHeight: 1.8,
                color: "var(--pp-cream-200)", margin: "12px 0 0",
              }}>
                Mon – Fri · 6:00 AM – 7:30 PM<br/>
                Sat – Sun · 8:00 AM – 12:00 PM
              </p>
            </div>
          </div>
        </div>
        <form onSubmit={handleSubmit} className="pp-contact-form" style={{
          background: "rgba(245, 239, 230, 0.04)",
          border: "1px solid var(--line-on-dark)",
          borderRadius: 24, padding: 48,
        }}>
          {status === "success" ? (
            <div style={{ padding: "48px 0", textAlign: "center" }}>
              <Mark size={48} color="var(--pp-pearl-300)" />
              <h3 style={{
                fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: 36,
                letterSpacing: "-0.02em", margin: "24px 0 12px", color: "var(--pp-cream-100)",
              }}>Thank you.</h3>
              <p style={{
                fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 300, lineHeight: 1.7,
                color: "var(--pp-cream-200)", margin: "0 auto", maxWidth: "44ch",
              }}>Your message has been received. We'll be in touch soon — and we look forward to welcoming you to the studio.</p>
            </div>
          ) : (
            <>
              <Eyebrow color="var(--pp-pearl-300)">Send a Note</Eyebrow>
              <div style={{ display: "grid", gap: 24, marginTop: 28 }}>
                <Field label="Name" name="name" />
                <Field label="Email" type="email" name="email" />
                <Field label="Message" as="textarea" name="message" />
              </div>
              <div aria-hidden="true" style={{
                position: "absolute", left: "-10000px", top: "auto",
                width: 1, height: 1, overflow: "hidden",
              }}>
                <label>
                  Website
                  <input type="text" name="website" tabIndex={-1} autoComplete="off" />
                </label>
              </div>
              <p style={{
                fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 300, lineHeight: 1.6,
                color: "var(--pp-cream-300)", margin: "28px 0 0", maxWidth: "44ch",
              }}>
                By submitting this form, I agree to be contacted by Pearl Pilates via email or phone.
              </p>
              {status === "error" && (
                <p role="alert" style={{
                  fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 400, lineHeight: 1.6,
                  color: "var(--pp-warning, #b9863a)", margin: "20px 0 0",
                }}>
                  {errorMessage}
                </p>
              )}
              <div style={{ marginTop: 32 }}>
                <Button variant="primary" type="submit" disabled={status === "sending"}>
                  {status === "sending" ? "Sending…" : "Send Message"}
                </Button>
              </div>
            </>
          )}
        </form>
      </div>
    </section>
  );
};

// ───── Footer ─────
const Footer = () => (
  <footer className="pp-footer" style={{ background: "var(--pp-ink-900)", color: "var(--pp-cream-200)", padding: "80px 40px 40px" }}>
    <div style={{ maxWidth: 1320, margin: "0 auto" }}>
      <div className="pp-footer-grid" style={{
        display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", gap: 48,
        paddingBottom: 56, borderBottom: "1px solid var(--line-on-dark)",
      }}>
        <div className="pp-footer-brand">
          <Wordmark height={80} invert />
          <p style={{
            fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 300,
            fontSize: 19, lineHeight: 1.5, marginTop: 24,
            color: "var(--pp-cream-200)", maxWidth: "30ch",
          }}>
            Move with intention. Strengthen with grace.
          </p>
        </div>
        {[
          { h: "Studio", links: [["Founders Club", "#founders"], ["Pricing", "#pricing"], ["FAQ", "#faq"], ["Contact", "#contact"]] },
          { h: "Visit", links: [["149 S Briggs St", "#contact"], ["Suite 100", "#contact"], ["Erie, CO 80516", "#contact"]] },
          { h: "Stay close", links: [["Book a Class", "https://pearlpilates.v.frappe.cloud/book"], ["pearlpilates1@gmail.com", "mailto:pearlpilates1@gmail.com"], ["Instagram", "#"]] },
        ].map(col => (
          <div key={col.h}>
            <Eyebrow color="var(--pp-pearl-300)">{col.h}</Eyebrow>
            <ul style={{ listStyle: "none", padding: 0, margin: "20px 0 0", display: "grid", gap: 12 }}>
              {col.links.map(([label, href]) => (
                <li key={label}>
                  <a href={href} style={{
                    fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 300,
                    fontSize: 18, color: "var(--pp-cream-100)", textDecoration: "none",
                  }}>{label}</a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div className="pp-footer-bottom" style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        paddingTop: 28, gap: 24, flexWrap: "wrap",
        fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.2em",
        textTransform: "uppercase", color: "var(--pp-pearl-300)",
      }}>
        <span>© 2026 Pearl Pilates · All Rights Reserved</span>
        <span>Erie, Colorado</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  Mark, Wordmark, Eyebrow, Button,
  TopNav, Hero, Intro, Diptych,
  FoundersIntro, Pricing, PackagesAndDropIn,
  FAQ, Contact, Footer,
});