/* ============================================================
   SAYRU — home-sections.jsx  (tech, process, references, quote, cta, contact)
   ============================================================ */

/* ---------------- TECH AREAS ---------------- */
const TECH = [
  { id: 'glpi',   name: 'GLPI',   icon: 'yon', tag: 'tech.glpi' },
  { id: 'zabbix', name: 'Zabbix', icon: 'goz', tag: 'tech.zabbix' },
  { id: 'siem',   name: 'SIEM',   icon: 'iz',  tag: 'tech.siem' },
  { id: 'audit',  name: 'Audit',  icon: 'dem', tag: 'tech.audit' },
];
function Tech() {
  const { t } = useT();
  return (
    <section className="section section--tech" id="teknoloji">
      <div className="wrap">
        <div className="section-head center reveal">
          <div className="kicker">{t('tech.kick')}</div>
          <h2>{t('tech.title')}</h2>
          <p className="lead">{t('tech.lead')}</p>
        </div>
        <div className="tech-grid">
          {TECH.map((tc, n) => (
            <div className={'tech-card reveal d' + (n + 1)} key={tc.id}>
              <span className="tech-card__ic"><Icon name={tc.icon} size={28} /></span>
              <div className="tech-card__name">{tc.name}</div>
              <p className="tech-card__tag">{t(tc.tag)}</p>
              <span className="tech-card__bar"></span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- PROCESS ---------------- */
const STEPS = ['s1', 's2', 's3', 's4'];
function Process() {
  const { t } = useT();
  return (
    <section className="section section--proc" id="yontem">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="kicker">{t('proc.kick')}</div>
          <h2>{t('proc.title')}</h2>
          <p className="lead">{t('proc.lead')}</p>
        </div>
        <div className="proc-grid">
          <div className="proc-line"></div>
          {STEPS.map((st, n) => (
            <div className={'proc-step reveal d' + (n + 1)} key={st}>
              <div className="proc-step__num"><span className="mono">{String(n + 1).padStart(2, '0')}</span></div>
              <h3 className="proc-step__t">{t('proc.' + st + '.t')}</h3>
              <p className="proc-step__d">{t('proc.' + st + '.d')}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- REFERENCES ---------------- */
function References() {
  const { t } = useT();
  const slots = [0, 1, 2, 3, 4, 5];
  const logos = (window.__SAYRU_REFS || []);
  return (
    <section className="section section--ref" id="referanslar">
      <div className="wrap">
        <div className="section-head center reveal">
          <div className="kicker">{t('ref.kick')}</div>
          <h2>{t('ref.title')}</h2>
          <p className="lead">{t('ref.lead')}</p>
        </div>
        {logos.length > 0 ? (
          <div className="ref-logos reveal">
            {logos.map((m, n) => (
              <div className="ref-logo" key={n}><img src={m.url} alt={m.name || 'referans'} /></div>
            ))}
          </div>
        ) : (
          <React.Fragment>
            <div className="ref-empty reveal">
              <div className="ref-empty__icon"><Radar size={70} /></div>
              <h3 className="ref-empty__t">{t('ref.empty.t')}</h3>
              <p className="ref-empty__d">{t('ref.empty.d')}</p>
              <a href="#iletisim" className="btn btn--ghost ref-empty__cta"><Icon name="plus" size={16} /> {t('ref.empty.cta')}</a>
            </div>
            <div className="ref-slots reveal">
              {slots.map(n => (
                <div key={n} className="ref-slot imgph">LOGO</div>
              ))}
            </div>
          </React.Fragment>
        )}
      </div>
    </section>
  );
}

/* ---------------- QUOTE ---------------- */
function QuoteBlock() {
  const { t } = useT();
  return (
    <section className="quote dark" id="alinti">
      <div className="cc-grid quote__grid"></div>
      <div className="quote__glow"></div>
      <svg className="quote__net" viewBox="0 0 1200 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
        {[[120,90],[300,160],[520,70],[700,200],[920,120],[1080,250],[420,300],[820,330],[200,260]].map((p, i, a) => (
          <circle key={'c' + i} cx={p[0]} cy={p[1]} r="3.5" fill="rgba(91,216,248,.5)" />
        ))}
        {[[0,1],[1,2],[2,4],[3,4],[4,5],[1,6],[3,7],[6,8],[0,8]].map(([x, y], i) => {
          const a = [[120,90],[300,160],[520,70],[700,200],[920,120],[1080,250],[420,300],[820,330],[200,260]];
          return <line key={'l' + i} x1={a[x][0]} y1={a[x][1]} x2={a[y][0]} y2={a[y][1]} stroke="rgba(91,216,248,.16)" strokeWidth="1" />;
        })}
      </svg>
      <div className="wrap quote__in">
        <span className="quote__mark">“</span>
        <blockquote className="quote__text">{nl2br(t('quote.text'))}</blockquote>
        <div className="quote__by mono">{t('quote.by')}</div>
      </div>
    </section>
  );
}

/* ---------------- CTA ---------------- */
function CTABand() {
  const { t } = useT();
  return (
    <section className="section--cta">
      <div className="wrap cta__in reveal">
        <div className="cta__text">
          <div className="kicker">{t('cta.kick')}</div>
          <h2 className="cta__title">{t('cta.title')}</h2>
          <p className="cta__body">{t('cta.body')}</p>
        </div>
        <div className="cta__actions">
          <a href="#iletisim" className="btn btn--primary">{t('cta.btn1')} <span className="ar"><Icon name="arrow" size={17} /></span></a>
          <a href={waHref()} target="_blank" rel="noopener" className="btn btn--ghost cta__wa"><Icon name="wa" size={17} /> {t('cta.btn2')}</a>
        </div>
      </div>
    </section>
  );
}

/* ---------------- CONTACT ---------------- */
function Contact() {
  const { t } = useT();
  const [form, setForm] = useState({ name: '', company: '', email: '', phone: '', topic: '', message: '' });
  const [errors, setErrors] = useState({});
  const [state, setState] = useState('idle'); // idle | sending | sent
  const topics = t('contact.f.topicOpts').split(',');
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const validate = () => {
    const er = {};
    if (!form.name.trim()) er.name = t('contact.f.err.name');
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) er.email = t('contact.f.err.email');
    if (form.message.trim().length < 5) er.message = t('contact.f.err.message');
    setErrors(er);
    return Object.keys(er).length === 0;
  };
  const submit = async (e) => {
    e.preventDefault();
    if (!validate()) return;
    setState('sending');
    try {
      if (typeof window.__SAYRU_SUBMIT !== 'function') throw new Error('Form API is not ready.');
      const ok = await window.__SAYRU_SUBMIT({
        name: form.name,
        company: form.company,
        email: form.email,
        phone: form.phone,
        topic: form.topic,
        message: form.message,
        page: (location.pathname.split('/').pop() || 'index.html'),
      });
      if (!ok) throw new Error('Form API rejected the submission.');
      setState('sent');
    } catch (err) {
      setErrors({ submit: 'Mesaj gönderilemedi. Lütfen tekrar deneyin.' });
      setState('idle');
    }
  };

  const ci = contactInfo();
  const info = [
    { ic: 'pin', label: t('contact.addr'), val: t('contact.addrVal'), href: 'https://maps.google.com/?q=Bayrakl%C4%B1+%C4%B0zmir' },
    { ic: 'mail', label: t('contact.email'), val: ci.email, href: 'mailto:' + ci.email },
  ];

  return (
    <section className="section section--contact" id="iletisim">
      <div className="wrap contact__in">
        <div className="contact__aside reveal">
          <div className="kicker">{t('contact.kick')}</div>
          <h2 className="contact__title">{t('contact.title')}</h2>
          <p className="contact__lead">{t('contact.lead')}</p>

          <div className="contact__cards">
            {info.map((c, n) => (
              <a key={n} href={c.href} className="contact__card" target={c.ic === 'pin' ? '_blank' : undefined} rel="noopener">
                <span className="contact__card-ic"><Icon name={c.ic} size={19} /></span>
                <span className="contact__card-body">
                  <span className="contact__card-l mono">{c.label}</span>
                  <span className="contact__card-v">{nl2br(c.val)}</span>
                </span>
              </a>
            ))}
          </div>

          <div className="contact__legal">
            <div><span className="mono contact__legal-l">{t('contact.taxoffice')}</span><span>{t('contact.taxofficeVal')}</span></div>
            <div><span className="mono contact__legal-l">{t('contact.taxno')}</span><span>7571089599</span></div>
          </div>

          <a href={waHref()} target="_blank" rel="noopener" className="contact__wa">
            <Icon name="wa" size={20} /> <span><b>WhatsApp</b><i>{t('contact.callback')}</i></span>
          </a>
        </div>

        <div className="contact__formwrap reveal d1">
          {state === 'sent' ? (
            <div className="contact__success">
              <div className="contact__success-ic"><Icon name="check" size={34} /></div>
              <h3>{t('contact.f.sent')}</h3>
              <button className="btn btn--ghost" onClick={() => { setState('idle'); setForm({ name: '', company: '', email: '', phone: '', topic: '', message: '' }); }}>
                <Icon name="plus" size={15} /> {t('contact.f.submit')}
              </button>
            </div>
          ) : (
            <form className="contact__form" onSubmit={submit} noValidate>
              <div className="field">
                <label>{t('contact.f.name')} *</label>
                <input value={form.name} onChange={set('name')} className={errors.name ? 'err' : ''} />
                {errors.name && <span className="field__err">{errors.name}</span>}
              </div>
              <div className="field">
                <label>{t('contact.f.company')}</label>
                <input value={form.company} onChange={set('company')} />
              </div>
              <div className="field">
                <label>{t('contact.f.email')} *</label>
                <input type="email" value={form.email} onChange={set('email')} className={errors.email ? 'err' : ''} />
                {errors.email && <span className="field__err">{errors.email}</span>}
              </div>
              <div className="field">
                <label>{t('contact.f.phone')}</label>
                <input value={form.phone} onChange={set('phone')} />
              </div>
              <div className="field field--full">
                <label>{t('contact.f.topic')}</label>
                <div className="select-wrap">
                  <select value={form.topic} onChange={set('topic')}>
                    <option value="">—</option>
                    {topics.map((o, n) => <option key={n} value={o}>{o}</option>)}
                  </select>
                  <Icon name="chevron" size={16} />
                </div>
              </div>
              <div className="field field--full">
                <label>{t('contact.f.message')} *</label>
                <textarea rows="4" value={form.message} onChange={set('message')} className={errors.message ? 'err' : ''}></textarea>
                {errors.message && <span className="field__err">{errors.message}</span>}
              </div>
              <button type="submit" className="btn btn--primary contact__submit" disabled={state === 'sending'}>
                {state === 'sending' ? t('contact.f.sending') : <>{t('contact.f.submit')} <span className="ar"><Icon name="arrow" size={16} /></span></>}
              </button>
              {errors.submit && <span className="field__err field__err--full">{errors.submit}</span>}
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Tech, Process, References, QuoteBlock, CTABand, Contact });