// Variation 1 — Conservative Classic
// Symmetric, serene, trustworthy. Centered compositions, serif headlines,
// generous whitespace, subtle ornaments.

function V1Nav({ t, lang, setLang, route, go }) {
  const items = [
    { k: 'home', label: t.nav.home },
    { k: 'about', label: t.nav.about },
    { k: 'services', label: t.nav.services },
    { k: 'blog', label: t.nav.blog },
    { k: 'contact', label: t.nav.contact },
  ];
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 20);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  const [open, setOpen] = useState(false);
  return (
    <header className={`v1-nav ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="v1-nav-inner">
        <a className="v1-brand" href="#/home" onClick={() => setOpen(false)}>
          <span className="v1-brand-mark">A</span>
          <span className="v1-brand-text">
            <span className="v1-brand-name">Alin</span>
            <span className="v1-brand-sub">{t.brand_sub}</span>
          </span>
        </a>
        <nav className={`v1-menu ${open ? 'is-open' : ''}`}>
          {items.map(it => (
            <a key={it.k} href={`#/${it.k}`} className={route === it.k ? 'is-active' : ''} onClick={() => setOpen(false)}>
              {it.label}
            </a>
          ))}
        </nav>
        <div className="v1-nav-right">
          <LangToggle lang={lang} setLang={setLang} variant="classic" />
          <a className="v1-cta-mini" href="#/contact">{lang === 'he' ? 'קביעת שיחה' : 'Book a call'}</a>
          <button className="v1-burger" onClick={() => setOpen(!open)} aria-label="menu">
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
    </header>
  );
}

function V1Hero({ t, lang, heroLayout }) {
  const lines = t.hero.title.split('\n');
  if (heroLayout === 'split') {
    return (
      <section className="v1-hero v1-hero--split">
        <div className="v1-hero-text">
          <span className="eyebrow">{t.hero.eyebrow}</span>
          <h1 className="v1-hero-title">
            {lines.map((l, i) => <span key={i}>{l}</span>)}
          </h1>
          <p className="v1-hero-sub">{t.hero.subtitle}</p>
          <div className="v1-hero-ctas">
            <a href="#/contact" className="btn-primary">
              <span>{t.hero.cta}</span>
              <svg viewBox="0 0 24 24" fill="currentColor" width="18"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.263.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347"/></svg>
            </a>
            <a href="#/about" className="btn-ghost">{t.hero.cta2}</a>
          </div>
          <div className="v1-hero-stats">
            <div><strong>15+</strong><span>{lang === 'he' ? 'שנות ניסיון' : 'years'}</span></div>
            <div className="v1-stat-sep" />
            <div><strong>1,200+</strong><span>{lang === 'he' ? 'נשים' : 'women'}</span></div>
            <div className="v1-stat-sep" />
            <div><strong>∞</strong><span>{lang === 'he' ? 'חמלה' : 'compassion'}</span></div>
          </div>
        </div>
        <div className="v1-hero-media">
          <div className="v1-hero-frame">
            <div className="v1-hero-img"><img src="images/hero.png" alt="" className="site-img" /></div>
            <div className="v1-hero-badge">
              <svg viewBox="0 0 120 120" width="120" height="120">
                <defs>
                  <path id="curve" d="M 60,60 m -44,0 a 44,44 0 1,1 88,0 a 44,44 0 1,1 -88,0" />
                </defs>
                <text fill="currentColor" fontSize="10" fontFamily="var(--font-mono)" letterSpacing="2">
                  <textPath href="#curve">EST. 2013 · ALIN GLOBAL · EST. 2013 · ALIN GLOBAL · </textPath>
                </text>
                <circle cx="60" cy="60" r="12" fill="currentColor" />
              </svg>
            </div>
          </div>
        </div>
      </section>
    );
  }
  // Centered classic
  return (
    <section className="v1-hero v1-hero--center">
      <div className="v1-hero-ornament v1-hero-ornament--top" aria-hidden>
        <svg viewBox="0 0 200 40" width="160" height="32"><path d="M0 20 Q 50 0, 100 20 T 200 20" fill="none" stroke="currentColor" strokeWidth="1"/></svg>
      </div>
      <span className="eyebrow">{t.hero.eyebrow}</span>
      <h1 className="v1-hero-title">
        {lines.map((l, i) => <span key={i}>{l}</span>)}
      </h1>
      <p className="v1-hero-sub">{t.hero.subtitle}</p>
      <div className="v1-hero-ctas">
        <a href="#/contact" className="btn-primary">{t.hero.cta}</a>
        <a href="#/about" className="btn-ghost">{t.hero.cta2}</a>
      </div>
      <div className="v1-hero-media v1-hero-media--wide">
        <div className="v1-hero-img"><img src="images/hero.png" alt="" className="site-img" /></div>
      </div>
      <div className="v1-hero-stats v1-hero-stats--center">
        <div><strong>15+</strong><span>{lang === 'he' ? 'שנות ניסיון' : 'years'}</span></div>
        <div className="v1-stat-sep" />
        <div><strong>1,200+</strong><span>{lang === 'he' ? 'נשים' : 'women guided'}</span></div>
      </div>
    </section>
  );
}

function V1AboutSection({ t, lang }) {
  return (
    <section className="v1-section v1-about-sec">
      <div className="v1-about-grid">
        <div className="v1-about-media">
          <div className="v1-about-img"><img src="images/practice.png" alt="" className="site-img" /></div>
        </div>
        <div className="v1-about-text">
          <span className="eyebrow">{t.about.eyebrow}</span>
          <h2 className="section-title">{t.about.title}</h2>
          <p className="section-body">{t.about.body.split('\n\n')[0]}</p>
          <a href="#/about" className="btn-link">{t.about.more}</a>
        </div>
      </div>
    </section>
  );
}

function V1Services({ t, lang }) {
  return (
    <section className="v1-section v1-services-sec">
      <div className="v1-section-header">
        <span className="eyebrow">{t.services.eyebrow}</span>
        <h2 className="section-title">{t.services.title}</h2>
      </div>
      <div className="v1-services-grid">
        {t.services.items.map((s, i) => (
          <div key={i} className="v1-service-card">
            <div className="v1-service-num">{s.k}</div>
            <h3>{s.title}</h3>
            <p>{s.body}</p>
            <a href="#/services" className="btn-link">{s.cta} →</a>
          </div>
        ))}
      </div>
    </section>
  );
}

function V1Testimonial({ t }) {
  return (
    <section className="v1-testimonial">
      <div className="v1-quote-mark" aria-hidden>&ldquo;</div>
      <blockquote>{t.testimonial.quote}</blockquote>
      <cite>
        <strong>{t.testimonial.name}</strong>
        <span> — {t.testimonial.role}</span>
      </cite>
    </section>
  );
}

function V1FAQ({ t, lang }) {
  return (
    <section className="v1-section v1-faq-sec">
      <div className="v1-faq-grid">
        <div className="v1-faq-intro">
          <span className="eyebrow">{t.faq.eyebrow}</span>
          <h2 className="section-title">{t.faq.title}</h2>
        </div>
        <div className="v1-faq-body">
          <FAQ t={t} lang={lang} />
        </div>
      </div>
    </section>
  );
}

function V1Blog({ t, lang }) {
  const { loading, articles } = useArticles({ lang, featured: true, limit: 3 });
  return (
    <section className="v1-section v1-blog-sec">
      <div className="v1-section-header v1-blog-head">
        <div>
          <span className="eyebrow">{t.blog.eyebrow}</span>
          <h2 className="section-title">{t.blog.title}</h2>
        </div>
        <a href="#/blog" className="btn-link">{t.blog.view_all}</a>
      </div>
      <div className="v1-blog-grid">
        {loading ? (
          <div className="blog-status">{t.blog.loading}</div>
        ) : articles.length === 0 ? (
          <div className="blog-status">{t.blog.empty}</div>
        ) : articles.map(a => <ArticleCard key={a.id} article={a} lang={lang} t={t} />)}
      </div>
    </section>
  );
}

function V1CTABand({ t, lang }) {
  return (
    <section className="v1-cta-band">
      <div className="v1-cta-band-inner">
        <span className="eyebrow">{t.contact.eyebrow}</span>
        <h2 className="section-title">{t.contact.title}</h2>
        <p>{t.contact.body}</p>
        <div className="v1-hero-ctas">
          <a href="#/contact" className="btn-primary">{t.contact.whatsapp}</a>
          <a href={`tel:${t.contact.phone_num}`} className="btn-ghost">{t.contact.phone} — {t.contact.phone_num}</a>
        </div>
      </div>
    </section>
  );
}

function V1Footer({ t, lang }) {
  return (
    <footer className="v1-footer">
      <div className="v1-footer-inner">
        <div className="v1-footer-col v1-footer-brand">
          <div className="v1-brand">
            <span className="v1-brand-mark">A</span>
            <span className="v1-brand-text">
              <span className="v1-brand-name">Alin</span>
              <span className="v1-brand-sub">{t.brand_sub}</span>
            </span>
          </div>
          <p className="v1-footer-desc">{t.tagline}</p>
        </div>
        <div className="v1-footer-col">
          <h5>{lang === 'he' ? 'ניווט' : 'Navigate'}</h5>
          <a href="#/about">{t.nav.about}</a>
          <a href="#/services">{t.nav.services}</a>
          <a href="#/blog">{t.nav.blog}</a>
          <a href="#/contact">{t.nav.contact}</a>
        </div>
        <div className="v1-footer-col">
          <h5>{lang === 'he' ? 'צרי קשר' : 'Contact'}</h5>
          <a href={`tel:${t.contact.phone_num}`}>{t.contact.phone_num}</a>
          <a href={`mailto:${t.contact.email_addr}`}>{t.contact.email_addr}</a>
        </div>
        <div className="v1-footer-col">
          <h5>{t.footer.newsletter}</h5>
          <form className="v1-newsletter" onSubmit={(e) => e.preventDefault()}>
            <input type="email" placeholder={t.footer.newsletter_ph} />
            <button type="submit">{t.footer.newsletter_cta}</button>
          </form>
          <small>{t.footer.newsletter_note}</small>
        </div>
      </div>
      <div className="v1-footer-bottom">
        <span>{t.footer.rights}</span>
        <span>Design · Alin Global</span>
      </div>
    </footer>
  );
}

function V1Home({ t, lang, heroLayout }) {
  return (
    <>
      <V1Hero t={t} lang={lang} heroLayout={heroLayout} />
      <V1AboutSection t={t} lang={lang} />
      <V1Services t={t} lang={lang} />
      <V1Testimonial t={t} />
      <V1FAQ t={t} lang={lang} />
      <V1Blog t={t} lang={lang} />
      <V1CTABand t={t} lang={lang} />
    </>
  );
}

function V1({ heroLayout = 'split' }) {
  const { lang, setLang, t } = useLanguage('he');
  const [route, go, param] = useHashRoute('home');
  return (
    <div className="v1-root" dir={t.dir} lang={t.lang}>
      <V1Nav t={t} lang={lang} setLang={setLang} route={route} go={go} />
      <main className="v1-main">
        {route === 'home' && <V1Home t={t} lang={lang} heroLayout={heroLayout} />}
        {route === 'about' && <AboutPage t={t} lang={lang} />}
        {route === 'services' && <ServicesPage t={t} lang={lang} />}
        {route === 'blog' && <BlogPage t={t} lang={lang} />}
        {route === 'article' && <ArticlePage t={t} lang={lang} slug={param} />}
        {route === 'contact' && <ContactPage t={t} lang={lang} />}
      </main>
      <V1Footer t={t} lang={lang} />
    </div>
  );
}

window.V1 = V1;