// Lexamin Legal — Property Services page

const { useEffect: usEf2 } = React;

const SVC_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "logoDirection": "cipher",
  "theme": "navy"
}/*EDITMODE-END*/;

const SERVICES = [
  { num: "01", title: "Residential Sales", body: "Acting for homeowners selling their property, from instruction through to a smooth completion." },
  { num: "02", title: "Residential Purchases", body: "Clear, responsive advice for buyers at every stage of a residential purchase." },
  { num: "03", title: "Leasehold Conveyancing", body: "Sales and purchases of flats and leasehold houses, including lease review and enquiries." },
  { num: "04", title: "Freehold Conveyancing", body: "Straightforward freehold sales and purchases handled personally, start to finish." },
  { num: "05", title: "First Time Buyers", body: "Plain-English guidance for buyers taking their first step onto the property ladder." },
  { num: "06", title: "Remortgages", body: "Efficient remortgage transactions with direct liaison with your lender." },
  { num: "07", title: "Transfers of Equity", body: "Adding, removing or restructuring owners on the title, handled carefully and quickly." },
  { num: "08", title: "Buy to Let Purchases", body: "Acquisitions for landlords and investors building or growing a portfolio." },
  { num: "09", title: "New Build Purchases", body: "Reservation, contract review and completion advice on new build homes." },
  { num: "10", title: "Auction Purchases", body: "Fast-turnaround legal work to meet tight auction exchange and completion deadlines." },
  { num: "11", title: "Lease Extensions", body: "Statutory and informal lease extension advice for flat owners." },
  { num: "12", title: "Deeds of Variation", body: "Amending lease terms and resolving related title issues." },
  { num: "13", title: "Licences for Alterations", body: "Securing landlord or freeholder consent for works to leasehold property." },
  { num: "14", title: "Share of Freehold", body: "Purchases, sales and transfers involving share of freehold arrangements." },
  { num: "15", title: "Freehold Company Advice", body: "Advice for freehold management companies and participating leaseholders." },
  { num: "16", title: "Residential Property Advice", body: "General advice on residential property matters as they arise." },
];

const ServicesApp = () => {
  const [t, setTweak] = useTweaks(SVC_TWEAK_DEFAULTS);
  usEf2(() => { document.body.className = t.theme === "heritage" ? "theme-heritage" : ""; }, [t.theme]);
  const inverted = t.theme !== "heritage";
  const spotRef = useSpotlight();

  return (
    <>
      <ScrollProgress />
      <CustomCursor />
      <NavBar logoDirection={t.logoDirection} inverted={inverted} current="services" />
      <main id="main">

      {/* Hero */}
      <header className="page-hero">
        <div className="wrap">
          <div className="page-hero-grid">
            <div>
              <Reveal>
                <div className="sec-tag">
                  <span className="bracket">[</span><ScrambleText text="LEX.SVC" /><span className="bracket">/</span>
                  <span>Property Services</span><span className="bracket">]</span>
                </div>
              </Reveal>
              <Reveal delay={120}>
                <h1>Residential property work — <em>handled end to end.</em></h1>
              </Reveal>
              <Reveal delay={280}>
                <p className="page-hero-lede">
                  Sales, purchases, remortgages, transfers of equity and the more bespoke
                  matters where deal certainty and pace make the difference.
                </p>
              </Reveal>
              <Reveal delay={420}>
                <div style={{ marginTop: 36, display: "flex", gap: 12, flexWrap: "wrap" }}>
                  <a href="#quote" className="btn btn-solid" data-magnetic>Request a quote</a>
                  <a href="Agents.html" className="btn" data-magnetic>Agents &amp; brokers →</a>
                </div>
              </Reveal>
            </div>
            <div className="page-hero-aside">
              <Reveal delay={150}><div className="line"><span className="k">Coverage</span><span className="v">London · Surrey · Croydon</span></div></Reveal>
              <Reveal delay={200}><div className="line"><span className="k">Tenure</span><span className="v">Freehold &amp; leasehold</span></div></Reveal>
              <Reveal delay={250}><div className="line"><span className="k">Value range</span><span className="v">Up to prime / HNW</span></div></Reveal>
              <Reveal delay={300}><div className="line"><span className="k">Turnaround</span><span className="v">Same-day initial reply</span></div></Reveal>
            </div>
          </div>
        </div>
      </header>

      {/* Service deep-grid */}
      <section className="services-deep">
        <div className="wrap">
          <Reveal>
            <div className="content-head">
              <div className="sec-tag">
                <span className="bracket">[</span><ScrambleText text="SVC.01" /><span className="bracket">/</span>
                <span>Practice areas</span><span className="bracket">]</span>
              </div>
              <h2>Every service, in one practice.</h2>
              <p>Each matter is handled personally by a named solicitor — no handing off to a junior, no losing context between teams.</p>
            </div>
          </Reveal>
          <div className="service-grid">
            {SERVICES.map((s, i) => (
              <Reveal key={s.num} delay={i * 60} className="service-wrap" style={{ "--i": i }}>
                <div className="service">
                  <div className="num">{s.num} —</div>
                  <h3>{s.title}</h3>
                  <p>{s.body}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Marquee strip */}
      <Marquee items={[
        "Same-day response",
        "Named solicitor",
        "Agent &amp; broker friendly",
        "Time-critical transactions",
        "Calm under pressure",
        "Commercial advice",
      ]} duration={32} />

      {/* Quote form */}
      <section className="content-section dark spotlight" id="quote" ref={spotRef}>
        <div className="wrap">
          <div className="two-col">
            <div>
              <Reveal>
                <div className="sec-tag">
                  <span className="bracket">[</span><ScrambleText text="SVC.FRM" /><span className="bracket">/</span>
                  <span>Request a quote</span><span className="bracket">]</span>
                </div>
              </Reveal>
              <Reveal delay={120}>
                <h2 className="content-head" style={{ marginBottom: 0, color: "var(--cream)" }}>
                  Send the basics. <em style={{ color: "var(--gold)" }}>We'll come back the same day.</em>
                </h2>
              </Reveal>
              <Reveal delay={280}>
                <p style={{ color: "rgba(244,240,230,0.7)", marginTop: 24, fontSize: 16, lineHeight: 1.7 }}>
                  Property, price, timeline and anything we should know up front.
                  No long form — we just need enough to give you a clear, costed
                  response and get the file moving.
                </p>
              </Reveal>
              <Reveal delay={400}>
                <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
                  <a href={window.WHATSAPP_HREF} target="_blank" rel="noopener noreferrer" className="btn" data-magnetic>WhatsApp →</a>
                  <a href="tel:+447935011281" className="btn" data-magnetic>Call 07935 011 281</a>
                </div>
              </Reveal>
            </div>
            <Reveal delay={200} kind="right">
              <EnquiryForm kind="quote" id="quote-form" />
            </Reveal>
          </div>
        </div>
      </section>

      </main>
      <FooterBar logoDirection={t.logoDirection} />
      <FloatingWhatsApp />
    </>
  );
};
ReactDOM.createRoot(document.getElementById("root")).render(<ServicesApp />);