/* =================================================
   Reusable components + helpers
   Exposes to window so other scripts can use them
   ================================================= */

const { useState, useEffect, useRef } = React;

/* ---------- Small icon set (custom mini-SVGs) ---------- */
const Icon = {
  Trophy: (p) => (
    <svg viewBox="0 0 16 16" fill="none" {...p}>
      <path d="M3 3h10v3a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V3z" fill="currentColor"/>
      <path d="M1.5 4h1.5v2a1.5 1.5 0 0 1-1.5-1.5V4zm13 0h-1.5v2a1.5 1.5 0 0 0 1.5-1.5V4z" fill="currentColor"/>
      <path d="M6 9h4v2H6V9zm-1 2h6v1.5H5V11z" fill="currentColor"/>
    </svg>
  ),
  Phone: (p) => (
    <svg viewBox="0 0 16 16" fill="none" {...p}>
      <path d="M3 2.5C3 2.2 3.2 2 3.5 2h2.4c.3 0 .5.2.6.4l.8 2.4c.1.2 0 .5-.2.6L5.6 6.5c.7 1.6 1.9 2.8 3.5 3.5l1.1-1.5c.2-.2.4-.3.6-.2l2.4.8c.3.1.4.3.4.6V12c0 1.1-.9 2-2 2A11 11 0 0 1 3 3v-.5z" stroke="currentColor" strokeWidth="1.2"/>
    </svg>
  ),
  Whatsapp: (p) => (
    <svg viewBox="0 0 16 16" fill="currentColor" {...p}>
      <path d="M8 1.3a6.7 6.7 0 0 0-5.8 10l-1 3.7 3.8-1A6.7 6.7 0 1 0 8 1.3zm3.9 9.4c-.2.5-.9 1-1.5 1-.4 0-1 .1-3-.8-2.5-1-4.1-3.6-4.2-3.7-.1-.2-1-1.3-1-2.5s.6-1.7.9-1.9c.2-.2.5-.3.7-.3h.5c.2 0 .4-.1.6.5.2.5.7 1.8.8 1.9.1.1.1.3 0 .4-.1.2-.2.3-.3.4-.2.2-.3.4-.5.5-.1.2-.3.3-.1.6.2.3.7 1.2 1.6 1.9 1.1 1 2 1.2 2.4 1.4.3.2.6.1.7-.1.2-.2.7-.8.9-1.1.2-.3.4-.2.6-.1.3.1 1.7.8 2 .9.3.2.5.2.5.4.1.1.1.7-.1 1.2z"/>
    </svg>
  ),
  Star: (p) => (
    <svg viewBox="0 0 16 16" fill="currentColor" {...p}>
      <path d="M8 1l2.3 4.7 5.2.7-3.8 3.6.9 5.2L8 12.7l-4.6 2.5.9-5.2L.5 6.4l5.2-.7L8 1z"/>
    </svg>
  ),
  Quote: (p) => (
    <svg viewBox="0 0 24 18" fill="currentColor" {...p}>
      <path d="M0 18V11C0 4.9 3.2 1 8.4 0l1 2.4C6.7 3.4 5.2 5.1 5 7.5h3.5V18H0zm14 0V11c0-6.1 3.2-10 8.4-11L23.4 2.4C20.7 3.4 19.2 5.1 19 7.5h3.5V18H14z"/>
    </svg>
  ),
  ArrowR: (p) => (
    <svg viewBox="0 0 16 16" fill="none" {...p}>
      <path d="M3 8h10m0 0L9 4m4 4l-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Pin: (p) => (
    <svg viewBox="0 0 16 16" fill="none" {...p}>
      <path d="M8 14s5-4.4 5-8.5A5 5 0 1 0 3 5.5C3 9.6 8 14 8 14z" stroke="currentColor" strokeWidth="1.3"/>
      <circle cx="8" cy="5.5" r="1.7" stroke="currentColor" strokeWidth="1.3"/>
    </svg>
  ),
  Mail: (p) => (
    <svg viewBox="0 0 16 16" fill="none" {...p}>
      <rect x="1.5" y="3" width="13" height="10" rx="1.5" stroke="currentColor" strokeWidth="1.2"/>
      <path d="M2 4l6 5 6-5" stroke="currentColor" strokeWidth="1.2"/>
    </svg>
  ),
  Clock: (p) => (
    <svg viewBox="0 0 16 16" fill="none" {...p}>
      <circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeWidth="1.2"/>
      <path d="M8 4v4l2.5 2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
    </svg>
  ),
};

/* ---------- Logo lockup ---------- */
const Brandmark = ({ tone = "dark" }) => (
  <a href="index.html" className="hdr__brand" aria-label="New Life Advanced Homeo">
    <img src="assets/images/nlah_logo_transparent.png" alt="" />
    <div className="hdr__brand-lock">
      <span className="l1" style={{ color: tone === "dark" ? "var(--navy-900)" : "#fff" }}>New Life Advanced Homeo</span>
      <span className="l2">New Hope for Difficult Diseases</span>
    </div>
  </a>
);

/* ---------- Announcement bar (Award) ---------- */
const Announce = () => (
  <div className="announce">
    <div className="wrap">
      <div className="announce__row">
        <span className="et-badge">
          <Icon.Trophy width="12" height="12" />
          ET 2025
        </span>
        <span>Recognized as <b style={{color:'#fff'}}>Best Homeopathy Clinic 2025</b> by The Economic Times</span>
        <span className="dot" />
        <span style={{opacity:0.78}}>Serving patients across the world since 1973</span>
      </div>
    </div>
  </div>
);

/* ---------- Header ---------- */
const Header = ({ onBook }) => (
  <header className="hdr" data-comment-anchor="header">
    <div className="hdr__inner">
      <Brandmark tone="dark" />
      <nav className="hdr__nav">
        <a href="#conditions">Specialities</a>
        <a href="#daht">DAHT Therapy</a>
        <a href="#doctor">Doctor</a>
        <a href="testimonials.html">Testimonials</a>
      </nav>
      <div className="hdr__cta-wrap">
        <a href="tel:+919866196309" className="hdr__phone">+91 9866196309</a>
        <button className="btn btn--primary" onClick={onBook}>
          Book Consult <span className="arrow" />
        </button>
      </div>
      <MobileNav onBook={onBook} />
    </div>
  </header>
);

/* ---------- Booking form (compact, used in hero) ---------- */
const BookingFormCompact = ({ tone = "light" }) => {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name: "", phone: "", condition: "" });
  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
  };
  if (sent) {
    return (
      <div className="book-card">
        <div className="book-card__ribbon">Free · 15 min</div>
        <div className="book-card__success">
          <div className="icon">✓</div>
          <h3>We'll call you within 24 hours</h3>
          <p>Dr. Subhash Chandar's team will reach you to schedule a consult and discuss your case.</p>
        </div>
      </div>
    );
  }
  return (
    <form className="book-card" onSubmit={onSubmit}>
      <div className="book-card__ribbon">Free · 15 min call</div>
      <h3 className="book-card__title">Get a call from our doctor</h3>
      <p className="book-card__sub">Share your details. We'll call to understand your case — no obligation.</p>
      <div className="book-card__form">
        <div className="field">
          <label htmlFor="bc-name">Full name</label>
          <input id="bc-name" required value={form.name}
                 onChange={(e)=>setForm({...form, name: e.target.value})}
                 placeholder="e.g. Ramesh Kumar" />
        </div>
        <div className="book-card__row">
          <div className="field">
            <label htmlFor="bc-phone">Phone</label>
            <input id="bc-phone" required type="tel" value={form.phone}
                   onChange={(e)=>setForm({...form, phone: e.target.value})}
                   placeholder="+91 98000 00000" />
          </div>
          <div className="field">
            <label htmlFor="bc-cond">Concern</label>
            <select id="bc-cond" required value={form.condition}
                    onChange={(e)=>setForm({...form, condition: e.target.value})}>
              <option value="">Select…</option>
              <option>Psoriasis / skin</option>
              <option>Asthma / respiratory</option>
              <option>Joint pain / spondylosis</option>
              <option>Chronic liver / kidney</option>
              <option>Crohn's / IBS / gut</option>
              <option>Paralysis / neurological</option>
              <option>Other chronic condition</option>
            </select>
          </div>
        </div>
        <button type="submit" className="btn btn--primary btn--block btn--lg" style={{marginTop:6}}>
          Request a call back <span className="arrow" />
        </button>
        <p className="book-card__finep">By submitting you agree to be contacted regarding your enquiry. We never share your details.</p>
      </div>
    </form>
  );
};

/* ---------- Full booking form (used in final section, dark) ---------- */
const BookingFormFull = () => {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({
    name: "", phone: "", email: "", age: "", condition: "", duration: "", message: "", slot: ""
  });
  if (sent) {
    return (
      <div className="book__form-card">
        <div className="book-card__success" style={{color:'#fff'}}>
          <div className="icon">✓</div>
          <h3 style={{color:'#fff'}}>Thank you, {form.name.split(" ")[0] || "there"}.</h3>
          <p style={{color:'rgba(255,255,255,0.78)'}}>Your appointment request has been received. Dr. Subhash Chandar's team will call you at <b style={{color:'#fff'}}>{form.phone}</b> within 24 hours to confirm.</p>
        </div>
      </div>
    );
  }
  return (
    <form className="book__form-card" onSubmit={(e)=>{e.preventDefault(); setSent(true);}}>
      <h3>Book your appointment</h3>
      <p className="sub">Fill in your details and our care team will reach out to schedule a slot.</p>
      <div className="book-card__form" style={{gap:14}}>
        <div className="book-card__row">
          <div className="field">
            <label>Full name</label>
            <input required value={form.name} onChange={(e)=>setForm({...form, name: e.target.value})} placeholder="Your name" />
          </div>
          <div className="field">
            <label>Age</label>
            <input required type="number" min="1" max="120" value={form.age} onChange={(e)=>setForm({...form, age: e.target.value})} placeholder="e.g. 52" />
          </div>
        </div>
        <div className="book-card__row">
          <div className="field">
            <label>Phone</label>
            <input required type="tel" value={form.phone} onChange={(e)=>setForm({...form, phone: e.target.value})} placeholder="+91 98000 00000" />
          </div>
          <div className="field">
            <label>Email (optional)</label>
            <input type="email" value={form.email} onChange={(e)=>setForm({...form, email: e.target.value})} placeholder="you@email.com" />
          </div>
        </div>
        <div className="book-card__row">
          <div className="field">
            <label>Primary condition</label>
            <select required value={form.condition} onChange={(e)=>setForm({...form, condition: e.target.value})}>
              <option value="">Select…</option>
              <option>Psoriasis</option>
              <option>Varicose veins</option>
              <option>Asthma</option>
              <option>Spondylosis / back pain</option>
              <option>Crohn's disease</option>
              <option>Knee pain / arthritis</option>
              <option>Early paralysis</option>
              <option>Chronic liver disease</option>
              <option>Guillain-Barré syndrome</option>
              <option>Other</option>
            </select>
          </div>
          <div className="field">
            <label>How long you've had it</label>
            <select required value={form.duration} onChange={(e)=>setForm({...form, duration: e.target.value})}>
              <option value="">Select…</option>
              <option>Less than 6 months</option>
              <option>6 months — 2 years</option>
              <option>2 — 5 years</option>
              <option>5 — 10 years</option>
              <option>More than 10 years</option>
            </select>
          </div>
        </div>
        <div className="field">
          <label>Preferred time for call</label>
          <select value={form.slot} onChange={(e)=>setForm({...form, slot: e.target.value})}>
            <option value="">Any time</option>
            <option>Morning (10 AM — 2 PM)</option>
            <option>Evening (4 PM — 8 PM)</option>
          </select>
        </div>
        <div className="field">
          <label>Tell us briefly about your case (optional)</label>
          <textarea value={form.message} onChange={(e)=>setForm({...form, message: e.target.value})}
                    placeholder="Treatments you've tried, current symptoms, anything you'd like Dr. Subhash to know before the call…" />
        </div>
        <button type="submit" className="btn btn--primary btn--block btn--lg" style={{marginTop:8}}>
          Confirm appointment request <span className="arrow" />
        </button>
        <p className="book__finep">Your information is confidential. We typically respond within 24 hours.</p>
      </div>
    </form>
  );
};

/* ---------- Mobile drawer nav (≤980px) ---------- */
const MobileNav = ({ onBook }) => {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  const close = () => setOpen(false);
  return (
    <>
      <button
        className="hdr__burger"
        aria-label={open ? "Close menu" : "Open menu"}
        aria-expanded={open}
        onClick={() => setOpen(true)}
      >
        <span /><span /><span />
      </button>
      <div className={"mnav" + (open ? " mnav--open" : "")} role="dialog" aria-modal="true" aria-hidden={!open}>
        <div className="mnav__scrim" onClick={close} />
        <aside className="mnav__panel">
          <button className="mnav__close" aria-label="Close menu" onClick={close}>×</button>
          <nav className="mnav__links">
            <a href="#conditions" onClick={close}>Specialities</a>
            <a href="#daht" onClick={close}>DAHT Therapy</a>
            <a href="#doctor" onClick={close}>Doctor</a>
            <a href="testimonials.html" onClick={close}>Testimonials</a>
          </nav>
          <div className="mnav__cta">
            <a href="tel:+919866196309" className="mnav__phone">
              <Icon.Phone width="16" height="16" /> +91 9866196309
            </a>
            <a href="https://wa.me/919866196309" className="mnav__wa" target="_blank" rel="noopener noreferrer">
              <Icon.Whatsapp width="16" height="16" /> WhatsApp us
            </a>
            <button
              className="btn btn--primary btn--block"
              onClick={() => { close(); onBook(); }}
            >
              Book Consult <span className="arrow" />
            </button>
          </div>
        </aside>
      </div>
    </>
  );
};

Object.assign(window, { Icon, Brandmark, Announce, Header, MobileNav, BookingFormCompact, BookingFormFull });