/* vendor-page.jsx — For service providers (chef, yacht, cleaning, driver, spa, etc.)
   Application to join the curated Novus vendor network. */

function VendorPage() {
  return (
    <>
      <PartnerHero
        badge="Service vendor network · Curated"
        overline="For Miami operators & artisans"
        title="The crew behind"
        italic="every Novus stay."
        lede="Chefs, captains, drivers, masseuses, florists, sommeliers, cleaners, photographers — the people who make a guest's trip feel hand-built. We work with about forty of them. We're always looking for a few more."
        ctaLabel="Apply to the network"
        photo="https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?auto=format&fit=crop&w=1500&q=80"
      />

      <StatsBand stats={[
        { value: '12,400+', label: 'Concierge requests fulfilled in 2025' },
        { value: '~40', label: 'Active vendors across all categories' },
        { value: '4.97★', label: 'Avg. guest rating of vendor work' },
        { value: '7 days', label: 'Avg. payout terms — no waiting 60 days' },
      ]} />

      <VisionBlock
        overline="Our philosophy"
        title="A small bench"
        italic="of the right people."
        paragraphs={[
          'A lot of platforms try to be the Amazon of services. We\u2019re the opposite. For each category — chef, yacht, driver, spa — we work with a small number of trusted providers. We know your work. Your team knows ours. The handoff between booking and guest is silent and clean.',
          'When a guest asks for a private chef on Saturday, the concierge doesn\u2019t open a bidding portal. They text Chef Andrea, who already knows the kitchen at Española, knows where we keep the espresso cups, and knows the guest is celebrating an anniversary.',
          'If you do excellent work and you\u2019d rather have a steady book of pre-vetted, well-paying guests than spend your weeks chasing leads — read on.',
        ]}
        image="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=1500&q=80"
      />

      <ServiceCategoryGrid />

      <BenefitsGrid
        overline="What you get"
        title="A working partnership,"
        italic="not a marketplace."
        items={[
          {
            icon: 'calendar',
            title: 'Predictable bookings',
            body: 'Pre-vetted high-spend guests with clear briefs. No haggling, no ghosting, no chasing payment.',
          },
          {
            icon: 'money',
            title: 'Pay your rate · no markup on you',
            body: 'You set your rate, we add our concierge fee on top. The guest sees a single price; you receive yours in full. No platform takes a percentage of your work.',
          },
          {
            icon: 'clock',
            title: 'Net-7 payouts',
            body: 'Most platforms pay 30–60 days late. We wire you within 7 business days of service. ACH or check.',
          },
          {
            icon: 'shield',
            title: 'Insured by us',
            body: 'Our $5M umbrella covers concierge-booked services across the portfolio. You bring the work, we bring the policy.',
          },
          {
            icon: 'chat',
            title: 'Concierge handles logistics',
            body: 'We do the introductions, the timing, the dietary notes, the door codes. You arrive ready to do your job — not coordinate.',
          },
          {
            icon: 'users',
            title: 'A regular calendar',
            body: 'Top vendors in each category average 4–10 bookings a month from us. Predictable enough to build a route around.',
          },
          {
            icon: 'star',
            title: 'Reviews that follow you',
            body: 'Guest reviews of your work go straight to your vendor profile and to your Google / Instagram. Permission-based, of course.',
          },
          {
            icon: 'sparkle',
            title: 'Editorial features',
            body: 'Top performers get short profile features in the Novus guest welcome packet and the experiences page on our site.',
          },
          {
            icon: 'crown',
            title: 'First look at events',
            body: 'Novus hosts a few private dinners and partner events a year. Network vendors get first invitations and first-call gigs.',
          },
        ]}
      />

      <PartnerTestimonial
        quote="In two years of working with Novus, I've never had to chase a payment, never had a guest argue about scope, and never met a Miguel who didn't already know what the guest needed. It's the only platform I take new bookings from."
        name="Chef Andrea Salinas"
        role="Private chef · Novus network since 2024"
      />

      <ProcessSteps
        overline="How it works"
        title="From application"
        italic="to first booking — ten days."
        steps={[
          { title: 'Apply', body: 'Submit the form below. Be specific about category, experience, capacity, and rates. We respond within 5 business days.' },
          { title: 'Interview & trial', body: 'For shortlisted applicants — a working conversation, a reference check, and one trial service booked at standard rates.' },
          { title: 'Onboard', body: 'Insurance, ACH details, calendar integration, intro to the concierge team. Welcome pack with each villa\u2019s quirks (which range hood, where the corkscrew lives, etc.).' },
          { title: 'Start receiving briefs', body: 'Concierge sends you guest briefs by WhatsApp. Accept or pass within an hour. Confirmed jobs lock in.' },
        ]}
      />

      <VisionBlock
        reverse
        overline="The bar"
        title="What we look for"
        italic="in a vendor."
        paragraphs={[
          'Excellent at one thing. Insured. Reliable. Communicative. Discreet — many of our guests are public figures and we treat their privacy as our own. Fluent in at least one of English, Spanish, or both.',
          'We work with sole proprietors and small teams (up to 10 people on staff). We rarely work with large agencies or 1099-style platforms. If you\u2019re a craftsperson — not a middleman — we want to meet you.',
        ]}
        image="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1500&q=80"
      />

      <ApplicationForm
        id="apply"
        title="Apply to the"
        italic="Novus vendor network."
        lede="One application per category. If you offer multiple services (e.g. yacht charter + private chef on board), pick the primary and mention the rest in the notes."
        footnote="What we don't ask for: a sign-up fee, exclusivity, or your client list. You stay independent; we just become one of your favorite clients."
        fields={[
          { kind: 'group', children: [
            { name: 'name', kind: 'text', label: 'Your name', required: true },
            { name: 'business', kind: 'text', label: 'Business / brand name', required: true },
          ]},
          { kind: 'group', children: [
            { name: 'email', kind: 'email', label: 'Email', required: true },
            { name: 'phone', kind: 'tel', label: 'Mobile / WhatsApp', required: true },
          ]},
          { name: 'category', kind: 'select', label: 'Primary service category', required: true,
            options: [
              'Private chef',
              'Sommelier · in-villa wine pairing',
              'Yacht / boat charter',
              'Captain (BYO boat or with crew)',
              'Mixologist · in-villa bar',
              'Private driver / chauffeur',
              'Car rental · exotic / luxury',
              'Cleaning · turn-down crew',
              'Cleaning · deep clean & laundry',
              'Massage · in-villa spa therapist',
              'Yoga · Pilates · personal training',
              'Hair & makeup',
              'Florist',
              'Photographer · personal / event',
              'Videographer / content creator',
              'Event planner',
              'Private security',
              'Childcare · licensed nanny',
              'Pet sitter / dog walker',
              'Concierge · personal shopping & errands',
              'Other'] },
          { name: 'experience', kind: 'select', label: 'Years in this work',
            options: ['Less than 2 years', '2 – 5 years', '5 – 10 years', '10+ years'] },
          { name: 'capacity', kind: 'select', label: 'How many bookings a month can you take from us?',
            options: ['1 – 2', '3 – 5', '6 – 10', '10+'] },
          { name: 'languages', kind: 'pill', label: 'Languages you operate in',
            options: ['English', 'Español', 'Português', 'Français', 'Italiano', 'Other'] },
          { name: 'serves', kind: 'pill', label: 'Neighborhoods you cover',
            options: ['South Beach', 'Mid-Beach', 'Surfside / Bal Harbour', 'Brickell', 'Downtown', 'Edgewater', 'Wynwood', 'Coconut Grove', 'Coral Gables', 'Key Biscayne', 'Sunny Isles', 'Hollywood / Hallandale', 'All Miami-Dade'] },
          { name: 'rate', kind: 'text', label: 'Typical rate / pricing',
            placeholder: '$220 / person · $180 / hour · $4,800 / half-day · etc.' },
          { name: 'insurance', kind: 'select', label: 'Are you insured & licensed?',
            options: ['Yes, full GL + professional liability', 'Yes, general liability only', 'Working on it', 'Not yet'] },
          { name: 'portfolio', kind: 'url', label: 'Website / Instagram / portfolio',
            placeholder: 'https://…', required: true },
          { name: 'about', kind: 'textarea', rows: 3, label: 'Tell us about your work',
            placeholder: 'Who do you serve? What are you obsessed with? What makes a great service in your category?', required: true },
          { name: 'note', kind: 'textarea', rows: 2, label: 'Anything else?',
            placeholder: 'Other services you offer, references, availability.' },
        ]}
        submitLabel="Submit application"
      />

      <ClosingBand
        overline="Quick question?"
        title="WhatsApp our"
        italic="vendor desk."
        lede="vendors@novusresidentials.com · or (305) 555-0142. We answer the same day, in English or Spanish."
        ctaLabel="Open contact"
        ctaHref="contact.html"
      />
    </>
  );
}

/* Service category grid — what we book and how often */
function ServiceCategoryGrid() {
  const cats = [
    { icon: 'sparkle', name: 'Private chef', volume: '~120 / yr', avg: '$240 pp', desc: 'Tasting menus in-villa for 4–12 guests. Anniversary dinners are our biggest book.' },
    { icon: 'globe', name: 'Yacht & boat charter', volume: '~80 / yr', avg: '$4,800 half-day', desc: 'Galeon, Sunseeker, sportfishers. Half-day to multi-day. Captain & crew included.' },
    { icon: 'key', name: 'Private driver', volume: '~360 / yr', avg: '$180 hr', desc: 'MIA / FLL airport pickups, restaurant routes, multi-day blocks. Mercedes V-Class is our default.' },
    { icon: 'truck', name: 'Exotic car rental', volume: '~60 / yr', avg: '$1,200 day', desc: 'Porsche, AMG, Range Rover. Delivered to the villa. Returned by the team.' },
    { icon: 'spa', name: 'In-villa spa', volume: '~140 / yr', avg: '$220 hr', desc: 'Massage, facials, recovery work, couple\u2019s treatments. Therapists bring full kit.' },
    { icon: 'leaf', name: 'Cleaning & turn-down', volume: '~1,200 / yr', avg: '$180 turn', desc: 'Between-stay turns, deep cleans, mid-stay refreshes. In-house team also welcome.' },
    { icon: 'star', name: 'Florist', volume: '~80 / yr', avg: '$120 arr.', desc: 'Welcome arrangements, anniversary surprises, event florals. Daily delivery option.' },
    { icon: 'crown', name: 'Mixologist', volume: '~50 / yr', avg: '$320 service', desc: 'In-villa bar service for dinners and small events. BYO ingredients or full kit.' },
    { icon: 'home', name: 'Event planner', volume: '~20 / yr', avg: '15% of event', desc: 'Birthdays, anniversaries, intimate weddings (10–40 guests) in our villas.' },
    { icon: 'users', name: 'Childcare', volume: '~40 / yr', avg: '$45 hr', desc: 'Licensed, background-checked, fluent in English + Spanish. Date-night specialists.' },
    { icon: 'shield', name: 'Private security', volume: '~10 / yr', avg: '$75 hr', desc: 'Discreet on-site detail for high-profile guests. Multi-day assignments.' },
    { icon: 'chat', name: 'Personal shopping', volume: '~30 / yr', avg: '$120 hr', desc: 'Grocery, pre-stocking, Bal Harbour runs, dinner-party prep. White-glove.' },
  ];

  return (
    <section style={{ padding: '120px 0', background: 'var(--sand-50)' }}>
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 64 }}>
          <div style={{
            fontSize: 12, color: 'var(--sun-coral)', letterSpacing: '0.18em',
            textTransform: 'uppercase', fontWeight: 600, marginBottom: 16,
          }}>What we book most</div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontSize: 'clamp(34px, 4vw, 52px)', color: 'var(--navy-900)',
            margin: 0, letterSpacing: '-0.02em', lineHeight: 1.08, textWrap: 'balance',
          }}>The 12 services <em style={{ fontStyle: 'italic' }}>our guests ask for.</em></h2>
          <p style={{
            color: 'var(--ink-700)', fontSize: 16, lineHeight: 1.65,
            margin: '18px 0 0', maxWidth: 620, textWrap: 'pretty',
          }}>Bookings split across our network. We don\u2019t advertise rates here — the table below is just a sense of the work and volume. Real pricing happens in your application.</p>
        </div>

        <div style={{
          background: '#fff', border: '1px solid var(--line)',
          borderRadius: 18, overflow: 'hidden',
        }}>
          {cats.map((c, i) => (
            <div key={c.name} style={{
              display: 'grid', gridTemplateColumns: '56px 1.4fr 1fr 1fr 1.6fr',
              gap: 24, alignItems: 'center', padding: '20px 28px',
              borderBottom: i < cats.length - 1 ? '1px solid var(--line)' : 'none',
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 10,
                background: 'rgba(252,172,100,0.10)',
                border: '1px solid rgba(252,172,100,0.32)',
                color: 'var(--sun-coral)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <BenefitIcon name={c.icon} />
              </div>
              <div style={{
                fontFamily: 'var(--font-display)', fontWeight: 400,
                fontSize: 22, color: 'var(--navy-900)', letterSpacing: '-0.005em',
              }}>{c.name}</div>
              <div>
                <div style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600 }}>Volume</div>
                <div style={{ fontWeight: 500, color: 'var(--navy-900)', fontSize: 15, marginTop: 2 }}>{c.volume}</div>
              </div>
              <div>
                <div style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600 }}>Typical rate</div>
                <div style={{ fontWeight: 500, color: 'var(--navy-900)', fontSize: 15, marginTop: 2 }}>{c.avg}</div>
              </div>
              <div style={{
                fontSize: 13, color: 'var(--ink-700)', lineHeight: 1.55, textWrap: 'pretty',
              }}>{c.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.VendorPage = VendorPage;