/* components.jsx - reusable primitives. Exported to window.
   See BUILD_GUIDE.md §4. Never name a styles object just `styles`. */

const { useRef, useEffect, useState } = React;

/* eyebrow / mono label */
const Eyebrow = ({ children, className = "", noRule = false }) => (
  <span className={`eyebrow ${noRule ? "no-rule" : ""} ${className}`}>{children}</span>
);

/* button */
const Button = ({ href = "#", variant = "primary", children, ...rest }) => (
  <a href={href} className={`btn btn-${variant}`} {...rest}>{children}</a>
);

/* upwork CTA - single source of truth for the link (swap URL here later) */
const UPWORK_URL = "https://www.upwork.com/freelancers/~0193fb0a4f1800afcd?mp_source=share";
const HireBtn = ({ variant = "primary", label = "Message me on Upwork" }) => (
  <Button href={UPWORK_URL} variant={variant} target="_blank" rel="noopener">
    {label} <span className="arr">↗</span>
  </Button>
);

/* striped image placeholder - user swaps real photos in later.
   Pass `src` to render a real image (object-fit: cover fills the frame). */
const Figure = ({ cap, src, alt = "", focus = "center", className = "", style = {}, capAlign = "left" }) => (
  <div className={`figure ${src ? "has-img" : ""} ${className}`} style={style}>
    {src && <img className="figimg" src={src} alt={alt} style={{ objectPosition: focus }} />}
    {cap && <div className="cap" style={ capAlign === "right" ? { marginLeft: "auto" } : {} }>{cap}</div>}
  </div>
);

/* scroll-reveal wrapper */
const Reveal = ({ children, delay = 0, as: Tag = "div", className = "", style = {} }) => {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag ref={ref} className={`reveal ${seen ? "in" : ""} ${className}`}
      style={{ transitionDelay: `${delay}ms`, ...style }}>
      {children}
    </Tag>
  );
};

/* section shell */
const Section = ({ id, alt = false, className = "", children }) => (
  <section id={id} className={`section ${alt ? "section-alt" : ""} ${className}`}>
    <div className="wrap">{children}</div>
  </section>
);

const SectionHead = ({ eyebrow, title, intro, style = {} }) => (
  <Reveal className="sec-head" style={style}>
    {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
    <h2 className="h2">{title}</h2>
    {intro && <p className="lead">{intro}</p>}
  </Reveal>
);

/* five-star row */
const Stars = ({ n = 5, className = "" }) => (
  <span className={className} aria-label={`${n} out of 5 stars`}>{"★".repeat(n)}</span>
);

/* Top Rated Plus badge - original mark, depicts Edvin's Upwork standing */
const TopRatedBadge = () => (
  <div className="trp-badge" title="Top Rated Plus - top 10% of talent on Upwork">
    <span className="trp-seal"><span>★</span></span>
    <span className="trp-text">
      <span className="trp-title">Top Rated Plus</span>
      <span className="trp-sub">Top 10% on Upwork</span>
    </span>
  </div>
);

/* hire-me-for list item: accent title + one paragraph */
const HireItem = ({ title, desc }) => (
  <div className="hire-item">
    <h3 className="hire-title">{title}</h3>
    <p>{desc}</p>
  </div>
);

/* feature headline (how I work) */
const Feature = ({ num, title, sub }) => (
  <div className="feat">
    <span className="feat-n">{num}</span>
    <div>
      <h3 className="feat-h">{title}</h3>
      {sub && <p className="feat-sub">{sub}</p>}
    </div>
  </div>
);

/* benefit */
const Benefit = ({ title, desc }) => (
  <div className="benefit">
    <h3 className="benefit-title">{title}</h3>
    <p style={{ marginBottom: 0 }}>{desc}</p>
  </div>
);

/* personality type card - editorial treatment of a 16Personalities result */
const TRAITS = [
  { l: "I", k: "Introverted", v: "Reflective, deep-focus" },
  { l: "N", k: "Intuitive",   v: "Pattern & meaning-led" },
  { l: "F", k: "Feeling",     v: "Reads people first" },
  { l: "P", k: "Prospecting", v: "Flexible, exploratory" },
  { l: "A", k: "Assertive",   v: "Calm under pressure" },
];
const PersonalityCard = () => (
  <div className="pcard">
    <div className="pcard-head">
      <div>
        <Eyebrow>My personality type</Eyebrow>
        <h3 className="pcard-name">The Mediator</h3>
        <span className="pcard-code">INFP-A</span>
      </div>
      <p className="pcard-note">
        Personality tests don't prove much, but this one is close enough to be useful.
        In practice it means I do the digging on your customers before I write a line,
        I look for the real reason your offer matters to them, and I stay easy to work with
        when the brief changes halfway through.
      </p>
    </div>
    <div className="pcard-traits">
      {TRAITS.map((t) => (
        <div className="ptrait" key={t.l}>
          <span className="ptrait-l">{t.l}</span>
          <span className="ptrait-k">{t.k}</span>
          <span className="ptrait-v">{t.v}</span>
        </div>
      ))}
    </div>
  </div>
);

/* testimonial card: avatar (photo or monogram) + name/role + stars + quote + optional company logo */
const Testimonial = ({ quote, name, role, avatar, initials, logo, logoAlt, logoH }) => (
  <figure className="tcard">
    <div className="tcard-head">
      {avatar
        ? <img className="tavatar" src={avatar} alt={name} />
        : <span className="tavatar tavatar-mono">{initials}</span>}
      <div>
        <div className="tname">{name}</div>
        <div className="trole">{role}</div>
      </div>
    </div>
    <Stars className="tstars" />
    <blockquote className="tquote">“{quote}”</blockquote>
    {logo && (
      <div className="tcard-foot">
        <img className="tlogo-img" src={logo} alt={logoAlt || "Company logo"}
          style={{ height: (logoH || 24) + "px" }} />
      </div>
    )}
  </figure>
);

Object.assign(window, {
  Eyebrow, Button, HireBtn, UPWORK_URL, Figure, Reveal,
  Section, SectionHead, Stars, TopRatedBadge, HireItem, Feature, Benefit, PersonalityCard, Testimonial,
});