/* ====================== About + FAQ + Contact + Footer ====================== */

function About() {
  return (
    <section className="section about-sec" id="about">
      <div className="wrap about-grid">
        <div className="about-art">
          <div className="about-ph"><Slot id="about-dollye" label="tammy “dollye” gray" tone="tone-rust" /></div>
          <LogoSeal size={104} className="about-seal" />
          <div className="about-quote">
            <p className="display">“Every home has a story. We help yours find its next chapter.”</p>
          </div>
        </div>
        <div className="about-copy">
          <div className="eyebrow">Meet Dollye</div>
          <h2 className="display about-title">From treasure hunter<br/>to trusted hands.</h2>
          <p>
            Dollye Deals is led by <strong>Tammy “Dollye” Gray</strong> — a retired teacher's assistant
            who turned a lifelong love of the hunt into a thriving business. For two decades she
            scoured estate sales, flea markets, and auctions, building an eBay store known for
            fair prices, careful packing, and treating every customer like a neighbor.
          </p>
          <p>
            In 2024 she brought all that know-how home to the DFW Metroplex, evolving Dollye Deals
            into a full-service estate sale company. The mission stayed the same: <strong>outstanding
            service, items handled with care, and a little bit of fun</strong> along the way.
          </p>
          <ul className="about-list">
            <li><Icon name="check" size={18} /> 20+ years valuing antiques, collectibles & everyday treasures</li>
            <li><Icon name="check" size={18} /> Honest, transparent pricing — we only earn when you do</li>
            <li><Icon name="check" size={18} /> Online reach that takes high-value pieces far beyond the driveway</li>
            <li><Icon name="check" size={18} /> A warm, respectful approach to every home and every family</li>
          </ul>
          <a href="#contact" className="btn btn-primary">Work with Dollye</a>
        </div>
      </div>
    </section>
  );
}

const REASONS = [
  { k: "Loss of a loved one", d: "Settling a parent or relative's estate with patience, discretion, and dignity." },
  { k: "Downsizing", d: "Moving to something smaller and finding good homes for the rest." },
  { k: "Senior transitions", d: "A move to assisted living, a retirement community, or a family member's home." },
  { k: "Relocation & moving", d: "A new city and a new chapter — lighten the load before the truck arrives." },
  { k: "Combining households", d: "Two homes becoming one, with a duplicate of nearly everything." },
  { k: "Decluttering & change", d: "Divorce, foreclosure, or simply a fresh, organized reset of the home." },
];

function WhatIs() {
  return (
    <section className="section whatis-sec" id="learn">
      <div className="wrap">
        <div className="whatis-grid">
          <div className="whatis-lead reveal">
            <div className="eyebrow denim">What is an estate sale?</div>
            <h2 className="display whatis-title">Not a garage sale.<br/>Something grander.</h2>
            <p className="whatis-p">
              An estate sale is the organized, professionally-run sale of a <strong>significant portion of a
              household</strong> — not the leftovers, but the prize possessions: furniture, art, jewelry,
              collectibles, and everyday treasures. It's far larger in scale than any yard sale, priced and
              staged to draw serious buyers.
            </p>
            <p className="whatis-p">
              Sometimes a sale is mandated by a will, ordered by a court, or needed to settle an estate's
              debts. Whatever the reason, we handle every home with discretion, fair pricing, and a clear
              accounting from start to finish.
            </p>
          </div>
          <div className="whatis-reasons">
            <div className="whatis-reasons-head mono reveal">Reasons families call Dollye Deals</div>
            <div className="reason-grid">
              {REASONS.map((r, i) => (
                <div className="reason reveal" key={r.k} style={{ transitionDelay: `${(i % 2) * 60}ms` }}>
                  <span className="reason-n mono">{String(i + 1).padStart(2, "0")}</span>
                  <div>
                    <h3 className="reason-k">{r.k}</h3>
                    <p className="reason-d">{r.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FaqRow({ item, open, onToggle, idx }) {
  return (
    <div className="faq reveal" data-open={open ? "1" : "0"}>
      <button className="faq-q" onClick={onToggle} aria-expanded={open}>
        <span className="faq-num mono">{String(idx + 1).padStart(2, "0")}</span>
        <span className="faq-qtext">{item.q}</span>
        <span className="faq-sign" aria-hidden="true">{open ? "–" : "+"}</span>
      </button>
      <div className="faq-a-wrap" style={{ gridTemplateRows: open ? "1fr" : "0fr" }}>
        <div className="faq-a-inner"><p>{item.a}</p></div>
      </div>
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section faq-sec" id="faq">
      <div className="wrap faq-grid">
        <div className="faq-aside">
          <div className="eyebrow denim">Seller questions</div>
          <h2 className="display faq-title">What is an<br/>estate sale,<br/>anyway?</h2>
          <p className="faq-aside-p">
            New to all this? You're not alone. Here are the questions families ask us most —
            and if yours isn't here, just call.
          </p>
          <a href={`tel:${BIZ.phoneRaw}`} className="btn btn-ghost btn-sm"><Icon name="phone" size={15} /> {BIZ.phone}</a>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <FaqRow key={i} item={f} idx={i} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [form, setForm] = useState({
    name: "", phone: "", email: "", type: "Sell an estate",
    address: "", city: "", state: "", zip: "",
    timeline: "", contents: "", msg: ""
  });
  const isSeller = form.type === "Sell an estate";
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    const er = {};
    if (!form.name.trim()) er.name = "Tell us your name";
    if (!form.phone.trim() && !form.email.trim()) er.phone = "Add a phone or email so we can reach you";
    if (form.email && !/^\S+@\S+\.\S+$/.test(form.email)) er.email = "That email looks off";
    setErrors(er);
    if (Object.keys(er).length > 0) return;

    setSending(true);
    if (BIZ.formEndpoint) {
      // Automatic delivery via form service (e.g. Formspree) — emails BIZ.email.
      try {
        await fetch(BIZ.formEndpoint, {
          method: "POST",
          headers: { "Content-Type": "application/json", Accept: "application/json" },
          body: JSON.stringify({
            name: form.name, phone: form.phone, email: form.email,
            "How can we help": form.type,
            ...(isSeller && {
              "Sale address": form.address,
              "City": form.city, "State": form.state, "ZIP": form.zip,
              "Ideal timeline": form.timeline,
              "Contents of home": form.contents,
            }),
            message: form.msg,
            _subject: `New estate inquiry — ${form.type} — ${form.name}`,
          }),
        });
      } catch (_) { /* fall through to success UI regardless */ }
    } else {
      // No endpoint configured yet: open the visitor's mail app, pre-addressed to BIZ.email.
      const subject = `New estate sale inquiry — ${form.type}`;
      const body =
        `Name: ${form.name}\n` +
        `Phone: ${form.phone || "—"}\n` +
        `Email: ${form.email || "—"}\n` +
        `How can we help: ${form.type}\n` +
        (form.type === "Sell an estate"
          ? `Sale Address: ${form.address || "—"}\nCity: ${form.city || "—"} State: ${form.state || "—"} ZIP: ${form.zip || "—"}\nTimeline: ${form.timeline || "—"}\nContents: ${form.contents || "—"}\n`
          : "") +
        `\n${form.msg || "(no message)"}\n`;
      const a = document.createElement("a");
      a.href = `mailto:${BIZ.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
      a.rel = "noopener";
      document.body.appendChild(a);
      a.click();
      a.remove();
    }
    setSending(false);
    setSent(true);
  };
  return (
    <section className="section contact-sec" id="contact">
      <div className="wrap contact-grid">
        <div className="contact-info">
          <div className="eyebrow">Get started</div>
          <h2 className="display contact-title">Let's talk about<br/>your estate.</h2>
          <p className="contact-lede">
            Free, no-obligation walkthrough. We'll look at the home, answer your questions, and
            lay out exactly how a Dollye Deals sale would work — no pressure, no upfront fees.
          </p>
          <div className="contact-rows">
            <a href={`tel:${BIZ.phoneRaw}`} className="contact-row">
              <span className="contact-ic"><Icon name="phone" size={20} /></span>
              <span><span className="mono contact-k">CALL OR TEXT</span><span className="contact-v">{BIZ.phone}</span></span>
            </a>
            <a href={`mailto:${BIZ.email}`} className="contact-row">
              <span className="contact-ic"><Icon name="mail" size={20} /></span>
              <span><span className="mono contact-k">EMAIL</span><span className="contact-v">{BIZ.email}</span></span>
            </a>
            <div className="contact-row">
              <span className="contact-ic"><Icon name="pin" size={20} /></span>
              <span><span className="mono contact-k">SERVING</span><span className="contact-v">{BIZ.area}</span></span>
            </div>
            <a href={BIZ.facebook} target="_blank" rel="noopener noreferrer" className="contact-row">
              <span className="contact-ic"><FacebookIcon size={19} /></span>
              <span><span className="mono contact-k">FOLLOW</span><span className="contact-v">Find us on Facebook</span></span>
            </a>
          </div>
        </div>

        <div className="contact-form-wrap">
          {sent ? (
            <div className="form-sent">
              <span className="form-sent-ic"><Icon name="check" size={34} /></span>
              <h3 className="display">Thank you, {form.name.split(" ")[0] || "friend"}!</h3>
              <p>We've got your note and we'll be in touch within one business day. For anything urgent,
                 call or text us at <a href={`tel:${BIZ.phoneRaw}`}>{BIZ.phone}</a>.</p>
              <button className="btn btn-ghost btn-sm" onClick={() => { setSent(false); setForm({ name:"", phone:"", email:"", type:"Sell an estate", address:"", city:"", state:"", zip:"", timeline:"", contents:"", msg:"" }); }}>Send another</button>
            </div>
          ) : (
            <form className="contact-form" onSubmit={submit} noValidate>
              <div className="form-head mono">REQUEST YOUR FREE CONSULTATION</div>
              <label className="field">
                <span className="field-l">Name</span>
                <input value={form.name} onChange={set("name")} className={errors.name ? "err" : ""} placeholder="Your name" />
                {errors.name && <span className="field-e mono">{errors.name}</span>}
              </label>
              <div className="field-row">
                <label className="field">
                  <span className="field-l">Phone</span>
                  <input value={form.phone} onChange={set("phone")} className={errors.phone ? "err" : ""} placeholder="(___) ___-____" />
                </label>
                <label className="field">
                  <span className="field-l">Email</span>
                  <input value={form.email} onChange={set("email")} className={errors.email ? "err" : ""} placeholder="you@email.com" />
                </label>
              </div>
              {(errors.phone || errors.email) && <span className="field-e mono">{errors.phone || errors.email}</span>}
              <label className="field">
                <span className="field-l">How can we help?</span>
                <select value={form.type} onChange={set("type")}>
                  <option>Sell an estate</option>
                  <option>Downsizing / senior move</option>
                  <option>Appraisal / valuation</option>
                  <option>Buyout or cleanout</option>
                  <option>Join the buyer list</option>
                  <option>Something else</option>
                </select>
              </label>

              {isSeller && (
                <div className="seller-fields">
                  <div className="seller-fields-head mono">Tell us about the estate</div>
                  <label className="field">
                    <span className="field-l">Address of sale</span>
                    <input value={form.address} onChange={set("address")} placeholder="Street address" />
                  </label>
                  <div className="field-row">
                    <label className="field">
                      <span className="field-l">City</span>
                      <input value={form.city} onChange={set("city")} placeholder="Fort Worth" />
                    </label>
                    <label className="field field-sm">
                      <span className="field-l">State</span>
                      <input value={form.state} onChange={set("state")} placeholder="TX" maxLength={2} />
                    </label>
                    <label className="field field-sm">
                      <span className="field-l">ZIP</span>
                      <input value={form.zip} onChange={set("zip")} placeholder="76101" maxLength={10} />
                    </label>
                  </div>
                  <label className="field">
                    <span className="field-l">When do you hope to have the sale?</span>
                    <input value={form.timeline} onChange={set("timeline")} placeholder="e.g. Within 30 days, next month, flexible…" />
                  </label>
                  <label className="field">
                    <span className="field-l">Tell us about the contents of the home</span>
                    <textarea rows={3} value={form.contents} onChange={set("contents")} placeholder="Furniture, collectibles, tools, jewelry, clothing — anything notable…" />
                  </label>
                </div>
              )}

              {!isSeller && (
                <label className="field">
                  <span className="field-l">Tell us a little more</span>
                  <textarea rows="3" value={form.msg} onChange={set("msg")} placeholder="City, timeline, what's in the home…" />
                </label>
              )}
              <button type="submit" className="btn btn-primary form-submit" disabled={sending}>
                {sending ? "Sending…" : <React.Fragment>Send request <Icon name="arrow" size={16} /></React.Fragment>}
              </button>
              <p className="form-fine mono">We reply within one business day. No upfront fees, ever.</p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <Logo />
            <p className="footer-tagline">
              Fort Worth's family-owned estate sale company. Estate sales, tag sales, liquidations &amp; downsizing across the DFW Metroplex — treasures handled with care.
            </p>
            <div className="footer-stamps">
              <Stamp icon="star">Est. {BIZ.est}</Stamp>
              <Stamp icon="check">Family owned</Stamp>
            </div>
            <a href={BIZ.facebook} target="_blank" rel="noopener noreferrer" className="footer-social">
              <span className="social-btn"><FacebookIcon size={17} /></span>
              <span className="mono footer-social-label">Follow along on Facebook</span>
            </a>
          </div>
          <div className="footer-cols">
            <div className="footer-col">
              <span className="footer-h mono">EXPLORE</span>
              {NAV_LINKS.map(([id, l]) => <a key={id} href={`#${id}`}>{l}</a>)}
            </div>
            <div className="footer-col">
              <span className="footer-h mono">SERVICES</span>
              {SERVICES.slice(0, 5).map(s => <a key={s.n} href="#services">{s.title}</a>)}
            </div>
            <div className="footer-col">
              <span className="footer-h mono">GET IN TOUCH</span>
              <a href={`tel:${BIZ.phoneRaw}`}>{BIZ.phone}</a>
              <a href={`mailto:${BIZ.email}`}>{BIZ.email}</a>
              <span className="footer-muted">{BIZ.area}</span>
              <a href="#contact" className="footer-link-strong">Free consultation →</a>
            </div>
          </div>
        </div>
        <hr className="rule-double footer-rule" />
        <div className="footer-bottom mono">
          <span>© {new Date().getFullYear()} Dollye Deals · {BIZ.owner}</span>
          <span>Built with care in Texas ★</span>
        </div>
      </div>
    </footer>
  );
}

function ServiceAreas() {
  return (
    <section className="areas-sec">
      <div className="wrap">
        <div className="areas-inner">
          <div className="areas-label mono">
            <Icon name="pin" size={15} /> Serving Fort Worth &amp; surrounding DFW cities
          </div>
          <div className="areas-list">
            {SERVICE_AREAS.map(city => (
              <span className="area-chip mono" key={city}>{city}</span>
            ))}
          </div>
          <a href="#contact" className="btn btn-ghost btn-sm areas-cta">Get a free consultation →</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About, WhatIs, FAQ, Contact, Footer, ServiceAreas });