/* Dulius Web UI Kit — marketing site sections */

/* Smooth-scroll to an in-page section by id. Used instead of <a href="#id">
   because the server injects a <base> tag, which would otherwise turn "#id"
   into a navigation to /ui_kits/web/#id (a blank page). */
function scrollToId(id) {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 64, behavior: "smooth" });
}

function WNav({ onAuth }) {
  return (
    <header className="wnav">
      <div className="wnav-in">
        <img className="wnav-logo" src="../../assets/dulius-wordmark.png" alt="Dulius" />
        <nav className="wnav-links">
          <a href="#how" onClick={(e) => { e.preventDefault(); scrollToId("how"); }}>How it works</a>
          <a href="#bands" onClick={(e) => { e.preventDefault(); scrollToId("bands"); }}>Your score</a>
          <a href="#pricing" onClick={(e) => { e.preventDefault(); scrollToId("pricing"); }}>Pricing</a>
        </nav>
        <div className="wnav-cta">
          <button className="wnav-login" onClick={() => onAuth("login")}>Log in</button>
          <WButton variant="primary" onClick={() => onAuth("signup")}>Check my score</WButton>
        </div>
      </div>
    </header>
  );
}

function WHero({ onAuth }) {
  return (
    <section className="whero">
      <div className="whero-in">
        <div className="whero-copy">
          <div className="wpill"><span className="wpill-dot" /> The Alternative Lending Engine</div>
          <h1 className="whero-h1">Smarter credit.<br /><span className="whero-grad">Better funding.</span></h1>
          <p className="whero-sub">Dulius scores your whole business the way lenders do — your cash flow, how you pay, your track record — so you can access the best funding you qualify for. The stronger your Dulius Score, the better the funding you unlock. Free to check, and it never affects your score.</p>
          <div className="whero-actions">
            <WButton variant="accent" size="lg" iconRight="arrow-right" onClick={() => onAuth("signup")}>Get my free score</WButton>
            <WButton variant="ghost" size="lg" icon="play" onClick={() => scrollToId("how")}>See how it works</WButton>
          </div>
          <div className="whero-trust">
            <WIcon name="shield-check" size={18} /> No credit pull · No card required · 2-minute setup
          </div>
        </div>
        <div className="whero-visual">
          <div className="whero-card">
            <div className="whero-card-top">
              <div>
                <div className="wover">Your Dulius Score</div>
                <div className="whero-card-sub">Northwind Trading Co.</div>
              </div>
              <span className="wbadge-good">▲ +38 this month</span>
            </div>
            <ScoreGauge value={742} size={260} />
            <div className="whero-card-foot">
              <div className="whero-stat"><span className="whero-stat-v">$248,500</span><span className="whero-stat-l">matched funding</span></div>
              <div className="whero-divider" />
              <div className="whero-stat"><span className="whero-stat-v">4</span><span className="whero-stat-l">live offers</span></div>
              <div className="whero-divider" />
              <div className="whero-stat"><span className="whero-stat-v">9.4%</span><span className="whero-stat-l">best APR</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function WLogos() {
  return (
    <section className="wlogos">
      <span className="wlogos-label">Matching across 100+ alternative lenders</span>
      <div className="wlogos-row">
        {["Mulligan Funding", "OnDeck", "Idea Financial", "Rapid Finance", "Credibly"].map((n, i) => (
          <span key={i} className="wlogo-text">{n}</span>
        ))}
      </div>
    </section>
  );
}

const STEPS = [
  { icon: "link", t: "Connect your business & build your profile", d: "Securely link your bank, accounting, and payment accounts in two minutes to build your business profile. Read-only, bank-grade encryption." },
  { icon: "gauge", t: "Get your funding score", d: "Dulius scores your real cash flow — not just personal credit — and shows exactly what's shaping the number, so you can grow your score and match with better funding." },
  { icon: "badge-dollar-sign", t: "Match with offers", d: "See pre-qualified offers from 100+ lenders, ranked by fit. Apply with one profile, no repeat paperwork." },
];

function WHow() {
  return (
    <section className="wsection" id="how">
      <div className="wsection-head">
        <div className="wover wover-center">How Dulius works</div>
        <h2 className="wsection-h2">The first business funding engine</h2>
        <p className="wsection-sub">Funding, finally built for your business.</p>
      </div>
      <div className="wsteps">
        {STEPS.map((s, i) => (
          <div key={i} className="wstep">
            <div className="wstep-num">{i + 1}</div>
            <div className="wstep-icon"><WIcon name={s.icon} size={26} /></div>
            <h3 className="wstep-t">{s.t}</h3>
            <p className="wstep-d">{s.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

const BANDS = [
  ["Starting Out", "300–449", "#E05C5C"],
  ["Fair Standing", "450–599", "#F5A623"],
  ["Good Standing", "600–749", "#7BC67E"],
  ["Elite", "750–850", "#1B5C2E"],
];

function WBands() {
  return (
    <section className="wsection wbands-sec" id="bands">
      <div className="wbands-grid">
        <div className="wbands-copy">
          <div className="wover">The Dulius Score</div>
          <h2 className="wsection-h2 left">One number that opens the right doors</h2>
          <p className="wbands-p">Ranging 300 to 850, your score moves as your business grows. As your score climbs, you unlock better rates and bigger offers — and we always show you the next move.</p>
          <ul className="wbands-list">
            <li><WIcon name="check" size={18} /> Built from real cash flow, not just FICO</li>
            <li><WIcon name="check" size={18} /> Updates daily as accounts sync</li>
            <li><WIcon name="check" size={18} /> No credit pull to get your score</li>
          </ul>
        </div>
        <div className="wbands-viz">
          <div className="wband-ramp">
            {BANDS.map(([n, r, c], i) => (
              <div key={i} className="wband-row">
                <span className="wband-chip" style={{ background: c }} />
                <span className="wband-name">{n}</span>
                <span className="wband-range">{r}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

    </section>
  );
}

const PRICING = [
  { name: "Free", price: 0, blurb: "Know where you stand.", cta: "Get my free score", features: ["Your Dulius Score", "2 matched offers / month", "Funding history tracker", "Payoff letters — always free", "Document vault", "Apply for funding", "Monthly score refresh"] },
  { name: "Premium", price: 19, blurb: "See the full picture and your path to better funding.", cta: "Start Premium", popular: true, features: ["Everything in Free", "Full score breakdown by factor", "Unlimited matched offers", "Daily score updates + alerts", "Automated profile analysis", "Personalized 30/60/90-day score path", "Debt & utilization dashboard", "Renewal & opportunity alerts"] },
  { name: "Pro", price: 49, blurb: "Every tool, priority matching, and the best service rates.", cta: "Start Pro", features: ["Everything in Premium", "What-if score simulator", "Full funding-readiness report", "Priority matching + early access", "Detailed path to each tier", "Priority support"] },
];

function WPricing({ onAuth }) {
  return (
    <section className="wsection wpricing" id="pricing">
      <div className="wsection-head">
        <div className="wover wover-center">Plans</div>
        <h2 className="wsection-h2">Start free. Upgrade when you're ready to grow.</h2>
        <p className="wpricing-sub">Billed monthly. Switch or cancel anytime — checking your score is always free.</p>
      </div>
      <div className="wpricegrid">
        {PRICING.map((t, i) => (
          <div key={i} className={`wprice ${t.popular ? "popular" : ""}`}>
            {t.popular && <div className="wprice-flag">Most popular</div>}
            <div className="wprice-name">{t.name}</div>
            <div className="wprice-blurb">{t.blurb}</div>
            <div className="wprice-amt"><span className="wprice-num">${t.price}</span><span className="wprice-per">{t.price === 0 ? "free forever" : "/mo"}</span></div>
            <WButton variant={t.popular ? "accent" : "ghost"} size="lg" style={{ width: "100%" }} onClick={() => onAuth("signup")}>{t.cta}</WButton>
            <div className="wprice-features">
              {t.features.map((f, j) => <div key={j} className="wprice-feature"><WIcon name="check" size={17} /><span>{f}</span></div>)}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function WCTA({ onAuth }) {
  return (
    <section className="wcta">
      <div className="wcta-in">
        <h2 className="wcta-h">Know your Dulius score in 2 minutes.</h2>
        <p className="wcta-p">Free forever. No credit card. No impact to your score.</p>
        <WButton variant="accent" size="lg" iconRight="arrow-right" onClick={() => onAuth("signup")}>Get my free score</WButton>
      </div>
    </section>
  );
}

function WFooter({ onLearn }) {
  return (
    <footer className="wfooter">
      <div className="wfooter-in">
        <div className="wfooter-brand">
          <img src="../../assets/dulius-wordmark-white.png" alt="Dulius" />
          <p>Smarter credit. Better funding.</p>
        </div>
        <div className="wfooter-cols">
          {[["Product", ["Funding score", "Live offers", "Score path", "Pricing"]],
            ["Company", ["About", "Careers", "Press", "Contact"]],
            ["Lenders", ["Partner with Dulius", "Lender login", "Why partners choose us"]],
            ["Legal", ["Privacy", "Terms", "Disclosures", "Security"]]].map(([h, items], i) => (
            <div key={i} className="wfooter-col">
              <div className="wfooter-h">{h}</div>
              {items.map((it, j) => (
                (it === "Terms" || it === "Terms of Service")
                  ? <a key={j} className="wfooter-link" href="/terms">{it}</a>
                  : (it === "Privacy" || it === "Privacy Policy")
                  ? <a key={j} className="wfooter-link" href="/privacy">{it}</a>
                  : <button key={j} className="wfooter-link" onClick={() => onLearn(it)}>{it}</button>
              ))}
            </div>
          ))}
        </div>
      </div>
      <div className="wfooter-fine">© 2026 Dulius, Inc. Dulius is a financial technology company, not a bank or lender. Scores are estimates and not a guarantee of funding.</div>
    </footer>
  );
}

Object.assign(window, { WNav, WHero, WLogos, WHow, WBands, WPricing, WCTA, WFooter });