/* global React, InquiryModal */
const { useState: useStateC } = React;

const ROLES = [
  {
    title: "Server",
    type: "Full-time",
    desc: "Take care of guests like family. Pour wine, recommend dishes, read the table. Greek a plus, hospitality a must.",
    tags: ["2+ yrs exp"]
  },
  {
    title: "Bartender",
    type: "Full-time",
    desc: "Build the cocktail program with us — ouzo, mastiha, Aegean wines. Service-bar volume nights, walk-ins by day.",
    tags: ["3+ yrs exp"]
  },
  {
    title: "Host",
    type: "Part-time",
    desc: "First face guests see. Manage the book, the door, and the rhythm of the room. Warm energy is the job.",
    tags: ["weekends"]
  },
  {
    title: "Line Cook",
    type: "Full-time",
    desc: "Wood-fired grill, sauté, garde manger. Modern Greek menu — much from scratch. Pace is steady, standards are high.",
    tags: ["2+ yrs exp"]
  },
  {
    title: "Sous Chef",
    type: "Full-time",
    desc: "Right hand to Chef Ilias. Lead the line, run prep, train new cooks, keep the kitchen humming.",
    tags: ["5+ yrs exp"]
  },
  {
    title: "Dishwasher",
    type: "Full + part-time",
    desc: "The backbone of the kitchen. Fast hands, steady pace, good attitude. We promote from here.",
    tags: ["entry-level"]
  }
];

function Careers() {
  const [open, setOpen] = useStateC(false);
  const [role, setRole] = useStateC(null);

  const apply = (r) => {
    setRole(r);
    setOpen(true);
  };

  return (
    <section id="careers" className="dh-careers">
      <div className="dh-careers-inner">

        <header className="dh-careers-head">
          <div className="dh-careers-head-copy">
            <span className="dh-careers-eyebrow">Now hiring &middot; Jupiter / Tequesta</span>
            <h2 className="dh-careers-title">Join the family.</h2>
            <p className="dh-careers-lead">
              We're building a team that treats this place like their own &mdash; warm to guests, kind to each other, proud of the food. If that sounds like you, <em>say hello</em>.
            </p>
          </div>
          <p className="dh-careers-head-note">
            &mdash; experience helps, attitude wins.
          </p>
        </header>

        <div className="dh-careers-grid">
          {ROLES.map(r => (
            <article key={r.title} className="dh-role">
              <div className="dh-role-head">
                <h3 className="dh-role-title">{r.title}</h3>
                <span className="dh-role-type">{r.type}</span>
              </div>
              <p className="dh-role-desc">{r.desc}</p>
              <div className="dh-role-tags">
                {r.tags.map(t => <span key={t} className="dh-role-tag">{t}</span>)}
              </div>
              <div className="dh-role-foot">
                <button className="dh-role-apply" onClick={() => apply(r.title)}>
                  Apply &nbsp;→
                </button>
              </div>
            </article>
          ))}
        </div>

        <div className="dh-careers-foot">
          <p>
            Don't see a fit? We always want to meet good people. <a href="mailto:careers@dimisgreekhouse.com?subject=Open%20application">Send us a note &amp; your story</a>.
          </p>
          <button className="dh-btn dh-btn-ghost dh-btn-sm" onClick={() => apply("Open application")}>
            Open application
          </button>
        </div>

      </div>

      <InquiryModal
        open={open}
        onClose={() => setOpen(false)}
        mode="careers"
        role={role}
      />
    </section>
  );
}

window.Careers = Careers;