/* global React */

// ============================================================
// TREATMENTS INDEX
// ============================================================
const TreatmentsPage = () => {
  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Treatments"
        title={<>A focused menu, <em>doctor-led</em>.</>}
        lede="Every treatment below is performed by a registered physician. A free 15-minute consultation is required first — we recommend the right protocol for your skin, not a package."
      />

      <section style={{ padding: "16px 0 80px" }}>
        <div className="container">
          {window.TREATMENTS.map((t, i) => (
            <a key={t.slug} href={`#/treatments/${t.slug}`}
              style={{
                display: "grid",
                gridTemplateColumns: "320px 1fr auto",
                gap: 40,
                alignItems: "center",
                padding: "32px 32px",
                borderTop: "1px solid var(--line)",
                borderBottom: i === window.TREATMENTS.length - 1 ? "1px solid var(--line)" : "none",
                transition: "background 220ms ease",
              }}
              onMouseEnter={e => e.currentTarget.style.background = "var(--cream-card)"}
              onMouseLeave={e => e.currentTarget.style.background = "transparent"}
              className="treatment-row"
            >
              <div style={{ borderRadius: 12, overflow: "hidden", aspectRatio: "4/3" }}>
                <HeroImage src={t.image} alt={t.title} label={t.title}/>
              </div>
              <div>
                <div className="eyebrow muted" style={{ marginBottom: 8 }}>0{i + 1} · {t.tag}</div>
                <h3 className="display-3" style={{ marginBottom: 10 }}>{t.title}</h3>
                <p style={{ fontSize: 15, color: "var(--espresso-soft)", lineHeight: 1.55, margin: 0, maxWidth: 540 }}>
                  {t.blurb}
                </p>
              </div>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 10 }}>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 28, color: "var(--gold-deep)" }}>
                  {t.items.length}
                  <span style={{ fontSize: 12, fontFamily: "var(--f-ui)", color: "var(--espresso-soft)", letterSpacing: "0.1em", textTransform: "uppercase", marginLeft: 6 }}>treatments</span>
                </div>
                <span className="btn btn--ghost btn--sm">Explore <ChevronRight size={12}/></span>
              </div>
            </a>
          ))}
        </div>
      </section>
    </div>
  );
};

// ============================================================
// SINGLE TREATMENT
// ============================================================
const TreatmentDetailPage = ({ slug }) => {
  const t = window.TREATMENTS.find(x => x.slug === slug);
  if (!t) return <NotFound/>;
  const [openFaq, setOpenFaq] = React.useState(0);

  const faqs = [
    { q: `Is ${t.title.toLowerCase()} safe?`, a: "All procedures are performed by a registered physician with a valid professional licence. Risks and contraindications are discussed at consultation; we do not proceed if a treatment isn't right for you." },
    { q: "Will it look natural?",            a: "Our practice is built on conservative, balanced outcomes. Patients regularly describe results as “gentle” and “natural and balanced” — that's the standard." },
    { q: "How much downtime?",               a: "Most injectables have zero downtime. Energy-based treatments may have mild redness for a few hours. We give you a written aftercare plan and you can reach the clinic any time." },
    { q: "What does it cost?",               a: "Where we can quote a “from” price we do. Final pricing is confirmed at your free consultation, because dose and protocol vary by individual." },
  ];

  return (
    <div className="page-enter">
      <section style={{ padding: "48px 0 64px" }}>
        <div className="container">
          <div style={{ marginBottom: 24, fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--espresso-soft)" }}>
            <a href="#/treatments" style={{ color: "var(--espresso-soft)" }}>Treatments</a> <span style={{ margin: "0 8px" }}>›</span> {t.title}
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 56, alignItems: "start" }} className="td-grid">
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>{t.tag}</div>
              <h1 className="display-1" style={{ fontSize: "clamp(40px, 5vw, 72px)", marginBottom: 22 }}>
                {t.title}
              </h1>
              <p className="lede" style={{ marginBottom: 32, fontSize: 19 }}>{t.blurb}</p>

              <div className="row" style={{ gap: 12, marginBottom: 40 }}>
                <a href={`#/book?treatment=${t.slug}`} className="btn btn--primary btn--lg">
                  Book a free consultation <ChevronRight size={12}/>
                </a>
                <a href="https://wa.me/971581955350?text=Hi%20Covent%20Clinic" target="_blank" rel="noopener" className="btn btn--ghost btn--lg">
                  <WhatsAppIcon size={16} color="#25D366"/> Ask on WhatsApp
                </a>
              </div>

              {/* Benefits */}
              <div style={{ marginBottom: 40 }}>
                <h3 className="eyebrow" style={{ marginBottom: 16 }}>Why patients choose us</h3>
                <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                  {t.benefits.map((b, i) => (
                    <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                      <span style={{ width: 22, height: 22, borderRadius: 999, background: "rgba(201,162,75,0.18)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--gold-deep)", marginTop: 2, flexShrink: 0 }}>
                        <CheckIcon size={12}/>
                      </span>
                      <span style={{ fontSize: 15, color: "var(--espresso)", lineHeight: 1.55 }}>{b}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div style={{ borderRadius: 18, overflow: "hidden", aspectRatio: "4/5", background: "var(--ivory-deep)" }}>
              <HeroImage src={t.image} alt={t.title} label={t.title}/>
            </div>
          </div>
        </div>
      </section>

      {/* Service items / price list */}
      <section style={{ background: "var(--cream-card)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 14 }}>Service list</div>
          <h2 className="display-2" style={{ marginBottom: 36 }}>
            What's in this category
          </h2>

          <div className="card" style={{ padding: 0, overflow: "hidden", background: "var(--ivory)" }}>
            {t.items.map((item, i) => (
              <div key={i} style={{
                display: "grid",
                gridTemplateColumns: "1fr 120px 180px auto",
                gap: 32,
                padding: "22px 28px",
                alignItems: "center",
                borderBottom: i < t.items.length - 1 ? "1px solid var(--line)" : "none",
                transition: "background 160ms",
              }}
                onMouseEnter={e => e.currentTarget.style.background = "rgba(201,162,75,0.04)"}
                onMouseLeave={e => e.currentTarget.style.background = "transparent"}
              >
                <div>
                  <div style={{ fontFamily: "var(--f-display)", fontSize: 22, color: "var(--espresso)", marginBottom: 2 }}>{item.name}</div>
                  {item.note && <div style={{ fontSize: 12, color: "var(--espresso-soft)" }}>{item.note}</div>}
                </div>
                <div style={{ fontSize: 13, color: "var(--espresso-soft)", letterSpacing: "0.04em" }}>{item.duration}</div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 22, color: "var(--gold-deep)" }}>
                  {item.price}
                  {item.per && <span style={{ fontSize: 12, color: "var(--espresso-soft)", fontFamily: "var(--f-ui)", marginLeft: 6 }}>{item.per}</span>}
                </div>
                <a href={`#/book?treatment=${t.slug}`} className="btn btn--ghost btn--sm">Book</a>
              </div>
            ))}
          </div>

          <div className="row" style={{ marginTop: 18, justifyContent: "space-between" }}>
            <span style={{ fontSize: 12, color: "var(--espresso-soft)", fontStyle: "italic", maxWidth: 480 }}>
              Prices are “from” starting points. Final pricing is confirmed at your free consultation. “On consultation” items are priced per individual protocol.
            </span>
            <a href="#/pricing" className="btn btn--ghost btn--sm">All prices <ChevronRight size={12}/></a>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section>
        <div className="container" style={{ maxWidth: 900 }}>
          <div className="eyebrow center" style={{ marginBottom: 14 }}>Frequently asked</div>
          <h2 className="display-2 center" style={{ marginBottom: 48 }}>Questions, answered.</h2>

          <div className="card" style={{ background: "var(--cream-card)" }}>
            {faqs.map((f, i) => (
              <div key={i} style={{ borderBottom: i < faqs.length - 1 ? "1px solid var(--line)" : "none" }}>
                <button
                  onClick={() => setOpenFaq(openFaq === i ? -1 : i)}
                  style={{
                    width: "100%",
                    display: "flex", justifyContent: "space-between", alignItems: "center",
                    padding: "24px 28px",
                    background: "transparent", border: "none",
                    textAlign: "left", cursor: "pointer",
                    color: "var(--espresso)",
                    fontFamily: "var(--f-display)", fontSize: 22,
                  }}>
                  {f.q}
                  <span style={{ transform: openFaq === i ? "rotate(180deg)" : "rotate(0)", transition: "transform 200ms", color: "var(--gold-deep)" }}>
                    <ChevronDown />
                  </span>
                </button>
                {openFaq === i && (
                  <div style={{ padding: "0 28px 24px", color: "var(--espresso-soft)", fontSize: 15, lineHeight: 1.65, maxWidth: 720 }}>
                    {f.a}
                  </div>
                )}
              </div>
            ))}
          </div>

          {/* Disclaimer */}
          <div style={{
            marginTop: 32,
            padding: "20px 24px",
            border: "1px dashed var(--line-strong)",
            borderRadius: 12,
            fontSize: 13,
            color: "var(--espresso-soft)",
            lineHeight: 1.6,
          }}>
            <strong style={{ color: "var(--espresso)" }}>Medical disclaimer.</strong> {t.title} is a medical procedure. Results vary between individuals. A consultation with our doctor is required to confirm suitability, dosage and a written treatment plan. We do not publish before/after imagery without patient consent and DHA-compliant approvals.
          </div>
        </div>
      </section>
    </div>
  );
};

// ============================================================
// Shared: page header
// ============================================================
const PageHeader = ({ eyebrow, title, lede }) => (
  <section style={{ padding: "72px 0 32px" }}>
    <div className="container" style={{ maxWidth: 980 }}>
      <div className="eyebrow" style={{ marginBottom: 18 }}>{eyebrow}</div>
      <h1 className="display-1" style={{ marginBottom: 24, fontSize: "clamp(48px, 5.5vw, 84px)" }}>{title}</h1>
      {lede && <p className="lede" style={{ fontSize: 19, maxWidth: 640 }}>{lede}</p>}
    </div>
  </section>
);

// ============================================================
// 404
// ============================================================
const NotFound = () => (
  <section style={{ padding: "120px 0", textAlign: "center" }}>
    <div className="container">
      <div className="display-1" style={{ marginBottom: 16 }}>404</div>
      <p className="lede" style={{ margin: "0 auto 32px" }}>That page doesn't exist. Let's take you home.</p>
      <a href="#/home" className="btn btn--primary">Back to home</a>
    </div>
  </section>
);

Object.assign(window, { TreatmentsPage, TreatmentDetailPage, PageHeader, NotFound });