/* global React */
const { useState } = React;

// ============== CASES — auction screenshots carousel ==============
function Cases() {
  const t = window.useT();
  const screenshots = [
    { src: "assets/case-bmwx5-new.png",   k: 'case_bmwx5_t',     note: "Raisio · Oulu · Kuopio · Lahti" },
    { src: "assets/case-nissan-new.png",  k: 'case_nissan_t',    note: "Kotka · Espoo · Helsinki · Vantaa" },
    { src: "assets/case-peugeot-new.png", k: 'case_peugeot3008_t', note: "Kuopio · Turku · Helsinki · Vaasa" },
    { src: "assets/case-bmw5-new.png",    k: 'case_bmw5_t',      note: "Pori · Tampere · Helsinki · Vantaa" },
    { src: "assets/case-citroen-c3.jpg",  k: 'case_citroen_t',   note: "Helsinki · Hämeenlinna · Seinäjoki · Turku" },
    { src: "assets/case-peugeot-308.jpg", k: 'case_peugeot308_t', note: "Lempäälä · Helsinki · Hämeenlinna · Luoto · Vantaa" },
    { src: "assets/case-opel-astra.jpg",  k: 'case_opel_t',      note: "Vantaa · Oulu · Kouvola · Espoo" },
  ];
  const [idx, setIdx] = useState(0);
  const cur = screenshots[idx];
  return (
    <section id="cases" className="cases-section">
      <div className="container">
        <div className="block-head">
          <h2>{t('cases_title')}</h2>
          <p>{t('cases_sub')}</p>
          <p className="cases-disclaimer">{t('cases_disclaimer')}</p>
        </div>

        <div className="cases-carousel">
          <div className="cases-shot">
            <img src={cur.src} alt={t(cur.k)}/>
          </div>
          <div className="cases-controls">
            <div className="cases-meta">
              <div className="cases-title">{t(cur.k)}</div>
              <div className="cases-note">{cur.note}</div>
            </div>
            <div className="cases-dots">
              {screenshots.map((s,i)=>(
                <button key={i} className={"cases-dot " + (i===idx?"active":"")} onClick={()=>setIdx(i)} aria-label={t(s.k)}>
                  <span>{i+1}</span>
                  <span className="dot-label">{t(s.k).split(' — ')[0]}</span>
                </button>
              ))}
            </div>
            <div className="cases-arrows">
              <button className="cases-arrow" onClick={()=>setIdx((idx-1+screenshots.length)%screenshots.length)}>←</button>
              <span className="cases-counter">{idx+1} / {screenshots.length}</span>
              <button className="cases-arrow" onClick={()=>setIdx((idx+1)%screenshots.length)}>→</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============== INSTAGRAM — live feed via LightWidget ==============
function Instagram() {
  const t = window.useT();
  return (
    <section id="instagram" className="ig-section">
      <div className="container">
        <div className="ig-head">
          <div className="ig-head-left">
            <div className="ig-handle-row">
              <span className="ig-icon-wrap">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="2" y="2" width="20" height="20" rx="5"/>
                  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
                  <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
                </svg>
              </span>
              <div>
                <div className="ig-handle">@fincarbid</div>
                <div className="ig-meta">{t('ig_meta')}</div>
              </div>
            </div>
            <h2>{t('ig_title')}</h2>
            <p>{t('ig_desc')}</p>
          </div>
          <a href="https://www.instagram.com/fincarbid" target="_blank" rel="noopener noreferrer" className="btn btn-primary ig-cta">{t('ig_cta')} <Ico.arrow/></a>
        </div>

        <div className="ig-widget">
          <iframe
            src="https://lightwidget.com/widgets/643d08118a705f578c06d4c882f8e746.html"
            scrolling="no"
            className="lightwidget-widget"
            style={{width:'100%', border:0, overflow:'hidden'}}
            title="Instagram @fincarbid"
          />
        </div>

        <div className="ig-foot">
          <span className="mono">{t('ig_foot')}</span>
        </div>
      </div>
    </section>
  );
}

// ============== SEO TEXT ==============
function Seo() {
  const t = window.useT();
  return (
    <section id="seo-block" className="seo">
      <div className="container">
        <div className="seo-head">
          <h2>{t('seo_title')}</h2>
        </div>
        <div className="seo-body">
          <p>{t('seo_p1')}</p>
          <p>{t('seo_p2')}</p>
          <h3>{t('seo_h2_1')}</h3>
          <p>{t('seo_p3')}</p>
          <h3>{t('seo_h2_2')}</h3>
          <p>{t('seo_p4')}</p>
        </div>
      </div>
    </section>
  );
}

// ============== FAQ ==============
function FAQ() {
  const t = window.useT();
  const [open, setOpen] = useState(0);
  const ids = [1,2,3,4,5,6,7,8,9,10,11,12,13,14];
  return (
    <section id="faq" className="faq-section">
      <div className="container">
        <div className="block-head">
          <h2>{t('faq_title')}</h2>
          <p>{t('faq_sub')}</p>
        </div>
        <div className="faq-list">
          {ids.map((n,i)=>(
            <div className={"faq-item " + (open===i?"open":"")} key={n}>
              <div className="faq-q" onClick={()=>setOpen(open===i ? -1 : i)}>
                <span>{t('faq_q'+n)}</span><span className="plus">+</span>
              </div>
              <div className="faq-a">{t('faq_a'+n)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============== FINLAND MAP (stylized SVG, no text translation needed) ==============
function FinlandMap() {
  return (
    <div className="finland-map">
      <svg viewBox="0 0 600 720" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="fm-dots" width="16" height="16" patternUnits="userSpaceOnUse">
            <circle cx="1" cy="1" r="0.9" className="fm-dot"/>
          </pattern>
        </defs>
        <rect width="600" height="720" fill="url(#fm-dots)"/>
        <line x1="0" y1="230" x2="600" y2="230" strokeDasharray="7 6" className="fm-arctic"/>
        <text x="24" y="222" className="fm-meta">ARCTIC CIRCLE · 66°33′ N</text>
        <g className="fm-compass" transform="translate(548 84)">
          <circle r="22" fill="none" strokeWidth="1"/>
          <path d="M0,-18 L4,0 L0,18 L-4,0 Z" className="fm-compass-n"/>
          <path d="M-18,0 L0,4 L18,0 L0,-4 Z" className="fm-compass-e"/>
          <text textAnchor="middle" y="-28" className="fm-compass-label">N</text>
        </g>
        <text x="232" y="330" className="fm-watermark">SUOMI</text>
        <text x="232" y="354" className="fm-watermark-sub">FINLAND · NORTHERN EUROPE</text>
        <path className="fm-country" d="M 295 32 C 312 38 332 56 348 76 L 362 110 L 380 142 L 372 168 L 386 198 L 372 226 L 392 256 L 398 292 L 412 318 L 402 348 L 422 378 L 432 408 L 422 438 L 408 462 L 396 490 L 380 515 L 360 538 L 340 552 L 318 565 L 296 580 L 272 595 L 248 612 L 226 622 L 205 622 L 192 614 L 184 600 L 188 585 L 174 570 L 170 548 L 178 522 L 192 498 L 198 472 L 188 448 L 198 420 L 202 392 L 198 360 L 210 332 L 220 304 L 228 278 L 232 252 L 224 224 L 232 198 L 244 168 L 256 138 L 268 108 L 278 76 L 286 52 Z"/>
        <ellipse className="fm-lake" cx="352" cy="442" rx="14" ry="24" transform="rotate(-18 352 442)"/>
        <ellipse className="fm-lake" cx="308" cy="445" rx="9" ry="15" transform="rotate(-8 308 445)"/>
        <ellipse className="fm-lake" cx="258" cy="472" rx="8" ry="13"/>
        <g className="fm-pin" transform="translate(212 585)">
          <circle r="22" className="fm-pin-halo"/>
          <circle r="14" className="fm-pin-halo2"/>
          <circle r="6" className="fm-pin-dot"/>
          <text x="14" y="5" className="fm-pin-label">Turku</text>
          <text x="14" y="19" className="fm-pin-sub">suomi-motors</text>
        </g>
        <g className="fm-mark" transform="translate(290 600)">
          <circle r="3" className="fm-mark-dot"/>
          <text x="8" y="4" className="fm-mark-label">Helsinki</text>
        </g>
        <g className="fm-mark" transform="translate(255 542)">
          <circle r="3" className="fm-mark-dot"/>
          <text x="8" y="4" className="fm-mark-label">Tampere</text>
        </g>
        <g className="fm-mark" transform="translate(248 376)">
          <circle r="3" className="fm-mark-dot"/>
          <text x="8" y="4" className="fm-mark-label">Oulu</text>
        </g>
        <g className="fm-mark" transform="translate(258 296)">
          <circle r="3" className="fm-mark-dot"/>
          <text x="8" y="4" className="fm-mark-label">Rovaniemi</text>
        </g>
      </svg>
    </div>
  );
}

function AddressMap() {
  const t = window.useT();
  return (
    <section id="contact" className="address-section">
      <div className="container">
        <div className="block-head">
          <h2>{t('addr_title')}</h2>
          <p>{t('addr_sub')}</p>
        </div>
      </div>
      <div className="map-wide">
        <FinlandMap/>
        <div className="container map-overlay-wrap two">
          <div className="map-card-overlay">
            <div className="map-overlay-flag">
              <svg viewBox="0 0 18 11" width="22" height="14"><rect width="18" height="11" fill="#fff"/><rect x="5" width="3" height="11" fill="#003580"/><rect y="4" width="18" height="3" fill="#003580"/></svg>
            </div>
            <div className="map-overlay-info">
              <div className="mt">{t('addr_fi_t')}</div>
              <div className="mp">{t('addr_fi_l1')}<br/>{t('addr_fi_l2')}</div>
              <div className="rating"><span className="map-stars">★★★★★</span><span style={{color:'var(--ink-3)'}}>4,9 (28)</span></div>
              <div className="mc">{t('addr_fi_meta')}</div>
            </div>
          </div>
          <div className="map-card-overlay">
            <div className="map-overlay-flag">
              <svg viewBox="0 0 18 11" width="22" height="14"><rect width="18" height="5.5" fill="#fdb913"/><rect y="5.5" width="18" height="2.75" fill="#006a44"/><rect y="8.25" width="18" height="2.75" fill="#c1272d"/></svg>
            </div>
            <div className="map-overlay-info">
              <div className="mt">{t('addr_lt_t')}</div>
              <div className="mp">{t('addr_lt_l1')}<br/>{t('addr_lt_l2')}</div>
              <div className="rating"><span className="map-stars">★★★★★</span><span style={{color:'var(--ink-3)'}}>{t('addr_lt_rating')}</span></div>
              <div className="mc">{t('addr_lt_meta')}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============== DEALER FORM — Web3Forms, follows current language ==============
function DealerForm() {
  const t = window.useT();
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState('idle'); // idle | sending | ok | err
  const [errMsg, setErrMsg] = useState('');

  const onSubmit = async (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    if (!name.trim() || (!phone.trim() && !email.trim())) {
      setStatus('err'); setErrMsg(t('form_err_validation')); return;
    }
    const fd = new FormData(e.target);
    if (fd.get('botcheck')) { setStatus('ok'); return; }

    setStatus('sending'); setErrMsg('');
    const payload = {
      access_key: '2b90c65a-3ecd-48d9-92c4-da95d61c1f2b',
      subject: t('mail_subject'),
      from_name: t('mail_fromname'),
      name, phone, email,
      botcheck: ''
    };
    // localized field labels in the email body
    payload[t('mail_field_name')]   = name;
    payload[t('mail_field_phone')]  = phone;
    payload[t('mail_field_email')]  = email;
    payload[t('mail_field_source')] = t('mail_source_value');

    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await res.json();
      if (res.ok && data.success) {
        setStatus('ok'); setName(''); setPhone(''); setEmail('');
      } else {
        setStatus('err'); setErrMsg(data.message || t('form_err_generic'));
      }
    } catch (err) {
      setStatus('err'); setErrMsg(t('form_err_network'));
    }
  };

  if (status === 'ok') {
    return (
      <div id="dealer" className="dealer-form dealer-form-ok">
        <div className="dealer-ok">
          <div className="dealer-ok-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
          </div>
          <div>
            <div className="dealer-ok-title">{t('form_ok_t')}</div>
            <div className="dealer-ok-sub">{t('form_ok_sub')}</div>
          </div>
          <button type="button" className="dealer-ok-again" onClick={()=>setStatus('idle')}>{t('form_again')}</button>
        </div>
      </div>
    );
  }

  return (
    <div id="dealer" className="dealer-form">
      <form onSubmit={onSubmit} noValidate>
        <input type="text" name="name" placeholder={t('form_name')} value={name} onChange={e=>setName(e.target.value)} required disabled={status==='sending'} autoComplete="name"/>
        <input type="tel" name="phone" placeholder={t('form_phone')} value={phone} onChange={e=>setPhone(e.target.value)} disabled={status==='sending'} autoComplete="tel"/>
        <input type="email" name="email" placeholder={t('form_email')} value={email} onChange={e=>setEmail(e.target.value)} disabled={status==='sending'} autoComplete="email"/>
        <button type="submit" disabled={status==='sending'}>
          {status === 'sending' ? t('form_submitting') : t('form_submit')}
        </button>
        <input type="text" name="botcheck" tabIndex="-1" autoComplete="off" style={{position:'absolute',left:'-9999px',width:1,height:1,opacity:0}} aria-hidden="true"/>
      </form>
      {status === 'err' && <div className="dealer-err">{errMsg}</div>}
    </div>
  );
}

// ============== FOOTER ==============
function Footer() {
  const t = window.useT();
  return (
    <footer>
      <div className="container">
        <DealerForm/>
        <p className="footer-disclaimer">{t('ft_disclaimer')}</p>

        <div className="footer-grid">
          <div>
            <a href="#" className="logo" style={{color:'oklch(0.95 0.01 90)'}}>
              <span className="logo-mark">S</span>
              <span><span style={{color:'oklch(0.95 0.01 90)'}}>SUOMI</span><span style={{color:'oklch(0.85 0.01 90 / 0.6)', fontWeight:400}}>motors</span></span>
            </a>
            <p style={{color:'oklch(0.85 0.01 90 / 0.6)', fontSize:14, marginTop:18, maxWidth: 280}}>{t('ft_logo_sub')}</p>
            <div className="footer-social">
              <a href="https://www.instagram.com/fincarbid" target="_blank" rel="noopener noreferrer" aria-label="Instagram @fincarbid" className="social-link">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
              </a>
              <a href="https://www.facebook.com/finlandcars/" target="_blank" rel="noopener noreferrer" aria-label="Facebook finlandcars" className="social-link">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M22 12a10 10 0 1 0-11.56 9.88V14.9H7.9V12h2.54V9.8c0-2.51 1.5-3.9 3.78-3.9 1.1 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.9h-2.33v6.98A10 10 0 0 0 22 12z"/></svg>
              </a>
              <a href="https://www.youtube.com/@autocareeu" target="_blank" rel="noopener noreferrer" aria-label="YouTube @autocareeu" className="social-link">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M23 7s-.2-1.6-.9-2.3c-.8-.9-1.7-.9-2.1-1C16.9 3.5 12 3.5 12 3.5s-4.9 0-8 .2c-.4.1-1.3.1-2.1 1C1.2 5.4 1 7 1 7S.8 8.9.8 10.7v1.6c0 1.9.2 3.7.2 3.7s.2 1.6.9 2.3c.8.9 1.9.9 2.4 1 1.7.2 7.7.2 7.7.2s4.9 0 8-.2c.4-.1 1.3-.1 2.1-1 .7-.7.9-2.3.9-2.3s.2-1.9.2-3.7v-1.6C23.2 8.9 23 7 23 7zM9.7 14.4V8.6l6.4 2.9-6.4 2.9z"/></svg>
              </a>
            </div>
          </div>
          <div>
            <h4>{t('ft_h_catalog')}</h4>
            <ul>
              <li><a href="#">{t('ft_l_cars')}</a></li>
              <li><a href="#services">{t('ft_l_services')}</a></li>
              <li><a href="#calc">{t('ft_l_delivery')}</a></li>
              <li><a href="#">{t('ft_l_tracking')}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t('ft_h_info')}</h4>
            <ul>
              <li><a href="#">{t('ft_l_news')}</a></li>
              <li><a href="#">{t('ft_l_reviews')}</a></li>
              <li><a href="#">{t('ft_l_blog')}</a></li>
              <li><a href="#contact">{t('ft_l_contacts')}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t('ft_h_contacts')}</h4>
            <ul className="footer-contacts">
              <li><a href="mailto:atsuomi.lt@gmail.com">atsuomi.lt@gmail.com</a></li>
              <li className="fc-block">
                <span className="fc-country">{t('ft_fc_fi')}</span>
                <span className="fc-line">Turku, Kalevantie 25</span>
              </li>
              <li className="fc-block">
                <span className="fc-country">{t('ft_fc_lt')}</span>
                <span className="fc-line">Aviženiai, Suderves 2F</span>
              </li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <span>{t('ft_rights')}</span>
          <span>{t('ft_bottom_links')}</span>
        </div>
      </div>
    </footer>
  );
}

window.PartsLate = { Cases, Instagram, Seo, FAQ, AddressMap, Footer };