/* Qortex — content sections (Services, Method, Cases, Team, QGroupBand, Career, Contact) */

/* ─────────── 02 · Vad vi gör ─────────── */
function Services() {
  const cards = [
    {
      num: '01',
      title: 'Tech',
      lede: 'Utvecklare och arkitekter som bygger lösningar som håller över tid.',
      body: 'Frontend, backend, molnarkitektur, integration. Vi tar plats i era team och levererar — eller leder en hel teknisk leverans när det behövs.',
      tags: ['Lösningsarkitekt', 'Senior Backend', 'Senior Frontend', 'Cloud / Platform', 'DevOps', 'Integration'],
    },
    {
      num: '02',
      title: 'Produkt & Projekt',
      lede: 'Produktägare, scrum masters och projektledare som driver leverans och håller riktningen.',
      body: 'Från idé till produktion. Vi sätter ramarna, prioriterar rätt och säkrar att teamet faktiskt levererar det som är mest värt.',
      tags: ['Produktägare', 'Scrum Master', 'Projektledare', 'Tech Lead', 'Agil coach', 'Förändringsledare'],
    },
  ];
  return (
    <section className="qx-section qx-section--services" id="tjanster">
      <div className="qx-section__inner">
        <SectionHead
          num="02"
          eyebrow="Vad vi gör"
          title="Två kompetensområden."
          accentTitle="Ingenting där emellan."
          lede="Vi håller fokus på det vi är bäst på. Antingen behöver ni tech-kompetens, eller så behöver ni någon som driver leveransen. Ofta båda."
        />
        <div className="qx-services">
          {cards.map(c => (
            <article key={c.num} className="qx-service">
              <header className="qx-service__head">
                <span className="qx-service__num">{c.num}</span>
                <h3 className="qx-service__title">{c.title}</h3>
              </header>
              <p className="qx-service__lede">{c.lede}</p>
              <p className="qx-service__body">{c.body}</p>
              <ul className="qx-service__tags">
                {c.tags.map(t => <li key={t}>{t}</li>)}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── 03 · Hur vi tänker ─────────── */
function Method() {
  const steps = [
    {
      num: '01',
      word: 'Tänk',
      body: 'Hos oss får du aldrig en konsult som "ska in och lära sig". Bara seniora som redan kan. Det är därför vi är fem — inte hundra.',
    },
    {
      num: '02',
      word: 'Förstå',
      body: 'Vi är få, så vi tar oss tid att förstå er verksamhet innan vi börjar leverera. Det syns i resultatet — och i hur länge det håller.',
    },
    {
      num: '03',
      word: 'Förändra',
      body: 'När vi går vidare ska ni stå starkare än innan. Bättre kod, klarare riktning, snabbare team. Det är så vi mäter oss själva.',
    },
  ];
  return (
    <section className="qx-section qx-section--method" id="metod">
      <div className="qx-section__inner">
        <SectionHead
          num="03"
          eyebrow="Hur vi tänker"
          title="Tre ord."
          accentTitle="En arbetsmetod."
          lede="Tagline är inte dekoration. Det är hur vi tar in ett uppdrag, hur vi jobbar — och hur vi mäter om vi lyckades."
        />
        <ol className="qx-method">
          {steps.map(s => (
            <li key={s.num} className="qx-method__row">
              <span className="qx-method__num">{s.num}</span>
              <div className="qx-method__body">
                <h3 className="qx-method__word">{s.word}<span aria-hidden="true">.</span></h3>
                <p>{s.body}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ─────────── 04 · I urval (Cases) ─────────── */
function Cases() {
  const CASES = window.QORTEX_CONTENT.cases;
  const [filter, setFilter] = React.useState('Alla');
  const filters = ['Alla', 'Tech', 'Produkt & Projekt'];
  const visible = filter === 'Alla' ? CASES : CASES.filter(c => c.tag === filter);
  return (
    <section className="qx-section qx-section--cases" id="case">
      <div className="qx-section__inner">
        <SectionHead
          num="04"
          eyebrow="I urval"
          title="Vad våra konsulter"
          accentTitle="faktiskt har gjort."
          lede="Ett urval av uppdrag där våra konsulter haft betydande roller i leveransen. Detaljerna är förstås anonymiserade där det behövs."
        />
        <div className="qx-filters" role="tablist" aria-label="Filtrera case">
          {filters.map(f => (
            <button
              key={f}
              role="tab"
              aria-selected={filter === f}
              className={`qx-filter ${filter === f ? 'is-active' : ''}`}
              onClick={() => setFilter(f)}
            >
              {f}
              <span className="qx-filter__count">
                {f === 'Alla' ? CASES.length : CASES.filter(c => c.tag === f).length}
              </span>
            </button>
          ))}
        </div>
        <div className="qx-cases">
          {visible.map((c, i) => (
            <article key={c.id} className="qx-case">
              <div className="qx-case__top">
                <span className={`qx-tag qx-tag--${c.tag === 'Tech' ? 'tech' : 'pp'}`}>{c.tag}</span>
                <span className="qx-case__idx">Case {String(i+1).padStart(2, '0')}</span>
              </div>
              <h3 className="qx-case__title">{c.title}</h3>
              <dl className="qx-case__meta">
                <div><dt>Bransch</dt><dd>{c.sector}</dd></div>
                <div><dt>Roll</dt><dd>{c.role}</dd></div>
              </dl>
              <p className="qx-case__body">{c.body}</p>
              <footer className="qx-case__foot">
                <div className="qx-case__by">
                  <div className="qx-case__avatar" aria-hidden="true">{c.consultant.split(' ').map(n=>n[0]).join('')}</div>
                  <span>{c.consultant}</span>
                </div>
                <a href="#kontakt" className="qx-link">Läs mer
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
                    <path d="M3 6h6M6.5 3l3 3-3 3" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </a>
              </footer>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── 05 · Teamet ─────────── */
function Team() {
  const TEAM = window.QORTEX_CONTENT.team;
  return (
    <section className="qx-section qx-section--team" id="team">
      <div className="qx-section__inner">
        <SectionHead
          num="05"
          eyebrow="Teamet"
          title="Fem personer."
          accentTitle="Här är de."
          lede="Inga proxy-konsulter, inga underkonsulter. Det här är personerna du kommer prata med — och som faktiskt gör jobbet."
        />
        <div className="qx-team">
          {TEAM.map((p, i) => (
            <article key={p.name} className="qx-person">
              <div className="qx-person__photo">
                <span className="qx-person__placeholder">Foto · {String(i+1).padStart(2,'0')}</span>
              </div>
              <div className="qx-person__meta">
                <h3 className="qx-person__name">{p.name}</h3>
                <span className="qx-person__role">{p.role}</span>
                <p className="qx-person__bio">{p.bio}</p>
                <a className="qx-person__li" href={p.linkedin} aria-label={`${p.name} på LinkedIn`}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M4.98 3.5a2.5 2.5 0 11-.02 5 2.5 2.5 0 01.02-5zM3 9h4v12H3V9zm7 0h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.4c0-1.3-.02-2.95-1.8-2.95-1.8 0-2.08 1.4-2.08 2.85V21h-4V9z"/>
                  </svg>
                  LinkedIn
                </a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── 06 · Del av Q-group ─────────── */
function QGroupBand() {
  return (
    <section className="qx-section qx-section--qgroup" id="qgroup">
      <div className="qx-section__inner qx-qgroup-band">
        <div className="qx-qgroup-band__left">
          <span className="qx-eyebrow"><span className="qx-dot"/>06 · Del av Q-group</span>
          <h2 className="qx-qgroup-band__title">
            Boutique-känslan. <em>Koncernens stabilitet.</em>
          </h2>
          <p className="qx-qgroup-band__body">
            Qortex är ett av bolagen i <strong>Q-group</strong> — en grupp av specialiserade
            konsultbolag inom tech, produkt och affärsutveckling. Det ger oss tryggheten
            av en större organisation, samtidigt som vi behåller den korta beslutsvägen och
            personliga närvaron som är hela poängen med Qortex.
          </p>
          <a href="https://q.group/" target="_blank" rel="noreferrer" className="qx-btn qx-btn--ghost">
            Läs mer på q.group
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
              <path d="M4 10L10 4M10 4H5M10 4v5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
        </div>
        <div className="qx-qgroup-band__right">
          <img src="assets/qgroup-logo.png" alt="Q-group" className="qx-qgroup-band__logo"/>
          <dl className="qx-qgroup-stats">
            <div><dt>36</dt><dd>specialiserade bolag</dd></div>
            <div><dt>850+</dt><dd>konsulter totalt</dd></div>
            <div><dt>19</dt><dd>städer</dd></div>
            <div><dt>2012</dt><dd>grundat</dd></div>
          </dl>
        </div>
      </div>
    </section>
  );
}

/* ─────────── 07 · Karriär ─────────── */
function Career() {
  const c = window.QORTEX_CONTENT.career;
  const points = c.points;
  return (
    <section className="qx-section qx-section--career" id="karriar">
      <div className="qx-section__inner">
        <SectionHead
          num="07"
          eyebrow="Karriär"
          title="Vill du jobba"
          accentTitle="hos oss?"
          lede="Vi rekryterar sällan, men vi pratar gärna. Är du senior inom tech eller produkt/projekt och nyfiken på en mindre, mer personlig kontext — hör av dig."
        />
        <div className="qx-career">
          <ul className="qx-career__points">
            {points.map(p => (
              <li key={p.num}>
                <span className="qx-career__num">{p.num}</span>
                <div>
                  <h3>{p.title}</h3>
                  <p>{p.body}</p>
                </div>
              </li>
            ))}
          </ul>
          <aside className="qx-career__card">
            <span className="qx-eyebrow qx-eyebrow--muted">Prata med</span>
            <h3 className="qx-career__name">{c.contactName}</h3>
            <span className="qx-career__role">{c.contactRole}</span>
            <div className="qx-career__contact">
              <a href={`mailto:${c.contactEmail}`}>{c.contactEmail}</a>
              <a href={`tel:${c.contactPhone.replace(/\s/g, '')}`}>{c.contactPhone}</a>
              <a href={c.contactLinkedin} target="_blank" rel="noreferrer">LinkedIn ↗</a>
            </div>
            <a className="qx-btn qx-btn--primary qx-btn--lg" href="#kontakt">
              Boka ett möte
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </a>
          </aside>
        </div>
      </div>
    </section>
  );
}

/* ─────────── 08 · Kontakt ─────────── */
function Contact() {
  const ct = window.QORTEX_CONTENT.contact;
  const [sent, setSent] = React.useState(false);
  const onSubmit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <section className="qx-section qx-section--contact" id="kontakt">
      <div className="qx-section__inner">
        <SectionHead
          num="08"
          eyebrow="Kontakt"
          title="Hör av dig."
          accentTitle="Vi svarar samma dag."
          lede="Boka en halvtimme direkt med Ida, eller skicka några rader. Vi är ett litet bolag — det är på riktigt vi som läser."
        />
        <div className="qx-contact">
          <div className="qx-contact__left">
            <div className="qx-contact__person">
              <div className="qx-contact__avatar">
                <span>Foto · Ida</span>
              </div>
              <div>
                <h3 className="qx-contact__name">{ct.name}</h3>
                <span className="qx-contact__role">{ct.role}</span>
              </div>
            </div>
            <ul className="qx-contact__list">
              <li><span className="qx-eyebrow qx-eyebrow--muted">E-post</span><a href={`mailto:${ct.email}`}>{ct.email}</a></li>
              <li><span className="qx-eyebrow qx-eyebrow--muted">Telefon</span><a href={`tel:${ct.phone.replace(/\s/g, '')}`}>{ct.phone}</a></li>
              <li><span className="qx-eyebrow qx-eyebrow--muted">LinkedIn</span><a href={ct.linkedin} target="_blank" rel="noreferrer">{ct.linkedinHandle}</a></li>
              <li><span className="qx-eyebrow qx-eyebrow--muted">Besök</span><span>{ct.address}</span></li>
            </ul>
            <a className="qx-btn qx-btn--primary qx-btn--lg qx-contact__cta" href="#kontakt">
              Boka direkt i kalendern
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </a>
          </div>
          <form className="qx-contact__form" onSubmit={onSubmit}>
            <div className="qx-field"><label>Namn</label><input required name="namn" placeholder="För- och efternamn"/></div>
            <div className="qx-field"><label>E-post</label><input required type="email" name="epost" placeholder="namn@företag.se"/></div>
            <div className="qx-field"><label>Företag</label><input name="foretag" placeholder="Bolagsnamn"/></div>
            <div className="qx-field"><label>Ärende</label>
              <select name="arende" defaultValue="">
                <option value="" disabled>Välj…</option>
                <option>Behov av tech-konsult</option>
                <option>Behov av produkt/projekt-konsult</option>
                <option>Söker uppdrag / anställning</option>
                <option>Annat</option>
              </select>
            </div>
            <div className="qx-field qx-field--full"><label>Meddelande</label><textarea required rows="5" name="meddelande" placeholder="Berätta kort vad ni behöver hjälp med."/></div>
            <div className="qx-field qx-field--full qx-field--actions">
              <button type="submit" className="qx-btn qx-btn--primary qx-btn--lg" disabled={sent}>
                {sent ? 'Tack — vi hör av oss' : 'Skicka meddelande'}
                {!sent && (
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                    <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
              </button>
              <span className="qx-contact__note">Vi sparar din info enbart för att svara dig. Inga utskick.</span>
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services, Method, Cases, Team, QGroupBand, Career, Contact });