// Sections for Joshua's portfolio
const { useState, useEffect, useRef } = React;

function useInView(threshold = 0.15) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setInView(true); obs.disconnect(); } },
      { threshold }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, inView];
}

function Nav({ name }) {
  const [active, setActive] = useState('story');
  useEffect(() => {
    const onScroll = () => {
      const sections = window.NAV_LINKS.map(l => document.getElementById(l.id)).filter(Boolean);
      const y = window.scrollY + 140;
      let cur = sections[0]?.id || 'story';
      for (const s of sections) { if (s.offsetTop <= y) cur = s.id; }
      setActive(cur);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const initials = name.split(' ').map(s => s[0]).slice(0, 2).join('');
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#top" className="nav-mark">
          <div className="monogram">{initials}</div>
          <div>
            <div className="name">{name}</div>
            <div className="role">Sales Development · Remote</div>
          </div>
        </a>
        <div className="nav-links">
          {window.NAV_LINKS.map(l => (
            <a key={l.id} href={`#${l.id}`} className={active === l.id ? 'active' : ''}>{l.label}</a>
          ))}
        </div>
        <a href="#contact" className="btn btn-primary">
          Get in touch
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 10L10 2M10 2H4M10 2V8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
        </a>
      </div>
    </nav>
  );
}

function Hero({ headline, name, showTicker }) {
  return (
    <header className="hero" id="top">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-left">
            <div className="kicker">
              <span className="dot" />
              <span className="eyebrow">Available for SDR / BDR roles · Remote</span>
            </div>
            <h1>
              {headline.split(/(<em>.*?<\/em>)/).map((p, i) => {
                if (p.startsWith('<em>')) return <em key={i}>{p.replace(/<\/?em>/g, '')}</em>;
                return <React.Fragment key={i}>{p}</React.Fragment>;
              })}
            </h1>
            <p className="hero-sub">
              Twelve years across luxury hospitality, wellness, and retail taught me one thing: the best pipeline is built on genuine connection. Now I bring that craft to outbound — with the discipline of a remote operator and the warmth of a host.
            </p>
            <div className="hero-actions">
              <a href="#experience" className="btn btn-primary">
                View experience
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 10L10 2M10 2H4M10 2V8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
              </a>
              <a href="https://docs.google.com/document/d/1wgFRuXasPXt5rGZoGYjzOoX3P72ec0UEyEONv3rHMIA/edit?usp=sharing" target="_blank" rel="noopener noreferrer" className="btn btn-link">Download résumé ↓</a>
            </div>

            <div className="hero-stats">
              {window.HERO_STATS.map((s, i) => (
                <div className="stat" key={i}>
                  <span className="stat-num">{s.num}{s.suffix && <em>{s.suffix}</em>}</span>
                  <span className="stat-label">{s.label}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="hero-right">
            <div className="portrait-card">
              <div className="portrait-meta">
                <span>FIG. 01</span>
                <span>FAIRFIELD, IA</span>
              </div>
              <img className="portrait-img" src="assets/portrait.jpg" alt="Joshua Star Michael" loading="eager" />
            </div>
            <div className="portrait-caption">
              <span>Joshua Star Michael</span>
              <span>EST. 2008</span>
            </div>
          </div>
        </div>

        {showTicker && (
          <div className="hero-ticker">
            <div className="ticker-track">
              {[0, 1].map(loop => (
                <span key={loop}>
                  {window.TICKER.map((t, i) => (
                    <React.Fragment key={i}>
                      <span>{t}</span>
                      <span className="sep" />
                    </React.Fragment>
                  ))}
                </span>
              ))}
            </div>
          </div>
        )}
      </div>
    </header>
  );
}

function Story() {
  return (
    <section className="section" id="story">
      <div className="container">
        <div className="section-head">
          <div className="num">§ 01 — Story</div>
          <div>
            <h2>A craft built one conversation <em>at a time.</em></h2>
            <p className="lede">From the floor of a coastal lodge to closing high-ticket offers remote — same instinct, different stage.</p>
          </div>
        </div>
        <div className="story">
          <div className="pull">
            <em>"</em>Service is a posture, not a department. The same instincts that fill a dining room book outbound meetings — listen first, anticipate, follow through.<em>"</em>
          </div>
          <div className="story-body">
            <p>My career began behind the host stand of a luxury coastal lodge — a place where the difference between a good night and a memorable one came down to whether someone felt seen. Eleven years there taught me how to read a room, manage difficult moments without flinching, and turn a routine table into a $400 check without ever making it feel like a sale.</p>
            <p>I carried that craft into wellness, retail, and remote sales. At doTERRA I closed high-ticket offers from a home office; at Overland I steward VIP and high-net-worth clients through bespoke fittings and complex returns. Different products, same instinct: lead with curiosity, follow through with discipline.</p>
            <p>Today I'm bringing that to sales development — outbound and inbound. The volume is real, but so is the craft. I'd rather book one meeting that closes than ten that ghost.</p>
          </div>
          <aside className="story-aside">
            <div className="label">At a glance</div>
            <ul>
              <li><span>Based</span><span>Fairfield, IA</span></li>
              <li><span>Channels</span><span>Voice · Chat · Email</span></li>
              <li><span>Languages</span><span>English (Native)</span></li>
              <li><span>Typing</span><span>70 WPM</span></li>
              <li><span>Available</span><span>Immediately</span></li>
            </ul>
            <div className="label">Open to</div>
            <ul>
              <li><span>SDR / BDR</span><span>↗</span></li>
              <li><span>Outbound · Inbound</span><span>↗</span></li>
              <li><span>Lead Gen Specialist</span><span>↗</span></li>
              <li><span>Appointment Setter</span><span>↗</span></li>
            </ul>
          </aside>
        </div>
      </div>
    </section>
  );
}

function Pillars() {
  return (
    <section className="section" id="pillars">
      <div className="container">
        <div className="section-head">
          <div className="num">§ 02 — Strengths</div>
          <div>
            <h2>What I bring to a <em>pipeline.</em></h2>
            <p className="lede">Not a list of buzzwords — three habits, sharpened over a decade of customer-facing work.</p>
          </div>
        </div>
        <div className="pillars">
          {window.PILLARS.map((p, i) => (
            <div className="pillar" key={i}>
              <div className="num">{p.num} / 03</div>
              <div className="big">{p.big}<em>{p.bigEm}</em></div>
              <h3>{p.title}</h3>
              <p>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ExperienceRow({ role, defaultOpen }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div className={`exp-row${open ? ' open' : ''}`} onClick={() => setOpen(o => !o)}>
      <div className="exp-meta">
        <div className="years">{role.years}</div>
        <div className="duration">{role.duration}</div>
        <div className="mode">{role.mode}</div>
      </div>
      <div>
        <div className="exp-head">
          <div>
            <h3>{role.role}</h3>
            <div className="company">{role.company}</div>
            <p className="summary">{role.summary}</p>
            <div className="exp-metrics">
              {role.chips.map((c, i) => (
                <span className="metric-chip" key={i}><strong>{c.v}</strong> · {c.l}</span>
              ))}
            </div>
            <div className="exp-expand">
              <span>{open ? 'Collapse details' : 'Read full record'}</span>
              <span className="exp-expand-line" />
              <span className="exp-expand-mark">{open ? '–' : '+'}</span>
            </div>
          </div>
          <button className="exp-corner" aria-label={open ? 'Collapse' : 'Expand'} type="button">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
              <path d="M11 3.5V18.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="exp-corner-v"/>
              <path d="M3.5 11H18.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
            </svg>
          </button>
        </div>
        {open && (
          <ul className="exp-detail">
            {role.bullets.map((b, i) => <li key={i}>{b}</li>)}
          </ul>
        )}
      </div>
    </div>
  );
}

function Experience({ expandFirst }) {
  return (
    <section className="section" id="experience">
      <div className="container">
        <div className="section-head">
          <div className="num">§ 03 — Experience</div>
          <div>
            <h2>Twelve years on <em>the floor.</em></h2>
            <p className="lede">Tap any role to expand the full record.</p>
          </div>
        </div>
        <div className="exp-list">
          {window.EXPERIENCE.map((r, i) => (
            <ExperienceRow key={i} role={r} defaultOpen={i === 0 && expandFirst} />
          ))}
        </div>
      </div>
    </section>
  );
}

function Quote() {
  return (
    <section className="quote-section">
      <div className="container">
        <div className="label">— A working principle</div>
        <blockquote>
          <span className="mark">"</span>To give real service you must add something which cannot be bought or measured with money — and that is sincerity and integrity.
          <cite>— Douglas Adams</cite>
        </blockquote>
      </div>
    </section>
  );
}

function SkillRow({ name, pct }) {
  const [ref, inView] = useInView(0.2);
  const w = inView ? `${pct}%` : '0%';
  return (
    <div className="skill-row" ref={ref}>
      <div className="name">{name}</div>
      <div className="skill-bar">
        <div className="fill" style={{ width: w }} />
        <div className="marker" style={{ left: w }} />
      </div>
      <div className="pct">{pct}%</div>
    </div>
  );
}

function Skills() {
  return (
    <section className="section" id="skills">
      <div className="container">
        <div className="section-head">
          <div className="num">§ 04 — Capability</div>
          <div>
            <h2>Core <em>competencies.</em></h2>
            <p className="lede">Self-assessed across the toolkit a modern SDR actually uses day to day.</p>
          </div>
        </div>
        <div className="skills-grid">
          <div className="skills-col">
            <h3>Skills <span className="count">{window.SKILLS.length} TRACKED</span></h3>
            {window.SKILLS.map((s, i) => <SkillRow key={i} {...s} />)}
          </div>
          <div className="skills-col">
            <h3>Languages <span className="count">01 NATIVE</span></h3>
            <div className="lang-row">
              <span className="name">English</span>
              <span className="level">Native · Fluent written + spoken</span>
            </div>
            <div className="wpm-card">
              <div className="label">Verified Typing Speed</div>
              <div className="big">70<em>WPM</em></div>
              <div className="wpm-track"><div className="typed" /></div>
              <p>Fast, accurate keystrokes for live chat, CRM logging, and async correspondence — without sacrificing tone or precision.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Setup() {
  const ICONS = {
    Laptop: <path d="M3 5h18v11H3zM1 19h22" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round"/>,
    Processor: <><rect x="6" y="6" width="12" height="12" stroke="currentColor" strokeWidth="1.5" fill="none"/><path d="M3 9h3M3 12h3M3 15h3M18 9h3M18 12h3M18 15h3M9 3v3M12 3v3M15 3v3M9 18v3M12 18v3M15 18v3" stroke="currentColor" strokeWidth="1.5"/></>,
    Monitor: <><rect x="2" y="4" width="20" height="13" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none"/><path d="M9 21h6M12 17v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></>,
    Keyboard: <rect x="2" y="6" width="20" height="12" rx="1.5" stroke="currentColor" strokeWidth="1.5" fill="none"/>,
    Mouse: <><rect x="7" y="3" width="10" height="18" rx="5" stroke="currentColor" strokeWidth="1.5" fill="none"/><path d="M12 7v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></>,
    Desk: <path d="M3 7h18M5 7v12M19 7v12M3 12h18" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round"/>,
    Headset: <path d="M4 14a8 8 0 0116 0v3a2 2 0 01-2 2h-1v-6h3M4 14v3a2 2 0 002 2h1v-6H4" stroke="currentColor" strokeWidth="1.5" fill="none"/>,
    Internet: <path d="M2 12a10 10 0 0020 0 10 10 0 00-20 0zm10-10v20M2 12h20M5 5c4 4 10 4 14 0M5 19c4-4 10-4 14 0" stroke="currentColor" strokeWidth="1.3" fill="none"/>,
  };
  return (
    <section className="section" id="setup" style={{ paddingTop: 0, borderTop: 0 }}>
      <div className="container">
        <div className="section-head">
          <div className="num">§ 05 — Workspace</div>
          <div>
            <h2>The <em>setup.</em></h2>
            <p className="lede">A reliable remote stack — because uptime is part of the job.</p>
          </div>
        </div>
        <div className="setup-grid">
          {window.SETUP.map((s, i) => (
            <div className="setup-cell" key={i}>
              <svg className="icon" viewBox="0 0 24 24">{ICONS[s.label] || null}</svg>
              <div className="label">{s.label}</div>
              <div className="value">{s.value}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Books() {
  return (
    <section className="section" id="books">
      <div className="container">
        <div className="section-head">
          <div className="num">§ 06 — Reading</div>
          <div>
            <h2>Books that shaped <em>the practice.</em></h2>
            <p className="lede">The shelf I return to — equal parts sales craft and customer-success philosophy.</p>
          </div>
        </div>
        <div className="books-grid">
          {window.BOOKS.map((b, i) => (
            <div className="book" key={i}>
              <div className="book-cover book-cover-img" style={{ background: b.tone }}>
                {b.cover && <img src={b.cover} alt={`${b.title} — ${b.author}`} loading="lazy" />}
              </div>
              <div className="book-meta">
                <span>№ {String(i + 1).padStart(2, '0')}</span>
                <span>READ</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Education() {
  return (
    <section className="section" id="education" style={{ paddingTop: 0, borderTop: 0 }}>
      <div className="container">
        <div className="section-head">
          <div className="num">§ 07 — Education</div>
          <div>
            <h2><em>Schooled.</em></h2>
          </div>
        </div>
        <div>
          <div className="edu-row">
            <div className="year">2012</div>
            <div>
              <div className="degree">Bachelor of Business Administration</div>
              <div className="school">Columbia Gorge Community College · The Dalles, OR</div>
            </div>
            <div className="gpa">GPA 3.63</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [sent, setSent] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };
  return (
    <section className="contact" id="contact">
      <div className="container">
        <div className="eyebrow" style={{ color: 'oklch(70% 0.04 60)' }}>§ 08 — Contact</div>
        <h2 style={{ marginTop: 18 }}>Let's start a <em>conversation.</em></h2>
        <p style={{ fontFamily: "'Newsreader', serif", fontWeight: 300, fontSize: 22, lineHeight: 1.45, color: 'oklch(78% 0.02 60)', maxWidth: 640, marginTop: 12 }}>
          Whether you're hiring an SDR, building a BDR team, or just want to compare notes on the craft of pipeline — I'd love to hear from you.
        </p>
        <div className="contact-grid">
          <div className="contact-info">
            <a className="row" href="mailto:joshuastarmichael@gmail.com">
              <span className="lbl">Email</span>
              <span className="val">joshuastarmichael@gmail.com</span>
              <span className="arrow">→</span>
            </a>
            <a className="row" href="https://www.linkedin.com/in/joshuastarmichael" target="_blank" rel="noopener noreferrer">
              <span className="lbl">LinkedIn</span>
              <span className="val">@joshuastarmichael</span>
              <span className="arrow">→</span>
            </a>
            <a className="row" href="tel:6414510338">
              <span className="lbl">Phone</span>
              <span className="val">(641) 451-0338</span>
              <span className="arrow">→</span>
            </a>
            <a className="row" href="#">
              <span className="lbl">Location</span>
              <span className="val">Fairfield, Iowa · CT</span>
              <span className="arrow">→</span>
            </a>
            <a className="row" href="https://docs.google.com/document/d/1wgFRuXasPXt5rGZoGYjzOoX3P72ec0UEyEONv3rHMIA/edit?usp=sharing" target="_blank" rel="noopener noreferrer">
              <span className="lbl">Résumé</span>
              <span className="val">Download PDF</span>
              <span className="arrow">↓</span>
            </a>
          </div>
          <form className="contact-form" onSubmit={submit} style={{ display: 'none' }}>
            <div className="label">Send a message</div>
            <div className="field">
              <label>Your name</label>
              <input type="text" placeholder="Jane Doe" required />
            </div>
            <div className="field">
              <label>Your email</label>
              <input type="email" placeholder="jane@company.com" required />
            </div>
            <div className="field">
              <label>Message</label>
              <textarea placeholder="Tell me about the role, the team, the pipeline..." required />
            </div>
            <button type="submit" className="btn btn-primary">
              {sent ? 'Sent — talk soon.' : 'Send message →'}
            </button>
          </form>
        </div>
      </div>
      <footer>
        <div className="container">
          <div>© 2026 Joshua Star Michael · Fairfield, Iowa</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="mailto:joshuastarmichael@gmail.com">Email</a>
            <a href="https://www.linkedin.com/in/joshuastarmichael" target="_blank" rel="noopener noreferrer">LinkedIn</a>
            <a href="https://docs.google.com/document/d/1wgFRuXasPXt5rGZoGYjzOoX3P72ec0UEyEONv3rHMIA/edit?usp=sharing" target="_blank" rel="noopener noreferrer">Résumé</a>
          </div>
        </div>
      </footer>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Story, Pillars, Experience, Quote, Skills, Setup, Books, Education, Contact });