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

  const VALUES = [
    {
      n: '01',
      t: 'Craft first',
      d: ['Every oven is built by hand, to the standard we would want in our own home. No compromises on materials, no shortcuts on process.'],
    },
    {
      n: '02',
      t: 'Honest performance',
      d: ['Every oven is tested before it ships. What we promise on paper, the oven delivers in practice — and our customers are the proof.'],
    },
    {
      n: '03',
      t: 'Memories over transactions',
      d: ['We are not just selling an oven. We are giving you the centrepiece of countless evenings with family and friends. For us it has never been about the sale — it is about the memories the oven makes possible.'],
    },
  ];

  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, Mercator projection).
  // Dot coords use simplemaps' official calibration for this file
  // (from https://simplemaps.com/static/svg/country/in/admin1/mapinfo.js):
  //   x = 27.381072 * lon_deg - 1767.1237
  //   y = 1139.9190 - 1568.6441 * ln(tan(45° + lat/2))
  // labelX/labelY/anchor place each label explicitly to avoid overlaps.
  const CITIES = [
    { name: 'Belgaum',   label: 'Belgaum',    x: 273, y: 700, labelX: 287, labelY: 705, anchor: 'start', home: true  },
    { name: 'Kolhapur',  label: 'Kolhapur',   x: 266, y: 676, labelX: 280, labelY: 681, anchor: 'start', home: false },
    { name: 'Mumbai',    label: 'Mumbai',     x: 228, y: 608, labelX: 214, labelY: 613, anchor: 'end',   home: false },
    { name: 'Bangalore', label: 'Bangalore',  x: 357, y: 782, labelX: 345, labelY: 787, anchor: 'end',   home: false },
    { name: 'Chennai',   label: 'Chennai',    x: 431, y: 779, labelX: 445, labelY: 784, anchor: 'start', home: false },
    { name: 'New Delhi', label: 'New Delhi',  x: 347, y: 322, labelX: 361, labelY: 327, anchor: 'start', 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.labelX}
                      y={c.labelY}
                      textAnchor={c.anchor}
                      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)' }}>
            <h1 className="tf-display" style={{ color: '#FBF3E6', margin: 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, built to match the best in the world and made for India.
            </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 basic brick structure. 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?v=2" label="Mosaic tile detail" style={{ aspectRatio: '1' }} className="tf-reveal" />
                <ImgOrPlaceholder src="images/aboutus_tile2.jpg?v=2" label="Oven in use · fire" style={{ aspectRatio: '1', marginTop: 24 }} className="tf-reveal" />
                <ImgOrPlaceholder src="images/aboutus_tile3.jpg?v=2" label="Detail · the tf mark" style={{ aspectRatio: '1' }} className="tf-reveal" />
                <ImgOrPlaceholder src="images/aboutus_tile4.jpg?v=2" 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?v=2"
                label="Ovens in the workshop · 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' }}>
                  It began at home in Belgaum, Karnataka. Pizza nights with family and friends were a regular thing — dough rolled by hand, cooked together in our own backyard oven. We loved it enough to want to get the oven itself exactly right.
                </p>
                <p className="tf-body" style={{ marginTop: 16, color: '#D8C6AE' }}>
                  So we studied how heat and fire actually work. We built version after version, testing heat distribution, cooking evenness, flame behaviour, and crust quality — and we kept refining until there was nothing left to improve. We would not put our name on anything less.
                </p>
                <p className="tf-body" style={{ marginTop: 16, color: '#D8C6AE' }}>
                  What we built for ourselves, others wanted too. That is how Terraforno started — and why we build every oven to the standard we set in our own backyard.
                </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)',
                  border: '1px solid var(--border)',
                  borderTop: '3px solid var(--accent)',
                  display: 'flex',
                  flexDirection: 'column',
                  gap: 0,
                }}>
                  <div style={{
                    fontFamily: 'var(--font-display)',
                    fontSize: 'clamp(3.5rem,5vw,5rem)',
                    fontWeight: 700,
                    lineHeight: 1,
                    color: 'var(--accent)',
                    opacity: 0.20,
                    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.join('')}
                  </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 build yours?</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 real homes and restaurants.
            </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;
})();