const { useState: useHomeState, useEffect: useHomeEffect, useRef: useHomeRef } = React;

const HISTORY_EVENTS = [
  { year: '1978', title: 'Founded by Dr. Mitchell', desc: 'A one-room dog and cat clinic — one exam table and a jar of biscuits. Dr. Kronk\'s horse clinic operated out of the back of the same building.', color: 'var(--orange-500)' },
  { year: '2004', title: 'Dr. Bennett joins', desc: 'Dr. Bennett joins the practice.', color: 'var(--navy-600)' },
  { year: '2021', title: 'The torch passes', desc: 'Bittersweet — Dr. Mitchell retires and officially passes the torch to Dr. Bennett. The clinic moves to its new location.', color: 'var(--orange-500)', photo: '../../assets/building-photo-hq.png' },
  { year: '2025', title: 'Dr. Lazerson joins', desc: 'Dr. Aaron Lazerson joins the practice — bringing surgery, dental, and a steady hand to the team.', color: 'var(--navy-600)' },
  { year: 'Today', title: 'Still here', desc: 'Just a mile down the road. A slightly more modern building, with the same welcoming feel.', color: 'var(--orange-500)' },
];

function ClinicHistoryTimeline() {
  const [active, setActive] = useHomeState(0);

  return (
    <div style={{
      marginTop: 16,
      background: 'var(--navy-600)',
      borderRadius: 12,
      border: '2px solid var(--ink-900)',
      overflow: 'hidden',
      fontFamily: 'var(--font-body)',
    }}>
      {/* Header */}
      <div style={{
        padding: '14px 18px 10px',
        borderBottom: '1.5px solid rgba(255,255,255,0.1)',
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 16, color: '#fff', letterSpacing: '-0.01em' }}>Clinic History</span>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: 'var(--orange-300)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.12em', marginLeft: 4 }}>Since 1978</span>
      </div>

      {/* Timeline scrubber */}
      <div style={{ display: 'flex', padding: '12px 16px 0', gap: 4 }}>
        {HISTORY_EVENTS.map((e, i) => (
          <button key={i} onClick={() => setActive(i)} style={{
            flex: 1, background: 'none', border: 'none', cursor: 'pointer',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, padding: '0 2px 10px',
          }}>
            <div style={{
              width: '100%', height: 3, borderRadius: 2,
              background: i <= active ? 'var(--orange-500)' : 'rgba(255,255,255,0.18)',
              transition: 'background 300ms',
            }} />
            <span style={{
              fontSize: 10, fontWeight: 700, letterSpacing: '0.06em',
              color: i === active ? 'var(--orange-300)' : 'rgba(255,255,255,0.4)',
              transition: 'color 200ms',
              whiteSpace: 'nowrap',
            }}>{e.year}</span>
          </button>
        ))}
      </div>

      {/* Content panel */}
      <div style={{ padding: '4px 18px 18px', minHeight: 120 }}>
        {HISTORY_EVENTS.map((e, i) => (
          <div key={i} style={{
            display: i === active ? 'block' : 'none',
            animation: 'historyFadeIn 280ms ease',
          }}>
            {e.photo && (
              <div style={{
                aspectRatio: '16/7', borderRadius: 8, marginBottom: 12,
                backgroundImage: `url(${e.photo})`,
                backgroundSize: 'cover', backgroundPosition: 'center',
                border: '2px solid rgba(255,255,255,0.15)',
                transition: 'opacity 300ms',
              }} />
            )}
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: '#fff', marginBottom: 4, lineHeight: 1 }}>{e.title}</div>
            <div style={{ fontSize: 13, color: 'var(--cream-200)', lineHeight: 1.6 }}>{e.desc}</div>
          </div>
        ))}
      </div>

      {/* Prev / Next */}
      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0 14px 14px' }}>
        <button onClick={() => setActive(a => Math.max(0, a - 1))} disabled={active === 0} style={{
          background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.15)',
          color: active === 0 ? 'rgba(255,255,255,0.25)' : '#fff',
          borderRadius: 6, padding: '6px 14px', fontSize: 12, fontWeight: 700,
          fontFamily: 'var(--font-body)', cursor: active === 0 ? 'default' : 'pointer',
          letterSpacing: '0.04em',
        }}>← Earlier</button>
        <button onClick={() => setActive(a => Math.min(HISTORY_EVENTS.length - 1, a + 1))} disabled={active === HISTORY_EVENTS.length - 1} style={{
          background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.15)',
          color: active === HISTORY_EVENTS.length - 1 ? 'rgba(255,255,255,0.25)' : '#fff',
          borderRadius: 6, padding: '6px 14px', fontSize: 12, fontWeight: 700,
          fontFamily: 'var(--font-body)', cursor: active === HISTORY_EVENTS.length - 1 ? 'default' : 'pointer',
          letterSpacing: '0.04em',
        }}>Later →</button>
      </div>

      <style>{`@keyframes historyFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }`}</style>
    </div>
  );
}

function HeroPhotoBlock({ mob }) {
  const [open, setOpen] = useHomeState(false);
  const [showHistory, setShowHistory] = useHomeState(false);

  return (
    <div style={{ position: 'relative' }}>
      {/* Current location */}
      <div style={{
        aspectRatio: '4 / 3', borderRadius: 14,
        border: '3px solid var(--ink-900)',
        boxShadow: mob ? '4px 4px 0 var(--navy-600)' : '8px 8px 0 var(--navy-600)',
        backgroundImage: 'url(../../assets/building-photo-hq.png)',
        backgroundSize: 'cover', backgroundPosition: 'center',
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', bottom: 10, left: 12,
          background: 'rgba(13,12,10,0.65)', backdropFilter: 'blur(6px)',
          color: '#fff', fontFamily: 'var(--font-hand)', fontSize: 15,
          padding: '4px 10px', borderRadius: 6,
        }}>Today · SW 64th Ave</div>
      </div>

      {/* History reveal button */}
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          display: 'flex', alignItems: 'center', gap: 8,
          marginTop: 14, width: '100%',
          background: open ? 'var(--navy-600)' : '#fff',
          color: open ? '#fff' : 'var(--ink-900)',
          border: '2px solid var(--ink-900)',
          boxShadow: open ? '0 0 0' : '3px 3px 0 var(--ink-900)',
          borderRadius: 8, padding: '10px 16px',
          fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 14,
          cursor: 'pointer', letterSpacing: '0.02em',
          transition: 'background 200ms, color 200ms, box-shadow 200ms, transform 200ms',
          transform: open ? 'translate(3px,3px)' : 'translate(0,0)',
        }}
      >
        <span style={{
          display: 'inline-block',
          transition: 'transform 300ms cubic-bezier(0.34,1.56,0.64,1)',
          transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
          fontSize: 16,
        }}>▶</span>
        {open ? 'Hide history' : 'View history — the old location'}
      </button>

      {/* Old location + history timeline — animated slide+fade */}
      <div style={{
        overflow: 'hidden',
        maxHeight: open ? 1000 : 0,
        opacity: open ? 1 : 0,
        transition: 'max-height 500ms cubic-bezier(0.22,0.61,0.36,1), opacity 320ms ease',
        marginTop: open ? 14 : 0,
      }}>
        {/* Old photo */}
        <div style={{
          aspectRatio: '4 / 3', borderRadius: 14,
          border: '3px solid var(--ink-900)',
          boxShadow: mob ? '4px 4px 0 var(--orange-500)' : '8px 8px 0 var(--orange-500)',
          backgroundImage: 'url(../../assets/building-old.png)',
          backgroundSize: 'cover', backgroundPosition: 'center',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', bottom: 10, left: 12,
            background: 'rgba(13,12,10,0.65)', backdropFilter: 'blur(6px)',
            color: '#fff', fontFamily: 'var(--font-hand)', fontSize: 15,
            padding: '4px 10px', borderRadius: 6,
          }}>The original · 6511</div>
        </div>

        {/* "View more history" toggle */}
        <button
          onClick={() => setShowHistory(h => !h)}
          style={{
            display: 'flex', alignItems: 'center', gap: 7,
            marginTop: 10, background: 'none', border: 'none',
            color: 'var(--stone-500)', fontFamily: 'var(--font-body)',
            fontSize: 12, fontWeight: 700, textTransform: 'uppercase',
            letterSpacing: '0.1em', cursor: 'pointer', padding: '4px 0',
          }}
        >
          <span style={{
            display: 'inline-block',
            transition: 'transform 250ms',
            transform: showHistory ? 'rotate(90deg)' : 'rotate(0deg)',
          }}>▶</span>
          {showHistory ? 'Hide clinic history' : 'Explore full clinic history'}
        </button>

        {/* Animated history timeline */}
        <div style={{
          overflow: 'hidden',
          maxHeight: showHistory ? 600 : 0,
          opacity: showHistory ? 1 : 0,
          transition: 'max-height 450ms cubic-bezier(0.22,0.61,0.36,1), opacity 280ms ease',
        }}>
          <ClinicHistoryTimeline />
        </div>
      </div>
    </div>
  );
}

function DavieMap() {
  return (
    <div style={{ height: 280, borderRadius: 12, border: '1.5px solid var(--border-strong,#DCCEB2)', overflow: 'hidden' }}>
      <iframe
        title="Davie Vet Center location"
        width="100%" height="100%"
        frameBorder="0" style={{ border: 0, display: 'block' }}
        referrerPolicy="no-referrer-when-downgrade"
        src="https://maps.google.com/maps?q=5930+SW+64th+Ave,+Davie,+FL+33314&t=&z=17&ie=UTF8&iwloc=&output=embed"
        allowFullScreen
      />
    </div>
  );
}

function HomeScreen({ onNav }) {
  const mob = useIsMobile();
  const pad = mob ? '0 20px' : '0 40px';

  return (
    <div style={{ background: 'var(--cream-50)' }}>
      <NavBar active="Home" onNav={onNav} />

      {/* Hero */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: mob ? '1fr' : '1.2fr 1fr',
        gap: mob ? 28 : 48,
        padding: mob ? '40px 20px 32px' : '72px 40px',
        maxWidth: 1200, margin: '0 auto', alignItems: 'center'
      }}>
        <div>
          <Eyebrow>★ Since 1978 · Davie, FL</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--font-display)',
            fontSize: mob ? 52 : 84,
            color: 'var(--ink-900)', lineHeight: 0.95,
            margin: '14px 0 18px', letterSpacing: '-0.01em'
          }}>
            Good neighbors,<br/>
            <span style={{ fontFamily: 'var(--font-accent)', color: 'var(--navy-600)', display: 'inline-block', transform: 'rotate(-2deg)' }}>good medicine.</span>
          </h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: mob ? 16 : 20, lineHeight: 1.6, color: 'var(--fg2)', maxWidth: 480, marginBottom: 24 }}>
            Nearly 50 years of trusted care in Davie. New space since 2021, but still the same familiar faces and dedication.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Button variant="accent" onClick={() => onNav && onNav('Visit')} style={mob ? { flex: 1 } : {}}>Book Appointment</Button>
            <a href="tel:+19545814971" style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15,
              padding: '12px 22px', borderRadius: 6,
              background: '#fff', color: 'var(--navy-600)',
              border: '2px solid var(--ink-900)', boxShadow: '3px 3px 0 var(--ink-900)',
              textDecoration: 'none', letterSpacing: '0.02em',
              ...(mob ? { flex: 1 } : {})
            }}>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
              Or call us
            </a>
            <a href="sms:+19545814971" style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15,
              padding: '12px 22px', borderRadius: 6,
              background: '#fff', color: 'var(--navy-600)',
              border: '2px solid var(--ink-900)', boxShadow: '3px 3px 0 var(--ink-900)',
              textDecoration: 'none', letterSpacing: '0.02em',
              ...(mob ? { flex: 1 } : {})
            }}>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
              Or text us
            </a>
            <Button variant="ghost" onClick={() => onNav && onNav('Services')} style={mob ? { flex: 1 } : {}}>Our Services</Button>
          </div>
        </div>
        <HeroPhotoBlock mob={mob} />
      </div>

      {/* Services strip */}
      <div style={{ padding: mob ? '24px 20px 48px' : '32px 40px 64px', maxWidth: 1200, margin: '0 auto' }}>
        <StarRule width={200} />
        <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr 1fr' : 'repeat(4, 1fr)', gap: mob ? 12 : 20, marginTop: 36 }}>
          {[
            { t: 'Wellness', d: 'Annual exams, vaccines, weight checks.' },
            { t: 'Dental', d: 'Cleanings, extractions, the works.' },
            { t: 'Surgery', d: 'Spays, neuters, and soft-tissue.' },
            { t: 'Urgent', d: 'Same-day slots for sudden issues.' },
          ].map(s => (
            <div key={s.t} style={{ background: '#fff', padding: mob ? '18px 16px' : '24px 22px', border: '1px solid var(--border)', borderRadius: 14, boxShadow: 'var(--shadow-sm)' }}>
              <Eyebrow>Service</Eyebrow>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: mob ? 20 : 24, color: 'var(--ink-900)', margin: '6px 0 8px' }}>{s.t}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--fg2)', lineHeight: 1.5 }}>{s.d}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Testimonial */}
      <div style={{ background: 'var(--navy-600)', padding: mob ? '48px 20px' : '72px 40px', color: '#fff' }}>
        <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
          <Eyebrow color="var(--orange-300)">What folks say</Eyebrow>
          <blockquote style={{ fontFamily: 'var(--font-display)', fontSize: mob ? 26 : 44, lineHeight: 1.15, color: '#fff', margin: '16px 0 20px' }}>
            "They knew my dog's name before mine, and he wasn't nervous once."
          </blockquote>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--cream-200)' }}>— Lucia R. · Biscuit's human</div>
        </div>
      </div>

      {/* Leave a review CTA */}
      <div style={{ padding: mob ? '48px 20px' : '64px 40px', maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginBottom: 16 }}>
          {[0,1,2,3,4].map(i => (
            <svg key={i} viewBox="0 0 24 24" style={{ width: 28, height: 28 }}>
              <polygon fill="var(--orange-500)" points="12,1 15,9 23,9 16.5,14 19,22 12,17 5,22 7.5,14 1,9 9,9"/>
            </svg>
          ))}
        </div>
        <Eyebrow>Loved your visit?</Eyebrow>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: mob ? 28 : 40, color: 'var(--ink-900)', margin: '10px 0 14px', lineHeight: 1.1 }}>
          Leave us a Google review.
        </h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: mob ? 15 : 17, color: 'var(--fg2)', lineHeight: 1.6, maxWidth: 480, margin: '0 auto 28px' }}>
          A quick note from you helps other Davie pet owners find us. It only takes a minute.
        </p>
        <a href={GOOGLE_REVIEW_URL} target="_blank" rel="noopener noreferrer" style={{
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15,
          padding: '14px 28px', borderRadius: 6,
          background: 'var(--orange-500)', color: '#fff',
          border: '2px solid var(--ink-900)', boxShadow: '3px 3px 0 var(--ink-900)',
          textDecoration: 'none', letterSpacing: '0.02em',
        }}>
          Write a review
        </a>
      </div>

      {/* Visit block */}
      <div style={{ padding: mob ? '40px 20px' : '72px 40px', maxWidth: 1200, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1fr',
          gap: mob ? 24 : 40, alignItems: 'center',
          background: '#fff', border: '2px solid var(--ink-900)',
          boxShadow: mob ? '3px 3px 0 var(--ink-900)' : '4px 4px 0 var(--ink-900)',
          padding: mob ? 24 : 40, borderRadius: 4
        }}>
          <div>
            <Eyebrow>Visit</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: mob ? 30 : 42, color: 'var(--ink-900)', margin: '10px 0 14px', lineHeight: 1.05 }}>
              Drop in, or give us a ring.
            </h2>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: mob ? 15 : 17, color: 'var(--fg2)', lineHeight: 1.6, marginBottom: 20 }}>
              5930 SW 64th Ave · Davie, FL 33314<br/>Mon–Fri · 9–5 · 
            </div>
            <a href="tel:9545814971" style={{ display: 'inline-block', background: 'var(--orange-500)', color: '#fff', padding: '14px 22px', border: '2px solid var(--ink-900)', boxShadow: '3px 3px 0 var(--ink-900)', borderRadius: 6, fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15, textDecoration: 'none', letterSpacing: '0.02em' }}>
              (954) 581-4971
            </a>
          </div>
          <DavieMap />
        </div>
      </div>

      <Footer />
    </div>
  );
}

window.HomeScreen = HomeScreen;