/* sections.jsx - page sections built from primitives in components.jsx.
   Content lives in data arrays - edit data, not markup. Exported to window. */

const {
  Eyebrow, HireBtn, Button, Figure, Reveal,
  Section, SectionHead, Stars, TopRatedBadge, HireItem, Feature, Benefit, PersonalityCard, Testimonial,
} = window;

/* ---------------- data ---------------- */
const HIRE = [
  { title: "Articles / News, SEO, Blog", tag: "Editorial", desc: "News, explainers and search-led articles that inform first and sell second - so readers finish them and trust you after.", samples: [["newsnm","News article - industry news, consumer audience"]] },
  { title: "Landing pages", tag: "Convert", desc: "Pages built to convert: a clear promise, real proof, and one obvious next step. No clutter, no guesswork.", samples: [["lpremote","Landing page - copy only"],["lpmorpho","Landing page - copy + wireframe"]] },
  { title: "Consulting & audits", tag: "Strategy", desc: "A fresh, honest read on what's quietly leaking your conversions - and a clear plan to fix it.", samples: [["audit","Copy audit - full homepage, 11 pages"]] },
  { title: "YouTube scriptwriting", tag: "Retention", desc: "Retention-first scripts that keep viewers watching all the way to the call to action.", samples: [["ytchina","YouTube script - short explainer"]] },
  { title: "Brand & product naming", tag: "Brand", desc: "Names that stick, mean something, and are actually available to use.", samples: [["naming","Naming - company name from founder personality"],["namingdomains","Naming - business name + domain research"]] },
  { title: "VSLs & sales letters", tag: "Long-form", desc: "Long-form persuasion that holds attention from the first hook all the way to the close." },
  { title: "Crowdfunding campaigns", tag: "Launch", desc: "Story-driven campaign pages that turn curious browsers into committed backers - and goals into stretch goals.", samples: [["sajdah","Crowdfunding page - full campaign, 249% of goal"]] },
  { title: "Social media ads", tag: "Hooks", desc: "Scroll-stopping hooks and angles built on how people actually think - then tested and sharpened." },
  { title: "Email copywriting", tag: "Nurture", desc: "Sequences that nurture, sell, and still sound like a human wrote them.", samples: [["sajdahemail","Email sequence - crowdfunding launch, 3 emails"]] },
  { title: "Other", tag: "Custom", desc: "Founder and CEO LinkedIn posts that build your authority, so the right people follow and reach out. Or your life and business story: I sit down with you, draw out the story behind the work, and write it the way it deserves to be told." },
];

const FEATURES = [
  { num: "01", title: "Writing tests at a fraction of my rate", sub: <React.Fragment>Whatever you need written, <a className="txlink" href={window.UPWORK_URL} target="_blank" rel="noopener">message me on Upwork</a> with a brief and I'll turn around a sample based on it, quickly and at a fraction of the cost of a full project. You'll know fast whether we're a good fit.</React.Fragment> },
  { num: "02", title: "Unlimited revisions*", sub: "We refine until it's right, and I won't leave you hanging. *Within the agreed scope and direction." },
  { num: "03", title: "Ad-hoc or structured long-term", sub: "Ad-hoc when you need one specific assignment handled, with a fast turnaround on ideas and drafts. Or long-term and structured, run exactly how you want things done, to the dot." },
  { num: "04", title: "Direct communication", sub: "I say what I think without beating around the bush, and I thrive on objective criticism. Tell me what's off and the next draft is better for it." },
  { num: "05", title: "Quick to pivot", sub: "I respect my work, but I'm not attached to it. If an angle isn't landing, I'd rather scrap it and bring you a different one than defend a draft that isn't working." },
];

const TESTIMONIALS = [
  {
    quote: "Edvin is a first-class copywriter, knows how to tell a story, and knows how to write it in a way that converts. He was instrumental to copy on several important pieces of content and collateral for us - and he nailed it every time. And we're marketers! Looking forward to working with him again.",
    name: "Ray J. Green", role: "Managing Partner · Repeatable Revenue", avatar: "assets/avatar-ray.webp",
    logo: "assets/logo-repeatable.webp", logoAlt: "Repeatable Revenue", logoH: 26,
  },
  {
    quote: "We had a fantastic experience with Edvin. The only reason we stopped is that he got through the mountain of work we had. I know AI is now a thing, but Edvin's knowledge of language for conversion is far beyond what you'll get from computer-generated copy. Highly recommend - and will use him again for our next large project.",
    name: "Adrian Paschkow", role: "Founder & CEO · TradeSmartSafety", avatar: "assets/avatar-adrian.webp",
    logo: "assets/tradesmartsafety-logo.svg", logoAlt: "TradeSmartSafety",
  },
  {
    quote: "I have hired Edvin for many projects over a couple of years and he is a phenomenal writer. I like his critical thinking skills and how he responds to feedback. My sense is that the bigger the project, the more engaged and effective he becomes. He once taught our team internally how to work more effectively with AI - and this wasn't a task I contracted him for. That's going above and beyond.",
    name: "Dan Blinman", role: "VP of Marketing · MorphoMFG", avatar: "assets/avatar-dan.webp",
    logo: "assets/logo-morpho.webp", logoAlt: "Morpho", logoH: 24,
  },
  {
    quote: "I was highly impressed with Edvin's attitude, efficiency, and professional style. His outstanding copywriting skills make the reader engage with the content and take one step closer to action - to click, to provide information, or to purchase. I look forward to working with a person like him again.",
    name: "Abdul Ali", role: "Commercial & GTM Leader · Sajdah", avatar: "assets/avatar-abdul.webp",
    logo: "assets/logo-sajdah.webp", logoAlt: "Sajdah", logoH: 44,
  },
  {
    quote: "I don't say this lightly, but this freelancer is the best writer I've ever had the chance to work with. Seriously! First off, the quality of the articles is amazing. He's always looking to give more. Can't say enough great things about him. :)",
    name: "Robert A.", role: "Founder · Sleep Ridiculously Well",
    avatar: "assets/avatar-robert.webp", logo: "assets/logo-srw.webp", logoAlt: "Sleep Ridiculously Well", logoH: 34,
  },
  {
    quote: "Edvin produced great work and helped me sell my course. On top of that, he has improved my email sequence. He's taken the time to understand my brand and drive sales with good copy. A+",
    name: "Brandon P.", role: "Founder · Federal Prison Insider",
    avatar: "assets/avatar-brandon.webp", logo: "assets/logo-fpi.webp", logoAlt: "Federal Prison Insider", logoH: 30,
  },
];

const TRUST = [
  { val: "2011", lab: "Freelancing since" },
  { val: "100s", lab: "Clients served" },
  { val: "7-figure", lab: "Founders & CEOs" },
  { val: "Certified", lab: "Content & SEO specialist" },
];

/* ---------------- sections ---------------- */
const Nav = () => (
  <nav className="nav">
    <div className="nav-in">
      <a className="wordmark" href="#top">Edvin Mulalic<span className="dot">.</span></a>
      <div className="nav-links">
        <a className="navlink" href="#hire">Services and samples</a>
        <a className="navlink" href="#work">How I work</a>
        <a className="navlink" href="#about">About</a>
        <HireBtn />
      </div>
    </div>
  </nav>
);

const Hero = () => (
  <header id="top" className="section hero-sec">
    <div className="wrap">
      <div className="hero-grid">
        <div className="hero-left">
          <Reveal>
            <Eyebrow>Direct-Response Copywriter · Freelance since 2011</Eyebrow>
            <h1 className="display" style={{ marginTop: 20 }}>
              Genuine copy for genuine <em className="accent">people &amp; products.</em>
            </h1>
          </Reveal>
          <Reveal delay={120}>
            <p className="lead" style={{ marginTop: 24, maxWidth: 460 }}>
              Message me now for a quick talk about your needs. No-commitment.
              Complimentary test available.
            </p>
          </Reveal>
          <Reveal delay={220}>
            <div style={{ marginTop: 34, display: "flex", gap: 14, flexWrap: "wrap" }}>
              <HireBtn />
              <Button href="#work" variant="ghost">How I work</Button>
            </div>
          </Reveal>
        </div>
        <Reveal className="hero-figwrap" delay={160}>
          <div className="hero-cutout-stage">
            <div className="hero-panel"></div>
            <img className="hero-cutout" src="assets/portrait-hero-cutout.webp" alt="Edvin Mulalic" />
            <div className="trp-sticker"><TopRatedBadge /></div>
          </div>
        </Reveal>
      </div>
    </div>
  </header>
);

const Trust = () => (
  <Section alt>
    <Reveal className="trust">
      {TRUST.map((t, i) => (
        <div className="trust-item" key={i}>
          <span className="trust-val">{t.val}</span>
          <span className="trust-lab">{t.lab}</span>
        </div>
      ))}
    </Reveal>
  </Section>
);

const Testimonials = () => (
  <Section id="words">
    <SectionHead
      eyebrow="In their words"
      title="Trusted by founders, CEOs, and teams since 2011."
      intro="A few words from people I've worked with."
    />
    <div className="twall">
      {TESTIMONIALS.map((t, i) => (
        <Reveal key={i} delay={(i % 3) * 70}><Testimonial {...t} /></Reveal>
      ))}
    </div>
    <Reveal className="proofbar">
      <div className="proof-faces">
        {["ray","adrian","dan","abdul","robert","brandon"].map((a) => (
          <img key={a} className="proof-face" src={`assets/avatar-${a}.webp`} alt="" />
        ))}
        <span className="proof-more">+</span>
      </div>
      <div className="proof-meta">
        <div className="proof-rating">
          <span className="proof-score">5.0</span>
          <Stars className="proof-stars" />
        </div>
        <p className="proof-text">
          <strong>Hundreds of 5-star reviews</strong> on Upwork and other
          freelancing platforms since 2011.
        </p>
      </div>
    </Reveal>
  </Section>
);

const Hire = () => {
  const [active, setActive] = React.useState(0);
  const [openSample, setOpenSample] = React.useState(null);
  const s = HIRE[active];
  return (
    <Section id="hire" alt>
      <SectionHead
        eyebrow="What I do best"
        title="Hire me for"
        intro="Pick what you need - click any service to see how I'd approach it."
      />
      <div className="hidx">
        <ul className="hidx-list">
          {HIRE.map((h, i) => (
            <li key={i}
              className={"hidx-item" + (i === active ? " is-active" : "")}
              onClick={() => setActive(i)}>
              <span className="hidx-n">{String(i + 1).padStart(2, "0")}</span>
              <span className="hidx-t">{h.title}</span>
              <span className="hidx-arr" aria-hidden="true">→</span>
              <p className="hidx-inline">{h.desc}</p>
            </li>
          ))}
        </ul>
        <div className="hidx-panel" key={active}>
          <span className="hidx-ghost" aria-hidden="true">{String(active + 1).padStart(2, "0")}</span>
          <span className="hidx-tag">{s.tag}</span>
          <h3 className="hidx-title">{s.title}</h3>
          <p className="hidx-desc">{s.desc}</p>
          {s.samples && (
            <div className="hidx-samples">
              <span className="hidx-samples-k">See samples</span>
              <div className="hidx-actions">
                {s.samples.map(([k, label]) => (
                  <button key={k} className="samplebtn" onClick={() => setOpenSample(k)}>
                    <span>{label}</span> <span className="arr">→</span>
                  </button>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
      <window.SampleDrawer sampleKey={openSample} onClose={() => setOpenSample(null)} />
    </Section>
  );
};

const Work = () => (
  <Section id="work">
    <Reveal className="workx">
      <div className="workx-head">
        <Eyebrow>The practical stuff</Eyebrow>
        <h2 className="workx-title">What you can count on<span className="wt-dots">.</span></h2>
      </div>
      <div className="workx-grid">
        {FEATURES.map((f, i) => (
          <div className="workx-item" key={i}>
            <h3 className="workx-h"><span className="workx-n">{f.num}</span>{f.title}</h3>
            <p className="workx-sub">{f.sub}</p>
          </div>
        ))}
      </div>
    </Reveal>
  </Section>
);

const About = () => (
  <Section id="about" alt>
    <div className="about-grid">
      <Reveal className="about-body">
        <Eyebrow>The person behind the words</Eyebrow>
        <h2 className="h2" style={{ marginTop: 16 }}>I write best when the work means something.</h2>
        <p style={{ marginTop: 22 }}>
          I started in 2011, selling articles for $5. What blew me away wasn't the money - it was
          that someone would pay me to learn something new and then write about it. That part hasn't
          changed. For years the work was messaging, articles, educational content, and corporate
          website copy. Direct response I started taking seriously around 2020, and take on
          seasonally - mostly when I like what someone is selling.
        </p>
        <p>
          Clients tend to keep me for years, and the work widens: launch pages, sales emails and
          advertorials, but also editing and training other writers and ideating creatives. I'm a
          certified digital marketing specialist in Content & SEO. On the side, YouTube
          scriptwriting and a channel of my own - 5k subscribers, 95% US audience, four figures in AdSense.
        </p>
        <p>
          Curious, slightly emotional, very logical - human psychology is the part I love most, which
          is probably why copywriting came naturally. I work location-free between Zadar, Zagreb, and
          family in Bosnia. That freedom means a lot to me, and I'll put in the work to keep it.
        </p>
      </Reveal>
      <Reveal delay={120} className="about-figs">
        <Figure className="tall" src="assets/about-seaside.webp" alt="Working seaside with a laptop, feet up" cap="Summers spent camping by the sea" />
        <Figure src="assets/about-cafe.webp" alt="Working from a café with my partner" focus="center 35%" cap="Enlisting my better half on a client project" />
        <Figure src="assets/about-gaming.webp" alt="Gaming at a seaside camp" focus="center 30%" cap="Late-night gaming, seaside camp" />
      </Reveal>
    </div>

    <Reveal><PersonalityCard /></Reveal>

    <Reveal className="principle">
      <div>
        <Eyebrow>The work I take on</Eyebrow>
        <h3 className="principle-title">The work I'll say yes to.</h3>
      </div>
      <div>
        <p>
          I only write for products and services that genuinely improve the lives of the people
          who buy them. If I don't believe it helps, I'm not the right writer for it.
        </p>
        <p className="no">
          I don't work on <b>alcohol, gambling</b>, or <b>interest-based financial
          products</b> - and I'll pass on <b>health products</b> without science backing.
        </p>
      </div>
    </Reveal>
  </Section>
);

const FinalCTA = () => (
  <section className="section-ink final" id="upwork">
    <div className="wrap">
      <Reveal>
        <Eyebrow noRule>Let's work together</Eyebrow>
        <h2 className="display" style={{ marginTop: 22 }}>
          Let's write something<br />that <em>works.</em>
        </h2>
        <p>
          Tell me about your product. If I believe in it, you'll get copy that
          earns its place on the page - and pulls its weight.
        </p>
        <div className="cta-row">
          <HireBtn />
        </div>
      </Reveal>
    </div>
  </section>
);

const Footer = () => (
  <footer className="foot">
    <div className="foot-in">
      <a className="wordmark" href="#top">Edvin Mulalic<span className="dot">.</span></a>
      <span className="foot-meta">Direct-response copywriter · Croatia &amp; Bosnia</span>
      <span className="foot-meta">© {new Date().getFullYear()} Edvin Mulalic</span>
    </div>
  </footer>
);

const App = () => (
  <React.Fragment>
    <Nav />
    <main>
      <Hero />
      <Trust />
      <Testimonials />
      <Hire />
      <Work />
      <About />
      <FinalCTA />
    </main>
    <Footer />
  </React.Fragment>
);

Object.assign(window, {
  Nav, Hero, Trust, Testimonials, Hire, Work, About, FinalCTA, Footer, App,
});