// Location, Mortgage, Developer

// real map photo provided by client
const NeighborhoodMap = () => {
  return (
    <img
      className="map-photo"
      src="assets/location-map.png"
      alt="Карта расположения QASIET CITY"
      loading="lazy"
    />
  );
};

const Location = ({ lang }) => {
  const d = window.SITE_DATA.location[lang];
  return (
    <section className="section" id="location">
      <div className="container">
        <div className="section-head reveal">
          <div className="kicker">{d.kicker}</div>
          <h2>{d.title}</h2>
        </div>
        <div className="location-grid reveal">
          <div className="location-info">
            <div className="location-address">
              <Icon name="pin" size={18}/> &nbsp;{d.address}
            </div>
            <div className="location-points">
              {d.points.map((p, i) => (
                <div key={i} className="location-point">
                  <span className="lp-t">{p.t}</span>
                  <span className="lp-d">{p.d}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="map-container">
            <NeighborhoodMap/>
            <a href={d.mapUrl} target="_blank" rel="noopener" className="map-2gis-cta">
              {d.mapCta} <Icon name="arrow" size={14}/>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

const formatTenge = (n) => {
  return new Intl.NumberFormat('ru-RU', { maximumFractionDigits: 0 }).format(Math.round(n)) + ' ₸';
};

const Mortgage = ({ lang }) => {
  const d = window.SITE_DATA.mortgage[lang];
  const PRICES = { 1: 530000, 2: 550000, 3: 580000, 4: 650000 };
  const AREAS = { 1: 44, 2: 66, 3: 92, 4: 120 };
  const [rooms, setRooms] = useState(2);
  const [pricePerSqm, setPricePerSqm] = useState(PRICES[2]);

  // Update price-per-m² when room count changes
  useEffect(() => {
    setPricePerSqm(PRICES[rooms]);
  }, [rooms]);

  const area = AREAS[rooms];
  const total = area * pricePerSqm;

  const roomOptions = lang === 'ru'
    ? [{ k: 1, l: '1-комн.' }, { k: 2, l: '2-комн.' }, { k: 3, l: '3-комн.' }, { k: 4, l: '4-комн.+' }]
    : [{ k: 1, l: '1-бөл.' }, { k: 2, l: '2-бөл.' }, { k: 3, l: '3-бөл.' }, { k: 4, l: '4-бөл.+' }];

  return (
    <section className="section section--alt" id="mortgage">
      <div className="container">
        <div className="section-head reveal">
          <div className="kicker">{d.kicker}</div>
          <h2>{d.title}</h2>
        </div>
        <div className="mort-grid reveal">
          <div>
            <div className="calc-card">
              <div className="calc-label">{lang === 'ru' ? 'Комнатность' : 'Бөлме саны'}</div>
              <div className="calc-rooms">
                {roomOptions.map(opt => (
                  <button
                    key={opt.k}
                    className={`calc-room-btn ${rooms === opt.k ? 'active' : ''}`}
                    onClick={() => setRooms(opt.k)}
                  >
                    {opt.l}
                  </button>
                ))}
              </div>

              <div className="calc-input-row">
                <div className="calc-input-group">
                  <label>{lang === 'ru' ? 'Площадь, м²' : 'Аудан, м²'}</label>
                  <div className="calc-input-wrap">
                    <input
                      type="number"
                      className="calc-input"
                      value={area}
                      readOnly
                    />
                    <span className="calc-input-suffix">м²</span>
                  </div>
                </div>
                <div className="calc-input-group">
                  <label>{lang === 'ru' ? 'Стоимость за м²' : 'м² бағасы'}</label>
                  <div className="calc-input-wrap">
                    <input
                      type="number"
                      className="calc-input"
                      value={pricePerSqm}
                      step="10000"
                      min="300000"
                      max="1500000"
                      onChange={(e) => setPricePerSqm(+e.target.value || 0)}
                    />
                    <span className="calc-input-suffix">₸</span>
                  </div>
                </div>
              </div>

              <div className="calc-result">
                <div className="calc-result-item">
                  <div className="l">{lang === 'ru' ? 'Ориентировочная стоимость' : 'Шамамен құны'}</div>
                  <div className="v">{formatTenge(total)}</div>
                </div>
                <div className="calc-result-item">
                  <div className="l">{lang === 'ru' ? 'Площадь' : 'Ауданы'}</div>
                  <div className="v">{area} м²</div>
                </div>
              </div>
            </div>
            <p className="calc-disclaimer">
              {lang === 'ru'
                ? '* Указанные цены носят ориентировочный характер и будут окончательно уточнены после консультации с менеджером отдела продаж.'
                : '* Көрсетілген бағалар шамамен берілген және сату бөлімінің менеджерімен кеңесуден кейін нақтыланады.'}
            </p>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-soft)', marginBottom: 16 }}>
              {lang === 'ru' ? 'Доступные программы ипотеки' : 'Қолжетімді ипотека бағдарламалары'}
            </div>
            <div className="mort-programs">
              {d.programs.map((p, i) => (
                <div key={i} className="mort-prog">
                  <div className="mort-prog-name">{p.t}</div>
                  <div className="mort-prog-rate">{p.r}</div>
                </div>
              ))}
            </div>
            <p style={{ marginTop: 16, fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.55 }}>
              {lang === 'ru'
                ? 'Точные условия по ипотеке согласовываются с банком и менеджером отдела продаж.'
                : 'Ипотека шарттары банкпен және сату бөлімінің менеджерімен келісіледі.'}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

const Developer = ({ lang, devImg }) => {
  const d = window.SITE_DATA.developer[lang];
  return (
    <section className="section" id="developer">
      <div className="container">
        <div className="section-head reveal">
          <div className="kicker">{d.kicker}</div>
          <h2>{d.title.split('\n').map((line, i, arr) => (
            <React.Fragment key={i}>
              {line}
              {i < arr.length - 1 && <br />}
            </React.Fragment>
          ))}</h2>
        </div>
        <div className="dev-grid reveal">
          <div>
            <p className="about-lead" style={{ marginTop: 0 }}>{d.lead}</p>
            <div className="dev-values" style={{ marginTop: 24 }}>
              {d.values.map((v, i) => (
                <div key={i} className="dev-value">
                  <h3>
                    <span className="dev-value-num">0{i + 1}</span>
                    {v.t}
                  </h3>
                  <p>{v.d}</p>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-soft)', marginBottom: 16, textAlign: 'center' }}>
              {lang === 'ru' ? 'Реализованные проекты' : 'Іске асқан жобалар'}
            </div>
            <div className="dev-projects-list">
              {d.projects.map((p, i) => (
                <div key={i} className="dev-project-item">
                  <div className="dev-project-name">{p.name}</div>
                  <div className="dev-project-date">{p.date}</div>
                  <div className={`dev-project-status ${p.status.toLowerCase().includes('строит') || p.status.toLowerCase().includes('құрыл') ? 'active' : ''}`}>
                    {p.status}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Yard = ({ lang }) => {
  const d = window.SITE_DATA.yard[lang];
  const labels = ['LANDSCAPE', 'PARKING', 'SECURITY', 'PLAYGROUND', 'LOUNGE', 'CAR-FREE'];
  const photos = [
    'assets/yard-landscape.png',
    'assets/yard-parking.png',
    'assets/yard-security.png',
    'assets/yard-playground.png',
    'assets/yard-lounge.png',
    'assets/yard-carfree.png',
  ];
  return (
    <section className="section section--alt" id="yard">
      <div className="container">
        <div className="section-head reveal">
          <div className="kicker">{d.kicker}</div>
          <h2>{d.title}</h2>
          <p className="section-sub">{d.sub}</p>
        </div>
        <div className="yard-grid reveal">
          {d.items.map((it, i) => (
            <div key={i} className="yard-card">
              <div className="yard-photo">
                <img src={photos[i]} alt={it.t} loading="lazy" />
                <div className="ph-num">0{i + 1} · {labels[i]}</div>
              </div>
              <div className="yard-body">
                <h3>{it.t}</h3>
                <p>{it.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Yard });

Object.assign(window, { Location, Mortgage, Developer, NeighborhoodMap });

const Warranty = ({ lang }) => {
  const d = window.SITE_DATA.warranty[lang];
  return (
    <section className="section section--ink" id="warranty">
      <div className="container">
        <div className="warranty-grid reveal">
          <div className="warranty-left">
            <div className="kicker">{d.kicker}</div>
            <h2 style={{ marginTop: 16 }}>{d.title}</h2>
            <p className="warranty-lead">{d.lead}</p>
            <a href="assets/Гарантия КЖК.pdf" target="_blank" rel="noopener" className="btn btn--accent btn--lg" style={{ marginTop: 8 }}>
              {d.cta} <Icon name="arrow" size={16}/>
            </a>
          </div>
          <div className="warranty-right">
            <div className="warranty-seal">
              <div className="warranty-seal-inner">
                <div className="warranty-seal-eyebrow">АО</div>
                <div className="warranty-seal-name">КЖК</div>
                <div className="warranty-seal-sub">Государственный<br/>гарант</div>
              </div>
            </div>
            <ul className="warranty-points">
              {d.points.map((p, i) => (
                <li key={i}>
                  <span className="wp-num">0{i + 1}</span>
                  <span>{p}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Warranty });