// TruVis Landing v2 — sections B: Jurisdictions, Insights, Process, FAQ, Contact, Footer
const { useState: useS2v, useEffect: useE2v, useRef: useR2v } = React;

// ============== JURISDICTIONS COMPARATOR ==============
const Jurisdictions = () => {
  const [active, setActive] = useS2v(() => {
    if (typeof window !== 'undefined') {
      const m = window.location.hash.match(/^#jurisdictions-(\w+)/);
      if (m && window.TV_DATA.JURISDICTIONS.some((x) => x.id === m[1])) return m[1];
    }
    return 'adgm';
  });
  useE2v(() => {
    const onHash = () => {
      const m = window.location.hash.match(/^#jurisdictions-(\w+)/);
      if (m && window.TV_DATA.JURISDICTIONS.some((x) => x.id === m[1])) {
        setActive(m[1]);
        const el = document.getElementById('jurisdictions');
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const j = window.TV_DATA.JURISDICTIONS.find((x) => x.id === active);
  return (
    <section className="section section-cream" id="jurisdictions" data-screen-label="Jurisdictions">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">The UAE regulatory architecture</span>
          <h2 className="section-title">Three regulators. Three legal systems. One decision that shapes every other.</h2>
          <p className="section-lede">
            ADGM, DIFC and CBUAE operate under entirely separate frameworks. Choosing wrongly is the most
            expensive mistake a regulated entity can make in the UAE.
          </p>
        </div>
        <div className="reveal">
          <div className="juris-tabs-row">
            {window.TV_DATA.JURISDICTIONS.map((jx) =>
            <button
              key={jx.id}
              type="button"
              className={`juris-tab ${active === jx.id ? 'active' : ''}`}
              onClick={() => setActive(jx.id)}>
              
                <div className="juris-tab-num">{jx.num} &middot; {jx.regulator}</div>
                <div className="juris-tab-name">{jx.name}</div>
                <div className="juris-tab-reg">{jx.full}</div>
              </button>
            )}
          </div>
          <div className="juris-detail" key={active}>
            <div className="juris-detail-grid">
              <div>
                <div className="juris-detail-eyebrow">{j.eyebrow}</div>
                <h3 className="juris-detail-title">{j.title}</h3>
                <p className="juris-detail-lede">{j.lede}</p>
                <div className="juris-stats-mini">
                  {j.stats.map((s, i) =>
                  <div key={i} className="juris-stat-mini">
                      <div className={`num ${s.em ? 'em' : ''}`}>{s.num}</div>
                      <div className="lbl">{s.lbl}</div>
                    </div>
                  )}
                </div>
                <a href="#contact" className="btn btn-primary-dark">
                  Discuss {j.name} pathway <Icon name="arrow-right" size={14} stroke={2} />
                </a>
              </div>
              <div>
                <h4 style={{
                  fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 11,
                  letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--tv-brand-cyan)',
                  marginBottom: 16, marginTop: 0
                }}>
                  Indicative licence categories
                </h4>
                <div className="juris-license-table">
                  {j.licenses.map((l, i) =>
                  <div key={i} className="juris-license-row">
                      <div className="juris-license-cat">{l.cat}</div>
                      <div className="juris-license-name">{l.name}</div>
                      <div className="juris-license-cap">{l.cap}</div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

};

// ============== INSIGHTS / NEWS GRID ==============
const Insights = () => {
  const items = window.TV_DATA.INSIGHTS;
  return (
    <section className="section" id="insights" data-screen-label="Insights">
      <div className="container">
        <div className="insights-head reveal">
          <div>
            <span className="eyebrow">Insights &middot; Briefs &middot; Playbooks</span>
            <h2 className="section-title" style={{ marginBottom: 0 }}>From the regulatory frontline.</h2>
          </div>
          <a href="https://truvi.ae/insights" target="_blank" rel="noopener noreferrer" className="btn btn-ghost">All insights <Icon name="arrow-right" size={14} stroke={2} /></a>
        </div>
        <div className="insights-grid">
          {items.map((it, idx) =>
          <a key={idx} href={it.url || '#contact'} target="_blank" rel="noopener noreferrer" className={`insight-card reveal ${idx === 0 ? 'featured-card' : ''}`}>
              <div className={`insight-img insight-img-${idx % 3 + 1}`}>
                <div className="insight-img-pattern" />
                <Icon name={['document', 'globe', 'graph'][idx % 3]} size={64} stroke={1} className="insight-img-icon" />
              </div>
              <div className="insight-body">
                <span className="insight-tag">{it.tag}</span>
                <div className="insight-h">{it.h}</div>
                <p className="insight-p">{it.p}</p>
                <div className="insight-meta">
                  <span>{it.date}</span>
                  <span>{it.meta}</span>
                </div>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

};

// ============== PROCESS ==============
const Process = () =>
<section className="section section-dark" id="process" data-screen-label="Process">
    <div className="container">
      <div className="section-head reveal">
        <span className="eyebrow">How we work</span>
        <h2 className="section-title">Four phases. Full visibility at each.</h2>
        <p className="section-lede">
          From the first scoping conversation to a regulated entity in good standing &mdash; the engagement
          model designed by TRUVIS to deliver licence approval as the expected outcome.
        </p>
      </div>
      <div className="process-grid">
        {window.TV_DATA.PROCESS.map((p, i) =>
      <div key={i} className="process-step reveal">
            <div className="process-num">{p.num}</div>
            <h3 className="process-h">{p.h}</h3>
            <p className="process-p">{p.p}</p>
          </div>
      )}
      </div>
    </div>
  </section>;


// ============== FAQ ==============
const FAQ = () => {
  const [open, setOpen] = useS2v(0);
  return (
    <section className="section" id="faq" data-screen-label="FAQ">
      <div className="container">
        <div className="faq-grid">
          <div className="reveal">
            <span className="eyebrow">Frequently asked</span>
            <h2 className="section-title" style={{ marginTop: 16 }}>Questions before the first call.</h2>
            <p className="section-lede">
              Most of what founders and CFOs ask before an engagement &mdash; answered straight, without the
              pressure language.
            </p>
            <a href="#contact" className="btn btn-ghost" style={{ marginTop: 16 }}>
              Ask a question <Icon name="arrow-right" size={14} stroke={2} />
            </a>
          </div>
          <div className="faq-list reveal">
            {window.TV_DATA.FAQS.map((f, i) =>
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="faq-toggle">+</span>
                </button>
                <div className="faq-a"><p>{f.a}</p></div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

};

// ============== CONTACT ==============
const ContactForm = () => {
  const [data, setData] = useS2v({ name: '', email: '', phone: '', service: '', timeline: '', message: '' });
  const [errors, setErrors] = useS2v({});
  const [submitted, setSubmitted] = useS2v(false);
  const [submitting, setSubmitting] = useS2v(false);

  const update = (k, v) => {
    setData({ ...data, [k]: v });
    if (errors[k]) setErrors({ ...errors, [k]: null });
  };
  const validate = () => {
    const e = {};
    if (!data.name.trim()) e.name = 'Required';
    if (!data.email.trim()) e.email = 'Required';else
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) e.email = 'Invalid email';
    if (!data.phone.trim()) e.phone = 'Required';
    if (!data.service) e.service = 'Please select';
    setErrors(e);
    return Object.keys(e).length === 0;
  };
  const submit = (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setSubmitting(true);
    setTimeout(() => {setSubmitting(false);setSubmitted(true);}, 900);
  };

  return (
    <section className="section section-cream" id="contact" data-screen-label="Contact">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Begin your engagement</span>
          <h2 className="section-title">Talk to our regulatory team.</h2>
          <p className="section-lede">
            Share your business model and target jurisdiction. We&rsquo;ll respond within one business day
            with a structured view of the licensing pathway and the next conversation worth having.
          </p>
        </div>
        <div className="contact-grid reveal">
          <div className="contact-info">
            <span className="eyebrow" style={{ color: 'var(--tv-brand-cyan)' }}>Direct contact</span>
            <h2>One conversation away from regulatory clarity.</h2>
            <p className="lede">Our regulatory team responds within one business day.

            </p>
            <div className="contact-detail">
              <div className="contact-detail-label">Headquarters</div>
              <div className="contact-detail-value">Level 36, Tower 3, Etihad Towers<br />Abu Dhabi, United Arab Emirates</div>
            </div>
            <div className="contact-detail">
              <div className="contact-detail-label">Direct line</div>
              <div className="contact-detail-value">+971 2 409 3184</div>
            </div>
            <div className="contact-detail">
              <div className="contact-detail-label">Email</div>
              <div className="contact-detail-value">Licensing@truvis.ae</div>
            </div>
            <div className="contact-detail">
              <div className="contact-detail-label">Office hours</div>
              <div className="contact-detail-value">Monday &ndash; Friday &middot; 09:00 &ndash; 18:00 GST</div>
            </div>
          </div>
          <div className="form-card">
            {submitted ?
            <div className="form-success">
                <div className="check"><Icon name="check" size={28} stroke={2.5} /></div>
                <h3>Thank you, {data.name.split(' ')[0]}.</h3>
                <p>Your enquiry has been received. A member of our regulatory team will be in touch within one business day to schedule your initial briefing.</p>
              </div> :

            <form onSubmit={submit} noValidate>
                <h3>Request a confidential consultation</h3>
                <p className="form-sub">No obligation. We respond within one business day.</p>
                <div className="form-row">
                  <div className="form-field">
                    <label>Full name <span className="req">*</span></label>
                    <input type="text" value={data.name} onChange={(e) => update('name', e.target.value)} className={errors.name ? 'error' : ''} placeholder="Sarah Al Mansouri" />
                    {errors.name && <div className="error-msg">{errors.name}</div>}
                  </div>
                  <div className="form-field">
                    <label>Email <span className="req">*</span></label>
                    <input type="email" value={data.email} onChange={(e) => update('email', e.target.value)} className={errors.email ? 'error' : ''} placeholder="sarah@yourcompany.com" />
                    {errors.email && <div className="error-msg">{errors.email}</div>}
                  </div>
                </div>
                <div className="form-row">
                  <div className="form-field">
                    <label>Phone <span className="req">*</span></label>
                    <input type="tel" value={data.phone} onChange={(e) => update('phone', e.target.value)} className={errors.phone ? 'error' : ''} placeholder="+971 50 000 0000" />
                    {errors.phone && <div className="error-msg">{errors.phone}</div>}
                  </div>
                  <div className="form-field">
                    <label>Timeline</label>
                    <select value={data.timeline} onChange={(e) => update('timeline', e.target.value)}>
                      <option value="">Select</option>
                      <option value="0-3">Within 3 months</option>
                      <option value="3-6">3 to 6 months</option>
                      <option value="6-12">6 to 12 months</option>
                      <option value="12+">12+ months / exploratory</option>
                    </select>
                  </div>
                </div>
                <div className="form-row">
                  <div className="form-field full">
                    <label>Service of interest <span className="req">*</span></label>
                    <select value={data.service} onChange={(e) => update('service', e.target.value)} className={errors.service ? 'error' : ''}>
                      <option value="">Select a service</option>
                      <option value="adgm">ADGM FSRA licensing</option>
                      <option value="difc">DIFC DFSA licensing</option>
                      <option value="cbuae">CBUAE (PSP / Open Finance / SVF)</option>
                      <option value="reglab">RegLab / Innovation Testing Licence</option>
                      <option value="formation">Company formation</option>
                      <option value="structuring">Corporate structuring</option>
                      <option value="compliance">Compliance &amp; ongoing maintenance</option>
                      <option value="other">Other / unsure</option>
                    </select>
                    {errors.service && <div className="error-msg">{errors.service}</div>}
                  </div>
                </div>
                <div className="form-row">
                  <div className="form-field full">
                    <label>Brief context (optional)</label>
                    <textarea value={data.message} onChange={(e) => update('message', e.target.value)} placeholder="Business model, target jurisdiction, capital position, key questions" />
                  </div>
                </div>
                <div className="form-submit-row">
                  <p className="form-disclaimer">Confidential. We do not share or sell information beyond responding to your request.</p>
                  <button type="submit" className="btn btn-primary-dark" disabled={submitting}>
                    {submitting ? 'Sending\u2026' : 'Request consultation'}
                    {!submitting && <Icon name="arrow-right" size={16} stroke={2} />}
                  </button>
                </div>
              </form>
            }
          </div>
        </div>
      </div>
    </section>);

};

// ============== FOOTER ==============
const Footer = () =>
<footer className="footer" data-screen-label="Footer">
    <div className="container">
      <div className="footer-top">
        <div className="footer-brand">
          <img src="assets/logo-cyan-shield.png" alt="TRUVIS" />
          <div className="footer-brand-name">TRUVIS</div>
          <div className="footer-tagline">Where Trust Creates True Vision</div>
          <p className="footer-blurb">TRUVIS International Services LLC. Strategy-led corporate service provider. Regulatory &amp; fintech advisory in UAE.


        </p>
        </div>
        <div>
          <h4 className="footer-col-h">Services</h4>
          <ul className="footer-list">
            <li><a href="#services">Regulatory licensing</a></li>
            <li><a href="#services">Sandbox / RegLab</a></li>
            <li><a href="#svc-formation">Company formation</a></li>
            <li><a href="#svc-structuring">Corporate structuring</a></li>
            <li><a href="#svc-compliance">Compliance</a></li>
          </ul>
        </div>
        <div>
          <h4 className="footer-col-h">Jurisdictions</h4>
          <ul className="footer-list">
            <li><a href="#jurisdictions-adgm">ADGM &middot; FSRA</a></li>
            <li><a href="#jurisdictions-difc">DIFC &middot; DFSA</a></li>
            <li><a href="#jurisdictions-cbuae">CBUAE</a></li>
            <li><a href="#svc-formation">UAE Mainland</a></li>
            <li><a href="#svc-formation">17+ international</a></li>
          </ul>
        </div>
        <div>
          <h4 className="footer-col-h">Insights</h4>
          <ul className="footer-list">
            <li><a href="#contact">Advisory notes</a></li>
            <li><a href="#contact">Jurisdiction briefs</a></li>
            <li><a href="https://truvi.ae/insights/playbooks" target="_blank" rel="noopener noreferrer">Download playbook</a></li>
            <li><a href="#faq">FAQ</a></li>
          </ul>
        </div>
        <div>
          <h4 className="footer-col-h">Contact</h4>
          <ul className="footer-list">
            <li>Level 36, Tower 3<br />Etihad Towers, Abu Dhabi</li>
            <li><a href="tel:+97124093184">+971 2 409 3184</a></li>
            <li><a href="mailto:Licensing@truvis.ae">Licensing@truvis.ae</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 TRUVIS INTERNATIONAL SERVICES LLC. All rights reserved.</span>
        <span>TRUVIS is a corporate service provider, not a law firm. Information is general guidance.</span>
      </div>
    </div>
  </footer>;


window.TV_V2_B = { Jurisdictions, Insights, Process, FAQ, ContactForm, Footer };