/* global React, Icon, Button, Eyebrow, SectionHead, ProofCard, SAMPLE_PROOF, BAFrame, nav */
/* Patch Me Up — 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‑2451</span>
              </div>
              <div className="ba-grid">
                <BAFrame src="ds/photo-before.svg" label="Before" />
                <BAFrame src="ds/photo-after.svg" label="After" after />
              </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 }}>
                  12 in. ceiling access cut from plumbing crew. Patched, two‑coat mud, knockdown matched to existing
                  room, primed and paint‑blended. Site re‑vacuumed; furniture returned.
                </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-teal">
                <h3 style={{ color: "var(--pmu-wall)", fontSize: 18, margin: 0 }}>What partners get</h3>
                <ul className="pmu-checks" style={{ marginTop: 12, color: "var(--pmu-wall)" }}>
                  <li><Icon name="check-circle" size={18} style={{ color: "var(--pmu-gold)" }} />Same proof report, sent same day</li>
                  <li><Icon name="check-circle" size={18} style={{ color: "var(--pmu-gold)" }} />Customer name + repair confirmed</li>
                  <li><Icon name="check-circle" size={18} style={{ color: "var(--pmu-gold)" }} />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(--pmu-teal)", fontWeight: 600 }}>→</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">
        <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: 800, fontSize: 36, color: "var(--pmu-teal)", letterSpacing: "-0.02em" }}>{s.n}</div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 15, marginTop: 4 }}>{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 });