const { useState } = React;
const {
  Phone, MessageSquare, Star, Check, X, ArrowRight, Zap,
  Calendar, BarChart3, Search, Globe, RefreshCw, PhoneCall, ShieldCheck, FileText, Linkedin,
  StarRow, PhotoBlock, SampleSiteMini, BrowserFrame, PhoneFrame,
} = window;

function scrollToId(id) {
  const el = document.getElementById(id);
  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

/* ---------- BRAND LOGO ---------- */
// Storefront-awning mark, built from simple geometry. No external image.
function LogoMark({ className = '', tile = true }) {
  const mark = (
    <svg viewBox="0 0 32 32" className="h-full w-full" fill="none" aria-hidden="true">
      {/* awning roof + scalloped front */}
      <path
        d="M5 13 L8.5 7 H23.5 L27 13 q-2.75 3.6 -5.5 0 q-2.75 3.6 -5.5 0 q-2.75 3.6 -5.5 0 q-2.75 3.6 -5.5 0 Z"
        fill="white"
      />
      {/* doorway */}
      <rect x="13.4" y="16.5" width="5.2" height="8.5" rx="0.6" fill="white" />
      {/* door knob */}
      <circle cx="17.3" cy="20.8" r="0.7" fill="#1F6FEB" />
    </svg>
  );
  if (!tile) return <div className={className}>{mark}</div>;
  return (
    <span className={`grid place-items-center overflow-hidden rounded-lg bg-brand p-1 ${className}`}>
      {mark}
    </span>
  );
}

function BrandLogo({ size = 'nav' }) {
  const tile = size === 'nav' ? 'h-8 w-8' : 'h-7 w-7';
  const text = size === 'nav' ? 'text-lg' : 'text-base';
  return (
    <span className={`flex items-center gap-2 font-extrabold tracking-tight ${text}`}>
      <LogoMark className={tile} />
      <span><span className="text-brand">Bright</span><span className="text-slate-900">Storefront</span></span>
    </span>
  );
}

/* ---------- NAV ---------- */
function Nav() {
  return (
    <header className="sticky top-0 z-50 border-b border-slate-100 bg-white/90 backdrop-blur">
      <div className="mx-auto flex max-w-6xl items-center justify-between px-5 py-3.5 sm:px-8">
        <a
          href="#top"
          onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}
          className="flex items-center"
        >
          <BrandLogo size="nav" />
        </a>
        <button
          onClick={() => scrollToId('contact')}
          className="whitespace-nowrap rounded-lg bg-brand px-3.5 py-2.5 text-xs font-bold text-white shadow-sm transition hover:bg-brand-dark active:scale-[.98] sm:px-4 sm:text-sm"
        >
          See a Free Preview
        </button>
      </div>
    </header>
  );
}

/* ---------- HERO ---------- */
function Hero() {
  return (
    <section id="top" className="mx-auto max-w-6xl px-5 pb-16 pt-12 sm:px-8 sm:pt-16 lg:pt-20">
      <div className="grid items-center gap-12 lg:grid-cols-[1.05fr_1fr]">
        <div>
          <h1 className="text-4xl font-extrabold leading-[1.08] tracking-tight text-slate-900 sm:text-5xl lg:text-[3.4rem]">
            Bright storefronts for local service businesses.
          </h1>
          <p className="mt-5 text-lg font-normal leading-relaxed text-slate-500 sm:text-xl">
            We build websites that turn Google traffic into booked jobs. Flat $50/month, no contracts, cancel anytime.
          </p>
          <p className="mt-4 text-base font-medium text-slate-700">
            You do the work. We make sure people can find you online.
          </p>
          <div className="mt-8 flex flex-col items-start gap-4 sm:flex-row sm:items-center">
            <button
              onClick={() => scrollToId('example')}
              className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-brand px-6 py-4 text-base font-bold text-white shadow-md shadow-brand/20 transition hover:bg-brand-dark active:scale-[.98] sm:w-auto"
            >
              See an example site we built
              <ArrowRight size={18} />
            </button>
            <button
              onClick={() => scrollToId('contact')}
              className="inline-flex items-center gap-1.5 text-base font-semibold text-brand transition hover:gap-2.5"
            >
              Or talk to us <ArrowRight size={16} />
            </button>
          </div>
        </div>

        {/* Mockup: browser + phone */}
        <div className="relative">
          <BrowserFrame className="w-full">
            <div className="h-[230px] sm:h-[260px]">
              <SampleSiteDesktopMini />
            </div>
          </BrowserFrame>
          <PhoneFrame className="absolute -bottom-8 -right-1 w-[124px] sm:w-[140px] lg:-right-6">
            <div className="h-[230px] sm:h-[250px]">
              <SampleSiteMini />
            </div>
          </PhoneFrame>
        </div>
      </div>
    </section>
  );
}

// Slightly wider desktop variant of the sample site for the browser frame
function SampleSiteDesktopMini() {
  return (
    <div className="flex h-full flex-col bg-white text-left">
      <div className="flex items-center justify-between border-b border-slate-100 px-4 py-2.5">
        <span className="text-xs font-extrabold text-slate-900">Alexandria's Top Pressure Washing</span>
        <div className="flex items-center gap-2">
          <span className="hidden text-[10px] text-slate-400 sm:inline">Services · Reviews · Contact</span>
          <span className="rounded bg-brand px-2.5 py-1 text-[9px] font-bold text-white">Call now</span>
        </div>
      </div>
      <div className="grid flex-1 grid-cols-[1.3fr_1fr]">
        <div className="flex flex-col justify-center px-4 py-3">
          <StarRow size={11} label="4.8 · 23 reviews" />
          <p className="mt-2 text-base font-extrabold leading-tight text-slate-900">
            Driveways &amp; siding, washed like new.
          </p>
          <p className="mt-1.5 text-[10px] text-slate-500">Serving Alexandria &amp; Northern Virginia</p>
          <div className="mt-3 w-fit rounded-md bg-brand px-3 py-2 text-[10px] font-bold text-white">
            Get a Free Quote
          </div>
          <div className="mt-3 flex flex-wrap gap-1.5">
            {['Driveway', 'House soft-wash', 'Decks', 'Roofs'].map((s) => (
              <span key={s} className="rounded-full bg-slate-100 px-2 py-0.5 text-[8px] font-medium text-slate-600">{s}</span>
            ))}
          </div>
        </div>
        <PhotoBlock className="h-full w-full" label="home exterior" />
      </div>
    </div>
  );
}

/* ---------- PROBLEM ---------- */
function Problem() {
  const bullets = [
    { icon: Search, text: 'Your reviews are great — but customers Google you and find nothing' },
    { icon: Phone, text: 'Your phone rings less than it should because the next guy has a website' },
    { icon: Calendar, text: 'Building one yourself takes weeks you don\u2019t have' },
  ];
  return (
    <section className="border-t border-slate-100 bg-slate-50/60">
      <div className="mx-auto max-w-4xl px-5 py-16 sm:px-8 sm:py-20">
        <p className="text-2xl font-bold leading-snug text-slate-900 sm:text-3xl">
          Most local service businesses don't have a problem getting work. They have a problem getting found.
        </p>
        <div className="mt-9 space-y-4">
          {bullets.map(({ icon: I, text }) => (
            <div key={text} className="flex items-start gap-4">
              <span className="mt-0.5 grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-white text-brand ring-1 ring-slate-200">
                <I size={18} />
              </span>
              <p className="text-base font-medium leading-relaxed text-slate-700 sm:text-lg">{text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- WHAT YOU GET ---------- */
function Package() {
  const items = [
    { icon: Globe, title: 'A professional website', desc: 'Your reviews, services, and service area, designed to convert visitors into calls' },
    { icon: MessageSquare, title: 'Instant quote-form-to-text', desc: 'Customer fills out the form, your phone gets a text within seconds' },
    { icon: PhoneCall, title: 'Missed-call auto-text', desc: 'Never lose a lead while you\u2019re on a job' },
    { icon: RefreshCw, title: 'Weekly updates', desc: 'New photos, fresh Google reviews, any change you want' },
    { icon: BarChart3, title: 'Monthly lead report', desc: 'See exactly how many calls and leads your site drove' },
    { icon: Zap, title: 'No contracts', desc: '$50/month, cancel anytime' },
  ];
  return (
    <section className="mx-auto max-w-6xl px-5 py-16 sm:px-8 sm:py-24">
      <div className="text-center">
        <h2 className="text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">The Bright Storefront Package</h2>
        <p className="mt-3 text-lg text-slate-500">Everything below, for $50/month. That's it.</p>
      </div>
      <div className="mt-12 grid gap-5 sm:grid-cols-2">
        {items.map(({ icon: I, title, desc }) => (
          <div key={title} className="flex gap-4 rounded-2xl border border-slate-200 bg-white p-6 transition hover:border-brand/40 hover:shadow-md hover:shadow-slate-200/60">
            <span className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-brand/10 text-brand">
              <I size={22} />
            </span>
            <div>
              <h3 className="text-lg font-bold text-slate-900">{title}</h3>
              <p className="mt-1 text-base leading-relaxed text-slate-500">{desc}</p>
            </div>
          </div>
        ))}
      </div>

      <div className="mt-8 flex items-start gap-4 rounded-2xl bg-brand p-6 text-white sm:items-center sm:p-7">
        <span className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-white/15">
          <ShieldCheck size={24} />
        </span>
        <p className="text-base font-semibold leading-relaxed sm:text-lg">
          <span className="font-extrabold">90-day guarantee:</span> If your site doesn't generate at least one real lead, full refund. No questions.
        </p>
      </div>
    </section>
  );
}

/* ---------- LIVE EXAMPLE ---------- */
function Example() {
  return (
    <section id="example" className="border-t border-slate-100 bg-slate-50/60">
      <div className="mx-auto max-w-5xl px-5 py-16 sm:px-8 sm:py-24">
        <div className="text-center">
          <h2 className="text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">See it for yourself</h2>
          <p className="mx-auto mt-3 max-w-2xl text-lg text-slate-500">
            Here's a real site we built for a pressure washing company in Alexandria. Tap to see it live.
          </p>
        </div>

        <BrowserFrame url="alexandriapropressure.com" className="mt-12">
          <ExampleSite />
        </BrowserFrame>

        <div className="mt-8 text-center">
          <a
            href="#"
            className="inline-flex items-center gap-2 rounded-xl border border-slate-300 bg-white px-6 py-3.5 text-base font-bold text-slate-800 transition hover:border-brand hover:text-brand active:scale-[.98]"
          >
            See more examples <ArrowRight size={18} />
          </a>
        </div>
      </div>
    </section>
  );
}

function ExampleSite() {
  const services = ['Driveway & concrete washing', 'House soft-washing', 'Deck & patio cleaning', 'Roof cleaning', 'Gutter brightening'];
  return (
    <div className="bg-white text-left">
      {/* header */}
      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-5 py-4 sm:px-7">
        <div>
          <p className="text-base font-extrabold text-slate-900 sm:text-lg">Alexandria Pro Pressure Washing</p>
          <StarRow size={13} label="4.8 ★ · 23 reviews" />
        </div>
        <span className="rounded-lg bg-brand px-4 py-2.5 text-sm font-bold text-white">(703) 555-0100</span>
      </div>
      {/* hero */}
      <div className="grid sm:grid-cols-2">
        <PhotoBlock className="h-44 w-full sm:h-auto" label="before / after photo" />
        <div className="flex flex-col justify-center px-5 py-7 sm:px-7">
          <h3 className="text-xl font-extrabold leading-tight text-slate-900 sm:text-2xl">
            Driveways and siding, washed like new.
          </h3>
          <p className="mt-2 text-sm text-slate-500">Free quotes. Same-week service across Alexandria &amp; NoVA.</p>
          <button className="mt-4 w-fit rounded-lg bg-brand px-5 py-3 text-sm font-bold text-white">Get a Free Quote</button>
        </div>
      </div>
      {/* services + form preview */}
      <div className="grid gap-6 border-t border-slate-100 px-5 py-7 sm:grid-cols-2 sm:px-7">
        <div>
          <p className="text-xs font-bold uppercase tracking-wider text-slate-400">Our services</p>
          <ul className="mt-3 space-y-2">
            {services.map((s) => (
              <li key={s} className="flex items-center gap-2 text-sm text-slate-700">
                <span className="text-brand"><Check size={16} /></span>{s}
              </li>
            ))}
          </ul>
        </div>
        <div className="rounded-xl bg-slate-50 p-4 ring-1 ring-slate-200">
          <p className="text-sm font-bold text-slate-900">Get a free quote</p>
          <div className="mt-3 space-y-2">
            <div className="h-9 rounded-md bg-white ring-1 ring-slate-200" />
            <div className="h-9 rounded-md bg-white ring-1 ring-slate-200" />
            <div className="h-9 rounded-md bg-white ring-1 ring-slate-200" />
            <div className="rounded-md bg-brand py-2.5 text-center text-xs font-bold text-white">Text me a quote</div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- HOW IT WORKS ---------- */
function HowItWorks() {
  const steps = [
    { n: '1', title: 'We build your site this week.', desc: 'Using your business info and your real Google reviews.' },
    { n: '2', title: 'You look at it.', desc: 'If you like it, we go live on your domain.' },
    { n: '3', title: 'You text us anytime.', desc: 'Want a change? Sites take 5 minutes, new pages take a day.' },
  ];
  return (
    <section className="mx-auto max-w-6xl px-5 py-16 sm:px-8 sm:py-24">
      <h2 className="text-center text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">How it works</h2>
      <div className="mt-12 grid gap-8 md:grid-cols-3">
        {steps.map(({ n, title, desc }) => (
          <div key={n} className="text-center md:text-left">
            <span className="grid h-14 w-14 place-items-center rounded-2xl bg-brand text-2xl font-extrabold text-white mx-auto md:mx-0">
              {n}
            </span>
            <h3 className="mt-5 text-xl font-bold text-slate-900">{title}</h3>
            <p className="mt-2 text-base leading-relaxed text-slate-500">{desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- WHO WE WORK WITH ---------- */
function WhoFor() {
  return (
    <section className="border-t border-slate-100 bg-slate-50/60">
      <div className="mx-auto max-w-5xl px-5 py-16 sm:px-8 sm:py-24">
        <h2 className="text-center text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">Who we work with</h2>
        <div className="mt-12 grid gap-6 md:grid-cols-2">
          <div className="rounded-2xl border border-emerald-200 bg-white p-7">
            <span className="grid h-11 w-11 place-items-center rounded-xl bg-emerald-100 text-emerald-600">
              <Check size={24} />
            </span>
            <h3 className="mt-4 text-xl font-bold text-slate-900">This is built for</h3>
            <p className="mt-2 text-base leading-relaxed text-slate-600">
              Local service businesses. Pressure washing, mobile detailing, junk removal, fence and deck, tree service, HVAC, plumbing, roofing, and similar. Anyone whose customers find them locally.
            </p>
          </div>
          <div className="rounded-2xl border border-slate-200 bg-white p-7">
            <span className="grid h-11 w-11 place-items-center rounded-xl bg-slate-100 text-slate-500">
              <X size={24} />
            </span>
            <h3 className="mt-4 text-xl font-bold text-slate-900">This isn't for</h3>
            <p className="mt-2 text-base leading-relaxed text-slate-600">
              E-commerce stores, restaurants, or businesses with complex booking systems. We do one thing well.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- PRICING ---------- */
function Pricing() {
  return (
    <section className="mx-auto max-w-6xl px-5 py-16 sm:px-8 sm:py-24">
      <div className="text-center">
        <h2 className="text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">Simple pricing.</h2>
        <p className="mt-3 text-lg text-slate-500">No tiers, no upsells, no contracts.</p>
      </div>

      <div className="mx-auto mt-12 max-w-md">
        <div className="rounded-3xl border border-slate-200 bg-white p-8 shadow-xl shadow-slate-200/50">
          <div className="flex items-baseline justify-between">
            <div>
              <p className="text-sm font-bold uppercase tracking-wider text-brand">Launch</p>
              <p className="mt-1 text-base text-slate-500">Your site live within 5 business days</p>
            </div>
            <p className="text-2xl font-extrabold text-slate-900">$300 <span className="text-sm font-medium text-slate-400">one-time</span></p>
          </div>
          <hr className="my-6 border-slate-100" />
          <div className="flex items-baseline justify-between">
            <div>
              <p className="text-sm font-bold uppercase tracking-wider text-brand">Monthly</p>
              <p className="mt-1 text-base text-slate-500">Hosting, edits, reviews, photo updates, reports, support</p>
            </div>
            <p className="shrink-0 text-2xl font-extrabold text-slate-900">$50<span className="text-sm font-medium text-slate-400">/mo</span></p>
          </div>
          <hr className="my-6 border-slate-100" />
          <p className="text-center text-sm text-slate-400">No contracts. Cancel anytime. 90-day lead guarantee.</p>
        </div>

        <div className="mt-5 flex items-center justify-center gap-2 rounded-2xl bg-brand px-5 py-4 text-center text-base font-bold text-white">
          <Zap size={18} className="fill-white" />
          First 5 clients: $0 launch fee. Limited time.
        </div>
      </div>
    </section>
  );
}

/* ---------- ABOUT ---------- */
function About() {
  return (
    <section className="border-t border-slate-100 bg-slate-50/60">
      <div className="mx-auto max-w-4xl px-5 py-16 sm:px-8 sm:py-24">
        <h2 className="text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">Who's behind this</h2>
        <div className="mt-9 grid items-center gap-8 sm:grid-cols-[auto_1fr]">
          <img
            src="assets/marcellus.jpeg"
            alt="Marcellus Davenport"
            className="h-32 w-32 shrink-0 rounded-full object-cover object-top ring-8 ring-brand/10"
          />
          <div>
            <p className="text-lg leading-relaxed text-slate-700">
              I'm Marcellus, based in Alexandria, VA. I build websites for local service businesses because most of them are doing great work and getting zero credit for it online. If you want to see what your business could look like before you spend a dollar, get in touch — I'll build you a free preview.
            </p>
            <a
              href="https://www.linkedin.com/in/davenportmarcellus/"
              target="_blank"
              rel="noopener noreferrer"
              className="mt-4 inline-flex items-center gap-2 text-base font-bold text-brand transition hover:gap-3"
            >
              <Linkedin size={18} />
              Connect on LinkedIn
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- CONTACT ---------- */
function Contact() {
  const [form, setForm] = useState({ name: '', business: '', phone: '', work: '' });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = () => { console.log('Free preview request:', form); };

  const fields = [
    { k: 'name', label: 'Your name', type: 'text', placeholder: '' },
    { k: 'business', label: 'Business name', type: 'text', placeholder: '' },
    { k: 'phone', label: 'Phone number', type: 'tel', placeholder: '' },
    { k: 'work', label: 'What kind of work do you do?', type: 'text', placeholder: 'e.g., pressure washing, fence installation' },
  ];

  return (
    <section id="contact" className="mx-auto max-w-2xl px-5 py-16 sm:px-8 sm:py-24">
      <div className="text-center">
        <h2 className="text-3xl font-extrabold leading-tight tracking-tight text-slate-900 sm:text-4xl">
          Want a free preview of what your site could look like?
        </h2>
        <p className="mx-auto mt-3 max-w-xl text-lg text-slate-500">
          Tell me about your business and I'll build a preview within 48 hours. No cost, no commitment.
        </p>
      </div>

      <div className="mt-10 space-y-4">
        {fields.map(({ k, label, type, placeholder }) => (
          <div key={k}>
            <label className="mb-1.5 block text-sm font-semibold text-slate-700">{label}</label>
            <input
              type={type}
              value={form[k]}
              onChange={set(k)}
              placeholder={placeholder}
              className="w-full rounded-xl border border-slate-300 bg-white px-4 py-3.5 text-base text-slate-900 placeholder-slate-400 outline-none transition focus:border-brand focus:ring-2 focus:ring-brand/20"
            />
          </div>
        ))}

        <button
          onClick={submit}
          className="mt-2 flex w-full items-center justify-center gap-2 rounded-xl bg-brand px-6 py-4.5 text-lg font-bold text-white shadow-md shadow-brand/20 transition hover:bg-brand-dark active:scale-[.99]"
          style={{ paddingTop: '1.1rem', paddingBottom: '1.1rem' }}
        >
          Get my free preview
        </button>

        <p className="pt-1 text-center text-base text-slate-500">
          Or call/text me directly at{' '}
          <a href="tel:+17035550100" className="font-bold text-brand">(703) 555-0100</a>
        </p>
      </div>
    </section>
  );
}

/* ---------- FOOTER ---------- */
function Footer() {
  return (
    <footer className="border-t border-slate-100 bg-white">
      <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-5 py-7 text-sm text-slate-400 sm:flex-row sm:px-8">
        <div className="flex items-center gap-2">
          <LogoMark className="h-6 w-6" />
          <span>© 2026 BrightStorefront</span>
        </div>
        <div className="flex items-center gap-5">
          <a
            href="https://www.linkedin.com/in/davenportmarcellus/"
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-1.5 transition hover:text-brand"
          >
            <Linkedin size={15} /> LinkedIn
          </a>
          <a href="#" className="transition hover:text-slate-700">Privacy</a>
          <a href="#" className="transition hover:text-slate-700">Terms</a>
        </div>
      </div>
    </footer>
  );
}

/* ---------- APP ---------- */
function App() {
  return (
    <div className="min-h-screen bg-white text-slate-900 antialiased">
      <Nav />
      <main>
        <Hero />
        <Problem />
        <Package />
        <Example />
        <HowItWorks />
        <WhoFor />
        <Pricing />
        <About />
        <Contact />
      </main>
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);