/* Backentra — Product overview. One general page covering the whole platform rather
   than a page per feature: the lead-to-payment workflow, then scheduling, clients,
   jobs and crews, invoicing, reporting, and the mobile and portal surfaces.
   window.BackentraProduct */
const PR = window.BackentraDesignSystem_93cf3a;
const { Button: PrBtn, Icon: PrIcon } = PR;
const prc = { maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 32px" };
const preyebrow = { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--text-muted)" };

const PR_STAGES = [
  ["target", "Lead", "A call, a form, a Local Services lead, or someone typing it in. Where it came from is captured now."],
  ["calendar-check", "Estimate appointment", "Booked against the lead, assigned to an estimator, client notified. Skipped when work is priced from a photo."],
  ["file-signature", "Proposal and approval", "Priced from your service catalogue, sent, and signed on the client's phone."],
  ["calendar-clock", "Scheduled job", "Lands in the schedule queue and gets a date and a crew, with your own rules applied."],
  ["receipt", "Invoice sent", "Built from the approved proposal plus whatever changed on site."],
  ["circle-check", "Payment received", "Card or ACH, reconciled. Job costing becomes real."],
];

const PR_AREAS = [
  { icon: "calendar", title: "Scheduling and routing",
    body: "Week, day, month, agenda and crew views over one entry model. The schedule queue holds approved work waiting on a date, and recommendations arrive with the reasoning attached.",
    points: ["Drag-and-drop calendar with travel time", "Crew-by-crew day view", "Scheduling rules you write in plain language", "Booked-first indicators and reschedule tracking"] },
  { icon: "users", title: "Client management",
    body: "Every client, vendor and team contact in one place, with the whole history attached rather than scattered across inboxes.",
    points: ["Full job, note and photo history", "Status, category and tag filters", "Alert flags surfaced without exposing detail", "Primary sales rep on every account"] },
  { icon: "hard-hat", title: "Jobs and crews",
    body: "Crews are built in Team, not on the calendar: a leader, members, a truck, and the equipment assigned to them. Static or flexible day to day.",
    points: ["Crew composition per day or per week", "Equipment tied to crews and jobs", "Checklists, photos and on-site sign-off", "Time clock and timesheets"] },
  { icon: "credit-card", title: "Invoicing and payments",
    body: "Invoices build from the approved proposal. Take payment by card, ACH, or over the phone, and see what each transaction actually cost.",
    points: ["Deposits, partial and progress payments", "Surcharge handling where it is permitted", "Payouts and reconciliation", "Receivables, aging and collections"] },
  { icon: "bar-chart-3", title: "Reporting",
    body: "Revenue, margin and crew utilisation from the work itself, because the hours and materials were recorded as it happened.",
    points: ["True job costing against revenue", "Per-division and per-location breakdowns", "Receivables aging", "Real CSV export and print"] },
  { icon: "smartphone", title: "Mobile and client portals",
    body: "The field app is deliberately narrower than the browser: the day of work, not the whole platform. Clients get their own view of just their side.",
    points: ["Crew app: route, checklist, photos, sign-off", "Office app: quick checks on the road", "Client portal: proposals, invoices, requests", "The full platform is always there in a browser"] },
];

function ProductPage({ onNav, onJoin }) {
  React.useEffect(() => {
    window.BackentraSetMeta && window.BackentraSetMeta({
      path: "/product",
      title: "Product — Backentra",
      description: "One record from the first call to paid: scheduling, client management, invoicing and payments, financial reporting, field crew coordination, and the mobile and client portals.",
    });
  }, []);
  return (
    <div style={{ background: "var(--surface-card)", minHeight: "100vh" }}>
      <window.BackentraSiteHeader current="product" onNav={onNav} />

      <section style={{ background: "var(--gray-100)", padding: "56px 0 48px" }}>
        <div style={{ ...prc, maxWidth: 760, textAlign: "center" }}>
          <div style={{ ...preyebrow, marginBottom: 12 }}>The platform</div>
          <h1 style={{ fontSize: 46, lineHeight: 1.05, margin: "0 0 16px" }}>One record, from the first call to paid.</h1>
          <p style={{ fontSize: 17.5, lineHeight: 1.6, color: "var(--text-body)", margin: "0 auto 26px", maxWidth: 640 }}>
            Backentra holds the whole job in one place. A lead becomes a scheduled job and the job becomes an invoice, without anyone retyping it into a second system.
          </p>
          <PrBtn variant="primary" size="lg" onClick={onJoin} iconRight={<PrIcon name="arrow-right" size={20} />}>Join the list</PrBtn>
        </div>
      </section>

      {/* the workflow */}
      <section style={{ padding: "56px 0", background: "var(--surface-card)" }}>
        <div style={prc}>
          <div style={{ maxWidth: 640, marginBottom: 30 }}>
            <div style={{ ...preyebrow, marginBottom: 12 }}>Lead to payment</div>
            <h2 style={{ fontSize: 34, margin: "0 0 12px" }}>Six stages, one record.</h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--text-muted)", margin: 0 }}>
              Not every job goes through all six. Small work is often priced without a site visit, and repeat work goes straight to scheduling. It is a spine, not a gate.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6,minmax(0,1fr))", gap: 12 }}>
            {PR_STAGES.map(([ic, t, d], i) => (
              <div key={t} style={{ padding: "18px 16px", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", background: "var(--surface-card)", boxShadow: "var(--shadow-sm)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 11 }}>
                  <span style={{ width: 26, height: 26, borderRadius: "var(--radius-pill)", background: i === 5 ? "var(--success)" : "var(--navy-900)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 12 }}>{i + 1}</span>
                  <PrIcon name={ic} size={16} color="var(--accent-text)" />
                </div>
                <h3 style={{ fontSize: 15, margin: "0 0 6px", lineHeight: 1.25 }}>{t}</h3>
                <p style={{ fontSize: 12.5, lineHeight: 1.55, color: "var(--text-muted)", margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 11, marginTop: 18, padding: "13px 18px", borderRadius: "var(--radius-lg)", background: "var(--orange-50)", border: "1px solid color-mix(in srgb, var(--accent) 28%, transparent)" }}>
            <PrIcon name="check" size={17} color="var(--accent-text)" style={{ flex: "none" }} />
            <span style={{ fontSize: 14, lineHeight: 1.55, color: "var(--text-body)" }}>
              Client, address, scope, line items, price, photos, notes, crew, hours, materials and signature are all entered once and carry the whole way.
            </span>
          </div>
        </div>
      </section>

      {/* areas */}
      <section style={{ padding: "56px 0", background: "var(--surface-page)" }}>
        <div style={prc}>
          <div style={{ maxWidth: 640, marginBottom: 30 }}>
            <div style={{ ...preyebrow, marginBottom: 12 }}>What's in it</div>
            <h2 style={{ fontSize: 34, margin: "0 0 12px" }}>The whole business, not one slice of it.</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(340px,1fr))", gap: 16 }}>
            {PR_AREAS.map((a) => (
              <div key={a.title} style={{ padding: "22px 24px", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", background: "var(--surface-card)", boxShadow: "var(--shadow-sm)" }}>
                <span style={{ width: 42, height: 42, borderRadius: "var(--radius-md)", background: "var(--orange-50)", color: "var(--accent-text)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 13 }}><PrIcon name={a.icon} size={21} /></span>
                <h3 style={{ fontSize: 19, margin: "0 0 8px" }}>{a.title}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.6, color: "var(--text-body)", margin: "0 0 12px" }}>{a.body}</p>
                <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                  {a.points.map((p) => (
                    <div key={p} style={{ display: "flex", alignItems: "flex-start", gap: 8, fontSize: 13.5, lineHeight: 1.5, color: "var(--text-muted)" }}>
                      <PrIcon name="check" size={14} color="var(--accent-text)" style={{ flex: "none", marginTop: 2 }} /> {p}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: "0 0 72px", background: "var(--surface-page)" }}>
        <div style={prc}>
          <div style={{ display: "flex", gap: 13, padding: "18px 22px", borderRadius: "var(--radius-lg)", background: "var(--warning-soft)", border: "1px dashed var(--warning)", marginBottom: 26 }}>
            <PrIcon name="triangle-alert" size={18} color="var(--warning)" style={{ flex: "none", marginTop: 1 }} />
            <div style={{ minWidth: 0 }}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14.5, color: "var(--text-strong)", marginBottom: 5 }}>Still being built</div>
              <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.6, color: "var(--text-body)" }}>
                This is the platform we are building, not one you can use today. Everything here is subject to change before launch, and we will say plainly what is ready when we get there.
              </p>
            </div>
          </div>
          <div style={{ background: "var(--accent-solid)", borderRadius: "var(--radius-2xl)", padding: "48px 44px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32, flexWrap: "wrap" }}>
            <div>
              <h2 style={{ color: "#fff", fontSize: 30, margin: "0 0 8px" }}>Want to see it when it's ready?</h2>
              <p style={{ color: "rgba(255,255,255,0.9)", fontSize: 16, margin: 0 }}>Founding members are walked through it before anyone else.</p>
            </div>
            <PrBtn variant="secondary" size="lg" onClick={onJoin} iconRight={<PrIcon name="arrow-right" size={20} />}>Join the list</PrBtn>
          </div>
        </div>
      </section>

      <window.BackentraSiteFooter onNav={onNav} />
    </div>
  );
}

window.BackentraProduct = ProductPage;
