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

function App() {
  const [tweaks, setTweak] = useAppTweaks();
  return (
    <>
      <PageNav current="how" />
      <main>
        <header className="page-hero">
          <p className="page-hero-eyebrow">How it works</p>
          <h1 className="page-hero-h">Three steps. <em>About the time</em> it takes to make coffee.</h1>
          <p className="page-hero-sub">
            No editor in the loop. No "we'll get back to you in 48 hours." Drop a photo, our model makes the same calls a real-estate retoucher would, and you walk away with a JPG that looks like it was shot by someone who knew what they were doing.
          </p>
        </header>

        <section className="hiw-steps-deep">
          <div className="hiw-step-deep">
            <div className="hiw-step-num">01</div>
            <div className="hiw-step-body">
              <h3>Upload — phone shot, dim shot, doesn't matter.</h3>
              <p>JPG or PNG, up to 20 MB. Drag in one or drop a whole listing. We accept what your phone took: blown-out windows, wide-angle warp, indoor yellows, the works.</p>
              <p>Photos stay private. Originals aren't stored — they pass through our pipeline. Enhanced versions live for 14 days for re-downloads, encrypted at rest, then auto-delete. Never used to train models.</p>
            </div>
            <aside className="hiw-step-detail">
              <h4>What we accept</h4>
              <ul>
                <li>JPG, PNG, HEIC (auto-converted)</li>
                <li>Phone or DSLR — any sensor</li>
                <li>Up to 20 MB per photo, 4K max dimension</li>
                <li>Single photo or whole-listing batch</li>
              </ul>
            </aside>
          </div>

          <div className="hiw-step-deep">
            <div className="hiw-step-num">02</div>
            <div className="hiw-step-body">
              <h3>We fix what a real-estate retoucher would.</h3>
              <p>About 22 seconds per photo. We're not throwing a generic "enhance" filter at it — the model was trained on tens of thousands of professional real-estate retouches, so it makes the same six or seven decisions a $200/hr human would.</p>
              <p>Lighting balanced. Whites kept white. Windows recovered without HDR fakery. Vertical lines actually vertical. Lawn green but not radioactive.</p>
            </div>
            <aside className="hiw-step-detail">
              <h4>Decisions per photo</h4>
              <ul>
                <li>Highlight + shadow recovery (windows, ceiling)</li>
                <li>Color cast removal (tungsten, fluorescent, mixed)</li>
                <li>Vertical line correction</li>
                <li>Lens distortion + perspective</li>
                <li>Selective denoise (interiors only)</li>
                <li>Gentle clarity, no over-sharpening</li>
              </ul>
            </aside>
          </div>

          <div className="hiw-step-deep">
            <div className="hiw-step-num">03</div>
            <div className="hiw-step-body">
              <h3>Download a ZIP. Upload to MLS. Done.</h3>
              <p>MLS-sized JPGs (2048 × 1536, sRGB), no watermark, ready for Zillow, Realtor.com, Redfin, your flat-fee MLS service, your printed flyer. We also email a backup link that works for 14 days.</p>
              <p>Originals never get stored — they pass through our pipeline. Enhanced versions live for 14 days so you can re-download, then auto-delete.</p>
            </div>
            <aside className="hiw-step-detail">
              <h4>Built to MLS spec</h4>
              <ul>
                <li><b>2048 × 1536 JPG</b>, sRGB, 4:3 landscape</li>
                <li>Same crop, same pixel count, every photo</li>
                <li>Tested with Zillow, Realtor.com, Redfin, BrightMLS, FMLS</li>
                <li>ZIP with every photo · original filenames preserved</li>
                <li>Email link (14-day re-download window)</li>
                <li>Originals not stored · enhanced versions auto-delete in 14 days</li>
              </ul>
            </aside>
          </div>
        </section>

        <section className="fix-grid-section">
          <div className="fix-grid-inner">
            <div className="fix-grid-head">
              <p className="page-hero-eyebrow" style={{ marginBottom: 0 }}>What we fix</p>
              <h2 className="h2" style={{ margin: 0 }}>The six problems that make a listing photo look amateur.</h2>
              <p className="section-lede" style={{ textAlign: "center", maxWidth: "52ch" }}>
                Phone cameras are good. Real-estate photography is hard. These are the gaps we close — and the few we don't.
              </p>
            </div>
            <div className="fix-grid">
              <FixCard
                icon={<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="4.5" stroke="currentColor" strokeWidth="1.5"/><path d="M12 2V5M12 19V22M2 12H5M19 12H22M4.93 4.93L7.05 7.05M16.95 16.95L19.07 19.07M4.93 19.07L7.05 16.95M16.95 7.05L19.07 4.93" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>}
                title="Lighting"
                p="Dim interior + blown-out window? We bring the room up, recover what's outside, and balance the two so it looks like a single, evenly lit space."
                not="We don't fake daylight at night."
              />
              <FixCard
                icon={<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.4"/><path d="M12 3C7 3 5 7 5 12C5 17 7 21 12 21" stroke="currentColor" strokeWidth="1.4"/><path d="M12 3V21" stroke="currentColor" strokeWidth="1.4"/></svg>}
                title="Color"
                p="Yellow indoor lighting, blueish dusk, that weird greenish kitchen — gone. We pull whites back to white and let real wood read as wood, not banana."
                not="We don't oversaturate the lawn."
              />
              <FixCard
                icon={<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 20L8 4L16 20L20 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                title="Perspective"
                p="Phone wide angles tilt the walls. We straighten the verticals, fix the lens warp, and crop sensibly — without eating the room."
                not="We don't fabricate ceilings or walls."
              />
              <FixCard
                icon={<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M3 18C3 18 5 14 8 14C11 14 13 18 17 18C19 18 21 16 21 16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/><circle cx="17" cy="6" r="2.5" stroke="currentColor" strokeWidth="1.4"/></svg>}
                title="Sky (exterior)"
                p="Gloomy gray sky on a listing day? We can swap it for an even, neutral overcast or soft blue — never a fake sunset, never anything you'd be ashamed of in person."
                not="We don't put palm trees in Cleveland."
              />
              <FixCard
                icon={<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="4" y="6" width="16" height="14" rx="1.5" stroke="currentColor" strokeWidth="1.4"/><path d="M8 11H16M8 15H13" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>}
                title="Clarity"
                p="A subtle clarity pass — the kind a Photoshop pro would apply with a soft brush. Texture stays natural. We're not sharpening edges into cartoons."
                not="We don't HDR-halo doorframes."
              />
              <FixCard
                icon={<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.4"/><path d="M9 9L15 15M15 9L9 15" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>}
                title="What we won't do"
                p="No virtual staging. No removing furniture you don't own. No painting walls a different color. No hiding water damage. The photo is the room — we just light it well."
                not="MLS rules · ethics · honest selling."
              />
            </div>
          </div>
        </section>

        <PageCTA
          kicker="Ready to try"
          headline={<>See it on <em>your</em> photo first.</>}
          primary={{ label: "Fix one photo, free", href: "index.html#try" }}
          secondary={{ label: "Or batch a listing →", href: "/order" }}
        />
      </main>
      <PageFooter />
      <AppTweaks tweaks={tweaks} setTweak={setTweak} pageContext="sub" />
    </>
  );
}

function FixCard({ icon, title, p, not }) {
  return (
    <div className="fix-card">
      <div className="fix-card-icon">{icon}</div>
      <h4>{title}</h4>
      <p>{p}</p>
      <div className="fix-card-not">{not}</div>
    </div>
  );
}

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