// DiLeonardo & Shaw — sections (practice, manifesto, results, attorneys, testimonials)

const { useState: useSt, useEffect: useEf, useRef: useR } = React;

// ────── Practice areas ──────

const PRACTICE = {
  injury: [
    { num: '01', name: 'Auto Accidents', em: 'Accidents', desc: 'Cars, motorcycles, rideshare. We handle the insurance carriers so you can recover.' },
    { num: '02', name: 'Trucking Collisions', em: 'Collisions', desc: 'Commercial vehicle injuries. Federal regulations. Black-box evidence preserved fast.' },
    { num: '03', name: 'Medical Malpractice', em: 'Malpractice', desc: 'Misdiagnosis, surgical errors, birth injuries. Reviewed by board-certified experts.' },
    { num: '04', name: 'Nursing Home Abuse', em: 'Abuse', desc: 'Neglect and elder injury. Confidential intake. Statute deadlines act fast.' },
    { num: '05', name: 'Slip & Fall', em: 'Slip', desc: 'Premises liability across retail, residential, and commercial properties.' },
    { num: '06', name: 'Sexual Abuse', em: 'Abuse', desc: 'Civil claims handled with discretion and care. Confidential consultations.' },
    { num: '07', name: 'Dog Bites', em: 'Bites', desc: 'Animal attacks. Homeowner policies. Pediatric trauma representation.' },
  ],
  business: [
    { num: '01', name: 'Contracts & MSAs', em: 'Contracts', desc: 'Drafting, review, and negotiation that holds up under scrutiny — vendor agreements, NDAs, employment, non-competes.' },
    { num: '02', name: 'Entity Formation', em: 'Formation', desc: 'LLC, S-corp, and corporate structuring built for tax efficiency and litigation insulation.' },
    { num: '03', name: 'Outside General Counsel', em: 'Counsel', desc: 'Ongoing advisory at a fraction of in-house cost. We handle legal so your team handles operating.' },
    { num: '04', name: 'Commercial Litigation', em: 'Litigation', desc: 'Disputes resolved efficiently — through settlement, arbitration, or trial when needed.' },
    { num: '05', name: 'Real Estate', em: 'Real Estate', desc: 'Commercial transactions, leases, title disputes, and zoning matters across DE, NJ, PA.' },
  ],
};

const Practice = () => {
  const [tab, setTab] = useSt('injury');
  return (
    <section className="practice" id="practice">
      <div className="sec">
        <div className="sec-head">
          <div className="sec-head-meta">
            <div className="sec-head-num">§ 01 / Practice</div>
            <div className="sec-head-tag">What We Handle</div>
          </div>
          <h2 className="display h2">Two practices.<br />One <em>standard</em> of representation.</h2>
        </div>

        <div className="practice-tabs">
          <button className={`practice-tab ${tab === 'injury' ? 'is-active' : ''}`} onClick={() => setTab('injury')}>Personal Injury</button>
          <button className={`practice-tab ${tab === 'business' ? 'is-active' : ''}`} onClick={() => setTab('business')}>Business Law</button>
        </div>

        <div className="practice-list">
          {PRACTICE[tab].map((p) => (
            <div key={p.num} className="practice-row">
              <div className="practice-num">{p.num} / {String(PRACTICE[tab].length).padStart(2, '0')}</div>
              <div className="practice-name">
                {p.name.split(' ').map((w, i) => w === p.em ? <em key={i}>{w} </em> : <span key={i}>{w} </span>)}
              </div>
              <div className="practice-desc">{p.desc}</div>
              <div className="practice-arrow">→</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ────── Manifesto (scroll-driven) ──────

const Manifesto = () => {
  const ref = useR(null);
  const [progress, setProgress] = useSt(0);

  useEf(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const r = ref.current.getBoundingClientRect();
      const winH = window.innerHeight;
      const start = winH * 0.7;
      const end = -r.height + winH * 0.3;
      const total = start - end;
      const cur = start - r.top;
      const p = Math.max(0, Math.min(1, cur / total));
      setProgress(p);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const words = [
    { t: 'Most', g: false },
    { t: 'firms', g: false },
    { t: 'settle', g: false },
    { t: 'because', g: false },
    { t: 'they', g: false },
    { t: "can't", g: false },
    { t: 'try.', g: false },
    { t: 'We', g: false },
    { t: 'prepare', g: true },
    { t: 'every', g: true },
    { t: 'case', g: true },
    { t: 'as if', g: false },
    { t: 'we', g: false },
    { t: "won't.", g: false },
    { t: "That's", g: false },
    { t: 'how', g: false },
    { t: 'we', g: false },
    { t: 'reach', g: false },
    { t: 'the', g: false },
    { t: 'fair', g: true },
    { t: 'number.', g: true },
  ];

  return (
    <section className="manifesto is-dark-section" ref={ref} id="about">
      <div className="sec-head" style={{ marginBottom: 40 }}>
        <div className="sec-head-meta">
          <div className="sec-head-num" style={{ color: 'rgba(245,240,230,0.5)' }}>§ 02 / Approach</div>
          <div className="sec-head-tag" style={{ color: 'var(--gold)' }}>How We Work</div>
        </div>
        <div></div>
      </div>

      <p className="manifesto-text">
        {words.map((w, i) => {
          const lit = i / words.length < progress + 0.2;
          const goldOn = w.g && lit;
          return (
            <span key={i} className={`word ${lit ? 'lit' : ''} ${goldOn ? 'gold' : ''}`} style={{ marginRight: '0.18em', transitionDelay: `${i * 20}ms` }}>
              {w.t}
            </span>
          );
        })}
      </p>

      <div className="manifesto-foot">
        <div className="manifesto-foot-block">
          <div className="manifesto-foot-block-label">No Fee Unless We Win</div>
          <div className="manifesto-foot-block-text">Personal injury cases on contingency. You pay no attorney fee unless we secure compensation.</div>
        </div>
        <div className="manifesto-foot-block">
          <div className="manifesto-foot-block-label">Direct Attorney Access</div>
          <div className="manifesto-foot-block-text">You speak with the attorneys handling your case. No paralegal pinball, no routing tree.</div>
        </div>
        <div className="manifesto-foot-block">
          <div className="manifesto-foot-block-label">Trial-Ready From Day One</div>
          <div className="manifesto-foot-block-text">We prepare every case as if it won't settle. That preparation brings the other side to a fair number.</div>
        </div>
      </div>
    </section>
  );
};

// ────── Case Results ──────

const RESULTS = [
  { amount: '3.2', unit: 'M', type: 'Trucking Collision', meta: 'Settlement · 2025' },
  { amount: '1.85', unit: 'M', type: 'Medical Malpractice', meta: 'Verdict · 2024' },
  { amount: '950', unit: 'K', type: 'Nursing Home Neglect', meta: 'Settlement · 2024' },
  { amount: '725', unit: 'K', type: 'Auto Accident · TBI', meta: 'Settlement · 2025' },
  { amount: '1.4', unit: 'M', type: 'Workplace Injury', meta: 'Verdict · 2024' },
  { amount: '610', unit: 'K', type: 'Premises Liability', meta: 'Settlement · 2025' },
  { amount: '2.1', unit: 'M', type: 'Pedestrian Strike', meta: 'Settlement · 2023' },
  { amount: '480', unit: 'K', type: 'Dog Bite · Pediatric', meta: 'Settlement · 2025' },
];

const Results = () => (
  <section className="results" id="results">
    <div className="sec">
      <div className="sec-head">
        <div className="sec-head-meta">
          <div className="sec-head-num">§ 03 / Outcomes</div>
          <div className="sec-head-tag">Recent Verdicts</div>
        </div>
        <h2 className="display h2">Verdicts and settlements <em>that change lives.</em></h2>
      </div>

      <div className="results-grid">
        {RESULTS.map((r, i) => (
          <div key={i} className="result-cell">
            <div className="result-amount"><em>$</em>{r.amount}{r.unit}</div>
            <div className="result-type">{r.type}</div>
            <div className="result-meta">{r.meta}</div>
          </div>
        ))}
      </div>

      <p className="results-disclaimer">
        Past results do not guarantee future outcomes. Each case is evaluated on its individual facts. Some results may include co-counsel involvement. Confidential settlements are not represented.
      </p>
    </div>
  </section>
);

// ────── Attorneys ──────

const Attorneys = () => (
  <section className="attorneys" id="attorneys">
    <div className="sec">
      <div className="sec-head">
        <div className="sec-head-meta">
          <div className="sec-head-num">§ 04 / People</div>
          <div className="sec-head-tag">Meet The Partners</div>
        </div>
        <h2 className="display h2">Two attorneys. One <em>uncommon</em> bench.</h2>
      </div>

      <div className="attorneys-grid">
        {/* Gabriel */}
        <div className="attorney-card">
          <div className="attorney-portrait attorney-portrait--gabriel" role="img" aria-label="Photo of Gabriel A. DiLeonardo, Sr.">
            <div className="attorney-portrait-label">Founding Partner / 01</div>
            <div className="attorney-portrait-name">Gabriel A.<br /><em>DiLeonardo,</em> Sr.</div>
          </div>
          <div className="attorney-meta">
            <div>
              <div className="attorney-role">Founding Partner</div>
              <div className="attorney-bars">
                <span className="attorney-bar">DE Bar</span>
                <span className="attorney-bar">NJ Bar</span>
                <span className="attorney-bar">PA Bar</span>
              </div>
            </div>
            <a href="/attorneys/#gabriel-dileonardo" className="attorney-cta">Read bio →</a>
          </div>
          <div className="attorney-bottom">
            <p className="attorney-bio">
              Personal injury, workers' compensation, motor vehicle and rideshare accidents, slip and fall, dog bites, products liability, and Social Security disability — plus commercial litigation, real estate, and corporate formation on the business side.
            </p>
          </div>
        </div>

        {/* Kevin */}
        <div className="attorney-card">
          <div className="attorney-portrait attorney-portrait--kevin" role="img" aria-label="Photo of Kevin Shaw">
            <div className="attorney-portrait-label">Partner / 02</div>
            <div className="attorney-portrait-name">Kevin<br /><em>Shaw,</em> Esq.</div>
          </div>
          <div className="attorney-meta">
            <div>
              <div className="attorney-role">Partner</div>
              <div className="attorney-bars">
                <span className="attorney-bar">DE Bar</span>
              </div>
            </div>
            <a href="/attorneys/#kevin-shaw" className="attorney-cta">Read bio →</a>
          </div>
          <div className="attorney-bottom">
            <p className="attorney-bio">
              Litigator with 10+ years at the Delaware Bar. Personal injury and toxic tort experience on both sides of the docket. Business advisory work including non-consolidation opinions, incorporation, and director and officer liability.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ────── Testimonials ──────

const TESTIMONIALS = [
  {
    quote: "Gabe handled my crash case start to finish. He was straight with me, kept me posted, and got way more than I expected. Couldn't ask for better.",
    name: "Maria R.",
    case: "Auto accident · 2025",
    source: "Google",
  },
  {
    quote: "Kevin gave us a real plan, not legalese. When the other side stalled, he didn't. Our case wrapped six months earlier than we expected.",
    name: "Daniel K.",
    case: "Premises liability · 2024",
    source: "Avvo",
  },
  {
    quote: "They treated my mom's nursing home case like it was their own family. Compassionate, but they did not back down. We got real accountability.",
    name: "Patricia W.",
    case: "Nursing home neglect · 2024",
    source: "Google",
  },
];

const Testimonials = () => (
  <section className="testimonials">
    <div className="sec">
      <div className="sec-head">
        <div className="sec-head-meta">
          <div className="sec-head-num">§ 05 / Voices</div>
          <div className="sec-head-tag">In Their Words</div>
        </div>
        <h2 className="display h2">What our <em>clients say.</em></h2>
      </div>

      <div className="t-grid">
        {TESTIMONIALS.map((t, i) => (
          <div key={i} className="t-card">
            <div className="t-stars">★★★★★</div>
            <p className="t-quote">{t.quote}</p>
            <div className="t-foot">
              <div>
                <div className="t-name">{t.name}</div>
                <div className="t-case">{t.case}</div>
              </div>
              <div className="t-source">{t.source}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

window.Practice = Practice;
window.Manifesto = Manifesto;
window.Results = Results;
window.Attorneys = Attorneys;
window.Testimonials = Testimonials;