/* global React, ReactDOM, PageNav, PageFooter, PageCTA, useAppTweaks, AppTweaks */

function App() {
  const [tweaks, setTweak] = useAppTweaks();
  return (
    <>
      <PageNav current="agents" />
      <main>
        <section className="agents-hero">
          <div className="agents-hero-inner">
            <div>
              <p className="agents-eyebrow">For Flat-Fee MLS brokerages</p>
              <h1 className="agents-h">
                Your sellers shoot the photos. <em>You ship pro listings.</em>
              </h1>
              <p className="agents-sub">
                Flat-fee MLS works because you've stripped the cost out of selling. The one thing you couldn't strip was photography — until your seller's iPhone got good enough. PixFixCo bridges the rest. Built for brokerages that compete on price and need their listings to not look it.
              </p>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <a className="btn btn-primary btn-lg" href="#talk">Talk to us →</a>
                <a className="btn btn-ghost-inv btn-lg" href="#how-it-fits">See how it fits</a>
              </div>
            </div>
            <aside className="agents-side-card">
              <div className="agents-side-row">
                <span className="agents-side-label">Per-photo wholesale</span>
                <span className="agents-side-value">$3.50</span>
              </div>
              <div className="agents-side-row">
                <span className="agents-side-label">Avg. listing (25 photos)</span>
                <span className="agents-side-value">$87.50</span>
              </div>
              <div className="agents-side-row">
                <span className="agents-side-label">Setup + onboarding</span>
                <span className="agents-side-value">$0</span>
              </div>
              <div className="agents-side-row">
                <span className="agents-side-label">Minimum monthly</span>
                <span className="agents-side-value">None</span>
              </div>
              <div className="agents-side-row">
                <span className="agents-side-label">Ramp time</span>
                <span className="agents-side-value">~1 day</span>
              </div>
              <p style={{ margin: "12px 0 0", fontSize: 12, color: "oklch(0.7 0.01 60)", lineHeight: 1.5 }}>
                Bill us per photo, mark up however you want, or fold it into your listing fee. Your call.
              </p>
            </aside>
          </div>
        </section>

        <section id="how-it-fits" className="agents-section">
          <div className="agents-section-head">
            <p className="page-hero-eyebrow">Why this is built for you specifically</p>
            <h2 className="h2">A photo step you can promise without hiring a photographer.</h2>
            <p className="section-lede">
              Discount and flat-fee brokerages live or die by what you can include without breaking the price. Photo enhancement is the gap. Here's how we close it.
            </p>
          </div>

          <div className="agents-bullets">
            <div className="agents-bullet">
              <span className="agents-bullet-num">01</span>
              <h4>Per-photo, not per-listing</h4>
              <p>Every flat-fee listing is a different size. A 12-photo condo costs you $42. A 60-photo waterfront costs $210. You charge what makes sense for the listing — we don't penalize either end.</p>
            </div>
            <div className="agents-bullet">
              <span className="agents-bullet-num">02</span>
              <h4>White-label or co-branded</h4>
              <p>Sellers upload through your domain. Emails come from your address. Output ZIP can include your logo on a delivery cover sheet — or not, your call. Most brokerages don't tell sellers we exist, and that's fine.</p>
            </div>
            <div className="agents-bullet">
              <span className="agents-bullet-num">03</span>
              <h4>API or hosted upload</h4>
              <p>Drop a single API call into your existing seller workflow, or use our hosted upload page that you link from your seller portal. Either way, photos come back in 10–30 minutes.</p>
            </div>
            <div className="agents-bullet">
              <span className="agents-bullet-num">04</span>
              <h4>One invoice, monthly</h4>
              <p>Wholesale rate, billed monthly per photo processed. No subscription, no minimum, no commitment. Cancel mid-month — you only pay for what you ran that month.</p>
            </div>
            <div className="agents-bullet">
              <span className="agents-bullet-num">05</span>
              <h4>Honest output, MLS-safe</h4>
              <p>No virtual staging, no removed clutter, no fabricated rooms — the things MLSs increasingly require disclosure on. Just lighting, color, perspective, clarity. The kinds of edits that don't get listings flagged.</p>
            </div>
            <div className="agents-bullet">
              <span className="agents-bullet-num">06</span>
              <h4>Volume tiers above 5K/mo</h4>
              <p>Big brokerages get bigger savings. Past 5,000 photos a month, wholesale rates step down. Talk to us if you're at that scale and we'll quote a custom rate.</p>
            </div>
          </div>
        </section>

        <section className="agents-flow">
          <div className="agents-flow-inner">
            <div className="agents-section-head" style={{ margin: 0 }}>
              <p className="page-hero-eyebrow">In your workflow</p>
              <h2 className="h2">Where it slots in between "seller signs up" and "MLS goes live."</h2>
            </div>
            <div className="agents-flow-steps">
              <div className="agents-flow-step">
                <span className="agents-flow-step-n">STEP 1</span>
                <h5>Seller signs up</h5>
                <p>Through your existing flat-fee MLS funnel. No change to your top of funnel.</p>
              </div>
              <div className="agents-flow-step">
                <span className="agents-flow-step-n">STEP 2</span>
                <h5>Seller uploads photos</h5>
                <p>To your portal (your domain). PixFixCo runs in the background — they don't see us.</p>
              </div>
              <div className="agents-flow-step">
                <span className="agents-flow-step-n">STEP 3</span>
                <h5>Photos come back fixed</h5>
                <p>~10 minutes for an average listing. Your team reviews, the seller approves.</p>
              </div>
              <div className="agents-flow-step">
                <span className="agents-flow-step-n">STEP 4</span>
                <h5>Push to MLS</h5>
                <p>Same flat-fee MLS step you already have. Now with photos that look like a brokerage shot them.</p>
              </div>
            </div>
          </div>
        </section>

        <section className="agents-section">
          <div className="agents-section-head">
            <p className="page-hero-eyebrow">Who's a fit</p>
            <h2 className="h2">If any of these describe you, we should talk.</h2>
          </div>
          <div className="pricing-edge-grid">
            <div className="pricing-edge-card">
              <h4>Flat-fee MLS brokerages</h4>
              <p>You list for $99–$499 and live and die by package value. Photo enhancement is a believable upsell — or a quiet inclusion that closes more deals.</p>
            </div>
            <div className="pricing-edge-card">
              <h4>Discount full-service brokerages</h4>
              <p>1% / 1.5% commission, all-in. Margins are tight and pro photography is the line item that flexes most. We replace it for most listings under 50 photos.</p>
            </div>
            <div className="pricing-edge-card">
              <h4>iBuyers and listing automators</h4>
              <p>You're acquiring listings programmatically and need photography to scale with sign-ups. API integration, no humans in the loop, ~10 minute SLA.</p>
            </div>
            <div className="pricing-edge-card">
              <h4>Real-estate SaaS platforms</h4>
              <p>You're already the listing tool. Adding "fix my photos" as a feature is a clean upsell. We power it, you brand it.</p>
            </div>
          </div>
        </section>

        <section id="talk" className="page-cta">
          <div className="page-cta-inner">
            <p className="eyebrow eyebrow-inv">Talk to us</p>
            <h2 className="h1 page-cta-h">Give us your <em>worst-shot listing</em>. We'll fix it on a call.</h2>
            <p style={{ color: "oklch(0.78 0.01 60)", fontSize: 17, maxWidth: "50ch", margin: "8px 0 0" }}>
              30-minute call: send 5 photos from a real listing, we run them live, you decide. No deck, no slides, no procurement form.
            </p>
            <div className="page-cta-actions">
              <a className="btn btn-primary btn-lg" href="mailto:support@pixfixco.com">Email support@pixfixco.com</a>
              <a className="btn btn-ghost-inv btn-lg" href="index.html#try">Try one free first</a>
            </div>
          </div>
        </section>
      </main>
      <PageFooter />
      <AppTweaks tweaks={tweaks} setTweak={setTweak} pageContext="sub" />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);