/* global React, Icon, Button, Eyebrow, SectionHead, nav, BAFrame */
/* Patch Me Up — Trade Partner page */
const { useState: useStateP } = React;

function PartnerHero() {
  return (
    <section className="partner-hero">
      <div className="container">
        <div className="crumbs">
          <a onClick={(e) => { e.preventDefault(); nav("/"); }} href="#/">Home</a>
          &nbsp;/&nbsp; Trade partners
        </div>
        <Eyebrow icon="partner" dark>Plumbers · HVAC · Electrical · Realtors · Property managers</Eyebrow>
        <h1 style={{ marginTop: 14 }}>The first call after the wall gets opened.</h1>
        <p className="lede" style={{ marginTop: 12 }}>
          Send your customer to Patch Me Up the moment access work creates wall or
          ceiling damage. We close the loop — fast scheduling, clean repair, before/after
          photo report. Your relationship stays protected.
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
          <Button kind="action" size="lg" onClick={() => document.getElementById("refer")?.scrollIntoView({ behavior: "smooth", block: "start" })}>
            <Icon name="partner" size={18} />
            Refer a Customer
          </Button>
          <Button kind="on-dark" size="lg">
            <Icon name="doc" size={18} />
            Download the one‑sheet
          </Button>
        </div>
      </div>
    </section>
  );
}

const WHY_PARTNERS = [
  { icon: "clock",        t: "We text within 5 minutes", d: "Your customer hears from us before the dust settles." },
  { icon: "proof",        t: "Before/after on every job", d: "You and your customer get the proof report — same day." },
  { icon: "loop",         t: "Partner‑safe handoff",      d: "We close the loop without competing for the original job." },
  { icon: "schedule",     t: "Deadline scheduling",       d: "Photos. Move‑in. Inspection. We build backward from your date." },
  { icon: "wall-repair",  t: "Stays in our lane",         d: "Small drywall, ceiling, texture, paint blend — that's it." },
  { icon: "chat",         t: "Status updates to you",     d: "Received → scoped → scheduled → closed. No chasing for status." },
];

function WhyPartner() {
  return (
    <section className="section section--sand">
      <div className="container">
        <SectionHead
          eyebrow="Why partners refer Patch Me Up"
          title="A specialist closer for the small repair after the big job."
          sub="Most trade and real‑estate businesses don't want to staff drywall repair — but their customers still expect the wall to look right when the work is done. That's where we come in."
        />
        <div className="partner-feature-cards" style={{ gridTemplateColumns: "repeat(3, 1fr)", display: "grid", gap: 12 }}>
          {WHY_PARTNERS.map(p => (
            <div key={p.t} className="partner-feature-card">
              <div className="ico"><Icon name={p.icon} size={20} /></div>
              <h4>{p.t}</h4>
              <p>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const HANDOFF_STEPS = [
  { num: "1", t: "Snap or text photos", d: "From the job site. Your customer's name + phone + ZIP. That's all we need." },
  { num: "2", t: "We text your customer", d: "Within 5 minutes. We confirm scope, deadline, and price range." },
  { num: "3", t: "We schedule and repair", d: "Drop‑cloth on. Dust controlled. One trip when possible." },
  { num: "4", t: "Proof goes to both of you", d: "Before/after photos, technician notes, completion timestamp." },
];

function Handoff() {
  return (
    <section className="section section--plaster">
      <div className="container">
        <SectionHead
          eyebrow="The handoff"
          title="A 60‑second referral that protects your relationship."
          sub="No partner portal to log into, no forms to teach your team. Text photos to the partner line, or use the form below — both work."
        />
        <div className="landing-process">
          {HANDOFF_STEPS.map(s => (
            <div key={s.num} className="step">
              <span className="num">{s.num}</span>
              <h4 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 17, margin: "4px 0 6px" }}>{s.t}</h4>
              <p style={{ fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.5 }}>{s.d}</p>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 32, padding: 22, background: "var(--pmu-paper)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", display: "flex", gap: 18, alignItems: "center", flexWrap: "wrap" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, flex: 1, minWidth: 240 }}>
            <div style={{ width: 44, height: 44, borderRadius: "var(--radius-md)", background: "var(--pmu-teal-100)", color: "var(--pmu-teal)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="chat" size={22} />
            </div>
            <div>
              <div className="t-proof">Partner text line</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: "var(--pmu-teal)", letterSpacing: "-0.02em" }}>(602) 555‑PRTN</div>
            </div>
          </div>
          <Button kind="action" href="sms:6025557786">
            <Icon name="chat" size={16} />
            Text photos now
          </Button>
        </div>
      </div>
    </section>
  );
}

function ReferralForm() {
  const [sent, setSent] = useStateP(false);
  const [form, setForm] = useStateP({
    partnerName: "", company: "", trade: "plumbing",
    customerName: "", customerPhone: "", customerZip: "",
    notes: "", deadline: "",
  });
  const set = (k, v) => setForm(s => ({ ...s, [k]: v }));
  const valid = form.partnerName && form.customerName && form.customerPhone && form.customerZip;

  if (sent) {
    return (
      <section id="refer" className="section">
        <div className="container-narrow">
          <div className="estimate-shell" style={{ textAlign: "center" }}>
            <div className="confirm-check" style={{ margin: "0 auto 16px" }}><Icon name="check" size={32} /></div>
            <h2 style={{ marginBottom: 8 }}>Referral received.</h2>
            <p style={{ color: "var(--fg-muted)", maxWidth: 460, margin: "0 auto 24px" }}>
              We'll text <b>{form.customerName}</b> within 5 minutes and update you when the loop is closed.
            </p>
            <Button kind="primary" onClick={() => setSent(false)}>Refer another customer</Button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section id="refer" className="section">
      <div className="container">
        <SectionHead
          eyebrow="Refer a customer"
          eyebrowIcon="partner"
          title="60‑second referral form."
          sub="Send the details, we'll handle the rest — and keep you in the loop."
        />
        <div className="partner-grid">
          <div className="estimate-shell" style={{ margin: 0 }}>
            <div className="referral-form">
              <div className="full">
                <label className="field-label">Your name</label>
                <input className="input" value={form.partnerName} onChange={(e) => set("partnerName", e.target.value)} placeholder="Marcus Hall" />
              </div>
              <div>
                <label className="field-label">Company</label>
                <input className="input" value={form.company} onChange={(e) => set("company", e.target.value)} placeholder="Hall Plumbing" />
              </div>
              <div>
                <label className="field-label">Trade</label>
                <select className="select" value={form.trade} onChange={(e) => set("trade", e.target.value)}>
                  <option value="plumbing">Plumbing</option>
                  <option value="hvac">HVAC</option>
                  <option value="electrical">Electrical</option>
                  <option value="realtor">Realtor / agent</option>
                  <option value="pm">Property manager</option>
                  <option value="gc">General contractor</option>
                  <option value="other">Other</option>
                </select>
              </div>
              <div className="full" style={{ paddingTop: 6, borderTop: "1px dashed var(--border)", marginTop: 4 }}>
                <div className="t-proof" style={{ marginBottom: 6 }}>Your customer</div>
              </div>
              <div>
                <label className="field-label">Customer name</label>
                <input className="input" value={form.customerName} onChange={(e) => set("customerName", e.target.value)} placeholder="Sarah K." />
              </div>
              <div>
                <label className="field-label">Mobile</label>
                <input className="input" value={form.customerPhone} onChange={(e) => set("customerPhone", e.target.value)} placeholder="(602) 555‑0188" inputMode="tel" />
              </div>
              <div>
                <label className="field-label">ZIP code</label>
                <input className="input" value={form.customerZip} onChange={(e) => set("customerZip", e.target.value)} placeholder="85016" maxLength={5} inputMode="numeric" />
              </div>
              <div>
                <label className="field-label">Deadline <span style={{ color: "var(--fg-subtle)" }}>(optional)</span></label>
                <input className="input" value={form.deadline} onChange={(e) => set("deadline", e.target.value)} placeholder="e.g., Fri 5/30 9am" />
              </div>
              <div className="full">
                <label className="field-label">Repair notes</label>
                <textarea
                  className="textarea"
                  rows="3"
                  value={form.notes}
                  onChange={(e) => set("notes", e.target.value)}
                  placeholder="e.g., 'Cut 12-inch ceiling hole over kitchen sink to replace supply line. Knockdown texture, ivory paint.'"
                />
              </div>
            </div>

            <div className="tip-callout" style={{ marginTop: 18 }}>
              <span className="ico"><Icon name="proof" size={18} /></span>
              <span>
                <b>You'll get a proof report too.</b> Same photos. Same timestamps. Same closed‑loop confirmation.
              </span>
            </div>

            <div className="estimate-actions">
              <div className="left t-proof">We text your customer within 5 minutes</div>
              <Button kind="action" size="lg" onClick={() => valid && setSent(true)} disabled={!valid}>
                <Icon name="arrow-right" size={18} />
                Send referral
              </Button>
            </div>
          </div>

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

function PartnerSafePromise() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <div className="card-patch surface-teal" style={{ color: "var(--pmu-wall)" }}>
        <Eyebrow icon="loop" dark>Partner‑safe promise</Eyebrow>
        <h3 style={{ color: "var(--pmu-wall)", marginTop: 12, fontSize: 22 }}>We close the loop. We don't compete for your work.</h3>
        <ul className="pmu-checks" style={{ marginTop: 14, color: "var(--pmu-wall)" }}>
          <li><Icon name="check-circle" size={18} style={{ color: "var(--pmu-gold)" }} />We only repair small wall &amp; ceiling damage.</li>
          <li><Icon name="check-circle" size={18} style={{ color: "var(--pmu-gold)" }} />We never pitch plumbing, HVAC, electrical, real estate, or PM services.</li>
          <li><Icon name="check-circle" size={18} style={{ color: "var(--pmu-gold)" }} />We text you when the job is closed.</li>
          <li><Icon name="check-circle" size={18} style={{ color: "var(--pmu-gold)" }} />Your customer keeps your name on the original work.</li>
        </ul>
      </div>

      <div className="card-patch">
        <div className="t-proof">Partner kit includes</div>
        <ul className="pmu-checks" style={{ marginTop: 8 }}>
          <li><Icon name="doc" size={18} />Printed one‑sheet for the truck</li>
          <li><Icon name="chat" size={18} />SMS template + partner text line</li>
          <li><Icon name="proof" size={18} />Sample proof report</li>
          <li><Icon name="estimate" size={18} />Co‑branded handoff card</li>
        </ul>
      </div>

      <div className="card-patch" style={{ background: "var(--pmu-plaster)" }}>
        <div className="t-proof">Quick contact</div>
        <p style={{ fontSize: 14, color: "var(--fg-muted)", marginTop: 8, lineHeight: 1.55 }}>
          Marcus Hall, partner team<br/>
          <b style={{ color: "var(--pmu-teal)" }}>partners@patchmeup.co</b><br/>
          (602) 555‑PRTN · Mon–Fri · 7a–6p
        </p>
      </div>
    </div>
  );
}

/* ─────────── Page ─────────── */
function PartnersPage() {
  return (
    <div>
      <PartnerHero />
      <WhyPartner />
      <Handoff />
      <ReferralForm />
    </div>
  );
}

Object.assign(window, { PartnersPage });