/* HudCo Construction — Header, Hero, Services, HowItWorks */
const { Button: MK_Button, Select: MK_Select, PriceTag: MK_PriceTag,
        StatusPill: MK_StatusPill, Avatar: MK_Avatar, Rating: MK_Rating,
        Card: MK_Card } = window.HudCoDesignSystem_e27b9b;
const { useState: MK_useState } = React;

const MK_DEFAULT_SERVICES = [
  { id: "tv",        icon: "tv",           name: "TV & wall mounting",    price: 149, baseTime: 60, additionalTime: 30, time: "45–60 min",
    desc: "Mounted level, cables hidden, ready to watch. We bring the bracket and test before we leave.",
    includes: ["Mount up to 75\" on drywall or brick","Cables concealed in-wall or raceway","Bracket & hardware included","We test and clean up"] },
  { id: "furniture", icon: "armchair",     name: "Furniture assembly",    price: 89,  baseTime: 60, additionalTime: 30, time: "30–90 min",
    desc: "Flat-pack to finished. We bring the tools and haul away the boxes.",
    includes: ["Any flat-pack brand or style","Tools & hardware sorted","Anchored to wall if needed","Packaging removed"] },
  { id: "plumb",     icon: "droplets",     name: "Faucet / plumbing fix", price: 129, baseTime: 45, additionalTime: 20, time: "30–60 min",
    desc: "Leaky faucets, running toilets, or a new fixture installed right the first time.",
    includes: ["Diagnose & fix the leak","New fixture install available","Shut-off valve checked","No water-damage surprises"] },
  { id: "light",     icon: "plug-zap",     name: "Light fixture swap",    price: 99,  baseTime: 40, additionalTime: 20, time: "30–45 min",
    desc: "Swap a fixture, add a dimmer, or install a smart switch — safely.",
    includes: ["Fixture or switch replaced","Power safely isolated","Smart-device pairing","Old fixture hauled away"] },
  { id: "paint",     icon: "paint-roller", name: "Painting & patching",   price: 119, baseTime: 90, additionalTime: 45, time: "1–3 hrs",
    desc: "A room refreshed or a wall made whole again, properly prepped and finished.",
    includes: ["Walls prepped and patched","Premium paint supplied","Edges taped clean","Furniture moved & covered"] },
  { id: "handyman",  icon: "wrench",       name: "Odd jobs",              price: 79,  baseTime: 60, additionalTime: 30, time: "1 hr",
    desc: "That list on the fridge? Knock it out in one visit. Tell us the list up front.",
    includes: ["Up to 1 hour of work","Any small home tasks","We bring all tools","More time? Just ask"] },
];

/* Load from admin localStorage or use defaults */
(function () {
  try {
    const saved = localStorage.getItem("hudco_services");
    window.HUDCO_SERVICES = saved ? JSON.parse(saved) : MK_DEFAULT_SERVICES;
  } catch (e) { window.HUDCO_SERVICES = MK_DEFAULT_SERVICES; }
})();
window.HUDCO_DEFAULT_SERVICES = MK_DEFAULT_SERVICES;

/* ---- Header ---- */
function WebHeader({ onBook, cart, onCartOpen }) {
  const cartCount = (cart || []).reduce((n, i) => n + i.quantity, 0);
  return (
    <header className="mk-header">
      <div className="mk-wrap mk-header__bar">
        <a className="mk-brand" href="#top">
          <img src="assets/logo/hudco-mark-color.png" alt="HudCo" />
          <b>HudCo <span className="mk-brand__sub">Construction</span></b>
        </a>
        <nav className="mk-nav">
          <a href="#services">Services</a>
          <a href="#how">How it works</a>
          <a href="#pricing">Pricing</a>
          <a href="#reviews">Reviews</a>
        </nav>
        <div className="mk-header__right">
          <a className="mk-phone" href="tel:+15555551234"><i data-lucide="phone"></i> (555) 555-1234</a>
          {cartCount > 0 && (
            <button className="mk-cart-btn" onClick={onCartOpen} aria-label={`View cart, ${cartCount} item${cartCount !== 1 ? "s" : ""}`}>
              <i data-lucide="shopping-cart"></i>
              <span className="mk-cart-badge">{cartCount}</span>
            </button>
          )}
          <MK_Button variant="primary" size="md" iconRight={<i data-lucide="arrow-right"></i>} onClick={() => onBook(null)}>
            Book now
          </MK_Button>
        </div>
      </div>
    </header>
  );
}
window.WebHeader = WebHeader;

/* ---- Hero ---- */
function WebHero({ addToCart }) {
  const [svcIdx, setSvcIdx] = MK_useState(0);
  const [added, setAdded] = MK_useState(false);
  const svc = window.HUDCO_SERVICES[svcIdx] || window.HUDCO_SERVICES[0];

  function handleAdd() {
    addToCart(svc);
    setAdded(true);
    setTimeout(() => setAdded(false), 1800);
  }

  return (
    <section className="mk-hero" id="top">
      <div className="mk-wrap mk-hero__grid">
        <div className="mk-hero__copy">
          <span className="mk-eyebrow"><i data-lucide="map-pin"></i> Your local handyman, online</span>
          <h1>Home repairs, <em>priced before</em> we knock.</h1>
          <p className="mk-hero__sub">
            Pick the job, see your flat price, and book a time that works.
            A vetted pro shows up when we say — you pay what we quoted. No callout fees, no surprises.
          </p>
          <div className="mk-estimator" id="pricing">
            <div className="mk-estimator__row">
              <MK_Select label="What needs doing?" value={svc.name}
                onChange={e => { const i = window.HUDCO_SERVICES.findIndex(s => s.name === e.target.value); if (i >= 0) setSvcIdx(i); }}
                options={window.HUDCO_SERVICES.map(s => s.name)} />
              <MK_Button variant={added ? "secondary" : "primary"} size="lg"
                iconRight={added ? <i data-lucide="check"></i> : <i data-lucide="shopping-cart"></i>}
                onClick={handleAdd}>
                {added ? "Added to cart" : "Add to cart"}
              </MK_Button>
            </div>
            <div className="mk-estimator__out">
              <span style={{ fontSize: 14, color: "var(--ink-600)", fontWeight: 500 }}>Your flat price, parts included</span>
              <MK_PriceTag amount={svc.price} unit="flat" size="md" />
            </div>
          </div>
          <div className="mk-hero__trust">
            <span className="mk-trustitem"><MK_Rating value={4.9} size="sm" /> <b>4.9</b> · 1,200+ jobs</span>
            <span className="mk-trustitem"><i data-lucide="shield-check"></i> Licensed &amp; insured</span>
            <span className="mk-trustitem"><i data-lucide="badge-check"></i> Background-checked pros</span>
          </div>
        </div>
        <div className="mk-hero__visual">
          <div className="mk-photo">
            <div className="mk-photo__label"><i data-lucide="image"></i> Drop a photo of a real HudCo pro at a customer's door</div>
          </div>
          <div className="mk-floatcard mk-floatcard--price">
            <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: "var(--teal-700)" }}>Quoted</span>
            <MK_PriceTag amount={149} unit="flat" size="sm" />
          </div>
          <div className="mk-floatcard mk-floatcard--track">
            <MK_Avatar name="Marcus Hill" status="online" size="md" />
            <div><div className="mk-floatcard__t">Marcus is on the way</div><div style={{ marginTop: 4 }}><MK_StatusPill status="enroute" /></div></div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.WebHero = WebHero;

/* ---- Services ---- */
function WebServices({ onBook }) {
  return (
    <section className="mk-section mk-section--white" id="services">
      <div className="mk-wrap">
        <div className="mk-section__head">
          <span className="mk-eyebrow" style={{ justifyContent: "center" }}>What we fix</span>
          <h2>One pro, most of your list</h2>
          <p>Browse the work, see the flat price, and add multiple services to one visit.</p>
        </div>
        <div className="mk-services">
          {window.HUDCO_SERVICES.map(s => (
            <MK_Card key={s.id} padding="lg" interactive onClick={() => onBook(s)}>
              <div className="mk-service">
                <span className="mk-service__icon"><i data-lucide={s.icon}></i></span>
                <h3>{s.name}</h3>
                <p>{s.desc}</p>
                <div className="mk-service__foot">
                  <MK_PriceTag amount={s.price} unit="flat" size="sm" />
                  <span style={{ color: "var(--teal-700)", fontWeight: 600, fontSize: 14, display: "inline-flex", alignItems: "center", gap: 4 }}>
                    Add <i data-lucide="plus" style={{ width: 15, height: 15 }}></i>
                  </span>
                </div>
              </div>
            </MK_Card>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WebServices = WebServices;

const MK_STEPS = [
  { icon: "search",         t: "Pick the job",        d: "Choose what needs doing and see your flat price up front — parts included." },
  { icon: "calendar-check", t: "Choose a time",       d: "Grab a slot that works for you, today or later this week." },
  { icon: "truck",          t: "We show up on time",  d: "Track your pro on the way. We arrive in the window we promised." },
  { icon: "check-check",    t: "Pay when it's right", d: "Deposit holds your slot; pay the rest only once you're happy." },
];

function WebHowItWorks() {
  return (
    <section className="mk-section mk-section--cream" id="how">
      <div className="mk-wrap">
        <div className="mk-section__head">
          <span className="mk-eyebrow" style={{ justifyContent: "center" }}>How it works</span>
          <h2>The no-surprises way</h2>
          <p>You always know the price, the time, and who's coming — before we knock.</p>
        </div>
        <div className="mk-steps">
          {MK_STEPS.map((s, i) => (
            <div className="mk-step" key={s.t}><span className="mk-step__num">{i + 1}</span><h3>{s.t}</h3><p>{s.d}</p></div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WebHowItWorks = WebHowItWorks;