/* global React, Icon, Button, Eyebrow, SectionHead, ProofCard, SAMPLE_PROOF, BAFrame, nav */
/* Patch Perfect — Proof Gallery + smaller standalone pages */
const { useState: useStateProof } = React;

const FILTERS = [
  { k: "all",         t: "All repairs" },
  { k: "post-trade",  t: "Post‑trade" },
  { k: "ceiling",     t: "Ceiling" },
  { k: "pre-listing", t: "Pre‑listing" },
  { k: "rental-turn", t: "Rental turn" },
  { k: "failed-diy",  t: "Failed DIY rescue" },
];

function ProofGalleryPage() {
  const [filter, setFilter] = useStateProof("all");
  const cases = filter === "all" ? SAMPLE_PROOF : SAMPLE_PROOF.filter(p => p.category === filter);
  return (
    <div>
      <section className="page-header">
        <div className="container">
          <div className="crumbs">
            <a onClick={(e) => { e.preventDefault(); nav("/"); }} href="#/">Home</a>
            &nbsp;/&nbsp; Proof gallery
          </div>
          <Eyebrow icon="proof">Proof gallery</Eyebrow>
          <h1 style={{ marginTop: 14 }}>Every job ends with documentation.</h1>
          <p className="lede">
            Browse real Phoenix wall and ceiling repairs we've closed the loop on. Each
            card shows the situation, the repair, and the technician note, the same
            proof report we send to customers and trade partners.
          </p>
          <div style={{ display: "flex", gap: 14, alignItems: "center", marginTop: 28, flexWrap: "wrap" }}>
            <Button kind="action" size="lg" to="/send-photos">
              <Icon name="camera" size={18} />
              Send Photos for an Estimate
            </Button>
            <span className="t-proof">{SAMPLE_PROOF.length} closed jobs · last 60 days · Phoenix Metro</span>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="proof-filters">
            {FILTERS.map(f => (
              <button
                key={f.k}
                className={"proof-filter" + (filter === f.k ? " is-active" : "")}
                onClick={() => setFilter(f.k)}
              >{f.t}</button>
            ))}
          </div>
          <div className="proof-grid">
            {cases.map(p => <ProofCard key={p.jobId} data={p} />)}
          </div>
          {cases.length === 0 && (
            <p style={{ textAlign: "center", color: "var(--fg-muted)", padding: 60 }}>
              No cases in this filter yet. Try another category.
            </p>
          )}
        </div>
      </section>

      <section className="section section--plaster">
        <div className="container">
          <SectionHead
            eyebrow="What's in a proof report"
            eyebrowIcon="doc"
            title="The handoff that closes the loop."
            sub="We send this to the customer the moment the technician marks the job done, and to the referring partner if there was one."
          />
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 24, maxWidth: 1000, margin: "0 auto" }}>
            <div className="card-patch">
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
                <span className="badge badge-proof"><span className="dot"></span>Repair complete</span>
                <span className="t-proof">#PMU‑2444</span>
              </div>
              <div className="ba-grid">
                <BAFrame slot="report-before" src="photos/report-before.jpg" label="Before" hint="Proof report: before photo" />
                <BAFrame slot="report-after" src="photos/report-after.jpg" label="After" after hint="Proof report: after photo" />
              </div>
              <div style={{ marginTop: 16, paddingTop: 14, borderTop: "1px dashed var(--border)" }}>
                <div className="t-proof">Technician notes</div>
                <p style={{ fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.5, marginTop: 6 }}>
                  Doorknob‑sized hole in hallway wall, measured and photographed on arrival. Backer set, two‑coat mud,
                  texture matched to the surrounding wall, primed and color‑blended. Site re‑vacuumed.
                </p>
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <div className="card-patch">
                <h3 style={{ fontSize: 18, margin: 0 }}>What homeowners get</h3>
                <ul className="pmu-checks" style={{ marginTop: 12 }}>
                  <li><Icon name="check-circle" size={18} />Before / after photos</li>
                  <li><Icon name="check-circle" size={18} />Technician notes &amp; timing</li>
                  <li><Icon name="check-circle" size={18} />Materials &amp; warranty record</li>
                  <li><Icon name="check-circle" size={18} />One‑tap review link</li>
                </ul>
              </div>
              <div className="card-patch surface-blue">
                <h3 style={{ color: "var(--pp-wall)", fontSize: 18, margin: 0 }}>What partners get</h3>
                <ul className="pmu-checks" style={{ marginTop: 12, color: "var(--pp-wall)" }}>
                  <li><Icon name="check-circle" size={18} style={{ color: "var(--pp-finish)" }} />Same proof report, sent same day</li>
                  <li><Icon name="check-circle" size={18} style={{ color: "var(--pp-finish)" }} />Customer name + repair confirmed</li>
                  <li><Icon name="check-circle" size={18} style={{ color: "var(--pp-finish)" }} />Status: received → scoped → scheduled → closed</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ─────────── Services page (overview) ─────────── */
function ServicesPage() {
  const services = [
    { icon: "wall-repair",    title: "Small drywall patching",       to: "/repair/post-trade" },
    { icon: "plumbing",       title: "Post‑trade wall repair",        to: "/repair/post-trade" },
    { icon: "ceiling-repair", title: "Ceiling repair",                to: "/repair/ceiling" },
    { icon: "texture",        title: "Texture matching",              to: "/repair/post-trade" },
    { icon: "paint",          title: "Paint blend / touch‑up",        to: "/repair/post-trade" },
    { icon: "listing",        title: "Pre‑listing wall repair",       to: "/repair/pre-listing" },
    { icon: "key",            title: "Rental turn repair",            to: "/repair/rental-turn" },
    { icon: "wall-repair",    title: "Failed DIY rescue",             to: "/repair/failed-diy" },
    { icon: "before-after",   title: "Multi‑area small repair package", to: "/repair/pre-listing" },
  ];
  return (
    <div>
      <section className="page-header">
        <div className="container">
          <div className="crumbs">
            <a onClick={(e) => { e.preventDefault(); nav("/"); }} href="#/">Home</a>
            &nbsp;/&nbsp; Services
          </div>
          <Eyebrow icon="wall-repair">Services</Eyebrow>
          <h1 style={{ marginTop: 14 }}>Small wall &amp; ceiling repair. That's all we do.</h1>
          <p className="lede">A focused scope is how we stay fast, clean, and consistent. If your project is bigger than this, we'll tell you, and often refer you to a specialist.</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="svc-grid">
            {services.map(s => (
              <a
                key={s.title}
                className="service-tile"
                href={"#" + s.to}
                onClick={(e) => { e.preventDefault(); nav(s.to); }}
                style={{ textDecoration: "none", color: "inherit", display: "block" }}
              >
                <div className="ico-wrap"><Icon name={s.icon} size={22} /></div>
                <h4>{s.title}</h4>
                <p style={{ marginTop: 6 }}>
                  See repair details, photo tips, and pricing range &nbsp;
                  <span style={{ color: "var(--pp-blue)", fontWeight: 700 }}>→</span>
                </p>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--plaster">
        <div className="container">
          <SectionHead
            eyebrow="Out of scope"
            title="What we don't do (on purpose)."
            sub="We're not a handyman service or a general contractor. Sending you elsewhere on the wrong job is part of our promise."
          />
          <div className="scope-grid" style={{ maxWidth: 820, margin: "0 auto" }}>
            <div className="scope-list is-doesnt">
              <h4><span className="ico"><Icon name="x" size={20} /></span>We don't do</h4>
              <ul>
                {["Full‑house painting", "Large drywall installation (new build, remodel)", "Commercial drywall at scale", "Plumbing, electrical, HVAC work", "General handyman tasks"].map(item => (
                  <li key={item}><span className="ico"><Icon name="x" size={18} /></span>{item}</li>
                ))}
              </ul>
            </div>
            <div className="scope-list is-does">
              <h4><span className="ico"><Icon name="check-circle" size={20} /></span>We will refer you</h4>
              <ul>
                {["To a trusted Phoenix painter for whole‑house projects", "To a drywall installer for new‑construction work", "To a licensed trade for the work that caused the damage", "To a handyman for non‑wall odd jobs"].map(item => (
                  <li key={item}><span className="ico"><Icon name="check-circle" size={18} /></span>{item}</li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <Pricing />
    </div>
  );
}

/* ─────────── How it works page ─────────── */
function HowItWorksPage() {
  return (
    <div>
      <section className="page-header">
        <div className="container">
          <div className="crumbs">
            <a onClick={(e) => { e.preventDefault(); nav("/"); }} href="#/">Home</a>
            &nbsp;/&nbsp; How it works
          </div>
          <Eyebrow icon="loop">The repair path</Eyebrow>
          <h1 style={{ marginTop: 14 }}>Send photos. Get clarity. Get patched. Get proof.</h1>
          <p className="lede">The simplest version of a small home repair. Most jobs go from first photo to closed loop in under a week.</p>
        </div>
      </section>

      <HowItWorks />

      <section className="section section--plaster">
        <div className="container">
          <SectionHead
            eyebrow="On the day"
            eyebrowIcon="schedule"
            title="What the visit actually looks like."
            sub="One technician, one truck, one tidy worksite. We protect the room before we open anything."
          />
          <div className="photo-pair">
            <figure className="photo-band" style={{ aspectRatio: "4 / 3" }}>
              <image-slot id="hiw-truck" shape="rect" fit="cover" src="photos/optional-truck-at-curb.jpg" placeholder="Truck at the curb"></image-slot>
              <figcaption className="photo-band-cap">We arrive in the window we text you.</figcaption>
            </figure>
            <figure className="photo-band" style={{ aspectRatio: "4 / 3" }}>
              <image-slot id="hiw-worksite" shape="rect" fit="cover" src="photos/optional-tidy-worksite.jpg" placeholder="Tidy worksite, drop cloths down" ></image-slot>
              <figcaption className="photo-band-cap">Drop cloths down, dust contained, site vacuumed before we leave.</figcaption>
            </figure>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="What you can expect"
            title="The promises we hold ourselves to."
            sub="Small repair shouldn't be a guessing game. Here's what we commit to every time you reach out."
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16, maxWidth: 1000, margin: "0 auto" }}>
            {[
              { n: "< 5 min", l: "We text you back",     d: "during business hours" },
              { n: "Same day", l: "Scoped estimate",     d: "from your photos" },
              { n: "100%",    l: "Missed calls get a text", d: "even after hours" },
              { n: "Every job", l: "Before/after proof", d: "sent the day it's done" },
            ].map(s => (
              <div key={s.l} className="card-patch" style={{ textAlign: "center" }}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 44, lineHeight: 0.95, color: "var(--pp-navy)", letterSpacing: "var(--tracking-display)" }}>{s.n}</div>
                <div style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 12, textTransform: "uppercase", letterSpacing: "var(--tracking-caps)", marginTop: 6 }}>{s.l}</div>
                <div style={{ fontSize: 13, color: "var(--fg-muted)", marginTop: 4 }}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ─────────── Pricing page ─────────── */
function PricingPage() {
  return (
    <div>
      <section className="page-header">
        <div className="container">
          <div className="crumbs">
            <a onClick={(e) => { e.preventDefault(); nav("/"); }} href="#/">Home</a>
            &nbsp;/&nbsp; Pricing
          </div>
          <Eyebrow icon="estimate">Pricing guidance</Eyebrow>
          <h1 style={{ marginTop: 14 }}>Photo‑based estimates. No vague hourly rates.</h1>
          <p className="lede">Most small wall and ceiling repairs depend on size, texture, paint, access, and timing. These ranges give you a directional sense. The actual number comes back after photo review.</p>
        </div>
      </section>
      <Pricing />
      <section className="section section--plaster">
        <div className="container">
          <SectionHead
            eyebrow="No surprises"
            title="If on‑site reality differs from the photos, we text you first."
            sub="We re‑scope (with a photo) before we re‑price. You approve. Then we proceed. No surprise invoices."
          />
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ProofGalleryPage, ServicesPage, HowItWorksPage, PricingPage });