// ============================================================
// Cold flow
// Order: Marketing → Business → Owner → Review → Plaid → Decision
//   → Agreement → Funded → Dashboard
// Reuses ScreenBusiness, Owner, Review, Plaid, Decision, Agreement, Funded.
// Unique: ScreenMarketing.
// ============================================================

const ScreenMarketing = ({ tweaks, onApply, onSeeHowItWorks }) => {
  const { partnerName } = tweaks;
  return (
    <div className="cap fade-up">
      <div className="cap-shell" style={{ maxWidth: 1180 }}>
        <div className="cap-header">
          <CapitalCobrand partnerName={partnerName} attribution={tweaks.revenuedAttribution} />
        </div>

        {/* Hero */}
        <div className="card" style={{
          padding: 0, border: "none",
          background: "var(--trust-tech)",
          color: "#fff", borderRadius: 20, overflow: "hidden",
          position: "relative"
        }}>
          <div style={{ position: "absolute", right: -40, top: -40 }}>
            <Rings size={460} palette="teal" />
          </div>
          <div style={{
            display: "grid", gridTemplateColumns: "1.4fr 1fr",
            padding: "52px 48px 48px",
            position: "relative", zIndex: 1, gap: 36
          }}>
            <div>
              <div style={{
                fontSize: 11, fontWeight: 700, letterSpacing: "0.16em",
                textTransform: "uppercase", color: "var(--funding-pool)",
                marginBottom: 16
              }}>Working capital, on demand</div>
              <h1 style={{
                fontFamily: "var(--font-primary)",
                fontSize: 56, fontWeight: 700, lineHeight: 1.05,
                letterSpacing: "-0.025em", margin: "0 0 18px"
              }}>
                Working capital that grows with your business.
              </h1>
              <p style={{ fontSize: 17, lineHeight: 1.5, color: "rgba(255,255,255,0.78)", margin: "0 0 32px", maxWidth: 480 }}>
                Draw what you need, when you need it. Pay back from a slice of your daily {partnerName} deposits — no fixed monthly bills, no balloon payments.
              </p>

              <div style={{ display: "flex", gap: 12, marginBottom: 24 }}>
                <Button variant="teal" size="lg" onClick={onApply} iconAfter="arrow-right">Apply now</Button>
                <button className="btn btn-text" onClick={onSeeHowItWorks} style={{ color: "rgba(255,255,255,0.85)", padding: "16px 8px" }}>
                  See how it works
                </button>
              </div>

              <div style={{ display: "flex", gap: 24, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.10)" }}>
                {[
                  { l: "Lines from", v: "$5K – $500K" },
                  { l: "Funded in", v: "As fast as 24 hrs" },
                  { l: "Application", v: "~5 minutes" }
                ].map(s => (
                  <div key={s.l}>
                    <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.10em", color: "rgba(255,255,255,0.55)", textTransform: "uppercase" }}>{s.l}</div>
                    <div style={{ fontSize: 18, fontWeight: 700, marginTop: 4 }}>{s.v}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Visual side */}
            <div style={{ position: "relative" }}>
              <div style={{
                background: "rgba(255,255,255,0.06)",
                border: "1px solid rgba(255,255,255,0.10)",
                borderRadius: 16,
                padding: 24, position: "relative", zIndex: 1,
                backdropFilter: "blur(20px)"
              }}>
                <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.12em", color: "rgba(255,255,255,0.55)", textTransform: "uppercase", marginBottom: 14 }}>
                  Sample · Coffee shop in CA
                </div>
                <div style={{ fontSize: 56, fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1, color: "#fff", fontVariantNumeric: "tabular-nums" }}>$75K</div>
                <div style={{ fontSize: 13, color: "rgba(255,255,255,0.65)", marginTop: 8, marginBottom: 22 }}>Spending Availability</div>

                <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  {[
                    { l: "If you draw $35K", v: "$45.5K payback", c: "var(--funding-pool)" },
                    { l: "Weekly payment", v: "~$900", c: "rgba(255,255,255,0.85)" },
                    { l: "Done in", v: "~12 months", c: "rgba(255,255,255,0.85)" }
                  ].map((r, i) => (
                    <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderBottom: i === 2 ? "none" : "1px solid rgba(255,255,255,0.08)", fontSize: 13 }}>
                      <span style={{ color: "rgba(255,255,255,0.6)" }}>{r.l}</span>
                      <span className="tnum" style={{ fontWeight: 700, color: r.c }}>{r.v}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Value props row */}
        <div style={{ marginTop: 36 }}>
          <Eyebrow>Built for small business reality</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14, marginTop: 16 }}>
            {[
              { ic: "calendar-x", t: "No fixed monthly payments", d: "Weekly payment flexes with your deposits. Slow week? Smaller payment." },
              { ic: "shield-check", t: "Soft credit pull only", d: "Applying won't ding your credit. No surprises." },
              { ic: "refresh-cw", t: "Refills as you pay back", d: "Like a credit line — once you've delivered, your capacity comes back." },
              { ic: "circle-dollar-sign", t: "PayNow: pay early, save more", d: "Pay any amount toward your balance anytime. Pay it off early and we'll discount what you owe." }
            ].map((p, i) => (
              <div key={i} className="card card-pad" style={{ padding: 22 }}>
                <div style={{ width: 42, height: 42, borderRadius: 10, background: "var(--gg-5)", color: "var(--growth-galaxy)", display: "grid", placeItems: "center", marginBottom: 14 }}>
                  <Icon name={p.ic} size={20} />
                </div>
                <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 6 }}>{p.t}</div>
                <div style={{ fontSize: 13, color: "var(--tt-60)", lineHeight: 1.5 }}>{p.d}</div>
              </div>
            ))}
          </div>
        </div>

        {/* How it works */}
        <div style={{ marginTop: 36 }}>
          <Eyebrow>How it works</Eyebrow>
          <div style={{ marginTop: 16, background: "#fff", borderRadius: 16, border: "1px solid var(--border-1)", padding: 28 }}>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, position: "relative" }}>
              {[
                { n: "01", t: "Apply in 5 min", d: "Quick application. We pre-fill what we can." },
                { n: "02", t: "Connect your bank", d: "Plaid secure link to verify deposits." },
                { n: "03", t: "Get your offer", d: "Soft credit check, no hard pull." },
                { n: "04", t: "Funds the next day", d: "Sign your agreement and you're funded." }
              ].map((s, i, arr) => (
                <div key={s.n} style={{
                  paddingRight: i < arr.length - 1 ? 24 : 0,
                  borderRight: i < arr.length - 1 ? "1px solid var(--border-1)" : "none",
                  paddingLeft: i > 0 ? 24 : 0
                }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--tt-40)", fontWeight: 700, letterSpacing: "0.10em" }}>{s.n}</div>
                  <div style={{ fontSize: 15, fontWeight: 700, marginTop: 10 }}>{s.t}</div>
                  <div style={{ fontSize: 13, color: "var(--tt-60)", marginTop: 6, lineHeight: 1.5 }}>{s.d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* FAQ-style trust block */}
        <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <div className="card card-pad" style={{ padding: 22 }}>
            <Eyebrow muted>Q · Is this a loan?</Eyebrow>
            <p style={{ fontSize: 14, color: "var(--fg-1)", lineHeight: 1.55, marginTop: 10, marginBottom: 0 }}>
              No. The Flex Line is the purchase of future receivables — there's no interest rate, APR, or fixed term. You agree to a factor rate up front, and we collect from a slice of your deposits until it's delivered.
            </p>
          </div>
          <div className="card card-pad" style={{ padding: 22 }}>
            <Eyebrow muted>Q · What does it cost?</Eyebrow>
            <p style={{ fontSize: 14, color: "var(--fg-1)", lineHeight: 1.55, marginTop: 10, marginBottom: 0 }}>
              Most lines are priced between 1.20× and 1.40×. So $10,000 advanced typically means $12,000–$14,000 in total payback. No application fees, origination fees, or prepayment penalties.
            </p>
          </div>
        </div>

        <div style={{ marginTop: 28 }}>
          <Disclosure>
            Revenued's service provides for the purchase of future receivables and is not a loan. Approval, advance amount, and pricing are determined by Revenued at its discretion. Applying for a Flex Line uses a soft credit pull, which does not affect your credit score.
          </Disclosure>
        </div>

        <div style={{ marginTop: 32, padding: "28px 32px", background: "var(--gg-5)", borderRadius: 16, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.015em" }}>Ready to apply?</div>
            <div style={{ fontSize: 14, color: "var(--tt-60)", marginTop: 4 }}>5 minutes. No hard credit check. No fees to apply.</div>
          </div>
          <Button variant="dark" size="lg" onClick={onApply} iconAfter="arrow-right">Apply now</Button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ScreenMarketing });