/* ===========================================================
   Content pages: About, Contact, Videos, Policies, Warranties,
   Diamond Brakes (FAQ), B2B, Account
   =========================================================== */

function PageHero({ eyebrow, title, sub }) {
  return React.createElement("div", { className: "page-hero" },
    React.createElement("div", { className: "wrap" },
      React.createElement(Crumbs, { items: [{ label: "Home", to: "/" }, { label: title }] }),
      eyebrow ? React.createElement("span", { className: "eyebrow", style: { marginTop: 10, display: "inline-block" } }, eyebrow) : null,
      React.createElement("h1", null, title),
      sub ? React.createElement("p", { className: "muted", style: { marginTop: 12, fontSize: 17, maxWidth: 620 } }, sub) : null));
}

function AboutPage() {
  const _np = (window.DATA.products || []).length;
  const _nx = (window.DATA.products || []).reduce((s, p) => s + (p.variants || []).reduce((a, v) => a + ((v.part_numbers || []).length), 0), 0);
  return React.createElement("div", null,
    React.createElement(PageHero, { eyebrow: "Since 1980 · Baltimore, MD", title: "About DWTruck Solutions" }),
    React.createElement("div", { className: "wrap about-grid" },
      React.createElement("div", { className: "prose" },
        React.createElement("p", { style: { fontSize: 19, color: "var(--ink)" } }, "Founded in 1980, D&W Clutch and Brake specializes in clutch manufacturing and remanufacturing, and brake shoe relining for the trucking industry."),
        React.createElement("p", null, "Built by the Keller brothers and run on the shop floor ever since, D&W has spent more than four decades doing one thing well: keeping heavy-duty trucks moving with parts that are built, rebuilt and relined right the first time. What started as a clutch-and-brake bench in Baltimore now serves fleets and owner-operators across the region."),
        React.createElement("p", null, "We manufacture and remanufacture clutches, reline brake shoes, resurface flywheels and assemble kingpin kits — and we cross-reference every part to OEM and competitor numbers so the right part is easy to find."),
        React.createElement("h2", null, "Shift to quality."),
        React.createElement("p", null, "Quality parts, fair prices, and people who answer the phone and know the difference between a pull-type and a push-type. This is what D&W offers."),
        React.createElement(Link, { to: "/quote", className: "btn btn-purple btn-lg", style: { marginTop: 10 } }, React.createElement(Icon, { name: "quote", size: 18 }), "Build a quote")),
      React.createElement("div", { className: "about-side" },
        React.createElement(PH, { label: "[ shop floor / Keller brothers photo ]", ratio: "3/4" }),
        React.createElement("div", { className: "about-stats" },
          [["1980", "Founded"], ["45+", "Years in business"], [String(_np), "Parts in catalog"], [_nx + "+", "Cross-references"]].map(([n, l]) =>
            React.createElement("div", { key: l, className: "about-stat" }, React.createElement("div", { className: "as-num" }, n), React.createElement("div", { className: "as-lbl" }, l)))))
    )
  );
}

function ContactPage() {
  const toast = useToast();
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ email: "", name: "", phone: "", message: "" });
  const setF = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return React.createElement("div", null,
    React.createElement(PageHero, { title: "Contact", sub: "Talk to a real person who knows heavy-duty driveline and brakes." }),
    React.createElement("div", { className: "wrap contact-grid" },
      React.createElement("div", { className: "contact-info" },
        [["phone", "Phone", "410-235-8829", "tel:4102358829"], ["mail", "Email", "kevin@dwt.solutions", "mailto:kevin@dwt.solutions"], ["pin", "Shop", "2601 Sisson St, Baltimore MD 21211", null], ["clock", "Hours", "Mon–Fri 8:00 AM – 5:00 PM ET", null]].map(([ic, label, val, href]) =>
          React.createElement("div", { key: label, className: "ci-row" },
            React.createElement("span", { className: "ci-icon" }, React.createElement(Icon, { name: ic, size: 20 })),
            React.createElement("div", null, React.createElement("div", { className: "ci-label" }, label),
              href ? React.createElement("a", { href, className: "ci-val" }, val) : React.createElement("div", { className: "ci-val" }, val)))),
        React.createElement(PH, { label: "[ map — 2601 Sisson St, Baltimore ]", ratio: "16/9", style: { marginTop: 8 } })),
      sent
        ? React.createElement("div", { className: "quote-card contact-sent" },
            React.createElement("div", { className: "success-ring", style: { margin: "0 0 14px" } }, React.createElement(Icon, { name: "check", size: 28 })),
            React.createElement("h3", null, "Message sent"),
            React.createElement("p", { className: "muted" }, "Thanks — we'll reply to ", React.createElement("b", null, form.email), " shortly. This goes straight to kevin@dwt.solutions."))
        : React.createElement("form", { className: "quote-card", onSubmit: submit },
            React.createElement("h3", null, "Send us a message"),
            React.createElement("label", { className: "field" }, React.createElement("span", null, "Email ", React.createElement("em", null, "required")), React.createElement("input", { type: "email", required: true, value: form.email, onChange: e => setF("email", e.target.value) })),
            React.createElement("div", { className: "field-row" },
              React.createElement("label", { className: "field" }, React.createElement("span", null, "Name"), React.createElement("input", { value: form.name, onChange: e => setF("name", e.target.value) })),
              React.createElement("label", { className: "field" }, React.createElement("span", null, "Phone"), React.createElement("input", { value: form.phone, onChange: e => setF("phone", e.target.value) }))),
            React.createElement("label", { className: "field" }, React.createElement("span", null, "How can we help?"), React.createElement("textarea", { rows: 4, value: form.message, onChange: e => setF("message", e.target.value) })),
            React.createElement("button", { className: "btn btn-purple btn-block btn-lg", type: "submit" }, "Send message"))
    )
  );
}

function VideosPage() {
  const vids = ["Clutch install — 15.5\" pull-type", "Brake shoe relining walk-through", "Setting kingpin preload", "Flywheel resurfacing on the bench"];
  return React.createElement("div", null,
    React.createElement(PageHero, { eyebrow: "YouTube · @dwclutch1", title: "Install & tech videos", sub: "Watch real installs and shop procedures from the D&W bench." }),
    React.createElement("div", { className: "wrap", style: { padding: "30px 0 60px" } },
      React.createElement("div", { className: "video-grid" },
        vids.map((v, i) => React.createElement("div", { key: i, className: "video-card" },
          React.createElement("div", { className: "video-thumb ph ph-dark", "data-label": "" }, React.createElement("span", { className: "play" }, React.createElement(Icon, { name: "arrow", size: 22 }))),
          React.createElement("div", { className: "video-meta" }, React.createElement("div", { className: "video-title" }, v), React.createElement("div", { className: "muted", style: { fontSize: 13 } }, "youtube.com/@dwclutch1")))))
    )
  );
}

function PoliciesPage() {
  return React.createElement("div", null,
    React.createElement(PageHero, { title: "Policies", sub: "Cores, freight, returns and terms — straight talk, no surprises." }),
    React.createElement("div", { className: "wrap prose" },
      React.createElement("h2", null, "Core returns & core bank"),
      React.createElement("p", null, "Remanufactured parts carry a refundable core charge, billed at purchase and credited back when your old, rebuildable unit is returned. We maintain a core bank so the right exchange is on the shelf — ask us to draw from it on time-critical jobs."),
      React.createElement("h2", null, "Freight"),
      React.createElement("p", null, "Freight is prepaid on qualifying orders. Oversized or palletized items (flywheels, drums, complete kits) may require a freight quote — these route through our quote flow."),
      React.createElement("h2", null, "Returns & restocking"),
      React.createElement("p", null, "Unused parts in original packaging may be returned within 30 days. A restocking fee may apply to non-defective returns. Defective or warranty items are handled separately — call us first."),
      React.createElement("h2", null, "Net 30 terms"),
      React.createElement("p", null, "Approved B2B accounts can purchase on Net-30 terms with tier pricing. ", React.createElement(Link, { to: "/b2b", style: { color: "var(--blue)", fontWeight: 600 } }, "Apply for a B2B account"), "."))
  );
}

function WarrantiesPage() {
  const tiers = [
    { t: "Good — Standard Reman", d: "12 months / 100,000 miles on remanufactured clutches. Covers workmanship and materials under normal heavy-duty service." },
    { t: "Better — Premium Reman", d: "18 months / 150,000 miles. Premium facings and dampers, balanced assembly." },
    { t: "Best — New OEM", d: "24 months / unlimited miles on new manufactured clutches. Our longest coverage." },
  ];
  return React.createElement("div", null,
    React.createElement(PageHero, { title: "Warranties", sub: "Clutch warranty tiers — pick the coverage that matches the duty cycle." }),
    React.createElement("div", { className: "wrap", style: { padding: "30px 0 60px" } },
      React.createElement("div", { className: "tier-grid" },
        tiers.map((t, i) => React.createElement("div", { key: i, className: "tier-card" + (i === 2 ? " best" : "") },
          i === 2 ? React.createElement("span", { className: "badge badge-new", style: { alignSelf: "flex-start" } }, "Longest coverage") : null,
          React.createElement("h3", null, t.t),
          React.createElement("p", { className: "muted" }, t.d)))))
  );
}

function DiamondBrakesPage() {
  const faqs = [
    { q: "What is Diamond Technology friction?", a: "Diamond Technology Brakes use an engineered friction formulation relined onto premium shoes. The material runs cooler and resists fade, which extends both lining and drum life on heavy-duty applications." },
    { q: "Will Diamond brakes extend drum life?", a: "Yes — cooler operation and a consistent friction coefficient reduce heat checking and scoring on the drum, so drums last longer between replacements." },
    { q: "Are they a direct replacement for my current shoes?", a: "In most cases, yes. Diamond shoe sets cross-reference to common Meritor, Gunite and Webb numbers. Search your part number or add it to a quote and we'll confirm fitment." },
    { q: "What axles are covered?", a: "Drive, steer and trailer positions across common 16.5\" and 15\" sizes. Tell us your axle and position and we'll spec the correct set." },
    { q: "How do I order if there's no price shown?", a: "Our catalog launches quote-only — add the set to a quote and we'll return pricing, freight and availability, usually the same business day." },
  ];
  const [open, setOpen] = useState(0);
  return React.createElement("div", null,
    React.createElement(PageHero, { eyebrow: "Tech & FAQ", title: "Diamond Technology Brakes", sub: "Engineered friction for longer drum life, cooler running and fewer comebacks." }),
    React.createElement("div", { className: "wrap prose" },
      React.createElement("p", null, "Diamond Technology Brakes are D&W's premium relined brake shoe program. The friction is formulated for heavy-duty linehaul and vocational duty, where heat is the enemy of both lining and drum. By running cooler and holding a steady coefficient, Diamond shoes protect the drum and stretch service intervals."),
      React.createElement("h2", { style: { marginBottom: 8 } }, "Frequently asked questions"),
      React.createElement("div", { className: "faq" },
        faqs.map((f, i) => React.createElement("div", { key: i, className: "faq-item" },
          React.createElement("button", { className: "faq-q", onClick: () => setOpen(open === i ? -1 : i) },
            f.q, React.createElement(Icon, { name: "chevdown", size: 18, style: { transform: open === i ? "rotate(180deg)" : "none", transition: "transform .2s", flex: "none" } })),
          open === i ? React.createElement("div", { className: "faq-a" }, f.a) : null))),
      React.createElement(Link, { to: "/c/diamond-brakes", className: "btn btn-ink btn-lg", style: { marginTop: 24 } }, "Browse Diamond brakes"))
  );
}

function B2BPage() {
  const [sent, setSent] = useState(false);
  const [f, setF] = useState({ company_name: "", phone: "", notes: "" });
  return React.createElement("div", null,
    React.createElement(PageHero, { eyebrow: "For fleets & shops", title: "B2B accounts", sub: "Net-30 terms and tier pricing for qualified fleets, dealers and repair shops." }),
    React.createElement("div", { className: "wrap contact-grid" },
      React.createElement("div", { className: "prose", style: { padding: "30px 0" } },
        React.createElement("h3", null, "What you get"),
        React.createElement("ul", null,
          React.createElement("li", null, React.createElement("b", null, "Net-30 terms"), " — invoice billing on approved accounts."),
          React.createElement("li", null, React.createElement("b", null, "Tier pricing"), " — volume-based discounts off list."),
          React.createElement("li", null, React.createElement("b", null, "Priority core handling"), " — draw from our core bank on time-critical jobs."),
          React.createElement("li", null, React.createElement("b", null, "Dedicated contact"), " — talk to the same person every time.")),
        React.createElement("p", { className: "muted" }, "Already approved? ", React.createElement(Link, { to: "/account", style: { color: "var(--blue)", fontWeight: 600 } }, "Sign in"), " to order on terms.")),
      sent
        ? React.createElement("div", { className: "quote-card contact-sent" },
            React.createElement("div", { className: "success-ring" }, React.createElement(Icon, { name: "check", size: 28 })),
            React.createElement("h3", { style: { marginTop: 14 } }, "Application received"),
            React.createElement("p", { className: "muted" }, "We'll review and reach out about ", React.createElement("b", null, f.company_name || "your account"), " within one business day."))
        : React.createElement("form", { className: "quote-card", onSubmit: e => { e.preventDefault(); setSent(true); } },
            React.createElement("h3", null, "Apply for an account"),
            React.createElement("label", { className: "field" }, React.createElement("span", null, "Company name"), React.createElement("input", { required: true, value: f.company_name, onChange: e => setF(s => ({ ...s, company_name: e.target.value })) })),
            React.createElement("label", { className: "field" }, React.createElement("span", null, "Phone"), React.createElement("input", { value: f.phone, onChange: e => setF(s => ({ ...s, phone: e.target.value })) })),
            React.createElement("label", { className: "field" }, React.createElement("span", null, "Tell us about your operation"), React.createElement("textarea", { rows: 3, value: f.notes, onChange: e => setF(s => ({ ...s, notes: e.target.value })) })),
            React.createElement("button", { className: "btn btn-purple btn-block btn-lg", type: "submit" }, "Submit application"))
    )
  );
}

function AccountPage() {
  const [mode, setMode] = useState("login");
  return React.createElement("div", null,
    React.createElement(PageHero, { title: "Account", sub: "Sign in to track orders, cores and B2B terms." }),
    React.createElement("div", { className: "wrap account-wrap" },
      React.createElement("div", { className: "quote-card account-card" },
        React.createElement("div", { className: "seg seg-light" },
          React.createElement("button", { className: "seg-btn" + (mode === "login" ? " on" : ""), onClick: () => setMode("login") }, "Sign in"),
          React.createElement("button", { className: "seg-btn" + (mode === "register" ? " on" : ""), onClick: () => setMode("register") }, "Register")),
        React.createElement("label", { className: "field" }, React.createElement("span", null, "Email"), React.createElement("input", { type: "email", placeholder: "you@company.com" })),
        mode === "register" ? React.createElement("label", { className: "field" }, React.createElement("span", null, "Name"), React.createElement("input", null)) : null,
        React.createElement("label", { className: "field" }, React.createElement("span", null, "Password"), React.createElement("input", { type: "password" })),
        React.createElement("button", { className: "btn btn-ink btn-block btn-lg" }, mode === "login" ? "Sign in" : "Create account"),
        React.createElement(Link, { to: "/b2b", className: "linkbtn", style: { textAlign: "center", display: "block", marginTop: 14 } }, "Need Net-30 terms? Apply for B2B →")),
      React.createElement("div", { className: "account-side" },
        React.createElement("div", { className: "acct-tile" }, React.createElement(Icon, { name: "truck", size: 20 }), React.createElement("div", null, React.createElement("b", null, "Order history"), React.createElement("p", { className: "muted" }, "Track shipments and reorder past parts."))),
        React.createElement("div", { className: "acct-tile" }, React.createElement(Icon, { name: "spark", size: 20 }), React.createElement("div", null, React.createElement("b", null, "Core returns"), React.createElement("p", { className: "muted" }, "See which cores are owed and their credit status."))),
        React.createElement("div", { className: "acct-tile" }, React.createElement(Icon, { name: "shield", size: 20 }), React.createElement("div", null, React.createElement("b", null, "B2B terms"), React.createElement("p", { className: "muted" }, "Net-30 balance and tier pricing."))))
    )
  );
}

function QuoteRequestPage() {
  const [sent, setSent] = useState(false);
  const [f, setF] = useState({ email: "", name: "", phone: "", message: "" });
  return React.createElement("div", null,
    React.createElement(PageHero, { eyebrow: "Oversized & quote-only items", title: "Request a quote", sub: "For freight-quoted or quote-only parts. Tell us what you need and we'll price it." }),
    React.createElement("div", { className: "wrap", style: { padding: "10px 0 60px", maxWidth: 620, margin: "0 auto" } },
      sent
        ? React.createElement("div", { className: "quote-card contact-sent" },
            React.createElement("div", { className: "success-ring" }, React.createElement(Icon, { name: "check", size: 28 })),
            React.createElement("h3", { style: { marginTop: 14 } }, "Request sent"),
            React.createElement("p", { className: "muted" }, "We'll get back to ", React.createElement("b", null, f.email), " with pricing and freight, usually same business day."),
            React.createElement(Link, { to: "/quote", className: "btn btn-purple", style: { marginTop: 10 } }, "Or build a full quote"))
        : React.createElement("form", { className: "quote-card", onSubmit: e => { e.preventDefault(); setSent(true); } },
            React.createElement("label", { className: "field" }, React.createElement("span", null, "Email ", React.createElement("em", null, "required")), React.createElement("input", { type: "email", required: true, value: f.email, onChange: e => setF(s => ({ ...s, email: e.target.value })) })),
            React.createElement("div", { className: "field-row" },
              React.createElement("label", { className: "field" }, React.createElement("span", null, "Name"), React.createElement("input", { value: f.name, onChange: e => setF(s => ({ ...s, name: e.target.value })) })),
              React.createElement("label", { className: "field" }, React.createElement("span", null, "Phone"), React.createElement("input", { value: f.phone, onChange: e => setF(s => ({ ...s, phone: e.target.value })) }))),
            React.createElement("label", { className: "field" }, React.createElement("span", null, "What do you need?"), React.createElement("textarea", { rows: 4, required: true, value: f.message, onChange: e => setF(s => ({ ...s, message: e.target.value })), placeholder: "Part numbers, axle/engine config, quantities…" })),
            React.createElement("button", { className: "btn btn-purple btn-block btn-lg", type: "submit" }, "Send request"))
    )
  );
}

Object.assign(window, { AboutPage, ContactPage, VideosPage, PoliciesPage, WarrantiesPage, DiamondBrakesPage, B2BPage, AccountPage, QuoteRequestPage });