/* Shared components for Breeze.io site */

/* ---------- NAV ---------- */
function NavBar({ current, onNavigate, lang, setLang }) {
  const { useState, useEffect } = React;
  const links = [
    { id: 'doctors', label: lang === 'hi' ? 'डॉक्टर' : 'For doctors' },
    { id: 'salons', label: lang === 'hi' ? 'सैलून' : 'For salons' },
    { id: 'pricing', label: lang === 'hi' ? 'प्राइसिंग' : 'Pricing' },
    { id: 'vs', label: lang === 'hi' ? 'JustDial से तुलना' : 'vs JustDial' },
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div className="brand-mark" onClick={() => onNavigate('home')}>
          <span className="mark-glyph"></span>
          <span>Breeze<span style={{color:'var(--ink-400)'}}>.io</span></span>
        </div>
        <div className="nav-spacer" />
        {links.map(l => (
          <a
            key={l.id}
            className={'nav-link ' + (current === l.id ? 'active' : '')}
            onClick={() => onNavigate(l.id)}
          >{l.label}</a>
        ))}
        <a className="nav-link" style={{fontSize:'14px'}} onClick={() => alert('Demo — log in flow not built')}>
          {lang === 'hi' ? 'लॉग इन' : 'Log in'}
        </a>
        <div className="lang-toggle">
          <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
          <button className={lang === 'hi' ? 'on' : ''} onClick={() => setLang('hi')}>हिं</button>
        </div>
        <button className="btn btn-primary btn-sm" onClick={() => onNavigate('doctors')}>
          {lang === 'hi' ? 'वेबसाइट बनाएँ →' : 'Get my website →'}
        </button>
      </div>
    </nav>
  );
}

/* ---------- FOOTER ---------- */
function Footer({ onNavigate }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="brand-mark" style={{color:'#F3EEE4'}}>
              <span className="mark-glyph"></span>
              <span>Breeze.io</span>
            </div>
            <p style={{maxWidth:320, marginTop:16, fontSize:13, lineHeight:1.55}}>
              AI websites for Indian service SMBs. Built by a small team in India.
              Managed from WhatsApp, forever.
            </p>
          </div>
          <div className="footer-col">
            <h4>Product</h4>
            <a onClick={() => onNavigate('home')}>Overview</a>
            <a onClick={() => onNavigate('pricing')}>Pricing</a>
            <a onClick={() => onNavigate('vs')}>vs JustDial</a>
            <a>How it works</a>
          </div>
          <div className="footer-col">
            <h4>Verticals</h4>
            <a onClick={() => onNavigate('doctors')}>Doctors</a>
            <a>Salons</a>
            <a>CAs</a>
            <a>Restaurants</a>
            <a>Coaching</a>
          </div>
          <div className="footer-col">
            <h4>Company</h4>
            <a>About</a>
            <a>Privacy</a>
            <a>Terms</a>
            <a>Contact</a>
          </div>
          <div className="footer-col">
            <h4>Connect</h4>
            <a>WhatsApp</a>
            <a>Twitter</a>
            <a>LinkedIn</a>
            <a>YourStory</a>
          </div>
        </div>
        <div className="footer-meta">
          <span>© 2026 Zeno Ventures Pvt. Ltd. Made earnestly in India.</span>
          <span style={{fontFamily:'var(--font-mono)', fontSize:11}}>breeze.io · customer sites → yourdomain.com or slug.breezesites.io</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- FAQ ---------- */
function FAQ({ items }) {
  const { useState } = React;
  const [open, setOpen] = useState(0);
  return (
    <div className="faq">
      {items.map((it, i) => (
        <div key={i} className={'faq-item ' + (open === i ? 'open' : '')}>
          <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
            <span lang={it.lang || undefined}>{it.q}</span>
            <span className="plus">+</span>
          </button>
          <div className="faq-a"><div style={{paddingRight:32}}>{it.a}</div></div>
        </div>
      ))}
    </div>
  );
}

/* ---------- PORTFOLIO CYCLER ---------- */
function PortfolioCycler({ onActive }) {
  const { useState, useEffect } = React;
  const sites = [
    {
      variant: 'light',
      slug: 'drsharmadental.in',
      caption: 'drsharmadental.in · Gurugram · custom domain',
      nav: ['Services', 'About', 'Book', 'Contact'],
      hero: 'Dr. Sharma\'s Dental Clinic',
      sub: 'Painless dentistry in Sector 47. Book on WhatsApp.',
      btn: 'Book appointment →',
      photoLabel: 'clinic reception · natural light',
      info: [
        { l: 'Open', v: '9 AM – 8 PM' },
        { l: 'Patients', v: '3,200+' },
      ],
      style: { background: '#FAF8F4' },
    },
    {
      variant: 'dark',
      slug: 'glowsalon.co',
      caption: 'glowsalon.co · Koramangala · custom domain',
      nav: ['Services', 'Team', 'Gallery', 'Book'],
      hero: 'Glow Salon & Spa',
      sub: 'Koramangala\'s quiet salon. Walk-ins welcome.',
      btn: 'WhatsApp booking →',
      photoLabel: 'salon chair · morning light',
      info: [
        { l: 'Services', v: '42' },
        { l: 'Reviews', v: '4.8 ★' },
      ],
    },
    {
      variant: 'light',
      slug: 'anilkumarca.in',
      caption: 'anilkumarca.in · Mumbai · custom domain',
      nav: ['Services', 'GST', 'ITR', 'Contact'],
      hero: 'Anil Kumar & Co.',
      sub: 'Chartered Accountants · BKC, Mumbai. GST, ITR, Audit.',
      btn: 'Book consult →',
      photoLabel: 'office · stacked files, tube light',
      info: [
        { l: 'Clients', v: '180+' },
        { l: 'Since', v: '2008' },
      ],
      style: { background: '#F7F5EE' },
    },
    {
      variant: 'light',
      slug: 'rameshtiffin.com',
      caption: 'rameshtiffin.com · Pune · custom domain',
      nav: ['Menu', 'Timings', 'Order', 'Contact'],
      hero: 'Ramesh Tiffin Service',
      sub: 'Home-style Maharashtrian food. Monthly tiffin. Delivery.',
      btn: 'Order via WhatsApp →',
      photoLabel: 'steel dabbas stacked',
      info: [
        { l: 'Meals/day', v: '240' },
        { l: 'Delivery', v: '5 km' },
      ],
      style: { background: '#FBF4E8' },
    },
    {
      variant: 'dark',
      slug: 'vidyacoaching.in',
      caption: 'vidyacoaching.in · Kota · custom domain',
      nav: ['Batches', 'Faculty', 'Results', 'Admissions'],
      hero: 'Vidya Coaching Centre',
      sub: 'JEE & NEET · Kota. Small batches. Real results.',
      btn: 'Admission enquiry →',
      photoLabel: 'classroom · evening batch',
      info: [
        { l: 'Batch', v: '15 students' },
        { l: 'Selections', v: '48 in 2025' },
      ],
    },
  ];

  const [idx, setIdx] = useState(0);

  useEffect(() => {
    const t = setInterval(() => {
      setIdx(i => (i + 1) % sites.length);
    }, 4000);
    return () => clearInterval(t);
  }, []);

  useEffect(() => {
    if (onActive) onActive(idx);
  }, [idx]);

  return (
    <div>
      <div className="portfolio-stage">
        {sites.map((s, i) => (
          <div key={i} className={'portfolio-card ' + (idx === i ? 'on' : '')}>
            <div className="pc-browser">
              <span className="pc-dot"></span>
              <span className="pc-dot"></span>
              <span className="pc-dot"></span>
              <span className="pc-url">{s.slug}</span>
            </div>
            <div className="pc-body">
              <div className={'mini-site ' + (s.variant === 'dark' ? 'variant-dark' : '')} style={s.style}>
                <div className="ms-nav">
                  {s.nav.map((n, j) => <span key={j}>{n}</span>)}
                </div>
                <div className="ms-hero">{s.hero}</div>
                <div className="ms-sub">{s.sub}</div>
                <div className="ms-photo">[ {s.photoLabel} ]</div>
                <div className="ms-btn">{s.btn}</div>
                <div className="ms-info-row">
                  {s.info.map((x, j) => (
                    <div key={j}>
                      <b>{x.v}</b>
                      {x.l}
                    </div>
                  ))}
                </div>
              </div>
              <div className="pc-caption">{s.caption}</div>
            </div>
          </div>
        ))}
      </div>
      <div className="portfolio-indicators">
        {sites.map((_, i) => (
          <button key={i} className={'dot ' + (idx === i ? 'on' : '')} onClick={() => setIdx(i)} aria-label={`Show example ${i+1}`} />
        ))}
      </div>
    </div>
  );
}

/* ---------- WHATSAPP CONVERSATION ---------- */
function WAConversation() {
  const { useState, useEffect } = React;
  const [step, setStep] = useState(0);
  const messages = [
    { kind: 'out', text: 'hero image badal do — new photo attach kar raha hoon', time: '2:14 PM' },
    { kind: 'photo', time: '2:14 PM' },
    { kind: 'typing' },
    { kind: 'in', text: 'Done! Preview ready.', link: 'breezesites.io/dr-sharma-preview', time: '2:14 PM', sub: 'Approve karne ke liye \'yes\' bhejo.' },
    { kind: 'out', text: 'yes', time: '2:15 PM' },
    { kind: 'in', text: '✓ Live! Patients ab new photo dekhenge.', time: '2:15 PM' },
  ];

  useEffect(() => {
    if (step >= messages.length) {
      const t = setTimeout(() => setStep(0), 3500);
      return () => clearTimeout(t);
    }
    const delays = [800, 900, 1200, 1800, 1200, 1400];
    const t = setTimeout(() => setStep(step + 1), delays[step] || 1200);
    return () => clearTimeout(t);
  }, [step]);

  const visible = messages.slice(0, step);

  return (
    <div className="phone-frame">
      <div className="phone-screen">
        <div className="chat-header">
          <div className="chat-avatar" style={{position:'relative'}}>B<span className="dot-live" style={{bottom:-1, right:-1}}></span></div>
          <div>
            <div className="chat-header-name">Breeze</div>
            <div className="chat-header-sub">● online</div>
          </div>
          <div style={{marginLeft:'auto', display:'flex', gap:12, color:'var(--ink-400)', fontSize:16}}>
            <span>⌕</span><span>⋮</span>
          </div>
        </div>
        <div className="chat-body">
          {visible.map((m, i) => {
            if (m.kind === 'typing') {
              return (
                <div key={i} className="bubble-in chat-bubble fade-in" style={{padding:'10px 14px'}}>
                  <span className="type-indicator"><span></span><span></span><span></span></span>
                </div>
              );
            }
            if (m.kind === 'photo') {
              return (
                <div key={i} className="bubble-photo fade-in">
                  <div className="photo-thumb">[ new clinic photo ]</div>
                  <span style={{fontSize:10, color:'var(--ink-400)', display:'block', textAlign:'right', marginTop:4}}>{m.time} ✓✓</span>
                </div>
              );
            }
            return (
              <div key={i} className={'chat-bubble fade-in ' + (m.kind === 'out' ? 'bubble-out' : 'bubble-in')}>
                <div>{m.text}</div>
                {m.link && <a className="bubble-link">🔗 {m.link}</a>}
                {m.sub && <div style={{fontSize:12, color:'var(--ink-600)', marginTop:4}}>{m.sub}</div>}
                <span className="meta">{m.time}{m.kind === 'out' && <span className="check"> ✓✓</span>}</span>
              </div>
            );
          })}
        </div>
        <div className="chat-input-bar">
          <span style={{color:'var(--ink-400)'}}>😊</span>
          <div className="fake-input">Message</div>
          <span style={{color:'var(--ink-400)'}}>📎</span>
          <div className="send-btn">→</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { NavBar, Footer, FAQ, PortfolioCycler, WAConversation });