/* global React, ReactDOM, BeforeAfter, Differentiators, HowItWorks, Pricing, FAQ, FooterCTA, PaywallModal, Uploader, LogoMark, useAppTweaks, AppTweaks */
const { useState } = React;

function App() {
  const [tweaks, setTweak] = useAppTweaks();
  const [paywallOpen, setPaywallOpen] = useState(false);
  const openPaywall = () => setPaywallOpen(true);

  const headlineParts = (tweaks.headline || "").split("\n");

  return (
    <>
      <Nav />
      <Hero
        variant={tweaks.heroVariant}
        headlineParts={headlineParts}
        tagline={tweaks.tagline} />

      <Differentiators />
      <HowItWorks />
      <TrySection onBatchAttempt={openPaywall} />
      <Pricing onAgentClick={openPaywall} />
      <FAQ />
      <FooterCTA onAgentClick={openPaywall} />

      <PaywallModal open={paywallOpen} onClose={() => setPaywallOpen(false)} />
      <AppTweaks tweaks={tweaks} setTweak={setTweak} pageContext="home" />
    </>);
}

function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <LogoMark />
        <div className="nav-links">
          <a href="gallery.html">Gallery</a>
          <a href="pricing.html">Pricing</a>
          <a href="how-it-works.html">How it works</a>
          <a href="photo-guide.html">Photo guide</a>
        </div>
        <div className="nav-cta">
          <a className="btn btn-primary" href="#try">Fix your photos →</a>
        </div>
      </div>
    </nav>);
}

function Hero({ variant, headlineParts, tagline }) {
  const rooms = [
    { label: "Kitchen", note: "Dim, warm cast → balanced daylight", before: "assets/kitchen-1-before.webp", after: "assets/kitchen-1-after.png" },
    { label: "Living room", note: "Blown windows recovered" },
    { label: "Primary bedroom", note: "Dim corners lifted" },
    { label: "Bath", note: "Color + clarity" },
    { label: "Twilight exterior", note: "Sky swap + glow" },
    { label: "Backyard", note: "Grass + sky rebalanced" }];

  const [active, setActive] = useState(0);
  return (
    <section id="gallery" className={`hero variant-${variant}`}>
      <div className="hero-grid">
        <div className="hero-copy">
          <div className="eyebrow" style={{ marginBottom: 20 }}>PixFixCo · for FSBO & flat-fee listings</div>
          <h1 className="h1 hero-h">
            {headlineParts.map((part, i) =>
              <React.Fragment key={i}>
                {i === headlineParts.length - 1 ? <em>{part}</em> : part}
                {i < headlineParts.length - 1 && <br />}
              </React.Fragment>
            )}
          </h1>
          <blockquote className="hero-tag">{tagline}</blockquote>
          <p className="hero-p">Upload a grainy, poorly lit phone photo. We'll hand you back a listing-ready image in about 20 seconds. No photographer, no re-shoots, no excuses.</p>
          <div className="hero-ctas">
            <a className="btn btn-primary btn-lg" href="#try">Fix your photos</a>
          </div>
          <div className="hero-proof">
            <div><b>$7</b> per photo</div>
            <div><b>~22 sec</b> delivery, not days</div>
            <div><b>No retouching queue</b></div>
          </div>
          <p className="hero-platforms">
            MLS-ready · tested with Zillow, Realtor.com, Redfin
          </p>
        </div>
        <div className="hero-ba">
          <BeforeAfter
            key={active}
            beforeSrc={rooms[active].before}
            afterSrc={rooms[active].after}
            beforeLabel="BEFORE"
            afterLabel="PIXFIXCO"
            beforeNote={rooms[active].label + " · raw phone photo"}
            afterNote={rooms[active].note}
            aspect="4 / 3"
            initial={48} />
          <div className="hero-ba-tabs" role="tablist" aria-label="Sample rooms">
            {rooms.map((r, i) =>
              <button
                key={i}
                role="tab"
                aria-selected={active === i}
                className={`hero-ba-tab ${active === i ? "is-active" : ""}`}
                onClick={() => setActive(i)}>
                <span className="hero-ba-tab-n">{String(i + 1).padStart(2, "0")}</span>
                <span className="hero-ba-tab-label">{r.label}</span>
              </button>
            )}
          </div>
          <p className="mono" style={{ textAlign: "center", color: "var(--ink-4)", marginTop: 10 }}>
            ↔ drag to compare · click a room to switch
          </p>
        </div>
      </div>
    </section>);
}

function TrySection({ onBatchAttempt }) {
  return (
    <section id="try" className="section try-section">
      <div className="try-inner">
        <Uploader onBatchAttempt={onBatchAttempt} />
      </div>
    </section>);
}

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