/* samples.jsx - writing samples shown in the "Hire me for" drawer.
   Data + a string-building block renderer ported 1:1 from the test page. */

const SRC={
 face:{w:"Willis & Todorov, “First Impressions,” Psychological Science (2006)",q:"Judgments made after a 100-ms exposure correlated highly with judgments made in the absence of time constraints. For all judgments - attractiveness, likeability, trustworthiness, competence, and aggressiveness - increased exposure time did not significantly increase the correlations.",u:"pubmed.ncbi.nlm.nih.gov/16866745/"},
 vprop:{w:"Jakob Nielsen / Nielsen Norman Group, homepage research",q:"Users often leave web pages in 10-20 seconds, but pages with a clear value proposition can hold people's attention for much longer. To gain several minutes of user attention, you must clearly communicate your value proposition within 10 seconds.",u:"nngroup.com/articles/homepage-design-principles/"},
 consist:{w:"Nielsen's usability heuristic #4 - Consistency and standards",q:"Users should not have to wonder whether different words, situations, or actions mean the same thing. Failing to maintain consistency may increase the users' cognitive load by forcing them to learn something new.",u:"nngroup.com/articles/consistency-and-standards/"},
 free:{w:"Shampanier, Mazar & Ariely, “Zero as a Special Price,” Marketing Science (2007)",q:"Decisions about free (zero price) products differ, in that people do not simply subtract costs from benefits but instead they perceive the benefits associated with free products as higher. The same reciprocity logic Cialdini describes applies to the ebook itself: give first, and people are measurably more likely to say yes later.",u:"people.duke.edu/~dandan/webfiles/PapersPI/Zero%20as%20a%20Special%20Price.pdf"},
 trust4:{w:"Nielsen Norman Group, four factors of web trustworthiness",q:"In 1999 Jakob Nielsen listed 4 ways in which a website can communicate trustworthiness: design quality, up-front disclosure, comprehensive and current content, and connection to the rest of the web.",u:"nngroup.com/articles/trustworthy-design/"},
 extrev:{turn:true,w:"Nielsen Norman Group, trust and credibility research",q:"Participants liked quotes and case studies displayed on the company website, but they regarded them with a healthy dose of skepticism, wondered if the stories were true, and noted that the website would of course include only positive reviews. So, while reviews and testimonials are useful, it is more important to have a presence on external review sites.",u:"nngroup.com/articles/trustworthy-design/",after:"I advised reordering two quotes. The research says the bigger lever is linking out to reviews Ray cannot edit. My call was right and too small - worth saying out loud."}
};
const SAMPLES={
audit:{
 kicker:"Sample · Consulting & audits",
 title:"Copy audit: Ray J. Green & Co.",
 sub:"Eleven pages on one homepage, section by section, as Ray received it.",
 ctx:[["Client","Ray J. Green - sales consultant and contract executive"],["Brief","Copy audit of the homepage at rayjgreen.com"],["Deliverable","Eleven pages, top to bottom, screenshot by screenshot"],["Fee","Included as part of broader work with Ray."],["Note","Ray's site has changed since. The screenshots below are the page as it stood when I audited it."]],
 blocks:[
 {t:"srcnote",v:"The report below is unedited. The “Backed by” panels are the only addition - I added them for this page to show what the reasoning rests on. Ray's copy of the audit did not include them."},
 {t:"letter",v:["Dear Ray, thanks so much for getting in touch about a copy audit for your website. It's been a pleasure, and I hope this is useful for you."]},
 {t:"rh",v:"Some general notes"},
 {t:"say",v:"Dear Ray. It seems as if you've given almost everything to promoting the Sales Leadership community. Not being in the “in” with your level of involvement in that community, I felt a little worried about your personal brand. I also do not know if you plan on reverting any part of your website after you're done with the launch and initial promotion of the community."},
 {t:"say",v:"It's good your ‘Services' page still reflects your personal brand and services. Once the user is done scrolling, their only CTA is join the community or sign up for your newsletter. I'd consider dividing the very last part of the page (left - right) with one button offering a spot in the community, and the other for your personal services alone. But more on this another time, below report is only about your homepage."},
 {t:"cue",v:"Let's take a more detailed look at your homepage. This is what the user is introduced with:"},
 {t:"img",v:"assets/aud-p01-1.png",c:"rayjgreen.com - above the fold"},
 {t:"rh",v:"Introductory Copy"},
 {t:"say",v:"The introductory copy, both title and paragraph, are well-written (although there's a grammar error in there at the moment), but I am worried it might not be suited for all of your traffic."},
 {t:"say",v:"“Sales Leadership for Long-Haul Leaders.” So, your offer is becoming a leader in sales, for leaders who are in it for the long-run. The only other part of the “above-the-fold” part of your website is your picture on the right, the portrait."},
 {t:"say",v:"Now, your portrait - is freaking amazing."},
 {t:"say",v:"Your face expression shows confidence and a “can-do” attitude. Your shirt shows your personality, your fitness, that you have experience, you know how to roll your sleeves up, and you're looking directly at the camera. You're ready for action, “whatever issues you or your business have - I'm ready. Let's see what you've got.” - great message."},
 {t:"say",v:"You do have that slight smirk on your face (that shows on the right side of your face from viewer perspective), this could usually be mistaken for arrogance, but since it is very slight, and since your eyes show genuinity, and since you're showing some stress in between your eyebrows, this all translates into confident experience. This will attract CxOs, leaders, managers who need direction and lack confidence in the decision-making process."},
 {t:"say",v:"Bonus points: Your face is slightly blushing, showing nervousness and humbleness. This should help those same leaders feel more connected, and find you approachable."},
 {t:"src",v:"face"},
 {t:"cue",v:"The next section is preceded by this:"},
 {t:"img",v:"assets/aud-p02-1.png",c:"Three-item strip under the hero"},
 {t:"rlist",v:["Sales consultant - offer: let me go in and help you with your sales process.","Contract executive - offer: ? I trust entrepreneurs you're usually dealing with will know what this entails exactly?","Leadership community - Promotion for your ‘Sales Leadership' community."]},
 {t:"say",v:"Moving on for now…"},
 {t:"cue",v:"Let's move onto what the user sees next:"},
 {t:"img",v:"assets/aud-p03-1.png",c:"“My business can do that?” and the X → Y bullets"},
 {t:"say",v:"I love this section. The bullets with the “go from X” -> “to Y” are a good idea. A great way to show clear, easy-to-read benefits of working with you. However I'm not happy with the title itself: “My business can do that?” - do what? All they've read so far was “Sales Leadership”, and “build the sales organization you've always wanted”. The promise is generic and might not be suited for everyone."},
 {t:"say",v:"Perhaps better said: Not everyone will understand how this translates to their business."},
 {t:"say",v:"The “X to Y” transformation shows the leader clearly where they might be stuck, and gives them an idea of what's on the other side. This is a vital part of copy."},
 {t:"src",v:"vprop"},
 {t:"say",v:"Since we made a big offer in that section, the next part should explain why they aren't doing it themselves already. Show some understanding, etc. The original is this:"},
 {t:"rquote",v:"“Because greatness was always there in the first place.” … “In most cases, all you need is a fresh perspective to see it, nurture it, and kick-start change in the right direction.”"},
 {t:"say",v:"I'd say something like:"},
 {t:"rquote",mine:true,v:"“You started a business for a reason. You've found out how stressful and hard it can get. With all that responsibility on your shoulders, a fresh perspective and good advice might be all you need to reach the next level.”"},
 {t:"say",v:"This is just an example of the approach. Making it more about them. Showing you understand, and then promising that next level."},
 {t:"cue",v:"What the user sees next is this:"},
 {t:"img",v:"assets/aud-p04-1.png",c:"“Business transformation for lasting value” - the services trio"},
 {t:"say",v:"OK, so now this is great because we finally get some explanation about the specific services you're offering. But, let's consider: Here's what I'm thinking when I put myself in the perspective of the user. First I saw this:"},
 {t:"img",v:"assets/aud-p02-1.png",c:"The first three-item strip"},
 {t:"cue",v:"And now I see another “3-format”:"},
 {t:"img",v:"assets/aud-p05-1.png",c:"The second three-item set, with different names"},
 {t:"say",v:"The first thing I'd get confused about is this: “Sales Leadership” was already mentioned as the “community” on top of the page, now it's shown here as a service. Some might get confused about what's where and who's what."},
 {t:"say",v:"Basically I'd propose connecting the first 3 titles with these titles here. Please think about how you could merge the titles on the homepage. We want things to be as clear as possible. I look at this as a basic necessity for readibility and understanding in any case, and especially since you're now offering yourself, and the community."},
 {t:"say",v:"What do you think about merging Sales Leadership with Sales Culture, and Organizational Change with Contract Executive, and then leaving the 3rd box for the community? OR leave as-is just work on the titles so all's clear in regards to you and the community, and in regards to the titles on top of the page."},
 {t:"src",v:"consist"},
 {t:"say",v:"Please note: If you mostly care about people who already know you from somewhere, know that you're part of that community, then this could be perfectly fine. However, if you care about the traffic that never heard of you before, or the community, try putting yourself in their perspective. Please understand that I also don't have a clue about whether you plan on promoting that community through this page forever, or for the next 5 days, and for this reason I can't definitively propose a long-term plan."},
 {t:"cue",v:"Next, the user will see this:"},
 {t:"img",v:"assets/aud-p06-1.png",c:"“Take me on as a consultant or fractional executive”"},
 {t:"say",v:"This is more like it. Now you're confirming those titles they saw on the top of the page. This is familiar, they already saw “Sales consultant” and “Contract Executive” - and you're offering to see services."},
 {t:"cue",v:"What comes next is amazing:"},
 {t:"img",v:"assets/aud-p06-2.png",c:"The two testimonials, in their original order"},
 {t:"say",v:"Now these are testimonials done right. Bob Perkins confirms your specific services, exact abilities, your education etc. Then Gene Sieders comes in and does one even better - he provides the before/after: “Now all sales reps understand their role and our value to sell more effectively.” His testimonial also says you're organized and responsible. Good job!!!"},
 {t:"src",v:"extrev"},
 {t:"cue",v:"Next is ‘About Ray':"},
 {t:"img",v:"assets/aud-p07-1.png",c:"“Hey, I am Ray” - the second portrait"},
 {t:"say",v:"Like this a lot. You've talked about your services and the community. Other people have talked about you and your services and your impact on their business. By now people are interested. A quick image and a casual, relaxing “Hey, I am Ray” looks good to me. You cut to the chase and speak about what you do for your clients. Quick paragraph followed by a list. Good!"},
 {t:"say",v:"About this portrait: I am honestly not sure. I think it is good enough at the very least. This is also relaxed, and casual, approachable, etc. but: we already saw that, and honestly the first thing this made me think of is a... dating website. You're crunched over, lovingly looking at the camera, with what seems to be a sand beach and a beautiful blue sky in the background, during sunset at that."},
 {t:"say",v:"Don't get me wrong, this is a cool picture, but what I'd like to see here more is Ray in some sense of a business environment. If not business, then perhaps at least a more front-and-center type of portrait, full body facing the camera, arms crossed, confident look, and a watch on your wrist. If you were a corporate businessman, I'd say go full-on with a business suit in your office, but this wouldn't fit well since Ray is now all about being a remote entrepreneur. Bit tricky honestly, and I am not as confident about advice here as I was with your headline portrait. Have a thought about it at least, after all, you know your people and the environment more than I do."},
 {t:"img",v:"assets/aud-p08-1.png",c:"Experience summary and “Meet Ray Green”"},
 {t:"say",v:"In any case, this is all followed by a summary of your experience and a button to meet you more. Good, good, good! We can talk about the specific wording in these sections. But generally very good."},
 {t:"cue",v:"Next: the ‘Are we a match?' section..."},
 {t:"img",v:"assets/aud-p08-2.png",c:"“Are we a match?” - you are / you are not"},
 {t:"say",v:"Love this. Perhaps some change in wording, but the idea is great. Building on your earlier messaging of “long-haul” and ‘lasting value'. This is the kind of consistency I'd like to see with everything on this page."},
 {t:"cue",v:"Next: The Call To Action"},
 {t:"img",v:"assets/aud-p09-1.png",c:"“A day or a decade” - the main call to action"},
 {t:"say",v:"Some copywriters would likely propose a more aggressive CTA here. But having met you, I know you wouldn't want that. This is open-ended, (a day or a decade), you're saying whatever we end up doing, if you're serious about your business, we should talk."},
 {t:"cue",v:"Next: A section for those who are not sure/ready:"},
 {t:"img",v:"assets/aud-p09-2.png",c:"“Not ready to take the plunge?” and the Systematic Growth ebook"},
 {t:"say",v:"Free offerings are amazing. I've read a part of “Systematic Growth” before and think it's quality content. The general go-getter traffic is used to getting freebies in return for their emails, so why not use that? Perhaps you could incentivize downloading this ebook for free if they put their email in."},
 {t:"rquote",mine:true,v:"“Get this free eBook delivered to your inbox right now.” …. “Plus exclusive content and resources to help you build the best version of your business”"},
 {t:"src",v:"free"},
 {t:"cue",v:"And the last section: The Footer"},
 {t:"img",v:"assets/aud-p10-1.png",c:"Footer, with “BOOK CALL” at right"},
 {t:"say",v:"Looks good. Here's what I'd like you to consider: Let's keep the messaging going. Consider changing this: “Sales consultant | Contract executive” To this: “Sales consultant | Contract executive | Sales Leadership Member” … or charter member / co-founder, whatever is suitable. With a link to the community page on your website, on the community website itself, or something specific like your SL Profile page."},
 {t:"say",v:"And for the right-hand CTA, change from “BOOK CALL” to “BOOK A FREE CALL”"},
 {t:"src",v:"trust4"},
 {t:"rh",v:"Report summary"},
 {t:"sum",v:["Work on “3-format” titles in terms of consistency in naming","Make sure the user understands the difference between Ray J. Green & Co. and the Sales Leadership Community","Minor fixes in wording across the homepage, e.g. the title in “X -> Y” transformation, footer copy","Consider: Offering “Systematic Growth” in return for an email address. If you want to test this, I'd suggest monitoring newsletter sign-ups changes in a certain period, say 30 days, and seeing what happens in terms of conversions.","Consider: Have the two testimonials switch places, the shorter one is easier to read and has more weight because it's a before/after testimonial. If they're only going to read one testimonial, I believe that one is better."]},
 {t:"letter",v:["Ray, this is the end of this report. These kinds of reports are now a free offer on my website edvinmulalic.com as part of my copy services. I wanted to introduce some incentive for people to use the website while I still work on it. I started doing this recently, and your website is the first one I audited in this way. Some feedback about this thing would be amazing. Thank you!","PS. If you find this useful, we can continue with the audit and include your whole website in regards to the homepage."]},
 {t:"annot",v:"An audit is only worth what the client can act on. So every note names the section, shows what is there now, and says what I would change and why. No scores, no traffic-light charts, nothing that needs me in the room to interpret."}
 ]},
naming:{
 kicker:"Sample · Brand & product naming",
 title:"Naming a digital services agency",
 sub:"Names derived from the founder's personality, not a thesaurus.",
 ctx:[["Client","Founder launching a digital services agency"],["Brief","Naming inspiration for the new company"],["Date","04 Dec 2022"],["Deliverable","Association map, five metaphor territories, four name candidates"],["Outcome","Delivered and signed off. What the client launched with is theirs to know."]],
 blocks:[
 {t:"step",n:"01",title:"Listen",note:"Raw material, in the client's own words. I ask for associations, not adjectives."},
 {t:"inputs",v:[
  ["Personal associations","Genuinity, Honesty, Trustworthiness, The Best, Professional, Expert, Dedication, Obsession, Kindness, Culture, Controlled Power, Open-mindedness, Introversion, Originality, Creativity, High-end, Premium, Warrior Gardener, Fair, Nature, Privacy, Respectfulness"],
  ["Branding","Clean, Clear, Simple, Straightforward, Powerful, Know-how, Minimalist, Elegant, Original, Brave"],
  ["Pop culture & other","Star Trek, Harry Potter, Lord of the Rings, Islam, Alan Watts, Stoicism, Mysticism, Eastern Culture, Spirituality, Science"]]},
 {t:"step",n:"02",title:"Territories",note:"Five metaphors the associations kept pointing at, each with its own colour and register."},
 {t:"terrs",v:[
  ["Behind Curtain","#741b47",["Hidden","Mystified","Secret","Powerful","Best out of Spotlight","Private"]],
  ["Peak of a Mountain","#274e13",["Highest","Best","Reaching Goals","Dedicated","Strong"]],
  ["Bottom of the Ocean","#073763",["The Lobby of Skill","Main Grounds","Heaviest","Darkest","Unknown"]],
  ["Undisturbed Giant","#bf9000",["Unconcerned","In His Own Lane"]],
  ["Speed of Light","#351c75",["Highest Possible","Maximum","Humanly Possible","Awaiting Challenge"]]]},
 {t:"step",n:"03",title:"Names"},
 {t:"names",v:["The Lobby of Skill","Ministry of Skill","One Skill Lane","1 Skill Lane"]},
 {t:"pullq",k:"Positioning line",v:"Skills for Sale - to be sold passionately."},
 {t:"caveat",k:"Delivered with the caveat",v:"Domain availability depends on preferred TLD. Trademark check and cultural references need checking before final decision."},
 {t:"annot",v:"A name has to survive the founder saying it out loud for ten years. So I start with who they are, not with what the category does. Every candidate here traces back to a word they gave me."}
 ]}};

function lum(hex){const n=parseInt(hex.slice(1),16),c=[n>>16&255,n>>8&255,n&255].map(v=>{v/=255;return v<=.03928?v/12.92:Math.pow((v+.055)/1.055,2.4)});return .2126*c[0]+.7152*c[1]+.0722*c[2]}

function srcBlock(s){return `<div class="src${s.turn?' is-turn':''}"><span class="src-k">${s.turn?'Where the research disagrees':'Backed by'}</span><span class="src-w">${s.w}</span><p class="src-q">${s.q}</p><a class="src-l" href="https://${s.u}" target="_blank" rel="noopener">${s.u} ↗</a>${s.after?`<p class="src-q" style="margin-top:12px;color:var(--ink)">${s.after}</p>`:''}</div>`}
function block(b){if(window.SAMPLE_BLOCKS&&window.SAMPLE_BLOCKS[b.t])return window.SAMPLE_BLOCKS[b.t](b);switch(b.t){
 case 'srcnote':return `<p class="srcnote">${b.v}</p>`;
 case 'letter':return `<div class="letter">${b.v.map(p=>`<p>${p}</p>`).join('')}</div>`;
 case 'rh':return `<span class="rh">${b.v}</span>`;
 case 'say':return `<p class="say">${b.v}</p>`;
 case 'cue':return `<p class="cue">${b.v}</p>`;
 case 'img':return `<figure class="shot"><img src="${b.v}" alt="${b.c||''}">${b.c?`<figcaption>${b.c}</figcaption>`:''}</figure>`;
 case 'rquote':return `<p class="rquote${b.mine?' is-mine':''}">${b.v}</p>`;
 case 'rlist':return `<ol class="rlist">${b.v.map((v,i)=>`<li><span>${String(i+1).padStart(2,'0')}</span><span style="font-family:var(--serif);font-size:16.5px;color:var(--ink);padding:0">${v}</span></li>`).join('')}</ol>`;
 case 'src':return srcBlock(SRC[b.v]);
 case 'sum':return `<ul class="sumlist">${b.v.map(v=>`<li><span>${v}</span></li>`).join('')}</ul>`;
 case 'step':return `<div class="step"><div class="step-head"><span class="step-n">${b.n}</span><h3 class="step-t">${b.title}</h3></div>${b.note?`<p class="step-note">${b.note}</p>`:''}</div>`;
 case 'inputs':return `<div class="inputs">${b.v.map(([k,v])=>`<div class="inp"><span class="inp-k">${k}</span><p class="inp-v">${v}</p></div>`).join('')}</div>`;
 case 'terrs':return `<div class="terrs">${b.v.map(([n,hex,attrs],i)=>`<div class="terr"><div class="terr-sw${lum(hex)>0.179?' on-light':''}" style="background:${hex}"><span class="terr-hex">${hex}</span></div><div class="terr-b"><div class="terr-n"><span class="terr-i">${String(i+1).padStart(2,'0')}</span><span class="terr-name">${n}</span></div><div class="terr-attrs">${attrs.map(a=>`<span>${a}</span>`).join('')}</div></div></div>`).join('')}</div>`;
 case 'names':return `<div class="names">${b.v.map((n,i)=>`<div class="name"><span class="name-i">${String(i+1).padStart(2,'0')}</span><span class="name-t">${n}</span></div>`).join('')}</div>`;
 case 'pullq':return `<div class="pullq"><span class="pullq-k">${b.k}</span><p class="pullq-t">${b.v}</p></div>`;
 case 'caveat':return `<div class="caveat"><span class="caveat-k">${b.k}</span><p>${b.v}</p></div>`;
 case 'annot':return `<div class="annot"><span class="annot-k">Why this way</span><p>${b.v}</p></div>`;
 default:return ''}}

function sampleHTML(key) {
  const s = SAMPLES[key];
  if (!s) return "";
  return '<h2 class="dr-title" id="drTitle">' + s.title + '</h2>'
    + '<p class="dr-sub">' + s.sub + '</p>'
    + '<div class="dr-ctx">' + s.ctx.map(function (r) {
        return '<div class="ctx-row"><span class="ctx-k">' + r[0] + '</span><span class="ctx-v">' + r[1] + '</span></div>';
      }).join('') + '</div>'
    + s.blocks.map(block).join('');
}

const SampleDrawer = ({ sampleKey, onClose }) => {
  const open = !!sampleKey;
  const bodyRef = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    if (bodyRef.current) bodyRef.current.scrollTop = 0;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open, sampleKey, onClose]);
  const s = sampleKey ? SAMPLES[sampleKey] : null;
  return (
    <React.Fragment>
      <div className={"scrim" + (open ? " is-open" : "")} onClick={onClose}></div>
      <aside className={"drawer" + (open ? " is-open" : "")} role="dialog" aria-modal="true" aria-labelledby="drTitle" aria-hidden={!open}>
        <div className="dr-top">
          <span className="dr-kicker">{s ? s.kicker : "Sample"}</span>
          <button className="dr-x" onClick={onClose} aria-label="Close sample">✕</button>
        </div>
        <div className="dr-body" ref={bodyRef} dangerouslySetInnerHTML={{ __html: open ? sampleHTML(sampleKey) : "" }}></div>
      </aside>
    </React.Fragment>
  );
};

Object.assign(window, { SAMPLES, SampleDrawer, SAMPLE_SRC: SRC, sampleSrcBlock: srcBlock });
