/* global React, Icon, Button, Eyebrow, SectionHead, BAFrame, nav, ProofCard */
/* Patch Me Up — Homepage */

/* ─────────── HERO ─────────── */
function Hero({ headline, primaryCta, secondaryCta }) {
  const renderHeadline = () => {
    if (headline === "B") return <>From damage<br/>to done.</>;
    if (headline === "C") return <>Small wall repair<br/>without the<br/>contractor chase.</>;
    // A — default
    return (<>Wall repair that<br/>closes the <span className="loop-word">loop</span>.</>);
  };
  const renderSub = () => {
    if (headline === "B") return "Small drywall, ceiling, texture, and paint-blend repairs — handled quickly, cleanly, and with before/after proof when it's done.";
    if (headline === "C") return "Send a few photos. We'll handle the rest — scope, schedule, repair, cleanup, and proof. No contractor babysitting.";
    return "Small drywall, ceiling, texture, and paint-blend repairs handled quickly, cleanly, and professionally — with before/after proof the moment the loop is closed.";
  };

  return (
    <section className="hero">
      <div className="container hero-grid">
        <div className="hero-text">
          <Eyebrow icon="loop">Wall &amp; Ceiling Repair · Phoenix Metro</Eyebrow>
          <h1 className="hero-h1">{renderHeadline()}</h1>
          <p className="hero-sub">{renderSub()}</p>
          <div className="hero-ctas">
            <Button kind="action" size="lg" to="/send-photos">
              <Icon name="camera" size={18} />
              {primaryCta || "Send Photos for an Estimate"}
            </Button>
            <Button kind="secondary" size="lg" to="/partners">
              <Icon name="partner" size={18} />
              {secondaryCta || "Refer a Customer"}
            </Button>
          </div>
          <div className="hero-trust">
            <span><Icon name="check-circle" size={14} />Fast response</span>
            <span><Icon name="check-circle" size={14} />Clean work</span>
            <span><Icon name="check-circle" size={14} />Photo proof</span>
            <span><Icon name="check-circle" size={14} />Phoenix Metro</span>
          </div>
        </div>

        <HeroProofCard />
      </div>
    </section>
  );
}

function HeroProofCard() {
  return (
    <div className="hero-card">
      <div className="hero-card-tag">
        <span className="badge badge-proof"><span className="dot"></span>Closed · 14 min on‑site</span>
        <span className="t-proof" style={{ fontSize: 10 }}>#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 className="hero-card-meta">
        <div>
          <div className="lbl">Service</div>
          <div className="val">Post‑trade ceiling</div>
        </div>
        <div>
          <div className="lbl">Tech</div>
          <div className="val">N. Mendez</div>
        </div>
        <div>
          <div className="lbl">Documented</div>
          <div className="val">05/24/26 · 10:42a</div>
        </div>
      </div>
    </div>
  );
}

/* ─────────── WHAT HAPPENED — situation selector ─────────── */
const SITUATIONS = [
  { key: "post-trade",   icon: "plumbing",   title: "A plumber opened my wall.", meta: "Post‑trade repair", route: "/repair/post-trade" },
  { key: "pre-listing",  icon: "listing",    title: "I need repair before listing photos.", meta: "Pre‑listing", route: "/repair/pre-listing" },
  { key: "rental-turn",  icon: "key",        title: "A tenant or guest damaged the wall.", meta: "Rental turn", route: "/repair/rental-turn" },
  { key: "failed-diy",   icon: "wall-repair",title: "I tried DIY and it looks worse.", meta: "DIY rescue", route: "/repair/failed-diy" },
  { key: "ceiling",      icon: "ceiling-repair", title: "I have ceiling damage.", meta: "Ceiling repair", route: "/repair/ceiling" },
  { key: "multi",        icon: "before-after", title: "I have several small repairs.", meta: "Multi‑area package", route: "/services" },
  { key: "partner",      icon: "partner",    title: "I'm a trade partner with a customer referral.", meta: "Refer a customer", route: "/partners", partner: true },
];

function SituationSelector({ question }) {
  const labels = {
    A: "What happened?",
    B: "What do you need fixed?",
    C: "Who are you booking for?",
  };
  return (
    <section className="section section--sand">
      <div className="container">
        <SectionHead
          eyebrow="Situation selector"
          eyebrowIcon="loop"
          title={labels[question] || labels.A}
          sub="Pick the closest match — we'll send you to the right team and the right next step."
        />
        <div className="situation-grid">
          {SITUATIONS.map(s => (
            <a
              key={s.key}
              className={"situation-tile" + (s.partner ? " is-partner" : "")}
              href={"#" + s.route}
              onClick={(e) => { e.preventDefault(); nav(s.route); }}
            >
              <div className="ico"><Icon name={s.icon} size={22} /></div>
              <h4>{s.title}</h4>
              <div className="meta">
                {s.meta}
                <Icon name="arrow-right" size={12} />
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── HOW IT WORKS ─────────── */
const PROCESS = [
  { num: "1", t: "Send photos",  d: "Text us, drop them in the web form, or share a partner link.",          ts: "Avg 18 sec" },
  { num: "2", t: "Get clarity",  d: "Scoped estimate, timing, and price — usually within an hour.",          ts: "Avg 47 min" },
  { num: "3", t: "Get patched",  d: "Drop‑cloth‑on, dust‑controlled repair from a trained PMU technician.",  ts: "Most jobs · 1 visit" },
  { num: "✓", t: "Get proof",    d: "Before/after photos, tech notes, and a one‑tap review link.",            ts: "Loop closed", done: true },
];
function HowItWorks() {
  return (
    <section id="how-it-works" className="section section--plaster">
      <div className="container">
        <SectionHead
          eyebrow="The repair path"
          title="From damage to done in four steps."
          sub="Send photos. Get clarity. Get patched. Get proof. We make the small repair feel easier than calling around."
        />
        <div className="process-grid">
          {PROCESS.map(s => (
            <div key={s.t} className={"process-step" + (s.done ? " is-done" : "")}>
              <div className="num">{s.num}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
              <div className="timestamp">{s.ts}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── SERVICES ─────────── */
const SERVICES = [
  { icon: "wall-repair",    title: "Post‑trade wall repair", body: "The first call after a plumber, electrician, or HVAC crew opens a wall." },
  { icon: "ceiling-repair", title: "Ceiling repair",         body: "Access cuts and post‑leak repair blended back into the room." },
  { icon: "texture",        title: "Texture matching",       body: "Knockdown, orange peel, hand‑trowel — matched so the patch disappears." },
  { icon: "paint",          title: "Paint blend",            body: "Color‑matched blends, not a full repaint. Done in one visit." },
  { icon: "listing",        title: "Pre‑listing repair",     body: "Wall &amp; ceiling fixes finished before photos, showings, and inspections." },
  { icon: "key",            title: "Property turn repair",   body: "Documented, rent‑ready repairs for landlords and property managers." },
];
function Services() {
  return (
    <section id="services" className="section">
      <div className="container">
        <SectionHead
          eyebrow="Services"
          title="Small repair moments, handled like a premium service."
          sub="We stay in our lane: small wall and ceiling repair. Not handyman work, not full‑house painting, not large drywall installs."
        />
        <div className="svc-grid">
          {SERVICES.map(s => (
            <article key={s.title} className="service-tile">
              <div className="ico-wrap"><Icon name={s.icon} size={22} /></div>
              <h4>{s.title}</h4>
              <p dangerouslySetInnerHTML={{ __html: s.body }} />
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── BEFORE / AFTER PROOF ─────────── */
function ProofStrip() {
  return (
    <section id="proof" className="section section--plaster">
      <div className="container">
        <SectionHead
          eyebrow="Proof reports"
          eyebrowIcon="proof"
          title="Every job ends with documentation."
          sub="Homeowners get peace of mind. Partners protect their reputation. Property managers get a defensible record. We send the proof the moment the loop is closed."
        />
        <div className="proof-grid">
          {SAMPLE_PROOF.slice(0, 3).map(p => <ProofCard key={p.jobId} data={p} />)}
        </div>
        <div style={{ textAlign: "center", marginTop: "var(--space-8)" }}>
          <Button kind="secondary" to="/proof">See the full proof gallery <Icon name="arrow-right" size={16} /></Button>
        </div>
      </div>
    </section>
  );
}

/* ─────────── PARTNER STRIP ─────────── */
function PartnerStrip() {
  return (
    <section id="partners" className="section partners">
      <div className="container">
        <div className="partners-grid">
          <div className="partners-text">
            <Eyebrow icon="partner" dark>For trades, realtors &amp; property managers</Eyebrow>
            <h2 style={{ marginTop: 14 }}>The first call after the wall gets opened.</h2>
            <p>
              When plumbing, electrical, or HVAC work leaves wall damage behind, Patch Me
              Up helps your customer close the loop — with fast scheduling, clean repair,
              and a before/after photo report. Your relationship stays protected.
            </p>
            <div className="hero-ctas">
              <Button kind="on-dark" size="lg" to="/partners">
                Refer a Customer <Icon name="arrow-right" size={18} />
              </Button>
              <Button kind="ghost" size="lg" style={{ color: "var(--pmu-sand-soft)" }} to="/partners">
                Download the one‑sheet
              </Button>
            </div>
          </div>
          <div className="partner-cards">
            {[
              { icon: "plumbing", t: "Plumbing &amp; HVAC",  d: "Protect your customer after access work." },
              { icon: "listing",  t: "Realtors",              d: "Photo‑ready walls before buyers walk through." },
              { icon: "key",      t: "Property managers",     d: "Documented, rent‑ready turns without the chase." },
            ].map(p => (
              <a key={p.t} className="partner-card" onClick={(e) => { e.preventDefault(); nav("/partners"); }} href="#/partners">
                <span className="ico"><Icon name={p.icon} size={22} /></span>
                <div className="body">
                  <strong dangerouslySetInnerHTML={{ __html: p.t }} />
                  <span>{p.d}</span>
                </div>
                <span className="arrow"><Icon name="arrow-right" size={18} /></span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────── DEADLINE STRIP ─────────── */
function DeadlineStrip() {
  return (
    <section className="section deadline-band">
      <div className="container">
        <div className="deadline-grid">
          <div>
            <Eyebrow icon="clock">Deadline repair</Eyebrow>
            <h2 style={{ marginTop: 14, fontSize: "clamp(28px, 3vw, 40px)" }}>
              Before photos. Before move‑in. Before it becomes a problem.
            </h2>
            <p style={{ fontSize: 17, color: "var(--fg-muted)", marginTop: 12, maxWidth: 540 }}>
              Listing photos, tenant turns, inspections, and guest check‑ins turn a small
              wall issue into a timing problem. We work backward from your date and confirm
              the repair will be finished — with proof — before the deadline.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
              <Button kind="action" size="lg" to="/send-photos">
                <Icon name="camera" size={18} />
                Book Deadline Repair
              </Button>
              <Button kind="secondary" size="lg" to="/repair/pre-listing">
                See pre‑listing details
              </Button>
            </div>
          </div>
          <div className="deadline-card">
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
              <span className="t-proof">Pre‑listing timeline</span>
              <span className="badge badge-action"><span className="dot"></span>Deadline: Fri 9 AM</span>
            </div>
            <div className="deadline-timeline">
              <div className="deadline-row">
                <span className="when">Mon · 8:14a</span>
                <span className="what">Photos received from agent</span>
                <span className="tag">Received</span>
              </div>
              <div className="deadline-row">
                <span className="when">Mon · 9:01a</span>
                <span className="what">Scope confirmed — 3 patches + texture + paint blend</span>
                <span className="tag">Scoped</span>
              </div>
              <div className="deadline-row">
                <span className="when">Tue · 1:00p</span>
                <span className="what">N. Mendez on‑site (drop‑cloth set, vacuum, lockbox)</span>
                <span className="tag">In progress</span>
              </div>
              <div className="deadline-row is-target">
                <span className="when">Thu · 4:30p</span>
                <span className="what">Proof report sent. Walls disappear into the room.</span>
                <span className="tag">Closed · 16h before</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────── PRICING GUIDANCE ─────────── */
const PRICING = [
  {
    title: "Small repair visit",
    price: "$395",
    note: "Service minimum",
    line: "One small patch, dent, or hole.",
    items: ["Patch + sand + touch paint", "On‑site under 90 min", "Before/after photos"],
  },
  {
    title: "Patch + texture + paint",
    price: "$750 – $1,250",
    note: "Most common job",
    line: "Single area, finished and blended into the room.",
    items: ["Multi‑coat mud + texture match", "Color‑matched paint blend", "Drop cloth + cleanup", "Proof report"],
    featured: true,
  },
  {
    title: "Multi‑area package",
    price: "$1,500 – $3,500",
    note: "Bundled visits",
    line: "Several rooms in one scheduled visit.",
    items: ["Bundled scope discount", "Single technician, single trip", "Move‑in / pre‑listing common", "Full documentation"],
  },
];
function Pricing() {
  return (
    <section id="pricing" className="section">
      <div className="container">
        <SectionHead
          eyebrow="Pricing guidance"
          eyebrowIcon="estimate"
          title="Photo‑based estimates. Clear next steps."
          sub="Most wall and ceiling repairs depend on size, texture, paint, access, and timing. Send photos — we'll help you understand the cleanest path from damage to done."
        />
        <div className="pricing-grid">
          {PRICING.map(p => (
            <div key={p.title} className={"price-card" + (p.featured ? " is-featured" : "")}>
              <div>
                <h4>{p.title}</h4>
                <div className="price-line">{p.note}</div>
              </div>
              <div className="price">{p.price}</div>
              <div className="price-line">{p.line}</div>
              <ul>{p.items.map(i => <li key={i}>{i}</li>)}</ul>
              <Button
                kind={p.featured ? "on-dark" : "secondary"}
                to="/send-photos"
                style={{ marginTop: "auto", alignSelf: "flex-start" }}
              >
                <Icon name="camera" size={16} />
                Send photos to estimate
              </Button>
            </div>
          ))}
        </div>
        <p style={{ textAlign: "center", color: "var(--fg-muted)", marginTop: 28, fontSize: 14 }}>
          Ranges are guidance, not quotes. Final price after photo review and any on‑site changes (texted to you first).
        </p>
      </div>
    </section>
  );
}

/* ─────────── FINAL CTA ─────────── */
function FinalCta() {
  return (
    <section className="section final-cta">
      <div className="container">
        <Eyebrow icon="loop" dark>Close the loop</Eyebrow>
        <h2 style={{ marginTop: 14 }}>Ready to stop looking at the wall damage?</h2>
        <p>Most photo submissions get a scoped estimate back the same morning. Most repairs finish in a single visit.</p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
          <Button kind="action" size="lg" to="/send-photos">
            <Icon name="camera" size={18} />
            Send Photos
          </Button>
          <Button kind="on-dark" size="lg" href="tel:6025550148">
            <Icon name="phone" size={16} />
            (602) 555‑0148
          </Button>
        </div>
      </div>
    </section>
  );
}

/* ─────────── Sample proof data (shared with proof gallery) ─────────── */
const SAMPLE_PROOF = [
  { jobId: "PMU-2451", repairType: "Ceiling · Post‑trade", category: "post-trade",
    situation: "12‑inch ceiling access cut after plumbing repair.",
    note: "Two‑coat mud, knockdown matched to existing room, primed and paint‑blended. Site re‑vacuumed.",
    timeframe: "Single visit · 2h 10m" },
  { jobId: "PMU-2447", repairType: "Pre‑listing · Multi", category: "pre-listing",
    situation: "Six patches across living + hallway before listing photos.",
    note: "Bundled scope, single trip. Finished 16 hours before shoot. Agent received proof report.",
    timeframe: "Single visit · 3h 40m" },
  { jobId: "PMU-2438", repairType: "Failed DIY rescue", category: "failed-diy",
    situation: "Crumbling patch + visible mesh ring from over‑the‑counter kit.",
    note: "Cut out failed patch, re‑mudded with hot mud, retextured, color blended into existing wall.",
    timeframe: "Single visit · 1h 50m" },
  { jobId: "PMU-2429", repairType: "Rental turn", category: "rental-turn",
    situation: "Tenant door‑knob damage + four nail holes between turns.",
    note: "All five repairs documented per‑area for security deposit. Ready by inspection window.",
    timeframe: "Single visit · 1h 25m" },
  { jobId: "PMU-2422", repairType: "Texture match", category: "post-trade",
    situation: "Orange peel match across a 2 × 3 ft post‑HVAC patch.",
    note: "Test panels approved before final spray; visually disappears from 18 inches.",
    timeframe: "Single visit · 2h 35m" },
  { jobId: "PMU-2418", repairType: "Ceiling · Water stain", category: "ceiling",
    situation: "Brown ring + soft spot after upstairs supply line repair.",
    note: "Cut, replaced section of drywall, retextured (knockdown), primed with stain blocker.",
    timeframe: "Single visit · 2h 50m" },
];

/* ─────────── Compose home ─────────── */
function HomePage({ tweaks }) {
  const t = tweaks || {};
  const pricingPlacement = t.pricingPlacement || "section";
  return (
    <div>
      <Hero
        headline={t.heroHeadline || "A"}
        primaryCta={t.primaryCta === "B" ? "Get a Repair Estimate" : t.primaryCta === "C" ? "Start with Photos" : "Send Photos for an Estimate"}
        secondaryCta="Refer a Customer"
      />
      <SituationSelector question={t.situationQuestion || "A"} />
      <Services />
      <HowItWorks />
      <ProofStrip />
      <PartnerStrip />
      <DeadlineStrip />
      {pricingPlacement === "section" && <Pricing />}
      <FinalCta />
    </div>
  );
}

Object.assign(window, { HomePage, SAMPLE_PROOF, Pricing });