/* global React, Header, Footer, WhatsAppFAB, Photo, Eyebrow, Rule, SectionHead, Testimonial, CtaBand, WA_LINK, PHONE, EMAIL */
// Home page — includes contact section.

const CATS = [
  { label: "FAMILY", title: "צילומי משפחה", href: "family.html", tag: "משפחה · גיל שנה · הריון", img: "../../assets/cat-family.jpg" },
  { label: "ONE YEAR", title: "צילומי גיל שנה", href: "family.html#oneyear", tag: "החגיגה הראשונה", img: "../../assets/cat-oneyear.jpg" },
  { label: "BAT MITZVAH", title: "בוק בת מצווה", href: "batmitzvah.html", tag: "הרגע שלה", img: "../../assets/cat-batmitzvah.jpg" },
  { label: "MOTHERHOOD", title: "צילומי אמהות", href: "family.html#motherhood", tag: "חיבור ואהבה", img: "../../assets/cat-motherhood.jpg" },
  { label: "COUPLES", title: "צילומי זוגיות", href: "family.html#couples", tag: "רק שניכם", img: "../../assets/cat-couples.jpg" },
  { label: "BRANDING", title: "צילומי מיתוג", href: "lifestyle.html", tag: "עסקים · מותג", img: "../../assets/cat-lifestyle.jpg" },
];

function ContactSection() {
  const [sent, setSent] = React.useState(false);
  return (
    <section className="ag-section sand" id="contact" style={{ scrollMarginTop: 90 }}>
      <div className="ag-wrap">
        <div className="ag-contact-grid">
          <div className="ag-reveal">
            <SectionHead eyebrow="יצירת קשר" title="רוצים לקבל פרטים? אני כאן."
              intro="מוזמנים להשאיר הודעה, להתקשר או לכתוב לי בוואטסאפ — אשמח לענות על כל שאלה ולתכנן יחד את הסשן שלכם." />
            <form className="ag-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
              <label><span className="field-label">שם מלא</span><input type="text" placeholder="איך לקרוא לך?" /></label>
              <label><span className="field-label">טלפון</span><input type="tel" placeholder="054-0000000" /></label>
              <label className="full"><span className="field-label">איזה סשן מעניין אותך?</span><input type="text" placeholder="משפחה / גיל שנה / בת מצווה / הריון…" /></label>
              <label className="full"><span className="field-label">הודעה</span><textarea placeholder="שתפי אותי במה שיש לך בראש…"></textarea></label>
              {sent
                ? <div className="ag-form-success">תודה! אצור איתך קשר בקרוב 🌿</div>
                : <div className="submit-row"><button type="submit" className="btn btn-primary">שליחה ›</button></div>}
            </form>
          </div>
          <aside className="ag-contact-aside ag-reveal">
            <Photo ratio="4/5" label="כפר החורש, עמק יזרעאל" style={{ backgroundImage: "url(../../assets/contact-flower.jpg)", backgroundSize: "cover", backgroundPosition: "center" }} />
            <div style={{ marginTop: 24 }}>
              <div className="ag-contact-line"><span className="lbl">טלפון</span><a className="val" href={"tel:" + PHONE.replace(/-/g, "")}>{PHONE}</a></div>
              <div className="ag-contact-line"><span className="lbl">אימייל</span><a className="val" href={"mailto:" + EMAIL}>{EMAIL}</a></div>
              <div className="ag-contact-line"><span className="lbl">סטודיו</span><span className="val">כפר החורש, עמק יזרעאל</span></div>
              <a className="btn btn-sage" style={{ marginTop: 20, width: "100%", justifyContent: "center" }} href={WA_LINK} target="_blank" rel="noopener">שלחי הודעת וואטסאפ</a>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <div className="ag-page">
      <Header active="home" />

      {/* Hero */}
      <section className="ag-hero">
        <Photo label="Hero · משפחה בשדה באור טבעי" style={{ backgroundImage: "url(../../assets/hero-family-field.jpg)", backgroundSize: "cover", backgroundPosition: "center" }} />
        <div className="ag-hero-overlay" />
        <div className="ag-hero-content">
          <h1>כל תמונה היא לא רק זיכרון, היא הסיפור שלכם.</h1>
          <div className="ag-hero-btns">
            <a className="btn btn-primary" href="#portfolio">לכל הסשנים</a>
            <a className="btn" href="#contact">דברי איתי ›</a>
          </div>
        </div>
      </section>

      {/* About */}
      <section className="ag-section">
        <div className="ag-wrap">
          <div className="ag-split narrow-img">
            <div className="ag-reveal"><Photo className="ag-portrait" tall label="אנה גרוזמן" style={{ backgroundImage: "url(../../assets/anna-profile.jpg)", backgroundSize: "cover", backgroundPosition: "center top" }} /></div>
            <div className="ag-split-body ag-reveal">
              <Eyebrow>נעים להכיר</Eyebrow>
              <h2 style={{ marginTop: 12 }}>שמי אנה, ואני מביאה את הלב לכל תמונה.</h2>
              <p className="lead">אמא לשלושה מתוקים, אשת משפחה וצלמת. אחרי תואר בהנדסה כימית בחרתי להגשים חלום ולחזור אל היצירה שתמיד אהבתי.</p>
              <p>אני גרה בעמק יזרעאל בין שדות ירוקים, פריחות ויבול של חקלאים — טבע קסום שמהווה תפאורה ביתית עבורי ועבור הצילומים שלי. חשוב לי לתפוס את הרגעים השמחים שלכם, כך שתוכלו לחזור אליהם דרך התמונות גם עוד 20 שנה.</p>
              <div className="signature">Anna Gruzman</div>
            </div>
          </div>
        </div>
      </section>

      {/* Categories */}
      <section className="ag-section sand" id="portfolio" style={{ scrollMarginTop: 90 }}>
        <div className="ag-wrap">
          <SectionHead center eyebrow="התיק שלי" title="בחרו את הרגע שתרצו לתעד"
            intro="מגוון סשנים בטבע, כולם מצולמים באור טבעי ובאווירה נינוחה." />
          <div className="ag-cat-grid">
            {CATS.map((c) => (
              <a key={c.label} className="ag-cat ag-reveal" href={c.href}>
                <Photo ratio="3/4" style={{ backgroundImage: `url(${c.img})`, backgroundSize: "cover", backgroundPosition: "center" }} />
                <div className="ag-cat-cap">
                  <Eyebrow>{c.label}</Eyebrow>
                  <h3>{c.title}</h3>
                  <span className="arrow">{c.tag} ›</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonial */}
      <section className="ag-section">
        <div className="ag-wrap ag-reveal">
          <Testimonial
            quote={"\u201Cאנה משקיעה מחשבה מאחורי כל צילום ודואגת שהכל יראה מקסים. התמונות יצאו מדהימות והבוק עצמו יצא לא פחות ממושלם. ממליצה בחום רב.\u201D"}
            author="מיה כהן · אמא של ליא" />
        </div>
      </section>

      <ContactSection />

      {/* Blog teaser — added value */}
      <section className="ag-section">
        <div className="ag-wrap">
          <div className="ag-blogteaser">
            <a href="travel.html" className="ag-reveal" aria-label="לבלוג הטיולים">
              <Photo ratio="4/3" label="יומן מסע" style={{ backgroundImage: "url(../../assets/travel-hero.jpg)", backgroundSize: "cover", backgroundPosition: "center" }} />
            </a>
            <div className="ag-blogteaser-body ag-reveal">
              <Eyebrow>הבלוג שלי · ערך מוסף</Eyebrow>
              <h2>לא רק צילום — גם השראה לטיולים</h2>
              <p>מעבר למצלמה, אני אוהבת לשתף אתכם בחוויות מהמסעות המשפחתיים שלנו. בבלוג תמצאו יומני מסע מפורטים, מסלולים יום‑אחר‑יום, קישורי ניווט והמלצות — כדי שתוכלו לתכנן את הטיול הבא שלכם בקלות. זה ערך מוסף שחשוב לי להעניק לכם כאן באתר.</p>
              <a className="btn btn-primary" href="travel.html">לקריאה בבלוג ›</a>
            </div>
          </div>
        </div>
      </section>

      <CtaBand />
      <Footer />
      <WhatsAppFAB />
    </div>
  );
}

window.HomePage = HomePage;