// AboutPage.jsx — About Terraforno: story, craft, values.
(function () {

  const VALUES = [
    {
      n: '01',
      t: 'Craft First',
      d: ['Every oven is built ', 'by hand', ', to a standard we would be comfortable installing in our own home. ', 'No compromises', ' on materials. No shortcuts on process.'],
    },
    {
      n: '02',
      t: 'Honest Performance',
      d: ['Our ovens are ', 'tested obsessively', ' before they reach a customer. What we promise on paper, the oven ', 'delivers in practice', '. Years of happy customers are our proof.'],
    },
    {
      n: '03',
      t: 'Memories Over Transactions',
      d: ['We are not just selling an oven. We are giving you the ', 'centrepiece of a thousand future evenings', ' — with family, friends, and ', 'food worth gathering around', '.'],
    },
  ];

  const STATS = [
    { k: 'Est. 2024', v: 'Based in Belgaum' },
    { k: '2', v: 'Flagship models' },
    { k: 'Global', v: 'Delivery & install' },
    { k: '10+', v: 'Ovens installed' },
  ];

  /* ── India map with city dots ── */
  // SVG viewBox is 0 0 1000 1000 (simplemaps India SVG).
  // City coordinates mapped by geographic position within that space.
  // India bounding box approx: lon 68°E–97°E, lat 8°N–37°N
  // x = (lon - 68) / 29 * 1000,  y = (37 - lat) / 29 * 1000
  // Delhi:    77°E,29°N  → x≈310, y≈276
  // Mumbai:   73°E,19°N  → x≈172, y≈621
  // Kolhapur: 74.2°E,16.7°N → x≈213, y≈700
  // Belgaum:  74.5°E,15.9°N → x≈224, y≈728
  // Bangalore:77.6°E,13°N → x≈330, y≈828
  // Chennai:  80.3°E,13°N → x≈423, y≈828
  const CITIES = [
    { name: 'Belgaum',   label: 'Belgaum',    x: 224, y: 728, home: true  },
    { name: 'Kolhapur',  label: 'Kolhapur',   x: 213, y: 700, home: false },
    { name: 'Mumbai',    label: 'Mumbai',     x: 172, y: 621, home: false },
    { name: 'Bangalore', label: 'Bangalore',  x: 330, y: 828, home: false },
    { name: 'Chennai',   label: 'Chennai',    x: 423, y: 828, home: false },
    { name: 'New Delhi', label: 'New Delhi',  x: 310, y: 276, home: false },
  ];

  function IndiaMap() {
    return (
      <section className="tf-section--tight tf-section" style={{ background: 'var(--surface)' }}>
        <div className="tf-wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(32px,5vw,64px)', alignItems: 'center' }}>
            <div>
              <Eyebrow>Where we go</Eyebrow>
              <h2 className="tf-h2" style={{ margin: '0 0 16px' }}>Delivered across India<br />and beyond.</h2>
              <p className="tf-body">Every oven we build is delivered and installed by our team. We're already cooking in homes and restaurants across the country.</p>
              <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {CITIES.map((c) => (
                  <div key={c.name} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div style={{
                      width: c.home ? 10 : 8, height: c.home ? 10 : 8, borderRadius: '50%', flexShrink: 0,
                      background: c.home ? 'var(--tf-flame)' : 'var(--accent)',
                      boxShadow: c.home ? '0 0 0 3px rgba(232,122,62,.25)' : 'none',
                    }} />
                    <span className="tf-small" style={{ color: c.home ? 'var(--tf-flame)' : 'var(--fg-1)', fontWeight: c.home ? 600 : 400 }}>
                      {c.label}{c.home ? ' — Home base' : ''}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            {/* Real India SVG map with dots overlaid */}
            <div className="tf-reveal" style={{ position: 'relative', maxWidth: 400, margin: '0 auto', width: '100%' }}>
              <svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: 'auto' }}>
                {/* Real India map rendered via image tag */}
                <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%)' }}
                />
                {/* City dots — coordinates match 1000×1000 viewBox */}
                {CITIES.map((c) => (
                  <g key={c.name}>
                    {c.home && (
                      <circle cx={c.x} cy={c.y} r="18" fill="rgba(232,122,62,0.2)" />
                    )}
                    <circle
                      cx={c.x} cy={c.y} r={c.home ? 7 : 6}
                      fill={c.home ? '#E87A3E' : '#C8A96E'}
                      stroke={c.home ? 'rgba(232,122,62,0.5)' : 'rgba(200,169,110,0.4)'}
                      strokeWidth="2.5"
                    />
                    <text
                      x={c.x + (c.x > 350 ? -12 : 14)}
                      y={c.y + 5}
                      textAnchor={c.x > 350 ? 'end' : 'start'}
                      fontSize="28"
                      fontFamily="Georgia, serif"
                      fill={c.home ? '#E87A3E' : '#5a4a38'}
                      fontWeight={c.home ? '700' : '500'}
                    >{c.label}</text>
                  </g>
                ))}
              </svg>
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* ── Image placeholder component ── */
  function ImgPlaceholder({ label, style, className }) {
    return (
      <div
        className={className}
        style={{
          background: 'linear-gradient(135deg, #2A1C10 0%, #1A0F07 100%)',
          border: '2px dashed rgba(232,122,62,.35)',
          borderRadius: 'var(--r-xl)',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 10,
          color: 'rgba(232,122,62,.55)',
          fontSize: 'var(--t-sm)',
          fontFamily: 'var(--font-body)',
          letterSpacing: '.04em',
          textAlign: 'center',
          padding: 24,
          ...style,
        }}
      >
        <Icon name="flame" size={28} />
        <span>{label}</span>
      </div>
    );
  }

  /* Shows a real image if src loads, otherwise falls back to the dashed placeholder */
  function ImgOrPlaceholder({ src, label, style, className }) {
    const [failed, setFailed] = React.useState(false);
    if (failed) return <ImgPlaceholder label={label} style={style} className={className} />;
    return (
      <img
        src={src}
        alt={label}
        className={className}
        onError={() => setFailed(true)}
        style={{ objectFit: 'cover', borderRadius: 'var(--r-xl)', display: 'block', ...style }}
      />
    );
  }

  function AboutPage({ go }) {
    const root = useReveal();
    return (
      <div ref={root}>

        {/* ── HERO ── */}
        <section
          data-section="ember"
          style={{ position: 'relative', overflow: 'hidden', minHeight: 'min(72vh,700px)', display: 'grid', placeItems: 'center' }}
        >
          <img
            src="images/aboutus_hero.jpg"
            alt="Terraforno finished wood-fired oven"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', zIndex: 0 }}
          />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(20,14,8,.62), rgba(20,14,8,.32) 40%, rgba(20,14,8,.88))', zIndex: 1 }} />
          <div className="tf-wrap" style={{ position: 'relative', zIndex: 2, textAlign: 'center', maxWidth: 860, paddingTop: 'clamp(120px,14vw,150px)', paddingBottom: 'clamp(48px,7vw,96px)' }}>
            <Eyebrow style={{ justifyContent: 'center' }}>About us</Eyebrow>
            <h1 className="tf-display" style={{ color: '#FBF3E6', margin: '10px 0 0', fontSize: 'clamp(2.6rem,5vw,5rem)' }}>
              Built by Hand.<br />
              <span style={{ fontStyle: 'italic', color: 'var(--tf-flame)' }}>Fired by Passion.</span>
            </h1>
            <p className="tf-lead" style={{ color: '#D8C6AE', maxWidth: 560, margin: '22px auto 0' }}>
              Handcrafted wood-fired ovens from Belgaum, India — built for those who believe food is worth doing right.
            </p>
          </div>
        </section>

        {/* ── SECTION 1: THE TERRAFORNO DIFFERENCE ── */}
        <section className="tf-section">
          <div className="tf-wrap">
            <img
              src="images/aboutus_banner.jpg"
              alt="Terraforno finished wood-fired oven"
              className="tf-reveal"
              style={{ aspectRatio: '16/7', width: '100%', objectFit: 'cover', borderRadius: 'var(--r-xl)', display: 'block' }}
            />
            <div className="tf-wrap--narrow" style={{ margin: '52px auto 0', padding: 0 }}>
              <div
                className="tf-reveal"
                style={{ display: 'grid', gridTemplateColumns: '.7fr 1.3fr', gap: 'clamp(24px,5vw,64px)', alignItems: 'start' }}
              >
                <div>
                  <Eyebrow>Why Terraforno</Eyebrow>
                  <h2 className="tf-h2" style={{ margin: '0' }}>The Terraforno Difference.</h2>
                </div>
                <div>
                  <p className="tf-body">
                    India has no shortage of brick ovens. What it has lacked — until now — is a wood-fired oven built specifically for the craft of great pizza.
                  </p>
                  <p className="tf-body" style={{ marginTop: 16 }}>
                    Options exist locally, and we respect anyone putting in the effort. What sets us apart is the obsession we bring to every build — the materials we choose, the time we spend getting the geometry right, the finish we insist on, and the care we take with every customer long after the oven is installed. We set out to build something that performs at the level of the world's finest, and make it available to homes and restaurants across India.
                  </p>
                  <p className="tf-body" style={{ marginTop: 16 }}>
                    Authentic Italian pizza is finally arriving in our cities. We want every household and every restaurant that takes it seriously to have the oven it deserves.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* ── STATS BAND ── */}
        <section className="tf-section--tight tf-section" data-section="ember">
          <div className="tf-wrap">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(180px,1fr))', gap: 28 }}>
              {STATS.map((s) => (
                <div key={s.v} className="tf-reveal" style={{ textAlign: 'center', padding: '8px 12px', borderLeft: '1px solid #2E2014' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(2rem,3.4vw,2.9rem)', color: 'var(--tf-flame)', lineHeight: 1 }}>{s.k}</div>
                  <div className="tf-small" style={{ color: '#A2917C', marginTop: 10, letterSpacing: '.04em' }}>{s.v}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ── SECTION 2: WHAT WE BUILD ── */}
        <section className="tf-section" style={{ background: 'var(--surface)' }}>
          <div className="tf-wrap">
            <div
              style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(32px,5vw,72px)', alignItems: 'center' }}
            >
              <div>
                <Eyebrow>What we build</Eyebrow>
                <h2 className="tf-h2" style={{ margin: '0 0 20px' }}>Precision Built.<br />Made by Hand.</h2>
                <p className="tf-body">
                  We build wood-fired ovens entirely by hand, using Italian firebricks and interlocking modular refractory components, bound with masonry mortar and insulated to the highest standard.
                </p>
                <p className="tf-body" style={{ marginTop: 16 }}>
                  The result is an oven that reaches extraordinary internal temperatures while remaining safe and cool to the touch on the outside — a testament to thoughtful engineering, not shortcuts.
                </p>
                <p className="tf-body" style={{ marginTop: 16 }}>
                  But we do not stop at performance. We believe your oven should be something you are proud to look at. Every Terraforno oven is finished with custom embossed tiles, tailored to blend with your space — whether that is an outdoor entertaining area, a restaurant kitchen, or a rooftop terrace. A premium front panel. A refined burner system engineered specifically for the kind of even, high-heat cooking that produces a proper Neapolitan-style pizza base.
                </p>
                <p className="tf-body" style={{ marginTop: 16 }}>
                  This is not a cheap brick structure assembled for naan bread. It is a precision-built cooking instrument, designed to last for years and perform every single time.
                </p>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                <ImgOrPlaceholder src="images/aboutus_tile1.jpg" label="Oven close-up · tiles" style={{ aspectRatio: '1' }} className="tf-reveal" />
                <ImgOrPlaceholder src="images/aboutus_tile2.jpg" label="Oven in use · fire" style={{ aspectRatio: '1', marginTop: 24 }} className="tf-reveal" />
                <ImgOrPlaceholder src="images/aboutus_tile3.jpg" label="Detail · front panel" style={{ aspectRatio: '1' }} className="tf-reveal" />
                <ImgOrPlaceholder src="images/aboutus_tile4.jpg" label="Installed · outdoor" style={{ aspectRatio: '1', marginTop: 24 }} className="tf-reveal" />
              </div>
            </div>
          </div>
        </section>

        {/* ── SECTION 3: OUR STORY ── */}
        <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' }}
            >
              <ImgOrPlaceholder
                src="images/aboutus_story.jpg"
                label="Family / backyard moment · Belgaum"
                style={{ aspectRatio: '4/5' }}
                className="tf-reveal"
              />
              <div>
                <Eyebrow>Our story</Eyebrow>
                <h2 className="tf-h2" style={{ color: '#FBF3E6', margin: '0 0 20px' }}>How It Started.</h2>
                <p className="tf-body" style={{ color: '#D8C6AE' }}>
                  There is something that happens around a wood-fired oven that is hard to explain but impossible to forget. The smell of burning wood. The heat on your face. The sound of friends and family gathered close. Pizza being stretched, topped, and slid into the fire. A meal that becomes a memory.
                </p>
                <p className="tf-quote" style={{ margin: '28px 0' }}>
                  "That is where Terraforno began."
                </p>
                <p className="tf-body" style={{ color: '#D8C6AE' }}>
                  In our home in Belgaum, Karnataka, pizza parties were a ritual. We would invite friends and family over, roll out the dough by hand, and cook together in our backyard oven. Those evenings — the laughter, the food, the long nights that followed — left a mark on all of us.
                </p>
                <p className="tf-body" style={{ marginTop: 16, color: '#D8C6AE' }}>
                  We obsessed over getting the oven right. We studied the engineering of heat and fire. We cooked in every version, testing and refining — heat distribution, cooking evenness, flame behaviour, crust quality — until nothing was left to improve. We would not build something we were not fully proud of.
                </p>
                <p className="tf-body" style={{ marginTop: 16, color: '#D8C6AE' }}>
                  Eventually, what started as something we built for ourselves became something others wanted for themselves.
                </p>
                <p className="tf-body" style={{ marginTop: 16, color: 'var(--tf-flame)', fontWeight: 600, fontFamily: 'var(--font-display)' }}>
                  Terraforno was born.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* ── SECTION 4: CORE VALUES ── */}
        <section className="tf-section">
          <div className="tf-wrap">
            <div style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto 52px' }}>
              <Eyebrow style={{ justifyContent: 'center' }}>What we stand for</Eyebrow>
              <h2 className="tf-h2" style={{ margin: '0 0 12px' }}>Three things we never compromise.</h2>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 28 }}>
              {VALUES.map((v) => (
                <div key={v.t} className="tf-reveal" style={{
                  padding: '40px 36px 44px',
                  borderRadius: 'var(--r-xl)',
                  background: 'var(--surface)',
                  borderTop: '3px solid var(--tf-flame)',
                  display: 'flex',
                  flexDirection: 'column',
                  gap: 0,
                }}>
                  <div style={{
                    fontFamily: 'var(--font-display)',
                    fontSize: 'clamp(3.5rem,5vw,5rem)',
                    fontWeight: 700,
                    lineHeight: 1,
                    color: 'transparent',
                    WebkitTextStroke: '1.5px rgba(232,122,62,0.35)',
                    marginBottom: 20,
                    letterSpacing: '-0.02em',
                  }}>{v.n}</div>
                  <h3 className="tf-h3" style={{ margin: '0 0 16px', fontSize: '1.5rem', lineHeight: 1.2 }}>{v.t}</h3>
                  <p className="tf-body" style={{ margin: 0, lineHeight: 1.75 }}>
                    {v.d.map((chunk, i) =>
                      i % 2 === 1
                        ? <strong key={i} style={{ color: '#B85A1E', fontWeight: 700 }}>{chunk}</strong>
                        : chunk
                    )}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ── CTA ── */}
        <section className="tf-section" data-section="ember" style={{ textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
          <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 }}>Ready to bring the fire home?</h2>
            <p className="tf-lead" style={{ color: '#D8C6AE', margin: '16px auto 0', maxWidth: 460 }}>
              Get in touch for a quote, or browse the gallery to see our ovens in the wild.
            </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('gallery')} style={{ color: '#F6ECDD', borderColor: 'rgba(246,236,221,.4)' }}>See the gallery</TFButton>
            </div>
          </div>
        </section>

      </div>
    );
  }

  window.AboutPage = AboutPage;
})();
