/*
 * Design reminder: Practical Navy + Mint Editorial. Location pages use the replica theme's
 * utility bar, restrained header, dark content hero, mint actions, cool mist sections,
 * and compact state/county directory cards. Preserve the direct, as-is seller message.
 */

import { useEffect, useState } from "react";
import { ArrowRight, Check, MapPin, Menu, Phone, X } from "lucide-react";
import { useRoute } from "wouter";
import SEOHead from "@/components/SEOHead";
import LocationTestimonials from "@/components/LocationTestimonials";
import { locationData } from "@/data/locationData";
import { getLocationHeroImage } from "@/lib/pageHeroVisuals";
import { handleCashOfferClick } from "@/lib/cashOfferTrigger";

const BRAND_MARK = "/assets/original-home-buyers-logo.png";

function openSharedOffer(event: { preventDefault: () => void }) {
  handleCashOfferClick(event, () => window.dispatchEvent(new Event("open-cash-offer")));
}

function titleCase(value: string) {
  return value.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
}

function SiteHeader() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const links = [
    ["Sell Your House Fast", "/sell-your-house-fast.html"],
    ["How It Works", "/how-it-works.html"],
    ["What We Buy", "/situations.html"],
    ["Areas We Serve", "/locations.html"],
    ["Seller Education", "/blog.html"],
    ["About Us", "/about.html"],
    ["Contact", "/contact.html"],
  ] as const;

  return (
    <>
      <div className="utility-bar"><div className="shell utility-bar__inner"><a href="tel:+12404105636"><Phone size={13} /> Call us at <strong>(240) 410-5636</strong> for a free, no-obligation property review.</a></div></div>
      <header className="site-header site-header--content"><div className="shell header-inner"><a className="brand" href="/" aria-label="Original Home Buyers home"><img src={BRAND_MARK} alt="" className="brand__mark" /><span className="brand__words"><strong>Original</strong><span>Home Buyers</span><small>FAMILY-OWNED <i>|</i> NATIONWIDE</small></span></a><nav className={`main-nav ${mobileMenuOpen ? "main-nav--open" : ""}`} aria-label="Primary navigation">{links.map(([label, href]) => <a key={href} href={href} onClick={() => setMobileMenuOpen(false)}>{label}</a>)}</nav><a className="button button--mint header-cta" href="/#offer-form" onClick={openSharedOffer}>Get My Cash Offer</a><button className="menu-toggle" aria-label="Toggle navigation" aria-expanded={mobileMenuOpen} onClick={() => setMobileMenuOpen((value) => !value)}>{mobileMenuOpen ? <X size={22} /> : <Menu size={22} />}</button></div></header>
    </>
  );
}

function SiteFooter() {
  return <footer className="site-footer"><div className="shell footer-grid"><a className="brand brand--footer" href="/"><img src={BRAND_MARK} alt="" className="brand__mark" /><span className="brand__words"><strong>Original</strong><span>Home Buyers</span><small>FAMILY-OWNED <i>|</i> NATIONWIDE</small></span></a><div><strong>Explore</strong><a href="/sell-your-house-fast.html">Sell Your House Fast</a><a href="/how-it-works.html">How It Works</a><a href="/situations.html">What We Buy</a><a href="/locations.html">Areas We Serve</a><a href="/compare-selling-options.html">Compare Options</a></div><div><strong>Seller Education</strong><a href="/blog.html">Seller Education Blog</a><a href="/cash-sale-benefits.html">Cash Sale Benefits Guide</a><a href="/blog.html#selling-without-agent">Selling Without an Agent</a><a href="/seller-insights.html">Seller Insights</a></div><div><strong>Property Topics</strong><a href="/sell-as-is.html">Sell As-Is</a><a href="/foreclosure-help.html">Foreclosure Help</a><a href="/sell-inherited-property.html">Inherited Property</a><a href="/sell-during-divorce.html">Divorce &amp; Home Sales</a></div><div><strong>Contact</strong><a href="tel:+12404105636">(240) 410-5636</a><a href="mailto:Info@Originalhomebuyers.com">Info@Originalhomebuyers.com</a><a href="/about.html">About Us</a><a href="/contact.html">Contact Us</a><a href="/privacy.html">Privacy Policy</a><a href="/terms.html">Terms of Use</a><div className="footer-social" aria-label="Social media"><a href="https://www.facebook.com/originalhomebuyers" target="_blank" rel="noreferrer" className="footer-social__link" aria-label="Follow Original Home Buyers on Facebook"><span aria-hidden="true">f</span></a><span className="footer-social__link footer-social__link--placeholder" role="img" aria-label="Instagram profile coming soon" title="Instagram profile coming soon"><span aria-hidden="true">◎</span></span><span className="footer-social__link footer-social__link--placeholder" role="img" aria-label="X profile coming soon" title="X profile coming soon"><span aria-hidden="true">𝕏</span></span><span className="footer-social__link footer-social__link--placeholder" role="img" aria-label="TikTok profile coming soon" title="TikTok profile coming soon"><span aria-hidden="true">♪</span></span></div></div></div><div className="shell footer-disclosures"><p>Original Home Buyers reviews homes for potential direct, as-is purchase opportunities. Any potential offer is property-specific and subject to review and written agreement; terms and amounts may vary.</p><p>Information on this website is for general informational purposes only and is not legal, financial, tax, or real estate advice. Consult an appropriately licensed professional for guidance specific to your situation.</p><p>Original Home Buyers is committed to the letter and spirit of the federal Fair Housing Act. We do not discriminate on the basis of race, color, religion, sex, national origin, disability, or familial status.</p></div><div className="shell footer-bottom"><span>© 2026 Original Home Buyers. All rights reserved.</span><span>Family-owned. Nationwide.</span></div></footer>;
}

export default function CountyAreaPage() {
  const [, countyParams] = useRoute("/areas-we-serve/:state/:county/");
  const [, stateParams] = useRoute("/areas-we-serve/:state/");
  const stateSlug = countyParams?.state || stateParams?.state || "location";
  const countySlug = countyParams?.county || "";
  const stateName = titleCase(stateSlug);
  const countyName = countySlug ? `${titleCase(countySlug.replace(/-county$/, ""))} County` : "";
  const locationLabel = countyName ? `${countyName}, ${stateName}` : stateName;
  const counties = locationData[stateSlug] || [];
  const pageTitle = countyName ? `Sell My House Fast in ${countyName}, ${stateName} | Original Home Buyers` : `Sell My House Fast in ${stateName} | Original Home Buyers`;
  const pageDescription = countyName ? `Need to sell a house fast in ${countyName}, ${stateName}? Original Home Buyers reviews properties in any condition and may offer a direct, as-is cash-sale option with no agent commissions.` : `Sell your house fast for cash in ${stateName}. Original Home Buyers reviews properties in any condition with no required repairs, no agent commissions, and flexible closing dates.`;
  const locationHeroImage = getLocationHeroImage(stateSlug, countySlug);

  useEffect(() => { window.scrollTo(0, 0); }, [pageTitle]);

  return (
    <div className="content-page">
      <SEOHead title={pageTitle} description={pageDescription} schemaType="Organization" />
      <SiteHeader />
      <main>
        <section className="content-hero" style={{ backgroundImage: `linear-gradient(90deg, rgba(2,34,64,.96), rgba(2,39,74,.82)), url(${locationHeroImage})` }}><div className="shell content-hero__inner"><span className="eyebrow eyebrow--line">DIRECT, AS-IS HOME SALE</span><h1>Sell Your House Fast in {locationLabel}</h1><p>{countyName ? `A direct option for homeowners in ${countyName}, ${stateName} who want to understand their choices without making repairs, staging the property, or waiting through a traditional listing.` : `Find local cash-sale information for ${stateName}, then tell us about the property and your preferred timeline.`}</p></div></section>
        {countyName ? (
          <>
            <section className="content-section"><div className="shell content-section__inner"><span className="eyebrow eyebrow--line eyebrow--dark">WHY HOMEOWNERS CALL</span><h2>A simpler path around common listing obstacles.</h2><div className="content-copy"><p>Original Home Buyers reviews houses in {countyName}, {stateName} in their current condition. We may help with inherited properties, vacant homes, rentals, major repairs, fire or water damage, code issues, foreclosure concerns, and other situations that make a traditional sale harder.</p><div className="content-card-grid content-card-grid--three"><article><span className="content-card__number">01</span><h3>No required repairs</h3><p>Start with the property as it is. You do not need to renovate, clean out, or stage the house before we review it.</p></article><article><span className="content-card__number">02</span><h3>Direct communication</h3><p>Discuss the condition, your goals, and your preferred timeline with a home-buying specialist.</p></article><article><span className="content-card__number">03</span><h3>Choose what works</h3><p>If a direct purchase is a fit, coordinate an agreed closing date with a professional title or settlement company.</p></article></div><a className="button button--mint" href="/#offer-form" onClick={openSharedOffer}>Get My Cash Offer <ArrowRight size={16} /></a></div></div></section>
            <section className="content-section content-section--mist"><div className="shell content-section__inner"><span className="eyebrow eyebrow--line eyebrow--dark">LOCAL PROPERTY REVIEW</span><h2>Tell us what is going on with the property.</h2><div className="content-copy"><div className="icon-list"><p><Check size={18} /> Houses purchased in many conditions</p><p><Check size={18} /> No traditional agent commission</p><p><Check size={18} /> Flexible closing conversation</p><p><Check size={18} /> No obligation to accept an offer</p></div><div className="content-cta"><h3>Ready to discuss {countyName}?</h3><p>Start with the property address. A short conversation can help you understand the available next step.</p><a className="button button--mint" href="/#offer-form" onClick={openSharedOffer}>Request a Cash Offer <ArrowRight size={16} /></a></div></div></div></section>
          </>
        ) : (
          <section className="content-section content-section--mist"><div className="shell content-section__inner"><span className="eyebrow eyebrow--line eyebrow--dark">COUNTY DIRECTORY · {stateName.toUpperCase()}</span><h2>Choose your local area.</h2><div className="content-copy"><p>Visit a county page for localized cash-sale information and a direct path to the offer form.</p><div className="state-grid">{counties.map((county) => <a key={county} href={`/areas-we-serve/${stateSlug}/${county}-county/`}><MapPin size={15} /><span>Sell My {titleCase(county)} House Fast</span><small>{stateName}</small></a>)}</div>{counties.length === 0 && <p>No county directory is available for this state yet. You can still request a free property review anywhere in {stateName}.</p>}</div></div></section>
        )}
        <LocationTestimonials locationLabel={locationLabel} stateSlug={stateSlug} countySlug={countySlug || undefined} />
        <section className="contact-cta"><div className="shell contact-cta__inner"><span className="eyebrow eyebrow--pill">FREE · NO OBLIGATION</span><h2>Tell us about the property.</h2><p>We will review the details and discuss the next step without pressure.</p><a className="button button--mint" href="/#offer-form" onClick={openSharedOffer}>Get My Cash Offer <ArrowRight size={16} /></a></div></section>
      </main>
      <SiteFooter />
    </div>
  );
}
