// 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: '14ch' }}>An oven for every fire.</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>
    );
  }

  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"><strong style={{ color: 'var(--fg-1)' }}>{t.who}</strong> · {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>
    );
  }

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

  window.HomePage = HomePage;
})();