/* global React, SUOMI_DATA */
const { useState: useStateMid, useMemo } = React;

// ============== "OUR SYSTEM" — text left + photo right ==============
function OurSystem() {
  const t = window.useT();
  return (
    <section className="our-system">
      <div className="container">
        <div className="os-grid">
          <div className="os-text">
            <span className="eyebrow">{t('sys_eyebrow')}</span>
            <h2>{t('sys_h2_l1')}<br/>{t('sys_h2_l2')}</h2>
            <p>{t('sys_body')}</p>
            <a href="#dealer" className="btn btn-primary" style={{marginTop:18}}>{t('sys_cta')} <Ico.arrow/></a>
          </div>
          <div className="os-photo">
            <div className="hero-photo wide has-image">
              <img src="assets/transparent-accounting.png" alt={t('sys_h2_l1') + ' ' + t('sys_h2_l2')} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============== PACKAGES ==============
function Packages() {
  const t = window.useT();
  return (
    <section id="packages" className="packages-section">
      <div className="container">
        <div className="block-head">
          <h2>{t('pk_title')}</h2>
          <p>{t('pk_sub')}</p>
        </div>
        <div className="packages">
          <div className="pkg">
            <span className="pkg-tag">{t('pk_diy_tag')}</span>
            <h3>{t('pk_diy_t')}</h3>
            <div className="pkg-sub">{t('pk_diy_sub')}</div>
            <div className="pkg-price">{t('pk_diy_price')}</div>
            <div className="pkg-price-note">{t('pk_diy_priceNote')}</div>
            <ul className="pkg-list">
              <li>{t('pk_diy_l1')}</li>
              <li>{t('pk_diy_l2')}</li>
              <li>{t('pk_diy_l3')}</li>
              <li className="no">{t('pk_diy_l4')}</li>
            </ul>
            <a href="#contact" className="btn btn-secondary" style={{justifyContent:'center'}}>{t('pk_diy_cta')}</a>
          </div>

          <div className="pkg featured">
            <span className="pkg-tag">{t('pk_std_tag')}</span>
            <h3>{t('pk_std_t')}</h3>
            <div className="pkg-sub">{t('pk_std_sub')}</div>
            <div className="pkg-price">{t('pk_std_price')}</div>
            <div className="pkg-price-note">{t('pk_std_priceNote')}</div>
            <ul className="pkg-list">
              <li>{t('pk_std_l1')}</li>
              <li>{t('pk_std_l2')}</li>
              <li>{t('pk_std_l3')}</li>
              <li>{t('pk_std_l4')}</li>
              <li>{t('pk_std_l5')}</li>
            </ul>
            <a href="#contact" className="btn btn-ochre" style={{justifyContent:'center'}}>{t('pk_std_cta')}</a>
          </div>

          <div className="pkg">
            <span className="pkg-tag">{t('pk_pro_tag')}</span>
            <h3>{t('pk_pro_t')}</h3>
            <div className="pkg-sub">{t('pk_pro_sub')}</div>
            <div className="pkg-price">{t('pk_pro_price')}</div>
            <div className="pkg-price-note">{t('pk_pro_priceNote')}</div>
            <ul className="pkg-list">
              <li>{t('pk_pro_l1')}</li>
              <li>{t('pk_pro_l2')}</li>
              <li>{t('pk_pro_l3')}</li>
              <li>{t('pk_pro_l4')}</li>
            </ul>
            <a href="#contact" className="btn btn-secondary" style={{justifyContent:'center'}}>{t('pk_pro_cta')}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============== CALCULATOR ==============
function Calculator() {
  const t = window.useT();
  const D = window.SUOMI_DATA;
  const finCities = useMemo(() => D.deliveryGroups.flatMap(g => g.from).sort(), []);
  const litCities = ["Vilnius","Kaunas","Klaipeda","Panevezys","Siauliai","Taurage","Kelme","Kretinga","Utena","Ukmerge"];

  const [price, setPrice] = useStateMid(5000);
  const [carType, setCarType] = useStateMid("car");
  const [fromCity, setFromCity] = useStateMid("Helsinki");
  const [toCity, setToCity] = useStateMid("Vilnius");
  const [running, setRunning] = useStateMid("yes");
  const [opts, setOpts] = useStateMid({ docs: false, urgent: false, cash: false });

  const result = useMemo(() => {
    const priceN = Number(price) || 0;
    let commission = 0, commissionLabel = "";
    if (priceN <= 8000) { commission = 250; commissionLabel = "250 €"; }
    else { commission = null; commissionLabel = t('calc_r_byrequest'); }

    const group = D.deliveryGroups.find(g => g.from.includes(fromCity));
    let delivery = group ? (group.to[toCity] || null) : null;
    let deliveryLabel = delivery ? `${delivery} €` : t('calc_r_unknown');

    let sizeAdd = 0;
    if (delivery && carType === "bus") sizeAdd = 60;
    if (delivery && carType === "moto") { delivery = Math.round(delivery * 0.7); deliveryLabel = `${delivery} €`; }
    if (delivery && carType === "special") sizeAdd = 100;

    let tow = running === "no" ? 200 : 0;
    let escort = 50;

    let optsTotal = 0;
    let optsBreakdown = [];
    if (opts.docs) { optsTotal += 150; optsBreakdown.push({ l: t('calc_r_docs'), v: "150 €" }); }
    if (opts.urgent) { optsTotal += 20; optsBreakdown.push({ l: t('calc_r_urgent'), v: "20 €" }); }
    let cashFee = 0;
    if (opts.cash) {
      const cashBase = Math.min(priceN, 5000);
      cashFee = Math.round(cashBase * 0.01);
      optsBreakdown.push({ l: t('calc_r_cash'), v: `${cashFee} €` });
    }

    const total = priceN + (commission || 0) + (delivery || 0) + sizeAdd + tow + escort + optsTotal + cashFee;
    return { commission, commissionLabel, delivery, deliveryLabel, sizeAdd, tow, escort, optsBreakdown, total };
  }, [price, carType, fromCity, toCity, running, opts, t]);

  const toggleOpt = (k) => setOpts(o => ({ ...o, [k]: !o[k] }));

  return (
    <section id="calc" className="calc-section">
      <div className="container">
        <div className="block-head">
          <h2>{t('calc_title')}</h2>
          <p>{t('calc_sub')}</p>
        </div>
        <div className="calc">
          <div>
            <div className="mono">{t('calc_params')}</div>
            <div className="calc-fields">
              <div className="field full"><label>{t('calc_price_l')}</label><input type="number" value={price} onChange={e=>setPrice(e.target.value)} min="0"/></div>
              <div className="field"><label>{t('calc_type_l')}</label><select value={carType} onChange={e=>setCarType(e.target.value)}>
                <option value="car">{t('calc_t_car')}</option>
                <option value="bus">{t('calc_t_bus')}</option>
                <option value="moto">{t('calc_t_moto')}</option>
                <option value="special">{t('calc_t_special')}</option>
              </select></div>
              <div className="field"><label>{t('calc_running_l')}</label><select value={running} onChange={e=>setRunning(e.target.value)}>
                <option value="yes">{t('calc_r_yes')}</option>
                <option value="no">{t('calc_r_no')}</option>
              </select></div>
              <div className="field"><label>{t('calc_from_l')}</label><select value={fromCity} onChange={e=>setFromCity(e.target.value)}>{finCities.map(c => <option key={c} value={c}>{c}</option>)}</select></div>
              <div className="field"><label>{t('calc_to_l')}</label><select value={toCity} onChange={e=>setToCity(e.target.value)}>{litCities.map(c => <option key={c} value={c}>{c}</option>)}</select></div>
              <div className="field full"><label>{t('calc_opts_l')}</label><div className="opt-row">
                <label className={"opt-toggle " + (opts.docs?"on":"")}><input type="checkbox" checked={opts.docs} onChange={()=>toggleOpt('docs')}/>{t('calc_o_docs')}</label>
                <label className={"opt-toggle " + (opts.urgent?"on":"")}><input type="checkbox" checked={opts.urgent} onChange={()=>toggleOpt('urgent')}/>{t('calc_o_urgent')}</label>
                <label className={"opt-toggle " + (opts.cash?"on":"")}><input type="checkbox" checked={opts.cash} onChange={()=>toggleOpt('cash')}/>{t('calc_o_cash')}</label>
              </div></div>
            </div>
          </div>
          <div className="calc-result">
            <div className="mono">{t('calc_result')}</div>
            <div className="result-row"><span className="result-label">{t('calc_r_price')}</span><span className="result-val">{Number(price).toLocaleString('en')} €</span></div>
            <div className="result-row"><span className="result-label">{t('calc_r_commission')}</span><span className="result-val">{result.commissionLabel}</span></div>
            <div className="result-row"><span className="result-label">{t('calc_r_delivery')} ({fromCity} → {toCity})</span><span className="result-val">{result.deliveryLabel}</span></div>
            <div className="result-row"><span className="result-label">{t('calc_r_escort')}</span><span className="result-val">+{result.escort} €</span></div>
            {result.sizeAdd > 0 && <div className="result-row"><span className="result-label">{t('calc_r_size')}</span><span className="result-val">+{result.sizeAdd} €</span></div>}
            {result.tow > 0 && <div className="result-row"><span className="result-label">{t('calc_r_tow')}</span><span className="result-val">+{result.tow} €</span></div>}
            {result.optsBreakdown.map((o,i)=>(<div className="result-row" key={i}><span className="result-label">{o.l}</span><span className="result-val">{o.v}</span></div>))}
            <div className="result-row total"><span className="result-label">{t('calc_r_total')}</span><span className="result-val">{result.total.toLocaleString('en')} €</span></div>
            <a href="#contact" className="btn btn-primary" style={{justifyContent:'center'}}>{t('calc_cta')} <Ico.arrow/></a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.PartsMid = { OurSystem, Packages, Calculator };