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

function App() {
  const [tweaks, setTweak] = useAppTweaks();

  return (
    <>
      <PageNav current="pricing" />
      <main>
        <header className="page-hero" style={{ paddingBottom: 32 }}>
          <p className="page-hero-eyebrow">Pricing</p>
          <h1 className="page-hero-h">One price. <em>Per photo.</em></h1>
          <p className="page-hero-sub">
            No packages. No subscriptions. No "starter" or "pro" tiers. You upload N photos, you pay N × $7. The price never goes up because you're a flat-fee MLS seller, and it doesn't go down because you're a brokerage either — that conversation lives on the <a href="for-agents.html" style={{ color: "var(--accent)" }}>for-agents page</a>.
          </p>
        </header>

        <section className="pricing-deep-section">
          <div className="pricing-hero-card">
            <div>
              <span className="pricing-big-num">$7</span>
              <span className="pricing-big-unit"> / photo</span>
            </div>
            <p className="pricing-big-sub">
              Charged once, when you submit a batch. Try one photo free first to confirm.
            </p>
            <div style={{ marginTop: 32 }}>
              <a className="btn btn-primary btn-lg" href="/order">Fix a listing →</a>
            </div>
          </div>
        </section>

        <section className="pricing-deep-section">
          <div className="section-head" style={{ marginBottom: 32 }}>
            <p className="page-hero-eyebrow" style={{ margin: 0 }}>Versus the alternative</p>
            <h2 className="h2">What a typical FSBO seller actually pays.</h2>
          </div>
          <table className="compare-table">
            <thead>
              <tr>
                <th></th>
                <th>Hire a photographer</th>
                <th>Reshoot it yourself</th>
                <th className="compare-table-head-pix">PixFixCo</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="compare-row-label">Cost (25-photo listing)</td>
                <td>$200–$450</td>
                <td>$0 + a Saturday</td>
                <td><b style={{ color: "var(--accent)" }}>$175</b></td>
              </tr>
              <tr>
                <td className="compare-row-label">Time to delivery</td>
                <td>2–5 days</td>
                <td>Same day, if light cooperates</td>
                <td>~10 minutes</td>
              </tr>
              <tr>
                <td className="compare-row-label">Need to re-clean the house</td>
                <td><span className="compare-pill compare-pill-meh">Yes</span></td>
                <td><span className="compare-pill compare-pill-meh">Yes</span></td>
                <td><span className="compare-pill compare-pill-good">No</span></td>
              </tr>
              <tr>
                <td className="compare-row-label">MLS-ready output</td>
                <td>Yes</td>
                <td>Maybe</td>
                <td>Yes</td>
              </tr>
              <tr>
                <td className="compare-row-label">Honest about the room</td>
                <td>Depends on the editor</td>
                <td>Yes (it's literally your room)</td>
                <td><b>Yes — no virtual staging, no fake fixtures</b></td>
              </tr>
            </tbody>
          </table>
          <p style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 16, fontStyle: "italic" }}>
            We're cheaper than a photographer for most listings under 60 photos. Past that, hire a human — that's a different job.
          </p>
        </section>

        <section className="pricing-deep-section">
          <div className="section-head" style={{ marginBottom: 32 }}>
            <p className="page-hero-eyebrow" style={{ margin: 0 }}>Edge cases</p>
            <h2 className="h2">Honest answers about the awkward stuff.</h2>
          </div>
          <div className="pricing-edge-grid">
            <div className="pricing-edge-card">
              <h4>Can I see it work before I commit?</h4>
              <p>Yes. The free single-photo demo on the <a href="index.html#try" style={{ color: "var(--accent)" }}>homepage</a> shows you a watermarked preview on your actual photo. If the model handles your style, batch the rest. If not, you've spent nothing.</p>
            </div>
            <div className="pricing-edge-card">
              <h4>I have 80 photos. Volume discount?</h4>
              <p>No discount, but no penalty either. 80 photos is $560. If you're a brokerage running this every week, look at <a href="for-agents.html" style={{ color: "var(--accent)" }}>the agent page</a>.</p>
            </div>
            <div className="pricing-edge-card">
              <h4>Can I pay later?</h4>
              <p>No. Pay-on-submit only. We process the moment your card clears, so the photos are usually back before a typical net-30 invoice would even render.</p>
            </div>
            <div className="pricing-edge-card">
              <h4>Free for FSBO sellers?</h4>
              <p>One photo free, always. Enough to confirm it works on your house. After that it's $7 per photo, even for FSBO — flat-fee MLS sellers and brokerages pay the same rate.</p>
            </div>
            <div className="pricing-edge-card">
              <h4>What about the watermark?</h4>
              <p>Only on the free single-photo preview. Paid batches come back as clean MLS-ready JPGs — no watermark, anywhere.</p>
            </div>
            <div className="pricing-edge-card">
              <h4>How long do you keep my photos?</h4>
              <p>Originals aren't stored — they pass through our pipeline. Enhanced versions live for 14 days so you can re-download them, then auto-delete. Encrypted at rest, never used to train models. Want them gone sooner? Email us, we delete immediately.</p>
            </div>
          </div>
        </section>

        <PageCTA
          kicker="No subscription, no packages"
          headline={<>Pay for the photos. <em>Walk away.</em></>}
          primary={{ label: "Fix a listing →", href: "/order" }}
          secondary={{ label: "Try one free first", href: "index.html#try" }}
        />
      </main>
      <PageFooter />
      <AppTweaks tweaks={tweaks} setTweak={setTweak} pageContext="sub" />
    </>
  );
}

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