/* global React */
const { useState } = React;

/* ---------- Lucide icon renderer (line icons by default) ---------- */
function Ic({ n, size = 24, color = 'currentColor', stroke = 2, fill = 'none', style }) {
  const L = window.lucide;
  const node = L && ((L.icons && L.icons[n]) || L[n]);
  const kids = node && node[2] ? node[2] : [];
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style} aria-hidden="true">
      {kids.map((c, idx) => React.createElement(c[0], { key: idx, ...c[1] }))}
    </svg>);

}

/* ---------- WhatsApp glyph ---------- */
const WA = ({ s = 19, c = '#fff' }) =>
<svg className="wa-glyph" width={s} height={s} viewBox="0 0 32 32" fill={c} aria-hidden="true">
    <path d="M16 .5C7.4.5.6 7.3.6 15.9c0 2.8.8 5.5 2.1 7.9L.4 31.5l7.9-2.1c2.3 1.3 4.9 1.9 7.6 1.9h.1c8.6 0 15.4-6.8 15.4-15.4C31.4 7.3 24.6.5 16 .5zm0 28.2h-.1c-2.4 0-4.7-.6-6.7-1.8l-.5-.3-4.7 1.2 1.3-4.6-.3-.5a12.7 12.7 0 01-2-6.8C2.3 8.9 8.4 2.8 16 2.8c3.7 0 7.1 1.4 9.7 4 2.6 2.6 4 6 4 9.6 0 7.6-6.1 13.7-13.7 13.7zm7.5-10.2c-.4-.2-2.4-1.2-2.8-1.3-.4-.1-.6-.2-.9.2-.3.4-1 1.3-1.3 1.6-.2.3-.5.3-.9.1-.4-.2-1.7-.6-3.3-2-1.2-1.1-2-2.4-2.3-2.8-.2-.4 0-.6.2-.8.2-.2.4-.5.6-.7.2-.2.3-.4.4-.7.1-.3 0-.5 0-.7-.1-.2-.9-2.2-1.3-3-.3-.8-.7-.7-.9-.7h-.8c-.3 0-.7.1-1 .5-.4.4-1.4 1.3-1.4 3.3 0 1.9 1.4 3.8 1.6 4.1.2.3 2.8 4.3 6.8 6 .9.4 1.7.7 2.3.9.9.3 1.8.2 2.5.2.8-.1 2.4-1 2.7-1.9.3-.9.3-1.7.2-1.9-.1-.2-.4-.3-.8-.5z" />
  </svg>;


/* ---------- Dr. Morepen HOME logo (sunburst + wordmark) ---------- */
function Logo({ scale = 1 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
      <svg width={40 * scale} height={36 * scale} viewBox="0 0 46 40" aria-label="Dr. Morepen Home">
        {/* sun flames */}
        <g fill="#F47A1C">
          {[-52, -26, 0, 26, 52].map((a, i) =>
          <path key={a} transform={`rotate(${a} 23 25)`}
          d={i === 2 ?
          'M23 2 C26.5 11 19.5 13 23 24 C26.5 13 19.5 11 23 2 Z' :
          'M23 5 C25.8 12.5 20.2 14 23 23 C25.8 14 20.2 12.5 23 5 Z'} />
          )}
          <circle cx="23" cy="24" r="4.6" />
        </g>
        {/* blue cradle swoosh */}
        <path d="M7 26 Q23 39 39 26" fill="none" stroke="#0E5AA0" strokeWidth="4.2" strokeLinecap="round" />
      </svg>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 19 * scale, lineHeight: 1, letterSpacing: '-.01em', whiteSpace: 'nowrap' }}>
        <span style={{ color: 'var(--blue)', fontWeight: 600 }}>Dr. Morepen</span>
        <span style={{ color: 'var(--brand)', fontSize: 8 * scale, verticalAlign: 'super' }}>®</span>
        <span style={{ color: 'var(--blue)', fontWeight: 800 }}> HOME</span>
      </span>
    </div>);

}

/* ---------- header ---------- */
function AppBar({ onMenu, menuOpen }) {
  return (
    <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'flex-start', padding: '9px 16px', zIndex: 6 }}>
      <img src="app/images/dmh-logo.png?v=2" alt="Dr. Morepen HOME" style={{ height: 40, width: 'auto', display: 'block' }} />
      <button onClick={onMenu} aria-label="Menu" aria-expanded={menuOpen}
      style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', width: 38, height: 38, borderRadius: 11,
        border: 'none', background: 'transparent', cursor: 'pointer', display: 'grid', placeItems: 'center', transition: 'background .25s' }}>
        <Ic n={menuOpen ? 'X' : 'Menu'} size={22} color="var(--espresso)" stroke={2.4} />
      </button>
    </div>);

}

/* ---------- trust-stats card ---------- */
const StatIcon = ({ kind, size = 26 }) => {
  const map = { star: 'Star', family: 'Users', verified: 'ShieldCheck', shield: 'ShieldCheck', cal: 'Calendar' };
  return <Ic n={map[kind] || 'Circle'} size={size} color="var(--espresso)" stroke={2} />;
};

/* horizontal trust card — 3 columns, divider between, same peach + icons */
function StatsCard({ items }) {
  return (
    <div style={{ borderRadius: 26, padding: '16px 8px', marginTop: 16, boxShadow: 'var(--shadow-sm)', backgroundColor: "rgb(255, 213, 165)", display: 'flex', alignItems: 'stretch' }}>
      {items.map((it, i) =>
      <div key={it.label} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 2, padding: '2px 8px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <StatIcon kind={it.icon} size={20} />
            <span className="stat-num" style={{ fontSize: 23 }}>{it.num}</span>
          </div>
          <span style={{ fontSize: 12, color: 'var(--ink-2)', fontWeight: 500, textAlign: 'left', lineHeight: 1.2, paddingLeft: 26 }}>
            {it.label.replace(' ', '\n').split('\n').map((ln, j) => <div key={j}>{ln}</div>)}
          </span>
        </div>
      )}
    </div>);

}

/* slim "Trained at" strip — hospital logos */
function TrainedAt() {
  const logos = [
  { src: 'app/images/apollo.png', alt: 'Apollo Hospitals', h: 38 },
  { src: 'app/images/max.png', alt: 'Max Healthcare', h: 28 },
  { src: 'app/images/fortis.png', alt: 'Fortis', h: 33 },
  { src: 'app/images/medanta.png', alt: 'Medanta', h: 26 }];

  return (
    <div style={{ marginTop: 16, padding: '4px 2px', display: 'flex', alignItems: 'center', gap: 14 }}>
      <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-2)', whiteSpace: 'nowrap' }}>Trained at</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, flex: 1, justifyContent: 'space-between' }}>
        {logos.map((l) =>
        <div key={l.src} style={{ flex: 1, display: 'flex', justifyContent: 'center', minWidth: 0 }}>
            <img src={l.src} alt={l.alt} style={{ maxWidth: '100%', height: l.h, width: 'auto', objectFit: 'contain' }} />
          </div>
        )}
      </div>
    </div>);

}

/* headline span styles */
const hMed = { color: '#fff', fontWeight: 600 };
const hHeavy = { color: '#fff', fontWeight: 800 };
const hLight = { color: '#fff', fontWeight: 400 };
const hEm = { fontStyle: 'italic', fontWeight: 600, color: '#1B1206' };

/* ---------- shared hero scaffold ---------- */
/* ============================================================
   FAMILY CARE GROUP — WhatsApp-style group chip pinned to the
   bottom of the hero card (equal left/right/bottom inset).
   ============================================================ */
const CARE_FACES = [
{ id: 'cg-doctor-x', ph: 'Dr. Saumya — family doctor', src: 'app/images/cg-doctor.png' },
{ id: 'cg-nurse', ph: 'Home-care nurse', src: 'app/images/cg-nurse.png' },
{ id: 'cg-coord', ph: 'Care coordinator', online: true, src: 'app/images/cg-coord.png' }];

function CareGroupCard() {
  return (
    <div style={{ position: 'absolute', left: 16, right: 16, top: 16, zIndex: 6,
      display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px',
      background: 'rgba(255,255,255,.2)', borderRadius: 18 }}>
      {/* title + roles */}
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 800, color: 'var(--ink)', lineHeight: 1.1,
          letterSpacing: '-.01em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Your Family Care Group</div>
        <div style={{ fontSize: 12.5, color: 'var(--brand-deep)', marginTop: 2,
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', fontWeight: "300" }}>Doctor • Nurse • Care Coordinator</div>
      </div>

      {/* overlapping avatars */}
      <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center', paddingRight: 4 }}>
        {CARE_FACES.map((f, i) =>
        <div key={f.id} style={{ position: 'relative', marginLeft: i === 0 ? 0 : -12, zIndex: i + 1 }}>
            <image-slot id={f.id} shape="circle" fit="cover" placeholder={f.ph} src={f.src || undefined}
          style={{ width: 36, height: 36, borderRadius: '50%', boxShadow: '0 0 0 2px #fff' }}></image-slot>
            {f.online &&
          <span aria-hidden="true" style={{ position: 'absolute', right: -1, bottom: -1, width: 11, height: 11,
            borderRadius: '50%', background: '#25D366', boxShadow: '0 0 0 2px #fff' }}></span>
          }
          </div>
        )}
      </div>
    </div>);

}

function HeroShell({ badge, headline, photoId, photoPh, photoSrc, chip, cta, stats, height = 980, hideBar }) {
  return (
    <div className="screen" style={{ height: hideBar ? 'auto' : height, background: 'var(--paper)', paddingBottom: hideBar ? 34 : 0 }}>
      {!hideBar && <AppBar />}
      <div style={{ padding: '4px 16px 0' }}>
        {/* orange hero card */}
        <div style={{ position: 'relative', borderRadius: 30, overflow: 'hidden', height: 500, display: 'flex', flexDirection: 'column',
          background: 'url("app/images/hero-pattern-2.png") center top / cover no-repeat, var(--hero-grad)',
          boxShadow: 'var(--shadow-md)', opacity: "1" }}>
          {/* avatars sit above */}
          <div style={{ padding: '22px 22px 0', position: 'relative', zIndex: 2, textAlign: 'center', marginTop: 32 }}>
            {badge && <span className="pill">{badge}</span>}
            <h1 style={{ fontSize: 'var(--hero-h1-size)', marginTop: badge ? 18 : 0, lineHeight: 1.04 }}>{headline}</h1>
          </div>
          <img src={photoSrc} alt={photoPh} style={{ position: 'absolute', left: 0, right: 0, bottom: -26, width: '100%', maxWidth: 'none', height: 'auto', display: 'block', zIndex: 3 }} />
        </div>

        <StatsCard items={stats} />
        <TrainedAt />

        {!hideBar &&
        <a className="btn btn-wa" href="#" style={{ width: '100%', marginTop: 14 }}>{cta}</a>
        }
      </div>
    </div>);

}

const STATS = [
{ icon: 'star', num: '4.6', label: 'Average Rating' },
{ icon: 'family', num: '10K+', label: 'Families Trust Us' },
{ icon: 'verified', num: '100%', label: 'Background verified' }];


/* ============================================================
   HERO A — WhatsApp, all year
   ============================================================ */
function HeroWhatsApp({ hideBar }) {
  return (
    <HeroShell
      hideBar={hideBar}
      headline={<span style={{ fontSize: 'var(--hero-h1-size)', display: 'block' }}>
        <span style={{ ...hLight, fontSize: 'var(--hero-span-size)' }}>Your </span><span style={{ ...hLight, fontSize: 'var(--hero-span-size)' }}>Dedicated</span><br />
        <span style={hHeavy}>Family Doctor</span><br />
        <span style={hLight}>at </span><span style={{ ...hEm, fontWeight: hLight.fontWeight, color: 'rgb(27, 6, 6)' }}>home.</span>
      </span>}
      photoId="hero-wa"
      photoPh="Doctor on a home visit with elderly parents (cut-out PNG works best)"
      photoSrc="app/images/hero-doctor-2.png"
      stats={STATS}
      cta={<><WA /> Message us on WhatsApp</>} />);


}

/* ============================================================
   HERO B — Peace of mind
   ============================================================ */
function HeroPeace() {
  return (
    <HeroShell
      badge="For the parents you love"
      headline={<>
        <span style={hMed}>Trusted doctors for</span><br />
        <span style={hEm}>Mummy &amp; Papa</span><br />
        <span style={hHeavy}>at home</span>
      </>}
      photoId="hero-peace"
      photoPh="Doctor with an elderly parent"
      photoSrc="app/images/hero-doctor-2.png"
      chip="Same doctor, every visit"
      stats={STATS}
      cta={<><WA /> Talk to a care advisor</>} />);


}

/* ============================================================
   HERO C — Trusted doctors at home in 60 minutes (screenshot)
   ============================================================ */
function HeroService() {
  return (
    <HeroShell
      badge="Gurgaon & Delhi"
      headline={<>
        <span style={hMed}>Trusted Doctors</span><br />
        <span style={hHeavy}>at home</span><br />
        <span style={hLight}>in </span><span style={hEm}>60 minutes</span>
      </>}
      photoId="hero-60"
      photoPh="Doctor examining a patient (cut-out PNG works best)"
      photoSrc="app/images/hero-doctor-2.png"
      stats={STATS}
      cta="Book a doctor visit" />);


}

Object.assign(window, { Ic, WA, Logo, AppBar, StatsCard, TrainedAt, HeroShell, HeroWhatsApp, HeroPeace, HeroService, STATS });