/* App — root component, address entry, hero variants, mounts everything. */
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "Get a fair cash offer in **24 hours.**",
  "subhead": "No fees. No repairs. Close in as few as 14 days. We handle the paperwork, the timeline, and the stress — you pick the closing date and walk away with a check.",
  "videoSrc": "https://tq2dbwtr6wuoq2kd.public.blob.vercel-storage.com/Main%20Website%20Videos%20/hf_20260426_190905_72a5a348-3e07-423a-b167-94c1f562a520.mp4",
  "salesLetterSrc": "https://tq2dbwtr6wuoq2kd.public.blob.vercel-storage.com/Elevate%20Homes%20VSL.mp4",
  "variant": "centered",
  "showGlassPanel": true,
  "accent": "#3bb8f4"
} /*EDITMODE-END*/;

// Allow ?variant=centered|split|card to override the default (used by variants canvas)
const __urlVariant = (() => {
  try {return new URLSearchParams(window.location.search).get('variant');}
  catch (e) {return null;}
})();
const __initialDefaults = __urlVariant ?
Object.assign({}, TWEAKS_DEFAULTS, { variant: __urlVariant }) :
TWEAKS_DEFAULTS;

function App() {
  const [tweaks, setTweak] = useTweaks(__initialDefaults);
  const [address, setAddress] = useStateApp('');
  const [submittedAddress, setSubmittedAddress] = useStateApp(null);
  const [stuck, setStuck] = useStateApp(false);
  const [pickerOpen, setPickerOpen] = useStateApp(false);

  // Apply accent live
  useEffectApp(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accent);
  }, [tweaks.accent]);

  // Stick the address bar to the top after the user scrolls past the first viewport
  useEffectApp(() => {
    const onScroll = () => {
      setStuck(window.scrollY > window.innerHeight * 0.6);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const submit = (e) => {
    e && e.preventDefault();
    if (!address.trim()) return;
    setSubmittedAddress(address.trim());
  };

  const variant = tweaks.variant || 'centered';
  const heroAlign =
  variant === 'split' ? { alignItems: 'flex-start', textAlign: 'left', paddingLeft: '6vw', paddingRight: '6vw' } :
  variant === 'card' ? { alignItems: 'center', textAlign: 'center' } :
  { alignItems: 'center', textAlign: 'center' };

  return (
    <>
      <ScrollVideo src={tweaks.videoSrc} />
      <PillNav items={['HOME', 'PROCESS', 'BLOG', 'REVIEWS', 'CONTACT']} />

      <div style={{ position: 'relative', height: '220vh', fontFamily: "Manrope" }} className={`variant-${variant}`}>
        {/* Layer 2: Eyebrow + ScrollFloat headline */}
        <div style={{
          position: 'fixed', left: 0, right: 0,
          top: '22%',
          padding: '0 32px',
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          justifyContent: 'center',
          pointerEvents: 'none', zIndex: 10,
          opacity: stuck ? 0 : 1,
          visibility: stuck ? 'hidden' : 'visible',
          transition: 'opacity 0.35s ease, visibility 0.35s ease',
          ...heroAlign
        }}>
          <span className="hero-eyebrow">Tampa Bay Homeowners</span>
          <ScrollFloat
            style={{
              fontFamily: 'Manrope, system-ui, sans-serif',
              fontSize: 'clamp(40px, 5.5vw, 88px)',
              fontWeight: 800,
              lineHeight: 1.05,
              letterSpacing: '-0.025em',
              color: '#fff',
              width: '100%',
              maxWidth: variant === 'split' ? '100%' : '14ch',
              marginLeft: variant === 'split' ? '0' : 'auto',
              marginRight: variant === 'split' ? '0' : 'auto',
              textAlign: variant === 'split' ? 'left' : 'center',
              textShadow: '0 4px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4)',
              textWrap: 'balance'
            }}>
            
            {tweaks.headline}
          </ScrollFloat>
        </div>

        {/* Layer 2.5: Address entry — sits BELOW the headline, sticks to top after first scroll */}
        <div className={stuck ? 'address-sticky' : ''} style={{ ...(stuck ? {} : {
            position: 'fixed', left: 0, right: 0,
            top: variant === 'card' ? '66%' : '62%',
            transform: 'translateY(-50%)',
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            padding: '0 24px',
            zIndex: 12, pointerEvents: 'auto'
          }), padding: "0px" }}>
          {variant !== 'split' && !stuck &&
          <p className="subhead-static" style={{
            color: '#fff',
            fontFamily: 'Manrope, system-ui, sans-serif',


            lineHeight: 1.55,

            textAlign: 'center',
            maxWidth: 560,
            textWrap: 'pretty',
            textShadow: '0 2px 16px rgba(0,0,0,0.85), 0 1px 4px rgba(0,0,0,0.7)', margin: "0 auto 36px", width: "100%", fontWeight: "500", fontSize: "18px"
          }}>
              {tweaks.subhead}
            </p>
          }

          <form className="address-shell" onSubmit={submit} role="search" aria-label="Get a cash offer" data-elevate-attribution>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" style={{ flexShrink: 0, color: '#888' }} aria-hidden="true">
              <path d="M10 1.5C6 1.5 3 4.5 3 8.2c0 5 7 10.3 7 10.3s7-5.3 7-10.3c0-3.7-3-6.7-7-6.7z" stroke="currentColor" strokeWidth="1.4" />
              <circle cx="10" cy="8" r="2.4" stroke="currentColor" strokeWidth="1.4" />
            </svg>
            <input
              type="text"
              placeholder="Enter your home address…"
              value={address}
              onChange={(e) => setAddress(e.target.value)}
              onFocus={(e) => {
                if (window.innerWidth <= 768) {
                  e.target.blur();
                  setPickerOpen(true);
                }
              }}
              aria-label="Property address" />

            <button type="submit" className="address-cta" disabled={!address.trim()}>
              Get Cash Offer
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
                <path d="M2 7H12M12 7L7.5 2.5M12 7L7.5 11.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>
          </form>

          <p className="address-help" style={{ fontSize: 12, margin: '14px 0 0', letterSpacing: '0.04em' }}>No obligation · No fees · Offer in 24 hours</p>
        </div>

        {/* Layer 3: Glass panel about section */}
        {tweaks.showGlassPanel && <GlassPanel />}
      </div>

      {/* Sales-letter video section, immediately after the hero scroll area */}
      <SalesLetter
        src={tweaks.salesLetterSrc}
        title="Why Tampa Bay sellers choose Elevate." />
      

      {/* PROCESS — tabbed video gallery */}
      <ProcessSection />

      {/* SEO content for blog optimization — visually hidden but crawlable */}
      <section style={{
        position: 'absolute', width: 1, height: 1, padding: 0, margin: -1,
        overflow: 'hidden', clip: 'rect(0,0,0,0)', whiteSpace: 'nowrap', border: 0
      }} aria-hidden="false">
        <h1>Sell Your Tampa Bay Home Fast for Cash | Elevate Home Buyer</h1>
        <h2>Local Tampa Bay home buyers — fair cash offers, 7-day close, zero fees</h2>
        <p>
          Elevate Home Buyer is a locally-owned Tampa Bay home buying company.
          We purchase houses, condos, townhomes, and multi-family properties in any condition
          across Hillsborough, Pinellas, Pasco, Manatee, and Sarasota counties. Skip the agent,
          skip the showings, skip the repairs — get a fair cash offer in 24 hours and pick your
          own closing date. We help homeowners facing relocation, downsizing, financial hardship,
          inherited property, and tired-landlord situations across St. Petersburg, Clearwater,
          Brandon, Riverview, Lakeland, and the greater Tampa Bay area.
        </p>
        <p>
          Keywords: sell my house fast Tampa, cash for homes Tampa Bay, we buy houses St. Petersburg,
          sell house as-is Florida, cash home buyers Clearwater, fast house sale Hillsborough County.
        </p>
      </section>

      {/* Sitewide footer */}
      <footer style={{
        background: '#050505',
        borderTop: '1px solid rgba(255,255,255,0.08)',
        padding: '40px 24px 28px',
        position: 'relative',
        zIndex: 5,
        fontFamily: 'Manrope, system-ui, sans-serif'
      }}>
        <div style={{
          maxWidth: 1100, margin: '0 auto',
          display: 'flex', flexWrap: 'wrap',
          justifyContent: 'space-between', alignItems: 'center',
          gap: 16, fontSize: 13, color: 'rgba(255,255,255,0.65)'
        }}>
          <div>
            <strong style={{ color: '#fff' }}>Elevate Home Buyer</strong> · Locally owned · Tampa Bay, FL<br/>
            <a href="tel:+18132133578" style={{ color: 'var(--accent, #3bb8f4)', textDecoration: 'none', fontWeight: 600 }}>(813) 213-3578</a>
          </div>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <a href="/blog/" style={{ color: 'rgba(255,255,255,0.65)', textDecoration: 'none' }}>Blog</a>
            <a href="/reviews/" style={{ color: 'rgba(255,255,255,0.65)', textDecoration: 'none' }}>Reviews</a>
            <a href="/legal/privacy.html" style={{ color: 'rgba(255,255,255,0.65)', textDecoration: 'none' }}>Privacy</a>
            <a href="/legal/terms.html" style={{ color: 'rgba(255,255,255,0.65)', textDecoration: 'none' }}>Terms</a>
          </div>
        </div>
        <p style={{
          maxWidth: 1100, margin: '14px auto 0',
          fontSize: 11, color: 'rgba(255,255,255,0.4)', lineHeight: 1.55
        }}>
          © 2026 Elevate Home Buyer. We are not licensed real estate agents and do not represent buyers or sellers. We purchase homes directly. Information on this site is for educational purposes and does not constitute legal, tax, or financial advice. Service area: Hillsborough, Pinellas, Pasco, Manatee, and Sarasota counties.
        </p>
      </footer>

      {/* Mobile full-screen address picker (Airbnb-style) */}
      {pickerOpen && (
        <AddressPicker
          address={address}
          setAddress={setAddress}
          onSubmit={(addr) => {
            const v = (addr || address || '').trim();
            if (!v) return;
            setAddress(v);
            setPickerOpen(false);
            setSubmittedAddress(v);
          }}
          onClose={() => setPickerOpen(false)}
        />
      )}

      {/* Lead form modal */}
      {submittedAddress &&
      <LeadForm address={submittedAddress} onClose={() => setSubmittedAddress(null)} />
      }

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero">
          <TweakText label="Headline (use \\n for new line)" value={tweaks.headline.replace(/\n/g, '\\n')} onChange={(v) => setTweak('headline', v.replace(/\\n/g, '\n'))} />
          <TweakText label="Subhead" value={tweaks.subhead} onChange={(v) => setTweak('subhead', v)} />
          <TweakRadio label="Layout variant" value={tweaks.variant} options={[{ label: 'Centered', value: 'centered' }, { label: 'Split', value: 'split' }, { label: 'Card', value: 'card' }]} onChange={(v) => setTweak('variant', v)} />
        </TweakSection>
        <TweakSection title="Visuals">
          <TweakColor label="Accent color" value={tweaks.accent} onChange={(v) => setTweak('accent', v)} />
          <TweakText label="Background video URL" value={tweaks.videoSrc} onChange={(v) => setTweak('videoSrc', v)} />
          <TweakToggle label="Show glass About panel" value={tweaks.showGlassPanel} onChange={(v) => setTweak('showGlassPanel', v)} />
        </TweakSection>
      </TweaksPanel>
    </>);

}

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