// Insights, FAQ, Contact, Footer, Modal, Float CTA

const { useState: uS, useEffect: uE, useRef: uR } = React;

// ────── Insights ──────

const INSIGHTS = [
  { slug: 'rideshare-passenger-recovery-pennsylvania', date: 'Apr 15, 2026', cat: 'Personal Injury', title: 'New Pennsylvania case law expands recovery options for rideshare passengers.' },
  { slug: 'eld-evidence-in-commercial-trucking',       date: 'Mar 28, 2026', cat: 'Trucking',         title: 'Why electronic logging devices are now decisive in commercial vehicle litigation.' },
  { slug: 'three-signs-of-nursing-home-neglect',       date: 'Feb 12, 2026', cat: 'Nursing Home',     title: 'Three signs of facility neglect Delaware families miss until it is too late.' },
  { slug: 'operating-agreement-partnership-disputes',  date: 'Jan 30, 2026', cat: 'Business Law',     title: 'Drafting an operating agreement that survives a partnership dispute.' },
  { slug: 'expert-witnesses-malpractice-board-cert',   date: 'Jan 08, 2026', cat: 'Medical Malpractice', title: 'Expert witnesses: how board certification changes a malpractice case.' },
];

const Insights = () => (
  <section className="insights" id="insights">
    <div className="sec">
      <div className="sec-head">
        <div className="sec-head-meta">
          <div className="sec-head-num">§ 06 / Reading</div>
          <div className="sec-head-tag">News & Insights</div>
        </div>
        <h2 className="display h2">From the <em>desk.</em></h2>
      </div>

      <div className="insights-list">
        {INSIGHTS.map((it) => (
          <a key={it.slug} href={`/blog/${it.slug}/`} className="insight-row">
            <div className="insight-date">{it.date}</div>
            <div className="insight-cat">{it.cat}</div>
            <div className="insight-title">{it.title}</div>
            <div className="insight-arrow">→</div>
          </a>
        ))}
      </div>

      <div style={{ marginTop: 36, textAlign: 'right' }}>
        <a href="/blog/" className="attorney-cta">All insights →</a>
      </div>
    </div>
  </section>
);

// ────── FAQ ──────

const FAQS = [
  { q: 'Do I owe anything if I lose my injury case?', a: "No. Personal injury cases are taken on contingency — meaning you pay zero attorney fees unless we recover compensation for you. We only get paid when you do, and that fee comes out of the settlement or verdict." },
  { q: 'How quickly should I call after an accident?', a: "Immediately, if possible. Evidence disappears fast — surveillance video gets overwritten, witnesses move, statutes of limitations run. The earlier we get involved, the more we can preserve. Same-day callbacks are standard." },
  { q: 'Will I have to go to court?', a: "Most cases settle before trial. But we prepare every case as if it won't, because that preparation is what brings the other side to the table with a fair number. If trial is the right path, we are ready for it." },
  { q: 'Are consultations confidential?', a: "Yes — every conversation, including our first call, is protected. This is especially important for sensitive matters like sexual abuse claims and nursing home cases, where discretion matters." },
  { q: 'What if my injury happened in another state?', a: "We are licensed in Delaware, New Jersey, and Pennsylvania, and we regularly handle cross-jurisdictional injury matters across the tri-state region. Where co-counsel is needed, we coordinate." },
  { q: 'Do you handle small business legal questions on retainer?', a: "Yes. Our outside general counsel package gives small and mid-sized businesses ongoing access to legal counsel at a fraction of in-house cost — for contracts, employment questions, and day-to-day matters." },
];

const FAQ = () => {
  const [open, setOpen] = uS(0);
  return (
    <section className="faq" id="faq">
      <div className="sec">
        <div className="sec-head">
          <div className="sec-head-meta">
            <div className="sec-head-num">§ 07 / Answers</div>
            <div className="sec-head-tag">Frequently Asked</div>
          </div>
          <h2 className="display h2">The questions <em>everyone asks.</em></h2>
        </div>

        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div key={i} className={`faq-row ${open === i ? 'is-open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <div className="faq-q-num">{String(i + 1).padStart(2, '0')}</div>
                <div className="faq-q-text">{f.q}</div>
                <div className="faq-q-toggle">+</div>
              </div>
              <div className="faq-a">
                <div className="faq-a-inner">
                  <p className="faq-a-text">{f.a}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ────── Contact ──────

const Contact = ({ onOpenModal }) => (
  <section className="contact is-dark-section" id="contact">
    <div className="contact-grid" style={{ maxWidth: 1440, margin: '0 auto' }}>
      <div>
        <div className="sec-head-num" style={{ color: 'var(--gold)', marginBottom: 24 }}>§ 08 / Contact</div>
        <h2 className="contact-headline">
          Don't wait.<br /><em>Evidence disappears.</em><br />Deadlines expire.
        </h2>
        <p className="contact-lede">
          The earlier we get involved, the more we can do. Tell us what happened and we'll respond within one business day — most often the same hour.
        </p>
        <div className="contact-cta-row">
          <button onClick={onOpenModal} className="btn btn-primary">
            Schedule a Call
            <span className="btn-arrow">→</span>
          </button>
          <a href="tel:+13022173187" className="btn btn-ghost" style={{ borderColor: 'rgba(245,240,230,0.4)', color: 'var(--bone)' }}>
            (302) 217-3187
          </a>
        </div>
      </div>

      <div className="contact-side">
        <a href="tel:+13022173187" className="contact-card">
          <div className="contact-card-label">Phone · 24/7</div>
          <div className="contact-card-value">(302) 217-3187</div>
          <div className="contact-card-sub">Calls answered around the clock</div>
        </a>
        <a href="mailto:info@dileonardoshaw.com" className="contact-card">
          <div className="contact-card-label">Email</div>
          <div className="contact-card-value">info@dileonardoshaw.com</div>
          <div className="contact-card-sub">Same-day response on weekdays</div>
        </a>
        <div className="contact-card">
          <div className="contact-card-label">Office</div>
          <div className="contact-card-value">Wilmington, DE</div>
          <div className="contact-card-sub">Serving DE · NJ · PA · By appointment</div>
        </div>
      </div>
    </div>
  </section>
);

// ────── Footer ──────

const Footer = () => (
  <footer className="foot is-dark-section">
    <div className="foot-grid" style={{ maxWidth: 1440, margin: '0 auto' }}>
      <div className="foot-brand">
        <div className="foot-brand-text">DiLeonardo <em style={{ color: 'var(--gold)', fontStyle: 'italic' }}>&amp;</em> Shaw</div>
        <div className="foot-brand-tag">Personal Injury & Business Law</div>
        <p className="foot-blurb">
          Proudly representing injured clients and small businesses across Delaware, New Jersey, and Pennsylvania. Your injury, our fight.
        </p>
      </div>

      <div>
        <div className="foot-col-title">Personal Injury</div>
        <div className="foot-col-list">
          <a href="/practice-areas/auto-accidents/">Auto Accidents</a>
          <a href="/practice-areas/trucking-accidents/">Trucking</a>
          <a href="/practice-areas/slip-fall/">Slip & Fall</a>
          <a href="/practice-areas/medical-malpractice/">Medical Malpractice</a>
          <a href="/practice-areas/nursing-home/">Nursing Home</a>
          <a href="/practice-areas/dog-bites/">Dog Bites</a>
          <a href="/practice-areas/sexual-abuse/">Sexual Abuse</a>
        </div>
      </div>

      <div>
        <div className="foot-col-title">Business Law</div>
        <div className="foot-col-list">
          <a href="/practice-areas/business-law/#contracts">Contracts</a>
          <a href="/practice-areas/business-law/#formation">Entity Formation</a>
          <a href="/practice-areas/business-law/#counsel">General Counsel</a>
          <a href="/practice-areas/business-law/">Litigation</a>
          <a href="/practice-areas/business-law/">Real Estate</a>
        </div>
      </div>

      <div>
        <div className="foot-col-title">Firm</div>
        <div className="foot-col-list">
          <a href="/attorneys/">Attorneys</a>
          <a href="/about/">About</a>
          <a href="#insights">Insights</a>
          <a href="#results">Case Results</a>
          <a href="#faq">FAQ</a>
        </div>
      </div>

      <div>
        <div className="foot-col-title">Contact</div>
        <div className="foot-col-list">
          <a href="tel:+13022173187">(302) 217-3187</a>
          <a href="mailto:info@dileonardoshaw.com">info@dileonardoshaw.com</a>
          <a href="/contact/">Wilmington, DE</a>
          <a href="/contact/">Mon–Fri · 8:30am–6pm</a>
        </div>
      </div>
    </div>

    <div className="foot-bar" style={{ maxWidth: 1440, margin: '0 auto' }}>
      <div>© 2026 DiLeonardo & Shaw LLC</div>
      <div style={{ display: 'flex', gap: 24 }}>
        <a href="#">Privacy Policy</a>
        <a href="#">Disclaimer</a>
        <a href="/sitemap.xml">Sitemap</a>
      </div>
    </div>

    <p className="foot-disclaimer" style={{ maxWidth: 1440, margin: '24px auto 0' }}>
      Attorney advertising. Prior results do not guarantee a similar outcome. This website is for general information only. The information presented does not constitute legal advice and does not form an attorney-client relationship.
    </p>
  </footer>
);

// ────── Modal ──────

const Modal = ({ open, onClose }) => {
  const [step, setStep] = uS(1);
  const [data, setData] = uS({ matter: '', firstName: '', lastName: '', email: '', phone: '', summary: '', when: '', urgency: '' });
  const [submitted, setSubmitted] = uS(false);

  uE(() => {
    if (open) { setStep(1); setSubmitted(false); document.body.style.overflow = 'hidden'; }
    else document.body.style.overflow = '';
  }, [open]);

  uE(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  const matters = ['Auto / Trucking', 'Slip & Fall', 'Medical Malpractice', 'Nursing Home', 'Dog Bite', 'Sexual Abuse', 'Business Law', 'Other'];
  const urgencies = ['Today', 'This week', 'Within a month', 'Just exploring'];

  const submit = (e) => {
    e?.preventDefault?.();
    // Best-effort post to /api/intake; falls through to success state regardless.
    try {
      fetch('/api/intake', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      }).catch(() => {});
    } catch (_) {}
    setSubmitted(true);
  };

  return (
    <div className={`modal-backdrop ${open ? 'is-open' : ''}`} onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">×</button>

        {submitted ? (
          <div className="modal-success">
            <div className="modal-success-mark">✓</div>
            <h3 className="display" style={{ fontSize: 36 }}>We've got it.</h3>
            <p className="body" style={{ maxWidth: '36ch', textAlign: 'center' }}>
              An attorney will personally call you back. Most often within the hour. Watch for a call from a 302 number.
            </p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-soft)', marginTop: 8 }}>
              Reference · DS-{Math.floor(Math.random() * 90000 + 10000)}
            </div>
          </div>
        ) : (
          <>
            <div className="modal-side">
              <div className="modal-side-content">
                <div className="modal-side-eyebrow">DiLeonardo <em style={{ color: 'var(--gold)', fontStyle: 'italic' }}>&amp;</em> Shaw</div>
                <h3 className="modal-side-title">Free <em>case</em> review.<br />No obligation.</h3>
              </div>
              <div className="modal-side-list">
                <div className="modal-side-list-item">Speak directly with an attorney</div>
                <div className="modal-side-list-item">Free, confidential consultation</div>
                <div className="modal-side-list-item">No fee unless we win</div>
                <div className="modal-side-list-item">Same-day callback typical</div>
              </div>
            </div>

            <form className="modal-form" onSubmit={submit}>
              {step === 1 && (
                <>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>Step 1 of 2 · Your matter</div>
                  <h4 className="display" style={{ fontSize: 24, lineHeight: 1.2 }}>What kind of matter?</h4>

                  <div className="field-options">
                    {matters.map(m => (
                      <button type="button" key={m} className={`field-chip ${data.matter === m ? 'is-active' : ''}`} onClick={() => setData(d => ({ ...d, matter: m }))}>
                        {m}
                      </button>
                    ))}
                  </div>

                  <div className="field">
                    <label className="field-label">When did this happen?</label>
                    <input className="field-input" placeholder="e.g. 3 weeks ago, last month, ongoing"
                      value={data.when} onChange={(e) => setData(d => ({ ...d, when: e.target.value }))} />
                  </div>

                  <div className="field">
                    <label className="field-label">Brief summary</label>
                    <textarea className="field-textarea" placeholder="A few sentences about what happened. Don't worry about details — we'll cover those on the call."
                      value={data.summary} onChange={(e) => setData(d => ({ ...d, summary: e.target.value }))} />
                  </div>

                  <button type="button" className="modal-submit" onClick={() => setStep(2)} disabled={!data.matter}>
                    Continue →
                  </button>
                </>
              )}

              {step === 2 && (
                <>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>Step 2 of 2 · Your contact</div>
                  <h4 className="display" style={{ fontSize: 24, lineHeight: 1.2 }}>How can we reach you?</h4>

                  <div className="field-row">
                    <div className="field">
                      <label className="field-label">First name</label>
                      <input className="field-input" required value={data.firstName} onChange={(e) => setData(d => ({ ...d, firstName: e.target.value }))} />
                    </div>
                    <div className="field">
                      <label className="field-label">Last name</label>
                      <input className="field-input" required value={data.lastName} onChange={(e) => setData(d => ({ ...d, lastName: e.target.value }))} />
                    </div>
                  </div>

                  <div className="field">
                    <label className="field-label">Phone</label>
                    <input className="field-input" type="tel" required placeholder="(302) 555-0100" value={data.phone} onChange={(e) => setData(d => ({ ...d, phone: e.target.value }))} />
                  </div>

                  <div className="field">
                    <label className="field-label">Email</label>
                    <input className="field-input" type="email" required placeholder="you@example.com" value={data.email} onChange={(e) => setData(d => ({ ...d, email: e.target.value }))} />
                  </div>

                  <div className="field">
                    <label className="field-label">How urgent?</label>
                    <div className="field-options">
                      {urgencies.map(u => (
                        <button type="button" key={u} className={`field-chip ${data.urgency === u ? 'is-active' : ''}`} onClick={() => setData(d => ({ ...d, urgency: u }))}>
                          {u}
                        </button>
                      ))}
                    </div>
                  </div>

                  <div style={{ display: 'flex', gap: 12, marginTop: 8 }}>
                    <button type="button" className="field-chip" onClick={() => setStep(1)} style={{ flex: 'none' }}>← Back</button>
                    <button type="submit" className="modal-submit" style={{ flex: 1, marginTop: 0 }}>Send to the firm →</button>
                  </div>
                </>
              )}
            </form>
          </>
        )}
      </div>
    </div>
  );
};

// ────── Float CTA ──────

const FloatCTA = ({ onOpenModal }) => {
  const [visible, setVisible] = uS(false);
  uE(() => {
    const onScroll = () => setVisible(window.scrollY > 800);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <button className={`float-cta ${visible ? 'is-visible' : ''}`} onClick={onOpenModal}>
      <span className="float-cta-pulse"></span>
      Free case review
    </button>
  );
};

window.Insights = Insights;
window.FAQ = FAQ;
window.Contact = Contact;
window.Footer = Footer;
window.Modal = Modal;
window.FloatCTA = FloatCTA;