// scenes-visit.jsx — Testimonials/Trust + Visit (form + contact) + Footer

/* ============================================================
   8. TRUST/TESTIMONIALS — short editorial blockquotes
   ============================================================ */
function TrustScene() {
  const quotes = [
    {
      q: "Twenty years of going to the same chair. Dr. Singh has looked after three generations of my family — and we wouldn't go anywhere else.",
      a: "Mr. R. Prasad",
      sub: "Patient since 2006",
    },
    {
      q: "He told me I didn't need the crown the other clinic was pushing. Just a filling. That kind of honesty is why I keep coming back.",
      a: "Mrs. P. Sharma",
      sub: "Patient · Kankarbagh",
    },
    {
      q: "Dr. Anikesh was gentle with my five-year-old in a way I didn't think was possible. She actually asked when we're going back.",
      a: "Ms. K. Verma",
      sub: "Mother · Kumhrar",
    },
  ];

  return (
    <section className="full paper" style={{
      background: 'var(--cream-soft)',
      padding: 'clamp(80px, 13vw, 180px) clamp(20px, 6vw, 96px)',
      minHeight: 'auto',
    }}>
      <div style={{ maxWidth: 1380, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 'clamp(50px, 8vw, 80px)' }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 18 }}>● In their words</div>
          </Reveal>
          <Reveal delay={0.06}>
            <h2 className="h-serif" style={{
              fontSize: 'clamp(32px, 4.8vw, 70px)',
              margin: 0, color: 'var(--navy)', fontWeight: 400, maxWidth: 800, marginInline: 'auto',
              lineHeight: 1.1,
            }}>
              The kind of trust that <span className="accent">spans generations.</span>
            </h2>
          </Reveal>
        </div>

        <div className="trust-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 'clamp(20px, 3vw, 48px)',
        }}>
          {quotes.map((q, i) => (
            <Reveal key={i} delay={i * 0.08} y={36}>
              <figure style={{
                margin: 0,
                padding: 'clamp(28px, 3vw, 44px)',
                background: 'var(--cream)',
                border: '1px solid rgba(201,165,91,.25)',
                borderRadius: 4,
                position: 'relative',
                height: '100%',
                display: 'flex', flexDirection: 'column',
              }}>
                <div style={{
                  position: 'absolute', top: 14, left: 24,
                  fontFamily: 'var(--f-display)',
                  fontSize: 60, lineHeight: 1, color: 'var(--gold)', opacity: 0.4,
                }}>“</div>
                <blockquote className="h-serif" style={{
                  margin: '22px 0 28px',
                  fontSize: 'clamp(19px, 1.55vw, 23px)',
                  lineHeight: 1.55,
                  color: 'var(--navy)',
                  flex: 1,
                }}>
                  {q.q}
                </blockquote>
                <figcaption>
                  <div className="hairline" style={{ marginBottom: 16, maxWidth: 80 }} />
                  <div className="h-display" style={{ fontSize: 14, letterSpacing: '0.18em', color: 'var(--navy)' }}>
                    {q.a}
                  </div>
                  <div className="eyebrow" style={{ fontSize: 10, marginTop: 4, color: 'var(--gold-deep)' }}>
                    {q.sub}
                  </div>
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   9. VISIT — bigger, no corner-bracket chrome, with interactive map
   ============================================================ */
function VisitScene() {
  const [form, setForm] = useState({ name: '', phone: '', message: '', service: '' });
  const [sent, setSent] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.phone) return;
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };

  // Google Maps embed — no API key needed for basic place embed.
  const mapSrc = 'https://maps.google.com/maps?width=100%25&height=100%25&hl=en&q=Dental+Avenue+Kankarbagh+Kumhrar+Patna+800020&t=&z=14&ie=UTF8&iwloc=B&output=embed';
  const directionsUrl = 'https://www.google.com/maps/dir/?api=1&destination=Dental+Avenue+Clinic+Kankarbagh+Kumhrar+Patna';

  return (
    <section id="visit" style={{ background: 'var(--cream)' }}>
      {/* Gold-curve divider, mirroring the business card */}
      <div style={{ background: 'var(--cream)', lineHeight: 0 }}>
        <GoldWave height={140} fillTop="var(--cream)" fillBottom="var(--navy-deep)" />
      </div>

      <div style={{
        background: 'var(--navy-deep)',
        color: 'var(--cream)',
        padding: 'clamp(80px, 10vw, 150px) clamp(28px, 6vw, 96px) clamp(90px, 11vw, 150px)',
      }}>
        <div style={{ maxWidth: 1480, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 90 }}>
            <Reveal>
              <div className="eyebrow" style={{ color: 'var(--gold)', marginBottom: 22 }}>● Visit Dental Avenue</div>
            </Reveal>
            <Reveal delay={0.06}>
              <h2 className="h-serif" style={{
                fontSize: 'clamp(44px, 6vw, 92px)',
                margin: 0, color: 'var(--cream)', fontWeight: 400, maxWidth: 1000, marginInline: 'auto',
                lineHeight: 1.05,
              }}>
                We'd be glad to <span className="accent">see you in the chair.</span>
              </h2>
            </Reveal>
            <Reveal delay={0.12}>
              <p style={{
                marginTop: 28,
                fontFamily: 'var(--f-serif)',
                fontSize: 'clamp(18px, 1.5vw, 22px)',
                lineHeight: 1.6,
                color: 'rgba(245,239,228,.74)',
                maxWidth: 640,
                marginInline: 'auto',
              }}>
                Tell us when works for you. We typically respond within a few hours.
                For same-day urgent care, please call directly.
              </p>
            </Reveal>
          </div>

          {/* Main grid: form | info-stack */}
          <div className="visit-grid">
            {/* LEFT — appointment form */}
            <Reveal y={30}>
              <form onSubmit={submit} className="visit-form" style={{
                padding: 'clamp(36px, 4.5vw, 64px)',
                background: 'rgba(245,239,228,.04)',
                border: '1px solid rgba(201,165,91,.22)',
                color: 'var(--cream)',
                height: '100%',
                display: 'flex', flexDirection: 'column',
              }}>
                <div className="eyebrow" style={{ color: 'var(--gold)', marginBottom: 14 }}>Request an appointment</div>
                <h3 className="h-serif" style={{
                  fontSize: 'clamp(28px, 2.6vw, 40px)',
                  margin: '0 0 36px',
                  color: 'var(--cream)',
                  fontWeight: 400,
                  lineHeight: 1.15,
                }}>
                  Tell us a little about <span className="accent">your visit.</span>
                </h3>

                <div className="form-row dark">
                  <label>Your name</label>
                  <input type="text" value={form.name} onChange={e => setForm({ ...form, name: e.target.value })}
                         placeholder="e.g. Anjali Kumari" />
                </div>
                <div className="form-row dark">
                  <label>Phone</label>
                  <input type="tel" value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })}
                         placeholder="+91 ··········" />
                </div>
                <div className="form-row dark">
                  <label>Concern (optional)</label>
                  <select value={form.service} onChange={e => setForm({ ...form, service: e.target.value })}>
                    <option value="" style={{ color: '#000' }}>— Choose if you know —</option>
                    {SERVICES.map(s => <option key={s.n} value={s.name} style={{ color: '#000' }}>{s.name}</option>)}
                    <option value="Other / Not sure" style={{ color: '#000' }}>Other / Not sure</option>
                  </select>
                </div>
                <div className="form-row dark">
                  <label>Message</label>
                  <textarea value={form.message} onChange={e => setForm({ ...form, message: e.target.value })}
                            placeholder="A few words about what's bothering you, when you'd like to come in…"
                            rows={3} />
                </div>

                <div style={{ marginTop: 'auto', paddingTop: 18, display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
                  <button type="submit" className="btn btn-gold">
                    {sent ? '✓ Request received' : 'Send request'}
                  </button>
                  <span style={{ fontSize: 13, opacity: 0.6, fontFamily: 'var(--f-serif)' }}>
                    or call <a href="tel:+917004610860" style={{ color: 'var(--gold-light)', borderBottom: '1px solid currentColor' }}>+91 7004 610 860</a>
                  </span>
                </div>
              </form>
            </Reveal>

            {/* RIGHT — info card stacked above map */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
              <Reveal y={30} delay={0.08}>
                <div className="visit-info" style={{
                  padding: 'clamp(32px, 4vw, 56px)',
                  background: 'var(--cream)',
                  color: 'var(--navy)',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginBottom: 30 }}>
                    <LogoMark size={66} />
                    <div>
                      <div className="h-display" style={{ fontSize: 22, letterSpacing: '0.14em', color: 'var(--navy)' }}>
                        DENTAL AVENUE
                      </div>
                      <div className="eyebrow" style={{ color: 'var(--gold-deep)', marginTop: 6 }}>Advanced Dental Care</div>
                    </div>
                  </div>

                  <ContactRow label="Address" value={<>Dental Avenue Clinic, 1<sup>st</sup> floor,<br />beside Sun Hospital, Kankarbagh old<br />bypass road, Kumhrar, Patna — 800020</>} />
                  <ContactRow label="Hours" value={<><strong style={{ fontWeight: 600 }}>11:00 AM — 7:00 PM</strong><br /><span style={{ opacity: .62, fontSize: 15 }}>All days · Closed Friday & Sunday</span></>} />
                  <ContactRow label="Phone" value={<>
                    <a href="tel:+917004610860" style={{ borderBottom: '1px solid var(--gold)' }}>+91 7004 610 860</a>
                    <br />
                    <a href="tel:+919334269404" style={{ borderBottom: '1px solid var(--gold)' }}>+91 9334 269 404</a>
                  </>} />
                  <ContactRow label="Email" value={<a href="mailto:dentalavenuepatna@gmail.com" style={{ borderBottom: '1px solid var(--gold)' }}>dentalavenuepatna@gmail.com</a>} last />

                  <div style={{ display: 'flex', gap: 12, marginTop: 30, flexWrap: 'wrap' }}>
                    <a href="tel:+917004610860" className="btn btn-gold" style={{ padding: '14px 22px', fontSize: 12 }}>Call now</a>
                    <a href="https://wa.me/917004610860" target="_blank" rel="noopener" className="btn btn-ghost" style={{ padding: '14px 22px', fontSize: 12 }}>WhatsApp us</a>
                  </div>
                </div>
              </Reveal>

              {/* MAP */}
              <Reveal y={30} delay={0.16}>
                <div style={{ position: 'relative' }}>
                  <div className="map-frame">
                    <iframe
                      src={mapSrc}
                      loading="lazy"
                      title="Dental Avenue location"
                      referrerPolicy="no-referrer-when-downgrade"
                    />
                  </div>
                  <a href={directionsUrl} target="_blank" rel="noopener" style={{
                    position: 'absolute',
                    right: 16, bottom: 16,
                    background: 'var(--navy)',
                    color: 'var(--gold-light)',
                    border: '1px solid var(--gold)',
                    padding: '12px 18px',
                    fontFamily: 'var(--f-sans)',
                    fontSize: 11.5,
                    letterSpacing: '0.22em',
                    textTransform: 'uppercase',
                    display: 'inline-flex', alignItems: 'center', gap: 8,
                    boxShadow: '0 8px 22px rgba(0,0,0,.35)',
                  }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                      <path d="M3 12L21 12M21 12L15 6M21 12L15 18" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                    Get directions
                  </a>
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactRow({ label, value, last }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '88px 1fr',
      gap: 24,
      padding: '18px 0',
      borderBottom: last ? 'none' : '1px solid rgba(11,30,63,.08)',
      alignItems: 'baseline',
    }}>
      <div className="eyebrow" style={{ fontSize: 10, color: 'var(--gold-deep)' }}>{label}</div>
      <div style={{ fontFamily: 'var(--f-serif)', fontSize: 'clamp(17px, 1.25vw, 19px)', lineHeight: 1.55, color: 'var(--navy)' }}>{value}</div>
    </div>
  );
}

/* ============================================================
   10. FOOTER
   ============================================================ */
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 22 }}>
            <LogoMark size={56} />
            <div>
              <div className="h-display" style={{ fontSize: 18, letterSpacing: '0.18em', color: 'var(--cream)' }}>DENTAL AVENUE</div>
              <div className="eyebrow" style={{ color: 'var(--gold)', marginTop: 6 }}>Advanced Dental Care</div>
            </div>
          </div>
          <p style={{ maxWidth: 340 }}>
            A second-generation dental practice in Patna — built on trust, integrity,
            and the kind of care you'd want for your own family.
          </p>
        </div>
        <div>
          <h4>Visit</h4>
          <p>Dental Avenue Clinic<br />1st floor, beside Sun Hospital<br />Kankarbagh old bypass road,<br />Kumhrar, Patna — 800020</p>
        </div>
        <div>
          <h4>Hours</h4>
          <ul>
            <li>11:00 AM – 8:00 PM</li>
            <li style={{ opacity: 0.6 }}>All days · Open</li>
            <li style={{ opacity: 0.55, marginTop: 6 }}>Closed Friday & Sunday</li>
          </ul>
        </div>
        <div>
          <h4>Reach us</h4>
          <ul>
            <li><a href="tel:+917004610860">+91 7004 610 860</a></li>
            <li><a href="tel:+919334269404">+91 9334 269 404</a></li>
            <li><a href="mailto:dentalavenuepatna@gmail.com">dentalavenuepatna@gmail.com</a></li>
            <li><a href="https://wa.me/917004610860" target="_blank" rel="noopener">WhatsApp</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© Dental Avenue · 2026</span>
        <span>Dr. Anikesh Raj · Dr. Santosh Kr Singh · BDS</span>
        <span>Made in Patna · With care</span>
      </div>
    </footer>
  );
}

Object.assign(window, { TrustScene, VisitScene, Footer });