// HomePage.jsx
(function () {
  const { PRODUCTS, PROMISES, CRAFT, TESTIMONIALS } = window.TF_DATA;

  const HERO_IMAGES = [
    { src: 'images/home_hero1.jpg',  alt: 'Terraforno oven at full fire' },
    { src: 'images/home_hero2.jpg', alt: 'Terraforno Verona wood-fired oven' },
    { src: 'images/home_hero3.jpg', alt: 'Terraforno oven side view' },
    { src: 'images/home_hero4.jpg',  alt: 'Terraforno oven in use' },
    { src: 'images/home_hero5.jpg',  alt: 'Terraforno outdoor lifestyle' },
  ];

  function Hero({ go, variant }) {
    const { useState, useEffect } = React;
    const [current, setCurrent] = useState(0);
    const [fading, setFading] = useState(false);

    useEffect(() => {
      const interval = setInterval(() => {
        setFading(true);
        setTimeout(() => {
          setCurrent((c) => (c + 1) % HERO_IMAGES.length);
          setFading(false);
        }, 600);
      }, 3000);
      return () => clearInterval(interval);
    }, []);

    const img = HERO_IMAGES[current];
    const imgStyle = {
      position: 'absolute', inset: 0, width: '100%', height: '100%',
      objectFit: 'cover', objectPosition: 'center',
      transition: 'opacity 0.6s ease',
      opacity: fading ? 0 : 1,
    };

    const dots = (
      <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 28 }}>
        {HERO_IMAGES.map((_, i) => (
          <button key={i} onClick={() => { setFading(true); setTimeout(() => { setCurrent(i); setFading(false); }, 300); }}
            aria-label={`Show image ${i + 1}`}
            style={{ width: i === current ? 24 : 8, height: 8, borderRadius: 999, border: 0, cursor: 'pointer', padding: 0,
              background: i === current ? 'var(--tf-flame)' : 'rgba(246,236,221,.35)',
              transition: 'all 0.3s ease' }} />
        ))}
      </div>
    );

    if (variant === 'overlay') {
      return (
        <section data-section="ember" style={{ position: 'relative', minHeight: 'min(92vh, 860px)', display: 'grid', placeItems: 'center', overflow: 'hidden' }}>
          <img src={img.src} alt={img.alt} style={imgStyle} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.28) 100%)' }} />
          <div className="tf-wrap" style={{ position: 'relative', textAlign: 'center', maxWidth: 920 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, whiteSpace: 'nowrap', fontSize: 'var(--t-xs)', fontWeight: 600, letterSpacing: '.04em', padding: '7px 15px', borderRadius: 'var(--r-pill)', background: 'rgba(0,0,0,.55)', border: '1px solid rgba(255,255,255,.25)', color: '#fff', backdropFilter: 'blur(8px)' }}><Icon name="flame" size={13} style={{ color: '#F4956A' }} /> Handcrafted in Belgaum, Karnataka</span>
            <h1 className="tf-display" style={{ color: '#FFFFFF', margin: '22px 0 0', fontSize: 'clamp(2.8rem, 7vw, 5.5rem)', whiteSpace: 'nowrap', textShadow: '0 2px 6px rgba(0,0,0,.55), 0 4px 24px rgba(0,0,0,.4)' }}>Introducing <span style={{ fontStyle: 'italic', color: '#F4956A' }}>Terraforno</span></h1>
            <p className="tf-lead" style={{ color: '#FFFFFF', maxWidth: 560, margin: '22px auto 0', textShadow: '0 1px 6px rgba(0,0,0,.6), 0 3px 16px rgba(0,0,0,.4)' }}>India's finest wood-fired ovens, proudly made in India.</p>
            <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 34, flexWrap: 'wrap' }}>
              <TFButton variant="primary" size="lg" arrow onClick={() => go('product')}>Explore the ovens</TFButton>
              <TFButton variant="outline" size="lg" onClick={() => go('about')} style={{ color: '#F6ECDD', borderColor: 'rgba(246,236,221,.4)' }}>Our craft</TFButton>
            </div>
            {dots}
          </div>
        </section>
      );
    }

    // split (default) — full-bleed cycling hero
    return (
      <section data-section="ember" style={{ position: 'relative', minHeight: 'min(92vh, 860px)', display: 'grid', placeItems: 'center', overflow: 'hidden' }}>
        <img src={img.src} alt={img.alt} style={imgStyle} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.28) 100%)' }} />
        <div className="tf-wrap" style={{ position: 'relative', textAlign: 'center', maxWidth: 920, paddingTop: 'clamp(108px,12vw,130px)', paddingBottom: 'clamp(48px,7vw,90px)' }}>
          <Pill accent><Icon name="flame" size={13} /> Handcrafted in Belgaum, Karnataka</Pill>
          <h1 className="tf-display" style={{ color: '#FFFFFF', margin: '22px 0 0', fontSize: 'clamp(2.8rem, 7vw, 5.5rem)', whiteSpace: 'nowrap', textShadow: '0 2px 6px rgba(0,0,0,.55), 0 4px 24px rgba(0,0,0,.4)' }}>Introducing <span style={{ fontStyle: 'italic', color: '#F4956A' }}>Terraforno</span></h1>
          <p className="tf-lead" style={{ color: '#FFFFFF', maxWidth: 560, margin: '22px auto 0', textShadow: '0 1px 6px rgba(0,0,0,.6), 0 3px 16px rgba(0,0,0,.4)' }}>India's finest wood-fired ovens, proudly made in India.</p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 34, flexWrap: 'wrap' }}>
            <TFButton variant="primary" size="lg" arrow onClick={() => go('product')}>Explore the ovens</TFButton>
            <TFButton variant="outline" size="lg" onClick={() => go('about')} style={{ color: '#fff', borderColor: 'rgba(255,255,255,.45)' }}>Our story</TFButton>
          </div>
          <div style={{ display: 'flex', gap: 40, marginTop: 52, justifyContent: 'center' }}>
            {[['450°C', 'Peak heat'], ['90s', 'Per pizza'], ['Wood & Gas', 'Fuel options']].map(([k, v]) => (
              <div key={v}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: '1.9rem', fontWeight: 600, color: '#fff' }}>{k}</div>
                <div className="tf-small" style={{ color: 'rgba(255,255,255,.55)' }}>{v}</div>
              </div>
            ))}
          </div>
          {dots}
        </div>
      </section>
    );
  }

  function Marquee() {
    const items = ['Refractory clay', 'Wood or Gas fired', 'Hand-built', 'True Neapolitan heat', 'Made in India', 'Delivered nationwide'];
    const row = items.concat(items);
    return (
      <div className="tf-marquee" data-section="ember" style={{ borderBlock: '1px solid #2E2014', paddingBlock: 22 }}>
        <div className="tf-marquee__track">
          <span>{row.map((t, i) => <React.Fragment key={i}>{t}<Icon name="flame" size={15} style={{ color: 'var(--tf-terracotta)' }} /></React.Fragment>)}</span>
        </div>
      </div>
    );
  }

  function Promises() {
    return (
      <section className="tf-section--tight tf-section">
        <div className="tf-wrap" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: 28 }}>
          {PROMISES.map((p) => (
            <div key={p.t} className="tf-reveal">
              <Icon name={p.icon} size={28} style={{ color: 'var(--accent)' }} />
              <h4 className="tf-h4" style={{ margin: '14px 0 6px' }}>{p.t}</h4>
              <p className="tf-small">{p.d}</p>
            </div>
          ))}
        </div>
      </section>
    );
  }

  function FeaturedOvens({ go }) {
    return (
      <section className="tf-section" style={{ background: 'var(--surface)' }}>
        <div className="tf-wrap">
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', marginBottom: 48 }}>
            <div>
              <Eyebrow>The collection</Eyebrow>
              <h2 className="tf-h2" style={{ margin: 0, maxWidth: '16ch' }}>Our ovens.</h2>
            </div>
            <TFButton variant="ghost" arrow onClick={() => go('product')}>See all ovens</TFButton>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(300px,1fr))', gap: 26 }}>
            {PRODUCTS.filter(p => p.featured).map((p) => (
              <article key={p.id} className={'tf-card tf-reveal' + (p.comingSoon ? '' : ' tf-card--link')}
                onClick={() => !p.comingSoon && go('product', p.id)}
                style={{ cursor: p.comingSoon ? 'default' : 'pointer', position: 'relative' }}>
                {p.comingSoon && (
                  <div style={{ position: 'absolute', top: 14, left: 14, zIndex: 2, background: 'var(--tf-flame)', color: 'var(--tf-charcoal)', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 'var(--t-xs)', letterSpacing: '.1em', textTransform: 'uppercase', padding: '6px 13px', borderRadius: 'var(--r-pill)' }}>
                    Coming Soon
                  </div>
                )}
                {p.img
                  ? <img src={p.img} alt={p.name} style={{ width: '100%', aspectRatio: '4/3', objectFit: 'cover', display: 'block', filter: p.comingSoon ? 'brightness(0.6)' : 'none' }} />
                  : <Photo tone={p.tone} label={p.name} icon="flame" style={{ aspectRatio: '4/3', borderRadius: 0, border: 0, filter: p.comingSoon ? 'brightness(0.6)' : 'none' }} />
                }
                <div style={{ padding: '22px 22px 26px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
                    <h3 className="tf-h3" style={{ margin: 0 }}>{p.name}</h3>
                    <span className="tf-small" style={{ color: p.comingSoon ? 'var(--tf-flame)' : 'var(--accent)', fontWeight: 600, whiteSpace: 'nowrap' }}>{p.comingSoon ? 'Coming Soon' : p.kind}</span>
                  </div>
                  <div className="tf-small" style={{ marginTop: 3 }}>{p.tagline}</div>
                  <p className="tf-body" style={{ margin: '14px 0 0', fontSize: 'var(--t-sm)' }}>{p.blurb}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    );
  }

  function CraftStrip({ go }) {
    return (
      <section className="tf-section" data-section="ember">
        <div className="tf-wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(32px,5vw,72px)', alignItems: 'center' }}>
            <Photo tone="clay" label="The workshop · Belgaum" icon="hammer" style={{ aspectRatio: '5/6', borderRadius: 'var(--r-xl)' }} className="tf-reveal" />
            <div>
              <Eyebrow>How it's made</Eyebrow>
              <h2 className="tf-h2" style={{ color: '#FBF3E6', margin: '0 0 8px' }}>Earth, formed by hand.</h2>
              <p className="tf-lead" style={{ color: '#D8C6AE', maxWidth: 440 }}>Every Terraforno begins as raw refractory clay and ends as a hearth that holds heat like stone. Four steps, no shortcuts.</p>
              <div style={{ marginTop: 30, display: 'flex', flexDirection: 'column' }}>
                {CRAFT.map((c) => (
                  <div key={c.n} className="tf-reveal" style={{ display: 'flex', gap: 18, padding: '18px 0', borderTop: '1px solid #2E2014' }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: '1.1rem', color: 'var(--tf-flame)', minWidth: 28 }}>{c.n}</div>
                    <Icon name={c.icon} size={22} style={{ color: 'var(--accent)', flex: 'none', marginTop: 2 }} />
                    <div>
                      <h4 className="tf-h4" style={{ color: '#F6ECDD', margin: '0 0 4px' }}>{c.t}</h4>
                      <p className="tf-small" style={{ color: '#A2917C' }}>{c.d}</p>
                    </div>
                  </div>
                ))}
              </div>
              <TFButton variant="outline" arrow onClick={() => go('about')} style={{ marginTop: 28, color: '#F6ECDD', borderColor: 'rgba(246,236,221,.4)' }}>Read our story</TFButton>
            </div>
          </div>
        </div>
      </section>
    );
  }

  function WhatWeStandFor({ go }) {
    const pillars = [
      {
        n: '01', title: 'Craft First',
        body: <>Every oven is built <strong>by hand</strong>, to a standard we would be comfortable installing in our own home. <strong style={{ color: 'var(--accent)' }}>No compromises</strong> on materials. No shortcuts on process.</>,
      },
      {
        n: '02', title: 'Honest Performance',
        body: <>Our ovens are <strong style={{ color: 'var(--accent)' }}>tested obsessively</strong> before they reach a customer. What we promise on paper, the oven <strong style={{ color: 'var(--accent)' }}>delivers in practice</strong>. Years of happy customers are our proof.</>,
      },
      {
        n: '03', title: 'Memories Over Transactions',
        body: <>We are not just selling an oven. We are giving you the <strong style={{ color: 'var(--accent)' }}>centrepiece of a thousand future evenings</strong> — with family, friends, and <strong style={{ color: 'var(--accent)' }}>food worth gathering around</strong>.</>,
      },
    ];
    return (
      <section className="tf-section">
        <div className="tf-wrap">
          <div style={{ textAlign: 'center', marginBottom: 52 }}>
            <Eyebrow style={{ justifyContent: 'center' }}>What we stand for</Eyebrow>
            <h2 className="tf-h2" style={{ margin: '10px 0 0' }}>Three things we<br />never compromise.</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
            {pillars.map((p) => (
              <div key={p.n} className="tf-card tf-reveal" style={{ padding: '40px 32px', borderTop: '3px solid var(--accent)' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: '3.5rem', fontWeight: 700, color: 'var(--accent)', opacity: 0.18, lineHeight: 1, marginBottom: 20 }}>{p.n}</div>
                <h4 className="tf-h4" style={{ margin: '0 0 14px' }}>{p.title}</h4>
                <p className="tf-small" style={{ lineHeight: 1.75, margin: 0 }}>{p.body}</p>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 48 }}>
            <TFButton variant="outline" size="lg" arrow onClick={() => go('about')}>Read our story</TFButton>
          </div>
        </div>
      </section>
    );
  }

  /* ── Interactive installations map ──
     India map (images/in.svg, viewBox 0 0 1000 1000) with a clickable dot per
     customer city; the panel beside it shows that install's photos + blurb. */
  function InstallMap({ go }) {
    const { useState } = React;
    const { INSTALLS } = window.TF_DATA;
    const [activeId, setActiveId] = useState(INSTALLS[0].id);
    const [imgIdx, setImgIdx] = useState(0);
    const active = INSTALLS.find((c) => c.id === activeId);
    const select = (id) => { setActiveId(id); setImgIdx(0); };

    return (
      <section className="tf-section" data-section="ember">
        <div className="tf-wrap">
          <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 52px' }}>
            <Eyebrow style={{ justifyContent: 'center' }}>Installations</Eyebrow>
            <h2 className="tf-h2" style={{ color: '#FBF3E6', margin: '0 0 12px' }}>Where we've installed.</h2>
            <p className="tf-lead" style={{ color: '#D8C6AE', margin: 0 }}>Built in Belgaum, delivered and installed across India. Select a city to see the oven we built there.</p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(320px,1fr))', gap: 'clamp(32px,5vw,64px)', alignItems: 'center' }}>

            {/* Map with clickable city dots */}
            <div className="tf-reveal" style={{ maxWidth: 460, margin: '0 auto', width: '100%' }}>
              <svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: 'auto' }} aria-label="Map of India showing Terraforno installations">
                <image href="images/in.svg" x="0" y="0" width="1000" height="1000"
                  style={{ filter: 'brightness(0) saturate(100%) invert(55%) sepia(20%) saturate(400%) hue-rotate(5deg) brightness(90%)', opacity: 0.9 }}
                />
                {/* Belgaum — workshop, not a customer dot */}
                <g>
                  <circle cx="273" cy="700" r="6" fill="none" stroke="#8F7D66" strokeWidth="2.5" />
                  <text x="287" y="721" fontSize="22" fontStyle="italic" fontFamily="Georgia, serif" fill="#8F7D66">Belgaum · workshop</text>
                </g>
                {INSTALLS.map((c) => {
                  const on = c.id === activeId;
                  return (
                    <g key={c.id} onClick={() => select(c.id)} style={{ cursor: 'pointer' }} role="button" aria-label={`Show install in ${c.city}`}>
                      <title>{c.city}</title>
                      {/* generous invisible hit area */}
                      <circle cx={c.x} cy={c.y} r="26" fill="transparent" />
                      {on && (
                        <circle cx={c.x} cy={c.y} r="12" fill="none" stroke="rgba(232,122,62,.55)" strokeWidth="2">
                          <animate attributeName="r" values="9;26" dur="1.8s" repeatCount="indefinite" />
                          <animate attributeName="opacity" values="0.8;0" dur="1.8s" repeatCount="indefinite" />
                        </circle>
                      )}
                      <circle cx={c.x} cy={c.y} r={on ? 9 : 7}
                        fill={on ? '#E87A3E' : '#C8A96E'}
                        stroke={on ? 'rgba(232,122,62,.5)' : 'rgba(200,169,110,.35)'}
                        strokeWidth="2.5"
                        style={{ transition: 'fill .2s ease' }}
                      />
                      <text x={c.labelX} y={c.labelY} textAnchor={c.anchor} fontSize="26" fontFamily="Georgia, serif"
                        fill={on ? '#E87A3E' : '#B9A585'} fontWeight={on ? 700 : 500}>{c.city}</text>
                    </g>
                  );
                })}
              </svg>
              {/* City chips — same selection, easier on touch screens */}
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'center', marginTop: 18 }}>
                {INSTALLS.map((c) => {
                  const on = c.id === activeId;
                  return (
                    <button key={c.id} onClick={() => select(c.id)}
                      style={{ padding: '7px 14px', borderRadius: 'var(--r-pill)', fontSize: 'var(--t-xs)', fontWeight: 600, letterSpacing: '.03em', cursor: 'pointer', fontFamily: 'var(--font-body)',
                        border: '1px solid ' + (on ? 'var(--tf-flame)' : '#2E2014'),
                        background: on ? 'var(--tf-flame)' : 'transparent',
                        color: on ? '#1A0F07' : '#D8C6AE',
                        transition: 'all .2s ease' }}>
                      {c.city}
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Selected install panel */}
            <div className="tf-reveal">
              <div key={active.id} style={{ background: 'rgba(251,243,230,.04)', border: '1px solid #2E2014', borderRadius: 'var(--r-xl)', overflow: 'hidden' }}>
                <img src={active.imgs[imgIdx].src} alt={active.imgs[imgIdx].alt}
                  style={{ width: '100%', aspectRatio: '3/2', objectFit: 'cover', display: 'block' }} />
                <div style={{ padding: '24px 26px 28px' }}>
                  <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
                    {active.imgs.map((im, i) => (
                      <button key={im.src} onClick={() => setImgIdx(i)} aria-label={`Show photo ${i + 1}`}
                        style={{ padding: 0, border: '2px solid ' + (i === imgIdx ? 'var(--tf-flame)' : 'transparent'), borderRadius: 8, background: 'none', cursor: 'pointer', overflow: 'hidden', lineHeight: 0 }}>
                        <img src={im.src} alt="" style={{ width: 72, height: 52, objectFit: 'cover', display: 'block', opacity: i === imgIdx ? 1 : 0.55, transition: 'opacity .2s ease' }} />
                      </button>
                    ))}
                  </div>
                  <div className="tf-small" style={{ color: 'var(--tf-flame)', fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', fontSize: 'var(--t-xs)' }}>{active.tag}</div>
                  <h3 className="tf-h3" style={{ color: '#F6ECDD', margin: '8px 0 10px' }}>{active.city}</h3>
                  <p className="tf-body" style={{ color: '#D8C6AE', margin: 0 }}>{active.blurb}</p>
                  <TFButton variant="outline" arrow onClick={() => go('contact')} style={{ marginTop: 22, color: '#F6ECDD', borderColor: 'rgba(246,236,221,.4)' }}>Get a quote</TFButton>
                </div>
              </div>
            </div>

          </div>
        </div>
      </section>
    );
  }

  function Testimonials() {
    return (
      <section className="tf-section" style={{ background: 'var(--surface)' }}>
        <div className="tf-wrap">
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <Eyebrow style={{ justifyContent: 'center' }}>Happy customers</Eyebrow>
            <h2 className="tf-h2" style={{ margin: 0 }}>What our customers say.</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 28 }}>
            {window.TF_DATA.TESTIMONIALS.map((t, i) => (
              <div key={i} className="tf-card tf-reveal" style={{ padding: '32px 28px' }}>
                <Icon name="quote" size={32} style={{ color: 'var(--accent)', opacity: .5, marginBottom: 16 }} />
                <p className="tf-body" style={{ fontStyle: 'italic', fontSize: 'var(--t-body-lg)', lineHeight: 1.55, margin: '0 0 20px' }}>"{t.quote}"</p>
                <div className="tf-small">{t.where}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  function ClosingCTA({ go }) {
    return (
      <section className="tf-section" data-section="ember" style={{ position: 'relative', overflow: 'hidden', textAlign: 'center' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(60% 80% at 50% 120%, rgba(232,122,62,.4), transparent 65%)' }} />
        <div className="tf-wrap tf-wrap--narrow" style={{ position: 'relative' }}>
          <h2 className="tf-h1" style={{ color: '#FBF3E6', margin: 0 }}>Light a fire that lasts a lifetime.</h2>
          <p className="tf-lead" style={{ color: '#D8C6AE', maxWidth: 480, margin: '18px auto 0' }}>Get a quote for your home, restaurant, or resort. We deliver and install across all of India.</p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 32, flexWrap: 'wrap' }}>
            <TFButton variant="primary" size="lg" arrow onClick={() => go('contact')}>Get a quote</TFButton>
            <TFButton variant="outline" size="lg" onClick={() => go('product')} style={{ color: '#F6ECDD', borderColor: 'rgba(246,236,221,.4)' }}>Browse ovens</TFButton>
          </div>
        </div>
      </section>
    );
  }

  // Hidden pre-launch: the install map needs real per-city photos and copy
  // before it goes live. Flip to true to bring it back.
  const SHOW_INSTALL_MAP = false;

  function HomePage({ go, heroVariant }) {
    const root = useReveal();
    return (
      <div ref={root}>
        <Hero go={go} variant={heroVariant} />
        <Marquee />
        <Promises />
        <FeaturedOvens go={go} />
        <WhatWeStandFor go={go} />
        {SHOW_INSTALL_MAP && <InstallMap go={go} />}
        <Testimonials />
      </div>
    );
  }

  window.HomePage = HomePage;
})();