// VELOUR marketing site — closing dark band: the compounding premise (a curve that
// draws itself over 180 days) flowing into the final CTA. Plus the site footer.
const { Button } = window.VelourDesignSystem_380ed4;

function CompoundCurve() {
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);
  React.useEffect(() => {
    if (!("IntersectionObserver" in window) || (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches)) { setInView(true); return; }
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting) { setInView(true); io.disconnect(); } });
    }, { threshold: 0.35 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return (
    <div ref={ref} style={{ marginTop: 56, position: "relative" }}>
      <svg viewBox="0 0 1000 340" preserveAspectRatio="xMidYMid meet" role="img" aria-label="A curve rising slowly, then steeply, over 180 days" style={{ width: "100%", height: "auto", display: "block" }}>
        <line x1="0" y1="300" x2="1000" y2="300" stroke="#4a4a47" strokeWidth="1" />
        {[["0", "Day 1"], ["310", "Day 30"], ["640", "Day 90"], ["940", "Day 180"]].map(([x, label]) => (
          <text key={label} x={x} y="326" style={{ fontFamily: "var(--font-sans)", fontSize: 11, fill: "rgba(247,244,239,0.5)", letterSpacing: "0.14em" }}>{label}</text>
        ))}
        <path d="M0,298 C180,294 320,288 460,272 C600,256 700,220 790,160 C860,112 930,58 1000,20"
          fill="none" stroke="var(--sage)" strokeWidth="2.5"
          strokeDasharray="1600" strokeDashoffset={inView ? 0 : 1600}
          style={{ transition: "stroke-dashoffset 2.8s cubic-bezier(.16,1,.3,1)" }} />
      </svg>
      <p style={{
        position: "absolute", right: "4%", top: "6%", margin: 0,
        fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: "clamp(17px, 2.2vw, 24px)",
        color: "var(--sage)", maxWidth: "22ch", textAlign: "right",
        opacity: inView ? 1 : 0, transform: inView ? "none" : "translateY(10px)",
        transition: "opacity .8s cubic-bezier(.16,1,.3,1) 2s, transform .8s cubic-bezier(.16,1,.3,1) 2s",
      }}>Day 14 feels like nothing.<br />Day 180 feels like a different life.</p>
    </div>
  );
}

function CTASection({ onNavigate }) {
  return (
    <section className="velour-dark vlr-cta" style={{ background: "var(--ink)" }}>
      <style>{`
        .vlr-cta { padding: 112px 40px 120px; }
        @media (max-width: 540px) { .vlr-cta { padding: 72px 20px 80px; } }
      `}</style>
      <div style={{ maxWidth: 1080, margin: "0 auto" }}>
        <div style={{ maxWidth: 640 }}>
          <window.Eyebrow color="var(--sand)">The premise</window.Eyebrow>
          <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 46, lineHeight: 1.1, letterSpacing: "-0.02em", color: "var(--text-primary)", margin: "18px 0 0", textWrap: "balance" }}>Nothing here is dramatic. That's the point.</h2>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--text-secondary)", maxWidth: 520, margin: "20px 0 0" }}>A ritual kept for two weeks. A coat worn one more time. An errand batched, a dinner prepped ahead. Small, kept daily — it compounds.</p>
        </div>
        <CompoundCurve />
        <div style={{ maxWidth: 760, margin: "104px auto 0", textAlign: "center" }}>
          <window.Eyebrow color="var(--sand)" style={{ marginBottom: 24 }}>Soft systems. Sharp life.</window.Eyebrow>
          <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 52, lineHeight: 1.08, letterSpacing: "-0.02em", color: "var(--text-primary)", margin: 0, textWrap: "balance" }}>Start small. What you tend to, grows.</h2>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--text-secondary)", maxWidth: 480, margin: "22px auto 0" }}>Free to start, and free to stay. No card, no countdown, no noise.</p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 36, flexWrap: "wrap" }}>
            <Button size="lg" iconRight="arrow-right" onClick={() => window.velourOpenSignup && window.velourOpenSignup()}>Begin your first ritual</Button>
            <Button size="lg" variant="ghost" onClick={() => onNavigate && onNavigate("pricing")}>See membership</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function SiteFooter({ onNavigate }) {
  const go = (view) => (e) => { e.preventDefault(); view && onNavigate && onNavigate(view); };
  const cols = [
    { head: "Product", links: [{ t: "Features", v: "features" }, { t: "Pricing", v: "pricing" }, { t: "Blog", v: "blog" }] },
    // Careers, Press, Help center and Brand were removed 15 Sep 2026 (owner's call).
    // They were muted "coming soon" labels for pages that don't exist, and a dead
    // end reads as unfinished, not calm. Contact replaced Help center: before it,
    // the public site gave a visitor no way to reach anyone. Same inbox as the
    // members' "Write to us" (VELOUR_FEEDBACK_TO in _ds_bundle.js).
    { head: "Company", links: [{ t: "About", v: "about" }, { t: "Manifesto", v: "manifesto" }] },
    // Privacy and Terms were once listed with no view attached and navigated
    // nowhere — a footer that offers a privacy policy it doesn't have is a claim.
    { head: "Resources", links: [{ t: "Privacy", v: "privacy" }, { t: "Terms", v: "terms" }, { t: "Contact", href: "mailto:" + (window.VELOUR_FEEDBACK_TO || "admin@tryvelour.com") }] },
  ];
  return (
    <footer className="vlr-foot" style={{ background: "var(--bg-page)", borderTop: "var(--border-width) solid var(--border)" }}>
      <style>{`
        .vlr-foot { padding: 64px 40px 40px; }
        .vlr-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
        .vlr-foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
        /* Four columns want 554px. The brand block takes the full width first, then
           the link columns halve — three columns on a phone leave each about 87px,
           one bad font metric from wrapping mid-link, so phones get two. */
        @media (max-width: 900px) {
          .vlr-foot-grid { grid-template-columns: 1fr 1fr 1fr; gap: 30px 24px; }
          .vlr-foot-brand { grid-column: 1 / -1; }
        }
        @media (max-width: 540px) {
          .vlr-foot { padding: 48px 20px 32px; }
          .vlr-foot-grid { grid-template-columns: 1fr 1fr; }
          .vlr-foot-bottom { flex-wrap: wrap; }
        }
      `}</style>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div className="vlr-foot-grid">
          <div className="vlr-foot-brand">
            <window.Wordmark size={20} onClick={go("home")} />
            <p style={{ fontSize: 14, lineHeight: 1.7, color: "var(--text-tertiary)", maxWidth: 240, margin: "18px 0 0" }}>One calm, intelligent space for every part of your life.</p>
            <div aria-hidden="true" style={{ display: "flex", gap: 6, marginTop: 16 }}>
              {["var(--sage)", "var(--teal)", "var(--amber)", "var(--terracotta)"].map((c) => (
                <i key={c} style={{ width: 7, height: 7, borderRadius: "50%", background: c }}></i>
              ))}
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.head}>
              <div style={{ fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-tertiary)", marginBottom: 18, fontWeight: 500 }}>{c.head}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
                {c.links.map((l) => (
                  <li key={l.t}>
                    {l.href ? (
                      <a href={l.href} style={{ fontSize: 14, color: "var(--text-secondary)", textDecoration: "none" }}>{l.t}</a>
                    ) : l.v ? (
                      <a href="#" onClick={go(l.v)} style={{ fontSize: 14, color: "var(--text-secondary)", textDecoration: "none" }}>{l.t}</a>
                    ) : (
                      // Not yet built — honest muted state, not a dead link. A <span> because the
                      // global a:hover !important rule would fight a muted anchor.
                      <span title="Coming soon" style={{ fontSize: 14, color: "var(--text-tertiary)", opacity: 0.6, cursor: "default" }}>{l.t}</span>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="vlr-foot-bottom" style={{ marginTop: 56, paddingTop: 28, borderTop: "var(--border-width) solid var(--border)", fontSize: 13, color: "var(--text-tertiary)" }}>
          <span>© 2026 VELOUR. Soft systems. Sharp life.</span>
          {/* The real accounts, 14 Sep 2026. These were three `href="#"` icons —
              Instagram, X and LinkedIn — that jumped to the top of the page; VELOUR
              has no X or LinkedIn account, and YouTube and Facebook were missing.
              Clean URLs, not the share links as pasted: the YouTube one lacked the
              @ and answered 404, Instagram's carried a share-tracking parameter, and
              Facebook's /share/ link is a redirect to the profile id used here. */}
          <div style={{ display: "flex", gap: 18 }}>
            {[
              { label: "Instagram", icon: "instagram-logo", href: "https://www.instagram.com/velour_app/" },
              { label: "YouTube", icon: "youtube-logo", href: "https://www.youtube.com/@VELOURApp" },
              { label: "Facebook", icon: "facebook-logo", href: "https://www.facebook.com/profile.php?id=61592534182330" },
            ].map((s) => (
              <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={`VELOUR on ${s.label}`} title={`VELOUR on ${s.label}`} style={{ color: "var(--text-tertiary)" }}><i className={`ph ph-${s.icon}`} style={{ fontSize: 18 }}></i></a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { CTASection, SiteFooter });