// site/page-vendor-management.jsx — Vendor & exhibitor management module.
// Uses the shared FeaturePage shell with real manager-UI screenshots (ProductShot).

function PageVendorManagement({ onNav }) {
  const sections = [
    {
      tag: 'Applications, forms & documents',
      title: 'Every application,',
      titleAccent: 'with the paperwork attached.',
      body: 'Food, commercial, merchandise, and ride vendors apply through your own branded form. Collect categories, booths, COIs, permits, and fees up front, so nothing is missing when it is time to approve.',
      bullets: [
        { title: 'Custom application forms', body: 'Build the form your fair needs, by vendor category.' },
        { title: 'Document collection', body: 'COIs, permits, and W-9s gathered on the application.' },
        { title: 'KPIs up top', body: 'Outstanding $, active, pending review, and awaiting payment.' },
        { title: 'Filter by category', body: 'Food, commercial, merchandise, and rides in a click.' },
      ],
      visual: <ProductShot src="assets/product/vendor-applications.png" alt="Vendor applications: outstanding balance, active and pending counts, and an applications table grouped by category" tilt={-0.4} />,
    },
    {
      tag: 'Interactive booth map',
      title: 'Assign a booth',
      titleAccent: 'with one click.',
      body: 'Your real fairgrounds map, with every booth on it. Green is open, red is taken. Click a booth to assign or release a vendor, pan to move around the grounds, and zoom in on the midway, no more paper maps and sticky notes.',
      bullets: [
        { title: 'Click to assign or release', body: 'Tap any booth to place a vendor or free it up.' },
        { title: 'Live availability', body: 'Green available, red assigned, updated as you go.' },
        { title: 'Pan and zoom', body: 'Drag to move, scroll to zoom across the grounds.' },
        { title: 'On your real map', body: 'Booths overlaid on an actual aerial of your fairgrounds.' },
      ],
      visual: <ProductShot src="assets/product/booth-map.png" alt="Interactive booth map: numbered booths over a fairgrounds aerial, green for available and red for assigned" tilt={0.4} />,
    },
    {
      tag: 'Custom pricing & pipeline',
      title: 'Your prices,',
      titleAccent: 'your pipeline.',
      body: 'Set your own pricing by category or booth, then move every application from review to active without a spreadsheet. Drag through the stages and always know what each vendor owes.',
      bullets: [
        { title: 'Custom pricing', body: 'Price by category, booth size, or vendor type.' },
        { title: 'Drag-and-drop stages', body: 'Pending, accepted, awaiting payment, active.' },
        { title: 'No double-booking', body: 'A booth can only be assigned to one vendor.' },
        { title: 'Amounts in view', body: 'See fees and balances on every card.' },
      ],
      visual: <ProductShot src="assets/product/vendor-pipeline.png" alt="Vendor pipeline kanban with pending review, accepted, awaiting payment, active, and rejected columns" tilt={-0.4} />,
    },
    {
      tag: 'Invoicing & fulfillment',
      title: 'Get them invoiced,',
      titleAccent: 'get them in.',
      body: 'Invoice vendors right from the platform, see exactly what is outstanding versus collected, and reconcile every payment against the rest of your fair, all without a second system.',
      bullets: [
        { title: 'Built-in invoicing', body: 'Send and track vendor invoices in one place.' },
        { title: 'Outstanding vs. collected', body: 'Always know who still owes and how much.' },
        { title: 'One ledger', body: 'Vendor payments reconcile with the rest of the platform.' },
        { title: 'Receipts & reminders', body: 'Automatic confirmations and nudges for unpaid invoices.' },
      ],
      visual: <ProductShot src="assets/product/vendor-invoices.png" alt="Vendor invoices: a list of invoices with amounts, status, and payment tracking" tilt={0.4} />,
    },
    {
      tag: 'Vendor portal',
      title: 'Every vendor gets',
      titleAccent: 'their own login.',
      body: 'Approved vendors land in a portal of their own — one-time link, no password to manage. They see exactly what is outstanding, pay invoices, sign their agreement, upload a missing COI, and apply for another booth, without a single email to your office.',
      bullets: [
        { title: 'One-time sign-in', body: 'Passwordless link — nothing new to set up.' },
        { title: 'Pay invoices online', body: 'See what is due and settle it in a click.' },
        { title: 'Submit documents', body: 'Upload COIs, permits, and signed agreements.' },
        { title: 'Self-serve applications', body: 'Track every booth and apply for more anytime.' },
      ],
      visual: <ProductShot src="assets/product/vendor-portal.png" alt="Vendor portal: a vendor's actions-needed list — pay invoice, sign agreement, upload COI — above their booth applications" tilt={-0.4} />,
    },
  ];
  return <FeaturePage moduleId="vendors" onNav={onNav}
    heroTitle="Vendor management,"
    heroAccent="without the spreadsheets."
    mascotLine={<>Applications in. Booths assigned.<br /><em style={{ fontStyle: 'italic', color: S.red }}>Vendors paid.</em></>}
    sections={sections} />;
}

Object.assign(window, { PageVendorManagement });