/* global React */
// Haya Yahaly — landing, part 3: CTA banner, Footer, Floating, A11y panel

function CtaBanner() {
  const { Button } = window.HayaYahalyDesignSystem_9b2aeb;
  const WaveDivider = window.HYWaveDivider;
  return (
    <section data-screen-label="CTA" style={{ background: 'var(--surface-hero)', padding: 'var(--space-12) 0 0' }}>
      <div className="container cta-grid" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 'var(--space-10)', alignItems: 'center' }}>
        <div style={{ textAlign: 'right' }}>
          <h2 style={{ fontSize: 'var(--text-3xl)', fontWeight: 700, color: 'var(--text-heading)', margin: '0 0 var(--space-4)' }}>בואו נתחיל!</h2>
          <p style={{ fontSize: 'var(--text-lg)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-body)', margin: '0 0 var(--space-6)' }}>אני כאן כדי להעניק לכם שירות אישי, יחס מקצועי וחוויה מותאמת בדיוק לצרכים שלכם. זה המקום לעשות את הצעד הראשון, להתחיל תהליך משמעותי.</p>
          <Button href="#contact" variant="primary" size="lg">בואו נדבר</Button>
        </div>
        <div style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--white)', border: '1px solid var(--color-border)', minHeight: 280 }}>
          <img src={(window.__resources && window.__resources.hayaSession) || "assets/haya-session.png"} alt="חיה יהלי" style={{ width: '100%', height: '100%', minHeight: 280, objectFit: 'cover', objectPosition: '50% 28%', display: 'block' }} />
        </div>
      </div>
      <WaveDivider fill="var(--sky-tint)" />
    </section>
  );
}

const FOOTER_MENU = [
  { label: 'אודות', href: '#about' },
  { label: 'המלצות', href: '#testimonials' },
  { label: 'שירותים', href: '#services' },
  { label: 'יצירת קשר', href: '#contact' },
  { label: 'מדיניות פרטיות', href: '#' },
];

function Footer() {
  return (
    <footer data-screen-label="Footer" style={{ background: 'var(--white)', paddingTop: 'var(--space-10)' }}>
      <div className="container footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 0.9fr 1.1fr', gap: 'var(--space-8)', paddingBottom: 'var(--space-10)' }}>
        <div>
          <img src={(window.__resources && window.__resources.logoFooter) || "assets/logo.png"} alt="חיה יהלי" style={{ width: 180 }} />
          <p style={{ margin: 'var(--space-4) 0 0', maxWidth: 280, fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-body)' }}>מלווה אתכם במסע זוגי מתוך מרחב בטוח, רגיש ומכבד.</p>
          <div style={{ display: 'flex', gap: 10, marginTop: 'var(--space-5)' }}>
            <SocialIcon name="instagram" />
            <SocialIcon name="facebook" />
          </div>
        </div>
        <div>
          <h4 className="footer-h">תפריט</h4>
          <ul className="footer-list">{FOOTER_MENU.map((m) => <li key={m.label}><a href={m.href} className="footer-link">{m.label}</a></li>)}</ul>
        </div>
        <div>
          <h4 className="footer-h">צרו קשר</h4>
          <ul className="footer-list">
            <li className="footer-contact"><i data-lucide="phone"></i><a href="tel:0547894214" className="footer-link">054-789-4214</a></li>
            <li className="footer-contact"><i data-lucide="mail"></i><a href="mailto:hayayahaly@gmail.com" className="footer-link">hayayahaly@gmail.com</a></li>
            <li className="footer-contact"><i data-lucide="map-pin"></i><span>בייליס מנחם 25, חיפה</span></li>
            <li className="footer-contact"><i data-lucide="clock"></i><span>א׳–ו׳, לפי תיאום מראש</span></li>
          </ul>
        </div>
      </div>
      <div style={{ borderTop: '1px solid var(--color-border)', background: 'var(--white)', color: 'var(--text-muted)', textAlign: 'center', padding: '16px', fontSize: 'var(--text-xs)' }}>
        © {new Date().getFullYear()} חיה יהלי · יעוץ זוגי · כל הזכויות שמורות
      </div>
    </footer>
  );
}

function SocialIcon({ name }) {
  return (
    <a href="#" aria-label={name} style={{ width: 38, height: 38, borderRadius: '50%', background: 'var(--cream-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-accent)', boxShadow: 'var(--shadow-sm)' }}>
      <i data-lucide={name} style={{ width: 18, height: 18 }}></i>
    </a>
  );
}

function WhatsAppIcon({ size = 22 }) {
  return (
    <svg viewBox="0 0 448 512" width={size} height={size} fill="currentColor" aria-hidden="true">
      <path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zM223.9 438.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.5-186.6 184.5zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.7 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path>
    </svg>
  );
}

function Floating({ onA11y }) {
  const [hover, setHover] = React.useState(null);
  // Small edge tabs flush to the left — subtle, low-attention.
  const tab = (bg, active) => ({
    width: 42, height: active ? 52 : 44, borderRadius: '0 22px 22px 0',
    background: bg, color: '#fff', flex: 'none',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    boxShadow: '0 3px 10px rgba(90,70,50,0.18)',
    transition: 'height var(--transition-base)',
  });
  const labelStyle = (active) => ({
    position: 'absolute', left: 'calc(100% + 8px)', top: '50%',
    direction: 'rtl', background: 'var(--white)', color: 'var(--text-heading)', fontSize: 'var(--text-xs)',
    fontWeight: 600, padding: '6px 12px', borderRadius: 'var(--radius-pill)', boxShadow: 'var(--shadow-sm)',
    whiteSpace: 'nowrap', pointerEvents: 'none',
    opacity: active ? 1 : 0,
    transform: active ? 'translateY(-50%) translateX(0)' : 'translateY(-50%) translateX(-6px)',
    transition: 'opacity var(--transition-base), transform var(--transition-base)',
  });
  return (
    <div style={{ position: 'fixed', left: 0, top: 'calc(var(--header-h, 72px) + 16px)', zIndex: 60, width: 42, display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start' }}>
      <a href="https://api.whatsapp.com/send?phone=972547894214" target="_blank" rel="noreferrer"
        aria-label="שלחו וואטסאפ"
        onMouseEnter={() => setHover('wa')} onMouseLeave={() => setHover(null)}
        style={{ position: 'relative', display: 'flex', justifyContent: 'flex-start', width: '100%', textDecoration: 'none' }}>
        <span style={labelStyle(hover === 'wa')}>שלחו וואטסאפ</span>
        <span style={tab('#25D366', hover === 'wa')}><WhatsAppIcon size={21} /></span>
      </a>
      <button onClick={onA11y} aria-label="נגישות"
        onMouseEnter={() => setHover('a11y')} onMouseLeave={() => setHover(null)}
        style={{ position: 'relative', display: 'flex', justifyContent: 'flex-start', width: '100%', border: 'none', background: 'transparent', cursor: 'pointer', padding: 0 }}>
        <span style={labelStyle(hover === 'a11y')}>נגישות</span>
        <span style={tab('var(--blue-500)', hover === 'a11y')}><i data-lucide="accessibility" style={{ width: 21, height: 21 }}></i></span>
      </button>
    </div>
  );
}

function A11yPanel({ open, onClose }) {
  const items = [
    ['contrast', 'ניגודיות גבוהה'], ['type', 'הגדלת גופן'], ['pause', 'עצירת אנימציות'],
    ['link', 'הדגשת קישורים'], ['heading', 'הדגשת כותרות'], ['book-open', 'גופן קריא'],
  ];
  if (!open) return null;
  return (
    <div style={{ position: 'fixed', top: 'calc(var(--header-h, 72px) + 16px)', left: 52, zIndex: 70, width: 'min(280px, calc(100vw - 72px))', background: 'var(--white)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-lg)', padding: 'var(--space-5)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--space-4)' }}>
        <strong style={{ color: 'var(--text-heading)' }}>תפריט נגישות</strong>
        <button onClick={onClose} aria-label="סגירה" style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--text-muted)' }}><i data-lucide="x"></i></button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        {items.map(([ic, label]) => (
          <button key={label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, padding: '12px 6px', borderRadius: 'var(--radius-sm)', border: '1px solid var(--color-border)', background: 'var(--cream-50)', cursor: 'pointer', color: 'var(--text-heading)', fontSize: 'var(--text-xs)' }}>
            <i data-lucide={ic} style={{ width: 20, height: 20, color: 'var(--blue-500)' }}></i>{label}
          </button>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { HYCtaBanner: CtaBanner, HYFooter: Footer, HYFloating: Floating, HYA11yPanel: A11yPanel });