// Variation A — Editorial one-column
// Classic masthead, centered name, inline role headers with terracotta date rules.
// Print-faithful; same component renders both "one-page" and "extended" modes
// based on an `extended` prop that toggles the summary + hobbies/education tail.

const A_ACCENT = 'var(--accent, #b5552c)';

function ResumeA({ extended = false, expandedRoles, onToggleRole }) {
  const R = window.RESUME;
  return (
    <div className="resume resume-a" data-extended={extended ? "1" : "0"}>
      {/* Masthead */}
      <header className="a-masthead">
        <div className="a-avatar-wrap">
          <img src="assets/portrait.jpg" alt="" className="a-avatar" />
        </div>
        <div className="a-masthead-center">
          <div className="a-eyebrow">{extended ? 'Extended · 2026' : '2026'}</div>
          <h1 className="a-name">{R.name}</h1>
          <div className="a-rule" />
          <p className="a-tagline">
            {extended ? R.tagline : R.shortTagline}
          </p>
        </div>
        <div className="a-contact">
          <span>{R.contact.location}</span>
          <span className="a-dot">·</span>
          <span>{R.contact.phone}</span>
          <span className="a-dot">·</span>
          <span>{R.contact.email}</span>
          <span className="a-dot">·</span>
          <span>{R.contact.linkedin}</span>
        </div>
      </header>

      {extended && (
        <section className="a-section">
          <h2 className="a-h2">Summary</h2>
          <p className="a-prose">{R.summary}</p>
        </section>
      )}

      <section className="a-section">
        <h2 className="a-h2">Experience</h2>
        <div className="a-roles">
          {R.experience.map((role, i) => {
            const isOpen = extended || (expandedRoles && expandedRoles.has(i));
            return (
              <article key={i} className="a-role" data-open={isOpen ? "1" : "0"}>
                <header
                  className="a-role-head"
                  onClick={() => !extended && onToggleRole && onToggleRole(i)}
                  role={!extended ? "button" : undefined}
                  tabIndex={!extended ? 0 : undefined}
                >
                  <div className="a-role-title-line">
                    <span className="a-role-title">{role.title}</span>
                    <span className="a-role-sep">—</span>
                    <span className="a-role-company">{role.company}</span>
                  </div>
                  <div className="a-role-meta">
                    <span className="a-role-loc">{role.location}</span>
                    <span className="a-role-dates">{role.start} – {role.end}</span>
                  </div>
                </header>

                {!extended && (
                  <p className="a-role-short">{role.short}</p>
                )}

                {(extended || isOpen) && (
                  <ul className="a-bullets">
                    {role.bullets.map((b, j) => (
                      <li key={j}>{b}</li>
                    ))}
                  </ul>
                )}
              </article>
            );
          })}
        </div>
      </section>

      {extended && R.earlyCareer && R.earlyCareer.length > 0 && (
        <section className="a-section">
          <h2 className="a-h2">Earlier Career</h2>
          <ul className="a-early">
            {R.earlyCareer.map((role, i) => (
              <li key={i} className="a-early-item">
                <div className="a-early-dates">{role.start} – {role.end}</div>
                <div className="a-early-body">
                  <div className="a-early-title-line">
                    <span className="a-early-title">{role.title}</span>
                    <span className="a-role-sep">—</span>
                    <span className="a-early-company">{role.company}</span>
                    {role.location && role.location !== "—" && (
                      <span className="a-early-loc"> · {role.location}</span>
                    )}
                  </div>
                  {role.short && <div className="a-early-short">{role.short}</div>}
                </div>
              </li>
            ))}
          </ul>
        </section>
      )}

      <section className="a-section a-grid-2">
        <div>
          <h2 className="a-h2">Expertise</h2>
          <dl className="a-skills">
            {Object.entries(R.skills).map(([group, list]) => (
              <React.Fragment key={group}>
                <dt>{group}</dt>
                <dd>{list.join(' · ')}</dd>
              </React.Fragment>
            ))}
          </dl>
        </div>
        <div>
          <h2 className="a-h2">Education</h2>
          <ul className="a-edu">
            {R.education.map((e, i) => (
              <li key={i}>
                <div className="a-edu-school">{e.school}</div>
                <div className="a-edu-detail">{e.detail}</div>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {extended && (
        <section className="a-section">
          <h2 className="a-h2">Beyond Work</h2>
          <p className="a-prose">
            {R.hobbies.join(' · ')}
          </p>
        </section>
      )}

      <footer className="a-footer">
        <span>{R.name}</span>
        <span className="a-footer-dot">·</span>
        <span>{R.contact.email}</span>
        <span className="a-footer-dot">·</span>
        <span>Page 1</span>
      </footer>
    </div>
  );
}

window.ResumeA = ResumeA;